Skip to content
Submitted over 1 year ago

NFT Card preview

Irfan RIzki Saputra•260
@nafri97
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

feel free to give me some suggestion.

Community feedback

  • C H A R A N 🎯•2,670
    @0xabdulPosted 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
    0
  • visualdennis•8,375
    @visualdennissPosted 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
    0

Please log in to post a comment

Log in with GitHub

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