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

A nft card with hover effect on the image and mainly used flex

#fresh
Shiash 100

@kloprop

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


Hello, everyone. This is my second sharing in frontend mentor. It would be helpful if I got any comments to improve the code. Also, I faced some issues when I was coding the nft card. It would be great if it got answered. THX

1.Should I wrap every image into a container for styling the image instead of adding to the image directly, like the size or the border radius?

2.Are there any difference between adding the svg under <svg> tag and <image> tag ?

Community feedback

@rostyslav-nazarenko

Posted

Hi!

  • use main and footer.
  • empty alt attribute is okay for icons but add some description to the main image and avatar image.
  • about not using font-size: 62.5%; I wrote in your previous challenge.

To your questions

  1. I'm not sure. Looked at existing websites. Mainly they style the img element, but they nest them in divs for additional styling or for adding Javascript.
  2. In this example or you can use both. svg allows you to change the color of SVG with CSS or to use Javascript to add change SVG in real-time (from style to shape)

I hope I helped!

Bey!

Marked as helpful

1

Shiash 100

@kloprop

Posted

@rostyslav-nazarenko Thanks for the feedback!

I feel like using svg is a better way then

0

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