Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Preview-card

P
Ben πŸŒŒβ€’ 570

@bengera

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Aakash Vermaβ€’ 6,690

@skyv26

Posted

Hi! Ben, I checked your work and I have some suggestions for you.

  1. you are using margin-left and margin-rigth in order to make gap between the text and the icons. I have a very good solution which is only one line solution for each div for card-value and card-time.

just add gap: 0.4rem; in your div like below:

.card__time {
    color: #8bacda;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    /* margin-right: 1rem; */
}
.card__value {
    color: #00fff7;
    font-size: 1.3;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

remove margin from below css properties

.eth, .clock {
    /* margin-right: 1rem; */
}

even it is better approach and easy to handle and even make your content alignment and spacing really good.

  1. below 400px your card is touching both right and left edges of mobile viewport so add some margin or make card width little bit less.

I hope it will help to make more better UI.

Good Luck

Marked as helpful

0
Anosha Ahmedβ€’ 9,300

@anoshaahmed

Posted

To avoid accessibility issues in the future have at least one h1 in your code

Good job! :)

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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