NFT Preview Card using HTML and Pure CSS

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Babatunde, Congratulations on completing this challenge!

  Amazing solution! I’ve just opened the solution’s live site and I liked the job you’ve done a lot. I’ve some suggestions for you:

  1.It's not a best practice that you se the heightfor some elements, because since you set a height for an element, this means that this element will grow until a certain point and after that the inner content (as texts or images) will start to pop out the element due its fixed height, so isn't necessary to set the height the container height comes from the elements, its paddings and height.

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

  3.Use <main> to replace the div containing the whole content, its better to use <main> in this case because you’re indicating that’s the main block of content of this page and also because <div> doesn’t have any meaning, it's just a block element.

  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) {
  .text .eth-details-and-time {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      flex-direction: column;
  }
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Babatunde Oshin (Regal Shabazz)•40

  @regal-shabazzPosted about 2 years ago

  @correlucas These are great tips!. Thank you, I'll work on them.

  1
• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hi Babatunde, congratulations on completing the challenge, great job! 😁

  Some little tips for optimizing your code:

  • use main tag to wrap the all content of page and improve the Accessibility
  • also you can use article or div tag instead of main to the container card for improve the Accessibility
  • use min-height: 100vh to body instead of height, otherwise the content is cut off when the browser height is less than the content
  • add transition on the element with hover effect
  • instead of using px use relative units of measurement like rem -> read here

  Hope this help! Happy coding 😉

  Marked as helpful

  0

  ---

  

  Babatunde Oshin (Regal Shabazz)•40

  @regal-shabazzPosted about 2 years ago

  @denielden Thanks for the feedback. I will work on improving Accessibility.

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  @regal-shabazz You are welcome and keep it up :)

  0