Skip to content
Submitted 7 months ago

Article preview component with JS

Jordan Davenport•970
@jjdavenport
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

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•450
    @MundiaNderiPosted 7 months ago

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

    1
    Jordan Davenport•970
    @jjdavenportPosted 7 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); }

    1
    Serah Nderi•450
    @MundiaNderiPosted 7 months ago

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

    1

Please log in to post a comment

Log in with GitHub

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