I used in this NFT card HTML, CSS as well as Flexbox.
Design comparison
Community feedback
- @denieldenPosted over 2 years ago
Hi Carlos, I took some time to look at your solution and you did a great job!
Also I have some tips for improving your code:
- remove all
margin
fromcard
class - try to use flexbox to the body for center the card. Read here -> best flex guide
- after add
min-heigth: 100vh
to body because Flexbox aligns to the size of the parent container - add
border-radius: 6px;
to.overlay
class - try to add a little
transition
on the element with hover effect - instead of using
px
try to use relative units of measurement -> read here
Overall you did well :)
Hope this help and happy coding!
Marked as helpful0@Karlof99Posted over 2 years ago@denielden Thank you Deniel This helps me because I know something doesn't fit the project. Regards
1 - remove all
- @Jank1510Posted over 2 years ago
Hello Karlof99
Congratulations on finishing the challenge !.
Regarding your question, the header is mostly used when creating a navbar or something similar, you don't need to put it in the code, it won't help you.
When you see the code it leaves you a recommendation, in the width of the card put a width in this way
.card {
Width: Max(20%, 20rem);
}
Instead of
.card {
width: 20%;
}
Since the view of your card on mobile devices looks very thin
And if you want to have a good order in your project, I recommend that you create a folder to save the image files, the default name is "assets" and you omit the index.html and the style.css.
good job in advance and good luck!
Marked as helpful0@Karlof99Posted over 2 years ago@Jank1510 Hello Jehan Thank you very much for your comments and advice. I will apply them on my code to improve it. Regards
0 - @EmmanuelHexerPosted over 2 years ago
Great work man.
- I'd recommend your to add a
height: 100vh
to your body to center the card.
Marked as helpful0@Karlof99Posted over 2 years ago@Phalcin Hello Emmanuel Thank you very much for your advice. I knew something didn't fit. Regards
0 - I'd recommend your to add a
Please log in to post a comment
Log in with GitHubJoin 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