Skip to content
Submitted almost 3 years ago

NFT-Preview-Card-Component using flexbox

SUNDARAM DWIVEDI•150
@Sundaram218
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

If any suggestions regarding the code that you have.....than please suggest Thanks!

Community feedback

  • Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    Hi SUNDARAM , good job!

    to make the eye appear with a blue background only on mouseover try to use :hover css

    Hope this help :)

    0
  • Vanza Setia•27,775
    @vanzasetiaPosted almost 3 years ago

    Hi There! 👋

    Congratulations on finishing this challenge! 🎉

    I have some feedback on this solution:

    • Accessibility
      • All the page content should live inside landmark elements (header, nav, main, and footer). By using them correctly, you can make users of assistive technology navigate the website easily. In this case, you can wrap all of it with main tag,except the attribution. The attribution should be lived inside the footer.
    <body>
  <main>
    page content goes here...
  </main>
  <footer class="attribution">
      attribution links goes here...
  </footer>
</body>
    • Don't use article for the card content since it is not a full webpage. This is one chunk of content that all belong together and in a real website would sit with other content.
    • Use interactive elements (a) for any elements that have :hover or :active states.
    • Good job on taking care of those decorative images! 👍
    • For the avatar, it is a quite important image, so I would recommend using the creator's name as the alternative text.
    • The width and height attributes for the img element should not contain any units (unitless).
    <img
  src="images/image-avatar.png"
  alt="Jules Wyvern"
  width="50"
  height="50"
/>
    • Styling
      • Don't limit the height of the body element, it will not allow the users to scroll the page if the page content needs more height. Use min-height instead.
      • Remove the width: 100vw from the body element. By default, the body element has already a full width.
      • I notice there are two body in your CSS, why don't you just style it once? It's a good practice to not repeat yourself. 🙂
      • I would recommend fixing the card. Currently, as you can see from the design comparison your card looks way bigger than the design.

    That's it! Hopefully, this is 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