Skip to content
OverviewSolutions
2
Comments
1
Akrom
@AkromDev

All comments

  • Will•210
    @wkan17012021Submitted almost 3 years ago

    Hi,

    This one took slightly less time than previous. But, still a lot of time was spent getting the card to sit in the centre horizontally and vertically while maintaining its width. It would be interesting to know what semantic tags are best placed for this project. Also, the '3 days left' text does not sit centrally with the clock icon. Is there a simple way to do this? I suppose adjust height or width of the icon so they align vertically? How was the main image changed to cyan upon hover? I used filter: hue rotation and set it as close to a cyan colour but i assume this is not the css property that was used in the template. Thanks

    NFT preview card component solution

    2
    Akrom•40
    @AkromDevPosted almost 3 years ago

    Hi Will. You can use flexbox or position absolute (or fixed) to perfectly center a content.

    These answers might be helpful: Using flex and Using flex or position

    Regarding centering clock, you can use flex instead of float. So in your case, it would be something similar to:

    ` .left_container{

    display: flex;

    gap: 10px; /* space between items */

    align-items: center; / center vertically / }`

    I did this challenge today, you can take a look at my solution if you want.

    https://www.frontendmentor.io/solutions/nft-preview-card-component-5BTmXh1S7

    Edit: had to add empty lines for making text go next line.

    Edit 2: This editor is really painful

    Marked as helpful
    0