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

NFT Card - almost

11arshaan 20

@11arshaan

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


Hello.

I was thinking about using bootstrap for this, but decided to try coding the entire thing. The responsiveness is not how I planned for it to be; I think the bootstrap columns would solve the issue. Or maybe if I used a media query, but what would the settings for the elements be in each query?

Also, what is the recommended method for creating the hover state for the image?

Thank you!

Community feedback

Benjamin 130

@Benjoow

Posted

Hello Arshaan !

That's a good start :-). You need to focus on css not on bootstrap if you want to be a developper. Take your time and practice your html structure. It's important and your css will be easier to write.

I use mobile first approche and combinaison of width and max-width property, like this : width: 80% and max-width: (the value of your card component). The idea is to start with mobile resolution and expense your window until deskop resolution. For this exercice you don't need media queries.

I recommend you to train your responsive with this website : https://courses.kevinpowell.co/conquering-responsive-layouts. It's will more simpler after that :-)

Marked as helpful

1
Axurynn 200

@Axurynn

Posted

Good job @11arshaan !

For the responsiveness, you could use @media queries but you could also use a min-width property. In this case, you could "block" the card width (at 300 px for example) so as it can't go lower. This could fix your responsiveness for the mobile version.

Overall, you did it well ! Congrats and happy coding 😄

Marked as helpful

1

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