Conquering Frontend Mentor — Challenge -2

Welcome to the part-2 of the series. You can find part-1 here. We will continue with the next frontend master challenge which is Four Card Featured Challenge.

The link for the same is here. So, go ahead and down load the resources.

Image for post
Image for post
Four Cards

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.

Image for post
Image for post
Frontend

Next, we will add the html tags to our project. We are mainly adding a header tag and a container class.

Image for post
Image for post
header

After that we are also linking a styles.css and also the images provided to us.

Image for post
Image for post
styles.css

Now, as per the style-guide.md we had to add Poppins font. We have added the same from Google fonts.

Image for post
Image for post
Google Fonts

Now, it’s time to add the provided background-color to the body. We are also completing the styles for the header.

Image for post
Image for post
header

Now, we will make the container a flex. Also, giving each box a background-color, padding and width.

Image for post
Image for post
Box styled

Now, we are making each item of the box a flex-item and using align-self to move the image to the right.

Image for post
Image for post
align-self

Now, we will show the provided border

Image for post
Image for post
border-top

We did the ordering wrong. So, in the index.html need to rectify the same.

Image for post
Image for post
index.html

To have the exact design, we need to move the Supervisor and calculator box down. We are targeting them and using translateY to move them down.

Image for post
Image for post
transform

For the mobile styles we just have to make the translateY as 0.

Image for post
Image for post
translateY

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

You can find part-3 here.

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