Skip to content
Submitted almost 3 years ago

NFT card Flex solution

Heidel Oliver•30
@Heidelol
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

how can i get the active state on the img? and what can i improve?

Community feedback

  • Leonardo de Souza Nunes•100
    @LeoSouzaNunesPosted almost 3 years ago

    Hi, first of all good job. About the active state you could try to set a <div> with background-image instead of a <img> and inside of it another <div class="active-state"> with background-image that will be activated with .active-state:hover in your css. I hope that it can help, you can also check it out the same project on my profile.

    0
  • Lubna Fathima N•120
    @lubnafathimaPosted almost 3 years ago

    Hey! first of all, congrats on completing your first challenge :D In CSS, you could use :hover selector for attaining active state (refer this example from w3school) https://www.w3schools.com/cssref/sel_hover.asp

    As far as you accessibility warnings:

    1. make sure you add HTML lang attribute add: <html lang="en">
    2. instead of using <div class="maincontainer"> native HTML5 landmark elements like main in place of div refer https://dequeuniversity.com/rules/axe/4.3/region?application=axeAPI I guess you are good to go now, Good luck!!!
    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