Skip to content
Submitted almost 2 years ago

A nft card component using overlay and changing positions

Álisson Véras•30
@fty57
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

  • I think the hardest part was understanding how well this alternation between the overlay works, it's totally different leaving an image with this effect than leaving a text like this.

  • I think some parts referring to positions, it's not as simple as it seems. You can understand much better in practice.

  • I learned that absolute position works much better when inside relative position, at least it was necessary to resolve my component.

Community feedback

  • Shashree Samuel•9,260
    @shashreesamuelPosted almost 2 years ago

    Awesome work completing this challenge

    Your solution looks great and it is pretty close.

    Let's address your accessibility issue, page needs a level one heading is caused by no h1 tag in your html document hence I recommend changing <h2>Equilibrium #3429</h2> to <h1>Equilibrium #3429</h1>.

    With regards to your validation errors, you typically don't want to hardcode height and width on an element because you are constraining it to a specific dimension which will lead to overflow. However in the instance where you need to mention it inline, you only specify the value and not the unit for example 14 instead of 14px.

    Hope this helps

    Cheers

    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