Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Article Preview Component with HTML, CSS and JS

Mehrine 120

@DarkMoonLit

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I was able to use javascript for the first time on a project. Even if it is basic, i give me hope that i can continue to grow.

What challenges did you encounter, and how did you overcome them?

I had difficulties with the social media tag, how to place them and make them hover.

What specific areas of your project would you like help with?

I was able to use the button share for the social media to appear and disappear. But for the mobile layout, I cannot seem to make the button appear through the image so that i can click it back. As for the desktop layout, I don't know how to make the border similar.

Community feedback

Hoaxilog 130

@Hoaxilog

Posted

You can achieve it if you use the position relative for the parent and absolute for the children specifically your author-social-media. But first you need to get inside the share btn and your author-social-media in one parent only so if you put position absolute in your author-social-media it will be around the parent and not in the whole body (hope gets this part). and after that you can align it now you can use negative sign let say -10px or -5px like this.

But in the arrow thing above the box you can learn about pseudo element such as :after and :before to achieve it.

If you didnt get this try to watch about position absolute and relative since they can perform complex design and also about pseudo element. good luck <3

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord