Submitted 5 months ago

Article preview component with JS

Jordan Davenport• 660

@jjdavenport

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Article preview component

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?

Learning how to use CSS position.

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

Positioning the desktop share box was the most difficult, I had to learn CSS positioning and how it works in relation to parent elements and problems created by overflow.

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

Any feedback on my JS functions would be helpfull.

Community feedback

Serah Nderi• 430

@MundiaNderi

Posted 5 months ago

I love the downward facing arrow feature. How were you able to achieve that ?

Jordan Davenport• 660

@jjdavenport

Posted 5 months ago

@MundiaNderi

my .hidden element is the share card and var(--hidden-background-color) is just the background color of the card.

.hidden::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid var(--hidden-background-color); }

Serah Nderi• 430

@MundiaNderi

Posted 5 months ago

@jjdavenport thank you. I was able to fix it.

Please log in to post a comment

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