Submitted 9 months ago

Finished this challenge

Tahsin YT•270

@Randomgituser69

A solution to the NFT preview card component challenge

Preview Code

Solution retrospective

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

Not sure

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

I was struggling with picture and background color on hover. When i added pseudo classes before after, setted the position to absolute, button position relative, aria label, the image inside the button and more. It fixed the problem. For more details you can check out my repository in github. Also was struggling with icon svgs. After putting the icon svg images inside the and setting the display to inline block. It fixed the problem.

Code

Please log in to post a comment

Community feedback

Kristoffer•240
@KristofferLe
Posted 9 months ago
Hi,

Great work on the card, it looks good, but with some minor changes I think it could look even better.

Start off: In the body tag, put an
```
body {
 display: flex; // insert these
 align-items: center; // insert these
 justify-content: center; //insert these
}
```
This will make sure that the card will be centered in the window. ( In this case you can even put an flex-direction: column; in the main tag ) so that your name will appear underneath instead of to the left.

For the card itself, you should put an min-width so it that the content doesnt stretch out to much so that the content spills outside. And also play around with the gaps a little more til you get the to same spacing as in the design. Instead of a gap of 5px, I would say go for around 16px - 20px.

And what can be good to start with is rem / em units that are much more responsive.

Also an quick and easy reset rule can be this
```
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
```
Last but not least, dont forget the alt for the img tags, and aria-label for links. Great work!
Marked as helpful

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