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.

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.

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

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

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

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

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

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

Now, we will show the provided border

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

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.

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

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
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger