Designed by using CSS Flexbox

Community feedback

• 

  Rio Cantre•9,690

  @RioCantrePosted over 2 years ago

  Hello there! Awesome work with this project. Looking at your solution, I would like to suggest the following for you…

  • Import the attribution style in CSS file and remove the style tag
  • Instead of div, alternatively wrap the whole content with main tag . Use semantic tags, for HTML structures, refer it with this one Semantics
  • Alternative is to use section tag in this line <div class="card-body"> and footer tag in this one <div class="attribution">
  • The eye icon is missing in the hover state, might need to refer it with this example Overlay in Image
  • Create a new rule set for the icons in card-details with...

  .eth img, .days img {
    width: 14px;
    height: 20px;
  }
  

  • Add width: 100%; in the .card-detail .eth and .card-detail .days rule sets
  • Add justify-content: right; in Flexbox of .card-detail .days rule set
  • Adjust top margin into margin-top: 1.5em; in card-details and margin-top: 1em; in .card-footer rule set

  Above all, the design is well implemented. Keep up the good work!

  Marked as helpful

  1

  ---

  

  Aliffio Syah M•70

  @alif-syhm01Posted over 2 years ago

  @RioCantre thanks sir for the input, you give me a lot of detail that I must repair it, I really happy for that, so that I can improve more about my css skills, once again thanks a lot sir 😁

  0
• 

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted over 2 years ago

  Your solution is not responsive on mobile use margin top and bottom on card Also remember to wrap your solution in main tag..good job keep coding 👍

  1

  ---

  

  Aliffio Syah M•70

  @alif-syhm01Posted over 2 years ago

  @Kamasah-Dickson thanks for the input sir, I'll be fix it later 😁

  0