Submitted over 1 year ago

NFT preview card component

Vicky Verma• 180

@code-nick

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

This is a solution for...

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Community feedback

Vikash Maurya• 310

@VikashMaurya10

Posted over 1 year ago

@code-nick, you did good job🎊. I want to draw your attention to some point:

Add transition property to make more smooth loading some other css.
Do't fix width create design, if you want to fix, use max-width or min-width.i.e

card {
    background-color: hsl(217, 54%, 11%);
    box-shadow: 0px 0px 8px 10px rgba(0, 0, 0, 0.2);
    max-width: 350px;
    border-radius: 1rem;
}

To make more accessible website follow this scenario:

<html>
<head></head>
<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>
</html>

I hope you find helpful. To get more help please checkout my solution click here 🌐

Marked as helpful

Vishal Maurya• 500

@VishalMauryastp

Posted over 1 year ago

Hello ,You are doing well but use width:fit-content property in <h1> tag this property helps to apply hover effect ,when your cursor on text .

.title{
        width:fit-content;
}

and other things are ok.

I hope ,it's helpful for you😐.

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