Submitted about 2 months ago

NFT preview card component

CoolNight99•350

@CoolNight99

Preview site View code

This is a solution for...NFT preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I got the design pretty close to the specifications but maybe I would try making it even more accurate next time.

What challenges did you encounter, and how did you overcome them?

I had to do some research to figure out the image overlay.

Community feedback

Marzia Jalili•3,970

@MarziaJaliliPosted about 2 months ago

Hey there!

Here's a simple suggestion:

set the code below in the body selector to center the card:

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

Make sure that the card is the only child element of the <body>. If not wrapp everything nested inside <body> with the <main> element. It will look something like this:

<body>
  <main>
    <!-- every element nested inside -->
  </main>
</body>

Keep up the grind🫡

Marked as helpful

CoolNight99•350

@CoolNight99Posted about 2 months ago

@MarziaJalili Thank you! Fixed.

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