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

AnasIsmai1 240

@AnasIsmai1

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?

The popup positioning was quite well placed imo. The project was rather easy and was quite to similar to a previous i did on this platform so i used some concepts from the previous project and was able to create quite the result better than the last one.

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

Well the only issue i encountered was how to create a pointer for the popup. i first used the :before and :after pseudo elements and tried to position them relative to the popup but the popup was already positioned relative to the share button. I settled for creating a two more divs and making the necessary adjustments to create the pointer. Which was turned out well.

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

I used two divs two create the pointer to the popup on the desktop version of the webiste. I placed the actual pointer within another div which i used to positiion relative to. after position the pointer i then rotated the div itself and adjusted the direction and the zindex behind the popup which gave it the pointer look.

Community feedback

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