Skip to content
Submitted about 2 years ago

NFT preview card component CSS HTML

Jessie Fabian•40
@Jessfabian
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

Constructive Criticism wanted! Totally new to coding, any help is always appreciated.

Community feedback

  • Elaine•11,400
    @elaineleungPosted about 2 years ago

    Hi Jessie, well done on this second challenge! You got a lot of good feedback already, so I'll just keep this short; it looks like the font family is not showing up at all and the browser had to use its default style. You firstly need to go to the Google Font page for the design's font, and then select the font faces you need; a link should pop up in the sidebar, and you can paste that inside your <head> tag before your link tag for style.css. After that, you can use the font by adding it to the font family property. I see you added font-family: Outfit but because you don't have the link in the head yet, it's not working as it should.

    Also, you got some accessibility issues in your report; all you need is to add a main tag (say, right under the body) and you should be good to go!

    Great job, and keep going!

    0
  • バレンタイン 😈•64,190
    @VCaramesPosted about 2 years ago

    Good job on this project!

    To center your content add height: 100vh to your body.

    Wrap both your eth and days classes into one container.

    In that container add the following: display: flex; justify-content: space-between; align-items: center;

    Remove from your eth container the padding-right: 110px

    As for adding the overlay to you image, I'm attaching a link that will explain how to do it. https://www.w3schools.com/howto/howto_css_image_overlay.asp

    Keep up the good work.

    0
  • David•8,000
    @DavidMorgadePosted about 2 years ago

    Hello Jessie, welcome to coding and welcome to the community!

    You did a pretty good job for a first starting challenge, you even used flex to center the component of the screen!, the only issue is that the body doesn't have the height of the current viewport to center your component vertically, try adding to your body a height: 100vh, with this, your component will be fully centered.

    Good job and keep going!, hope my feedback helped you!

    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