Andrés Gutiérrez Ramírez• 2,530
@AGutierrezR
Posted
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