NFT preview card using HTML & CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Anthony, Congratulations on completing this challenge!

  You’ve done really good work here putting everything together, I’ve some suggestions to improve the design:

  1.Add transitions to make the IMG HOVER interaction smoother while the element gets hovered, you can use a value like transition: all ease-in 0.5s.

  2.You’ve used <div> to wrap the card container, in this case you need to use <main> since this is the main block of this page.

  3.To improve your component overall responsiveness, something you can do its to create a media query to save space in the pricing section to make each information in a different row. Here’s the code for this media query.

  @media (max-width: 350px) {
  .pricing-time-info {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      GAP: 10PX;
  }
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Anthony Waweru Njeri•180

  @anthonynwaweruPosted about 2 years ago

  @correlucas Thanks a bunch Lucas, have implemented the additional changes that you have shared. ✊

  1

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @anthonynwaweru I'm happy to hear that Anthony! If you don't mind I can analyse your other solutions. Say me if you agree. Keep it up =)

  0

  

  Anthony Waweru Njeri•180

  @anthonynwaweruPosted about 2 years ago

  @correlucas Sure Lucas please do, I'll really appreciate, I'm planning on staying consistent, one solution per day. 😁

  0