Conquering Frontend Mentor — Challenge -5

Image for post
Image for post
Apps

Welcome to the part-5 of the series. You can find part-4 here. We will continue with the next frontend master challenge which is Huddle landing Page Challenge.

Image for post
Image for post
Huddle

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.

Image for post
Image for post
Huddle

Next, we will add the required html tags. Here, everything is wrapped in a container, with the log been the first img tag.

After that we have a div for grid__layout, which wraps the other image and the content.

We also have the social network icons inside an unordered list.

Image for post
Image for post
index.html

Next, we will began styling our project in style.css file. First, we are giving the basic styles. Here, in the body we are using the background-image and the background-color from the provided material. We are also centering everything with the help of grid.

Also, making the container extent 800px with margin: auto.

Image for post
Image for post
style.css

Now, we are using the google font as told in the style-guide.md. After that we are making the grid__layout as as grid with two equal columns. Also, a bit of style for img and h1.

Image for post
Image for post
style.css

Now, we are fixing some of the thing like the width, grid template column and some colors.

Image for post
Image for post
fixing

Next, we will complete our desktop view by adding styles for button and unordered list.

Also, notice that we have created a circle around each social icons.

Image for post
Image for post
Complete

There was one thing which we forgot to add and it was the margin between the logo and the grid. So, we have added the same in grid__layout.

Image for post
Image for post
margin

Now, we have the mobile layout left. Here, the main logic is to make the grid-template-columns in the grid__layout as 1 column.

Image for post
Image for post
Mobile layout

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

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

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