Skip to content
Submitted over 2 years ago

NFT preview card

Eric Wisdom Agu•20
@Ericwiz
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Amazing Project, it was fun throughout the coding period, from start to finish. however, I found it difficult adding the horizontal line that separated the image section from the rest of the card...I would need help in adding and adjusting the line properly.

please criticize my work and suggest areas of improvement!

Community feedback

  • Marius•190
    @MariusHorPosted over 2 years ago

    Hi,

    the horizontal line can be added by using the hr tag. You can then style it inside css using background-color: hsl(215, 32%, 27%); height: 1px; border: none;

    I would also add a padding to the card container so the horizontal line doesn`t go to the edges of the card.

    What I would also suggest that you keep learning how the box-model works, so that you will know where and when is best to apply the padding and margin properties. You can look up Kevin Powell on Youtube for easy to follow videos on this subject. :)

    Marked as helpful
    0
    Eric Wisdom Agu•20
    @EricwizPosted over 2 years ago

    @MariusHor Thanks so much this was really helpful

    0

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