Conquering Frontend Mentor — Challenge -6

Image for post
Image for post
Photo by XPS on Unsplash

Welcome to the part-6 of the series. You can find part-5 here. We will continue with the next frontend master challenge which is Social Proof Section Challenge.

Image for post
Image for post
Social Proof

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
Live Server

Next, we will add the required html tags. Here, everything is wrapped in a container, with a primary__grid. Inside the primary__grid, we have top__grid and bottom__grid.

We have been also provided with the image of the star and three users.

Now, our page will look like below.

Image for post
Image for post
index.html

Next, we will start to style our project in style.css. Here, we are first importing the google font family, which is been asked in the style-guide.md file.

One important thing is that in body, we are using the two background images provided to us. One, we are placing at the left top and the other at right bottom.

We are also making the container max-width as 80% and centering it.

Image for post
Image for post
basic styles

Next, we are making the class primary__grid as grid, with two rows of 300px each.

After that making the class top__grid also a grid, with two columns of 300px and 400px. We also have a significant column gap between the items. Also, styling the h1 and p in it.

Image for post
Image for post
primary__grid

Next, we will create the styles for the rating. We are using flex to center it. We had also made the rating as position: relative. This is done, because we are moving the 2nd and 3rd rating by 2rem.

We have also written the styles for bottom__grid and used the grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)). This is a very property in grid and reduces the use of media queries a lot. Here, each grid item will be 280px wide and if it doesn’t gets that space it will be in a column. You can read more about it in my article here.

Image for post
Image for post
display: grid

We will now complete our style for the class user__review. We are again taking help of grid, flexbox both to style. We are again using position: relative and top to move the 2nd and 3rd box down.

This completes our desktop styles.

Image for post
Image for post
grid and flex

Now, our mobile style is very simple, because we had properly use grid. As told earlier our bottom__grid, was already done. We are just making the rows of primary__grid as 1 and also top__grid column as 1.

We are also unsetting the left and top, which we have used to move the box for rating and user review.

Image for post
Image for post
mobile styles

This completes our sixth 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