Submitted about 2 years ago

NFT Preview Card Component

Goorezy• 100

@GoorezyEST

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

Hey here's Goorezy! I await your criticism and advice to improve!

Community feedback

David• 8,000

@DavidMorgade

Posted about 2 years ago

Hello Goorezy, congrats on finishing the challenge! you did almost get a pixel perfect solution, great job!

In your card__nft--cotainer__hover I would add a cursor: pointer to give the user clear intructions that is a clickable!, also increase the time of the effect of the animation to at least 0.5s, it gets smoother in my opinion.

Also would recomment you to set your body { font-size: 16px } , because you are using html { font-size: 62.5% }, you can perfectly reset back your font-size in the body to 16px and you will still get rem values as 10px.

Hope my feedback helps you, if you have any question, don't hesitate to ask!

Marked as helpful

Goorezy• 100

@GoorezyEST

Posted about 2 years ago

@DavidMorgade I didn't knew that i can reset back the font-size and still get the rem at 10px, I will use that, thanks!

David• 8,000

@DavidMorgade

Posted about 2 years ago

@GoorezyEST Yeah, this is usually the snippet people use at the start of the CSS to work with rems as 10px without changing the body font-size to only 10px.

html {
  /* 1rem = 10px */
  font-size: 62.5%;
}
body {
  font-size: 1.6rem;
}

I love working with this method, 1rem = 10px is the easiest way to get sizes!

Vanza Setia• 27,795

@vanzasetia

Posted about 2 years ago

@DavidMorgade and @GoorezyEST, I don't recommend changing the html or the :root font size. It can cause huge accessibility implications for those users with different font sizes or zoom requirements. I suggest reading this article by Josh Comeau where he writes about the problem of the 62.5% trick (and more!). Also, I recommend reading what an accessibility expert (Grace Snow) has said about it.

Lucas 👾• 104,420

@correlucas

Posted about 2 years ago

👾Hello Goorezy, congratulations for your new solution!

Your solution seems great, there's only one issue with the card responsiveness. All you need to make the container responsive is to replace width: 30rem; with max-width: 30rem; after change that you'll see the difference, the container will start to contract.

.card {
    background-color: hsl(216deg, 50%, 16%);
    display: flex;
    flex-direction: column;
    max-width: 30rem;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 2rem 2rem 6rem rgb(0 0 0 / 50%);
}

👋 I hope this helps you and happy coding!

Vanza Setia• 27,795

@vanzasetia

Posted about 2 years ago

Hello, Goorezy! 👋

Congratulations on finishing this challenge! 🎉

It's good that you are using min-height instead of height on the body element. This way, on mobile landscape view, the users can still scroll to see the full card content. But, I notice that the card is touching the top and the bottom of the page. So, I would recommend giving some padding to prevent the card from touching the edges of the page.

One more suggestion is to not hyphenate the alternative text (like code). It should be written as the normal text. The alternative text of the image would be pronounced by the screenreaders to help the users understand about the image.

That's it! I hope this helps! 🙂

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