Skip to content
Submitted about 2 years ago

Responsive NFT Preview card component using HTML & CSS

iulias17•210
@iulias17
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

Any feedback is highly appreciated! I feel like the HTML and CSS is very messy so I'll try to work more on making it look cleaner. I had a hard time with the overlay icon. It looks ok, but I wonder if there is an easier way to do it!

Thanks!

Community feedback

  • Tomasz•240
    @CurseTommyPosted about 2 years ago

    Hi @iulias17 👋, good job completing this challenge! 🥳

    1.First you need using alternate text --> alt='' in your <img> tag. It helps when your illustration will not load on the side. Instead of it, will appear your text, mostly it's just description what does image shows.

    2.Second, use rem or % rather that px.

    3.I saw you're using hsl color code with is very good. Because you can easily manipulate color shade.😄

    4.When you're styling with position: absolute; there is no reason to use both top: 0;, bottom: 0;, same situation with left: 0; and right: 0;. Simply use only top: 0;, left: 0;. Overlay is made good, but you could add transition-duration: 600ms; for better look.

    Good luck in future, enjoy coding 😁👋

    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