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

NFT preview card component

Lada 30

@ladaspcsn

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


I feel like this one was pretty easy to do, since it didn't require any adjustments for mobile version. The hardest part for me was making an overlay when hovering over the image, but I managed to do it by using absolute positioning and z-index.

I would really appreciate any comments or advice on improving my solution.

Community feedback

@VCarames

Posted

Hey there! 👋 Here are some suggestions to help improve your code:

  • To not only improve your HTML code but to also identify the main content of you page, you will want to wrap your entire component inside the main element.

More Info:📚

MDN Main Element

  • Remove* the max-height: 700px; from your component's container; it is not needed.
  • 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 to someone.
  • The “Icons” serve no other purpose than to be decorative; They add no value. Their alt tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.
  • The profile image needs an Alt Tag. It should state the following; “Headshot of -person’s full name-“
  • Wrap the "NFT image", "Equilibrium #3429" and "Jules Wyvern" in an anchor tags. The anchor tag will allow users to click on content and have them directed to another part of your site.

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! 🍂🦃

Marked as helpful

1

Lada 30

@ladaspcsn

Posted

@vcarames Thank you so much for the detailed feedback! I really appreciate it 😊

0

@nenadmne

Posted

Your solution is looking great with consuming everything what was asked from this challenge.

Only thing i would suggest is wrapping classes with same attributes under 1 line, like this:

body, .img-overlay, .price-section, .author {
     display:flex;
}

Alse same could be done for justify-content: center; or align-items: center;

Great solution, keep up =)

Marked as helpful

1

Lada 30

@ladaspcsn

Posted

@nenadmne Hey Nenad, thanks for the feedback! I'll make sure to follow your advice 😊

1

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