NFT preview card using html and css

Community feedback

• 

  darryncodes•6,390

  @darryncodesPosted almost 3 years ago

  Hi Elvina,

  Really great solution, well done!

  • i'd encourage you to clear your accessibility report as it's a good habit to form. If you include a <h1> and swap <div class="card"> with <main class="card"> that'll do the trick. Semantics & heading structure is really important
  • as Tymur has eluded to you should avoid using fixed widths and heights. This plays havoc with responsive design. The height should be dictated by the content and the width can be dynamically controlled by using max-width. For example .card you should remove height: 585px; and update max-width: 350px; width: 100%;. And add width: 100%; update max-width: 300px; on .equilibrium-img (you'll need to tweak some other factors like removing position it's not needed)

  Any questions let me know

  Happy coding!

  Marked as helpful

  1

  ---

  

  Elvinas•90

  @elvinasnPosted almost 3 years ago

  @darryncodes Thank you!

  0
• 

  Web Wizard•5,690

  @rsrclabPosted almost 3 years ago

  Hi, @elvinasn ~

  Congratulate on your solution to the challenge on FM platform. I have studied your work carefully and learned a lot from it. Especially I like image overlay effect on your project.

  Here are some of the tips I like to provide.

  1. Card goes over screen on smaller devices, and I think using max-width will solve the issue.
  2. Try BEM for classing the elements.

  https://www.frontendmentor.io/solutions/my-first-solution-on-chanllenge-V-4IzAivH

  Here is my solution to this challenge, and if it can help you even a bit, it would be happy to me.

  Cheers ~

  Marked as helpful

  1

  ---

  

  Elvinas•90

  @elvinasnPosted almost 3 years ago

  @tymren608 Thank you!

  0
• 

  Issa•10

  @IssasoftdevPosted almost 3 years ago

  Hey Elvina,

  Congrats on completing the challenge.

  I just wanted suggest styling some of your text elements with a large font-weight. And setting your line to a width of 1px.

  0