Skip to content
Submitted almost 2 years ago

nft-preview-card-component

Brian Wodu Oluohu.•50
@Bthedraft
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

Learning and using flexbox for my CSS designs has been fantastic so far. Before now I have always used a Grid system (CSS grid).

Notes to get by:

. You do need a container, to wrap your contents ( Just like in the CSS code here (In this Project), I Had a DIV titled MAIN to display as FLEX {then I did justify-content and align-items to center}, to shelter the DIV titled CARD to also display as flex then flex-direction set to = column.

p.s Any feedback on the code would be awesome, thanks.

Community feedback

  • Muhammadh•1,140
    @Mr-jawPosted almost 2 years ago

    Hello 👋

    Nice job on completing the challenge

    HML 📄

    • replace <div class="main"> wit <main> tag, And <div class="attribution"> with <footer> to fix any accessibility issues

    • Always provide a meaningful description of the image in the alt attribute in the <img> tag. it will also improve accessibility

    CSS 🎨

    • to align the card to the center of the screen. add these lines of codes to the <body> tag in your CSS
    body {
       display: flex;
       flex-direction: column;
       min-height: 100vh;
       justify-content: center;
}

    Hope this was helpful 😊

    HAPPY CODING

    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