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 using raw css

@d3longas

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'm struggling with the hover overlay on the image. I know that i have to use divs, but i don't know how.

Community feedback

P

@CharlieCastleWeb

Posted

Hi Arthur! Great work!

For the overlay effect one solution could be :

  • Create a new div after the image tag.
  • Fill it with the green color and eye image
  • Position it on top of the image
  • On hover play with the opacity of both the image and this new div.

Contact me if you need more help, but that should be a start

2
Danilo Blas 6,300

@Sdann26

Posted

Hello Arthur, if you want to eliminate the problems in your report generated by frontendmentor implement the following changes:

  • Change <div id="card"> to <main id="card">.
  • Change <div class="attribution"> to <footer class="attribution">.

The main reason for this change is that these are tags that cover main contents of the page. The main tag, stores the content where all the main flow to be shown is stored, the footer tag contains the footer which is usually acknowledgements, copyright, links, social networks, etc.

Also change the h3 and h4 to h1 and h2. You should always have only one h1 per page and the h2 works as a subtitle of the h1, the h3 works as a subtitle of the h2 and so on. But you should not place the h3 and h4 in this way without first using the two previous ones.

With all this, generate a new report so that you will not get any more errors. If something is not clear to you do not hesitate to consult.

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