Skip to content
Submitted over 1 year ago

NFT card with efect of hovering over the main image

Arkadiusz•200
@Arkadiusz-coder
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

How to make line of div, that is a border between main content and part about author? I guess the the answer is simple but I couldn't figure this out. My styling of this div (.border):

.border
{
border: 0.01rem solid var(--blue);
margin-top: .8rem;
margin-bottom: .8rem;
}

Community feedback

  • hitmorecode•6,250
    @hitmorecodePosted over 1 year ago

    Using a div and styling it, it works. You could also have used a pseudo class (before or after) and style it with css. The easiest one is using the <hr> (horizontal rule) tag in your html.

    Marked as helpful
    0
  • Rebecca Padgett•1,860
    @bccpadgePosted over 1 year ago

    Hello @Arkadiusz-coder. Congratulations on completing this challenge!! 🎉

    I have a couple suggestions to improve your solution below.

    To answer your question, you can add border-bottom to your time div.

    You can center your nft-card on website using Flexbox or CSS Grid

    Flexbox

    body{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
}

    CSS Grid

    body{
display:grid;
place-content:center;
min-height:100vh;
}

    Also, you can wrap your attribution in <footer> tag.

    Hope this helps you and don’t hesitate to reach out to me if you have any questions

    Marked as 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