Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive NFT Preview card component using HTML & CSS

iulias17 210

@iulias17

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@CurseTommy

Posted

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
Discord logo

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