Conquering Frontend Mentor — Challenge -3

Welcome to the part-3 of the series. You can find part-2 here. We will continue with the next frontend master challenge which is Single Price grid Challenge.

After downloading the resources, I had extracted the zip file and copied it in the Frontend-mentor-challenges folder. After that opened the index.html file with Live Server.

I am also linking the styles.css file.

Next, adding the required html tags. Here, we are wrapping everything in a container class. It have two classes -primary and secondary. Further secondary have two sub__section classes.

Now, adding the styles in styles.css file. Now, as per the style-guide.md we had to add Karla font. We have added the same from Google fonts.

To centre everything we are using flex-box in the body. After that in container class, using grid to divide it into two rows of 220px and 260px.

Also, making the secondary class have two columns of equal width using 1fr.

First completing the styles for primary class with the provided colors from the style-guide.md file.

We will first target the first sub__section and use the provided colors to make it as per the design.

Next, in the second sub__section , we are adding the required styles and also adding a box-shadow for the button.

Now, our styles for the desktop is complete and will move to the mobile styling. Before that we need to fix one mistake with container. We did it min-width but it is max-width.

Now, the mobile styles will only be to change the grid-template-rows and grid-template-columns.

This completes our third Frontend mentor challenge. You can find the code for the same in this github link.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store