Submitted almost 2 years ago

Nft card using onmouse event

natan minkov• 190

@natan494

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello , used vanila JS to display the eye , ide like to know if i can do it with css , thanks in advance

Community feedback

Melvin Aguilar 🧑🏻‍💻• 61,220

@MelvinAguilar

Posted almost 2 years ago

Hi @natan494 👋, good job on completing this challenge! 🎉

Here are some suggestions you might consider:

Use min-height: 100vh to container selector, with this property you set a height and let the element grow even more if necessary.
For specificity reasons you should work better with classes in CSS since they are reusable, and you can leave the ID in some elements when you work with Javascript.
In this solution, it was enough to just use CSS.
The "Jules Wyvern" element should be anchor tags rather than simple span tags because it redirects users to another page.
Try to use semantic tags in your code. Click here for more information.:

With semantic tags:

<body>
   <main class="card_container">
      . . .
   </main>
<body>

I hope those tips will help you.

Good job, and happy coding!

Marked as helpful

Joshua Steed• 190

@0xjoshva

Posted almost 2 years ago

Hi @natan494 👋, good job on completing this challenge! 🎉

Here are some suggestions you might consider:

Add the font suggested in styling. It makes a big difference.

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap');

font-family: 'Outfit', sans-serif;

Please log in to post a comment

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