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 challenge completed

#accessibility#bem#material-ui#progressive-enhancement#semantic-ui
Freivys Paredesโ€ข 110

@freivys

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

Ahmed Bayoumiโ€ข 6,800

@Bayoumi-dev

Posted

Hey Freivys, It looks good!...

My suggestions:

  • Document should have one main landmark, Contain the component with <main>.
<main>
   <div class="card-container card">
      //...
   </div>
</main>
  • I also suggest you center the component on the page with Flexbox, by giving the parent element <main> the following properties:
main {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
 }  

I hope this is helpful to you... Keep coding๐Ÿ‘

0

Freivys Paredesโ€ข 110

@freivys

Posted

@Bayoumi-dev Thanks for the suggestions, I'll apply those changes to the code. I will continue practicing and reviewing the good programming practices that must be applied. ๐Ÿ‘

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