Submitted almost 3 years ago
Frontend Mentor | NFT preview card component
@aaronpaulgz
Design comparison
SolutionDesign
Solution retrospective
Here is my solution with pure HTML and CSS. Hope you like it. Let me know any feedback :D
Community feedback
- @AGutierrezRPosted almost 3 years ago
Nice job!! I have a few suggestions:
- You could get rid of the
height: min-content
on the.card-container
, it has no use in this situation. - Instead of using the
<figure>
tag, you could use a<header>
or a<div>
, it works the same and they have less (or none) default styles. - If you want to have no extra markup, you could use
::before
or::after
for the overlay layer on the images, apply this style on thecard_image_container
and in thecontent
property put theurl()
to thesvg
file, and setposition: relative
oncard_image_container
andposition: absolute
on the::before
or::after
element and work you way. - If you want to get rid of the space at the bottom of images, use
display: block
on the images - To avoid extra markup you could use
::before
for thesvg
icon, on the.nft-cost
and.nft-timer
, and thecontent
property has theurl
to their respected icon. - You could workaround of the
hr
s height by giving just the bottom border a 1px thickborder-width: 0 0 1px 0;
, this way you don't have to set the 0.5px
0 - You could get rid of the
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