NFT preview card component

Community feedback

• 

  Adriano•42,870

  @AdrianoEscarabote

  Posted over 2 years ago

  Hello Reza Jaber, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

  To improve the responsiveness of the project, we can do this:

  .container {
      max-width: 350px;
      height: auto;
  }
  .image {
      width: 100%;
      height: auto;
  }
  

  The remainder is excellent.

  I hope it's useful. 👍

  02

  Marked as helpful
• 

  mahmmoud•180

  @mahmmoud5

  Posted over 2 years ago

  Hey Reza :) , you realy did a great job keep going if you want to creat this blue color when you hover over <div class="equilibrium"> <div class="hover-effect"><img src="images/icon-view.svg" alt=""></div> </div> this is the html for it and then make you'r picture a background picture for equilibrium div for you'r hover effect div use
  background-color: rgba(0, 255, 247, 0.441) ; opacity: 0; the last trick you write this line .hover-effect:hover{ opacity: 1; }

  01

  Marked as helpful
• 

  Fritz•300

  @fritzadelbertus

  Posted over 2 years ago

  Hello @rezajaber. First of all, congratulations on finishing this challenge!

  Here are some few suggestion I can give:

  1. For the hover effect you can add an additional overlay in front of the image and change the opacity during hover. I use a <div> containing the eye icon for the overlay. You can see how I implement the styles here in the /* Hover Effect */ section
  2. The index.html structure is clean. The card content could be wrap in an <article> tag to create a cleaner structure but the current structure is already good.
  3. The layout is good. Although I prefer using flexbox for 1 dimension layout, grid is also a good solution.
  4. There are no 'unusual sightings' in your code. At least in the index.html and styles.css file so it's fine in my opinion.

  I hope it's helpful and happy coding!

  01

  Marked as helpful