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

@AbbyNyakara

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


Well, this challenge gave me a run for my money. I struggled through adding the active states. I was unable to add the down arrow on the pop-up in the desktop view when its in active state. Any recommendations will be highly appreciated.

However, I learnt J-Query today and was able to implement it for this project, which was pretty cool. It literary shortened my javascript code to two lines! 😁😁.

Looking to improve and shorten my css further.

Community feedback

@viniciusdsv93

Posted

Hello Abby! How are you doing? My name is Vinícius and i'm from Brazil. I managed to create a small arrow below the active state box by creating a div below with a square format and then making it rotate 45 degrees, so i positioned it a few pixels up in order to get behind the box. By doing that, you can simulate a "down arrow" by using a half of a rotated square. Got it?

You can create a father div, giving it a display flex, flex-direction column, putting two divs inside it, being the first one the actual box and the second is going to be the rotated square.

0

@AbbyNyakara

Posted

Hi Vinicius, that makes perfect sense. So its basically a rotated square box with a negative Z-index. Ill implement that and see how it goes. Thanks a lot!

0

@viniciusdsv93

Posted

@AbigaelN2021 You're welcome, Abby! Let me know if you have any problems with that.

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