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

Preview card component

Cintia 100

@ciisiq

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


For me the most difficult part was making a "hover" in the image appear the cyan colour, I used background-image for this, and before I used a fixed position but it was not responsive, so I did like this but I am not proud of, I think there is another way better to do it.

Any tips will be very welcome, thank you guys for your help!!

Community feedback

Atif Iqbal 3,200

@atif-dev

Posted

Hi Cintia, you did enough good. You can learn more about overlay from here: https://www.w3schools.com/howto/howto_css_image_overlay.asp

And also set border-radius: 0.8rem; in layer class because when we see card there is a little bit of Cyan color at top left and bottom left of the image.

Hope you get this Feedback Helpful😇.

Marked as helpful

0

Cintia 100

@ciisiq

Posted

@atif-dev Thank you!! Everything is welcome!! ☺️🙌🏻

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