Skip to content
Submitted about 2 years ago

Responsive nft-card html css flexbox

Enrica•170
@ErriGarcia
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

Hi everyone! Please leave a comment below if you have any suggestions! Thank you so much!

Community feedback

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

    Hey @ErriGarcia, some suggestions to improve you code:

    To give you HTML code structure, you want to set up your code in the following manner (only did parent containers):

    <body>
   <main>
      <article class=“card-container”></article>
   </main>
   <footer class="attribution"></footer>
</body>

    The Main Element identifies the main content of the document.

    While the Article Element will serve as the card’s container, because the card represents a complete, or self-contained, section of content that is, in principle, independently reusable.

    More info:

    https://web.dev/learn/html/headings-and-sections/

    • The Figure Element is not being used correctly and is not needed for this challenge.

    • The NFT Alt Tag description needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image/icon to someone.

    • Wrap the "NFT image", "Equilibrium #3429" and "Jules Wyvern" in an Anchor Tags <a>. The anchor tag will allow users to click on content and have them directed to another part of your site.

    Happy Coding! 👻🎃

    Marked as helpful
    0
  • Yılmaz ÇABUK•120
    @ylmzcbkPosted about 2 years ago

    Hi Erica, Your design looks perfect except horizontal rule you have at the bottom. About your HTML structure:

    • A page always must have a main tag.

    And you should definitely consider using dynamic measures like rem instead of px. This way your projects can look perfect on all screens.

    Nice work!

    Marked as helpful
    0
  • KF•20
    @KillingFictionPosted about 2 years ago

    Good Job! You Just forget to make the hover on image like in the challenge hope you make it.

    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