NFT preview card component

Community feedback

• 

  Adriano•38,060

  @AdrianoEscarabotePosted almost 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. 👍

  Marked as helpful

  0

  ---

  

  Reza Jaber•200

  @rezajaberPosted almost 2 years ago

  @AdrianoEscarabote Perfect, thank you the help. Even such small details can help me to improve my code a lot :) Could you please elaborate why, you would do that, since I do not really understand it fully?

  0

  

  Adriano•38,060

  @AdrianoEscarabotePosted almost 2 years ago

  @rezajaber I put max-width for the content to have a maximum width and not an absolute one!

  and I set height auto for the parent element to adapt to the height of the child elements!

  0
• 

  mahmmoud•180

  @mahmmoud5Posted almost 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; }

  Marked as helpful

  0

  ---

  

  Reza Jaber•200

  @rezajaberPosted almost 2 years ago

  @mahmmoud5 Thank you very much Mahmmoud! I will try it in the evening and I am looking forward to test this method 👌 Have a great day and hopefully I will see more of your comments👍

  0
• 

  Fritz•300

  @fritzadelbertusPosted almost 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!

  Marked as helpful

  0

  ---

  

  Reza Jaber•200

  @rezajaberPosted almost 2 years ago

  @fritzadelbertus
  Hey Fritz, thank you for taking your time, I really appreciate it! I will try out your suggestion for the hover-effect. These were some really good tips! Have a nice day! Keep up the good work✌️

  0