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

Flexbox NFT Component

@mpgithubcode

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'm getting more and more comfortable with the flexbox and positioning with them!

I will definitely redo this one. I am on the free tier currently but I plan on upgrading. Since I don't have access I get a little frustrated when trying to recreate the sizing and formatting from the picture.

For example, I could not see or find the color that was bordering around the avatar picture, and the default text included in the design docs where too small

I still need to work on:

  • media queries
  • hover states

Community feedback

@AbdallahGO

Posted

media queries and hover they like a condition . for example when you write :

' div:hover => it means when you hovering div box something happens '

BUT

div:hover div2 => it means when you hovering div box something happens to div2 and it must be div2 inside div to work '

and about media queries, it's not more important than hover but you will a lot in make fonts or customize your website in different screen sizes

I hope that was 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