Conquering Frontend Mentor — Challenge -7

Image for post
Image for post
Frontend

Welcome to the part-7 of the series. You can find part-6 here. We will continue with the next frontend master challenge which is Article Preview Component Challenge.

Image for post
Image for post
Article Preview Component

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
Basic file

Next, we will add the required html tags. Here, everything is wrapped in a container, with a left and right section. The left will only contain an image which we will add through the css.

The right contains all the data, with h3, p and the author section containing image and user data. Also, notice that we have a share__box, which contains our social icons. We are going to hide it from CSS and show once we click on the arrow button.

Image for post
Image for post
index.html

Now, we will create our desktop view first. So, head over to style.css and add the google font first. After that in the body, using the font and centring everything using grid.

After that making the container as grid with two columns of 280px and 450px. Also, making a row of 300px.

After that using the left id to show our image of drawer. Also, making the top left and bottom left radius as rounded corners.

Image for post
Image for post
style.css

Next, we will start styling our right part. The styles for right, h3 and p are straight-forward.

After that we are making the author class as flex, which contains our author image, name, date and the share image.

We also have the share__box inside it, which we are soon going to hide. The info and the name__date class are also made flex.

Image for post
Image for post
style.css

Next, we will style the name, date and the share_image, which is the share icon.

After that we are making the share__box, containing the Share text and three social icon. Also, notice that we are using position: absolute to move it in the correct position.

We are showing the inverted triangle at the bottom in the :before pseudo tag. Again we are using position: absolute to move it in the correct position.

Image for post
Image for post
style.css

After that we are doing just a bit of style for the Share text and hiding the whole box, by giving the hidden class a display: none. Notice that we have this class in the share__box div in the html.

Image for post
Image for post
span

Now, we will add our tiny logic in main.js file. Here, we are selecting the share_image and the share__box. After that in the event listener of the share button, we are toggling the hidden class.

Image for post
Image for post
main.js

Now, our desktop view is complete so we will create our mobile view. The main change is to do the grid-template-columns: 1fr for the container.

Image for post
Image for post
mobile view

The share button is also different, as per the design provided. We are changing the whole share__box style, including it’s position.

Image for post
Image for post
mobile view

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

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