Conquering Frontend Mentor — Challenge -5
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.
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.
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.
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.
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.
Now, we are fixing some of the thing like the width, grid template column and some colors.
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.
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.
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.
This completes our fifth Frontend mentor challenge. You can find the code for the same in this github link.
