Submitted over 1 year ago

NFT Card preview

Irfan RIzki Saputra• 260

@nafri97

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

feel free to give me some suggestion.

Community feedback

C H A R A N 🎯• 2,690

@0xabdul

Posted over 1 year ago

Hey dude well congrats on completing the NFT card component ..👍

A little suggestion for improve your code ..
In Html 🏷️ :
the html page should be contained one main landmark using semantic elements ✅
Ex :

<html lang="en">
<head>
<title>my page</title>
</head>
<body>
<header>
//logo img or heading ect...
//Using heading only❗
</header>

<main>
//Use only main of the contents
</main>

<footer>
//use copy write discription or challenge d by front end mentor code by mark..
</footer>
</body>
</html>

I hope it's useful for
happy Codding

Marked as helpful

visualdennis• 8,375

@visualdenniss

Posted over 1 year ago

Looks great overall! I'd suggest not using the opacity on overlay like this, because then the child elements, like the image lose opacity too, which is not what we want here. Instead try to adjust the background opacity by using and hsla value instead of hsl, e.g. background-color: hsla(178, 100%, 50%, 50%); the last value with % is about opacity.

Hope you find this feedback helpful!

Marked as helpful

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