Responsive NFT preview card component

Community feedback

• 

  Aditya Pratap•150

  @aditya3284Posted over 2 years ago

  Hey Abhilash, good job

  Keep up the good work

  Your solution looks great however I think that the hr that you are using needs a bit more size or opacity, as its not visible properly. And try to use other units instead of % on your main container, as % changes based on the parent element, in this case parent element is the body and change in its width changes your components width.

  @ccreusat has given a good solution of that.

  I hope this helps you in your coding journey

  Cheers

  Happy coding 👍

  0
• 

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Hey good job completing this challenge

  Keep up the good work

  Your solution looks great however I think that the user information needs some margin from the bottom using margin-bottom. Secondly the divider line needs a bit more opacity

  I hope this helps

  Cheers

  Happy coding 👍

  0
• 

  Clément Creusat•1,655

  @ccreusatPosted over 2 years ago

  Hello ! Good job :)

  It looks nice but you can improve your solution if you wants :

  • about your markup, try to stick to the same convention (Title, active, Image, ...): title, active, image, .. Take a look at BEM, OOCSS methodologies
  • Get rid of your width % for your component .container, make it with max-width: 350px and remove height so it could breathe :)
  • max-width: 100% on your main image is a better practice than width: 90%
  • For better UI, you could put your <div class="active"> element inside your <div class="image"> and modify the CSS to :

  .active {
  cursor: pointer;
      background-color: hsl(178, 100%, 50%,50%);
      border-radius: 5%;
      text-align: center;
      position: absolute;
      inset: 0;
      align-items: center;
      justify-content: center;
      display: none;
  }
  

  • Take it in consideration than your .active element could be a link and leads to another page (maybe change the div to a <a>)

  And when hovering it, change display:none by display:flex > .Image:hover .active

  • Replace all your border-radius with other unit (rem/em/px) but % has a weird behavior .

  Hope it helps and Enjoy Coding!

  0