I used CSS Grids, Flexbox, Media query

Community feedback

• 

  Maciej Duda•100

  @mcdudPosted almost 3 years ago

  Hi, @Fortwinhamz!

  Nice one!

  After reviewing your code:

  • it's easier to design mobile-first in my opinion.
  • use font-family provided in the design. You can easily google how to add it from google fonts.
  • for better file structure put your images in images folder
  • you should look into CSS relative units, to make your solution scalable.
  • look into CSS property box-sizing, setting it to border-box will make your life easier.
  • you shouldn't have fixed width and heights on your cards because you can easily overflow them with content. Put only max-width on your container and your cards should have size based on the content that you put in them.
  • to make your code less repetitive you can use multiple classes in one HTML element, cards in this solution have mostly the same styles, only few differences. So you could structure your code like this:

  HTML

  <div class="container">
          <div class="card card-violet daniel">content</div>
          <div class="card card-light-gray jonathan">content</div>
          <div class="card card-white kira">content</div>
          <div class="card card-dark-gray jeanette">content</div>
          <div class="card card-white patrick">content</div>
  </div>
  

  CSS

  .card {
  *styles repeating in all of those cards*
  }
  
  .card-violet {
  *styles only in violet card*
  }
  
  .daniel {
  *for grid-area purposes*
  }
  

  For naming your classes look into BEM methodology.

  Overall pretty nice job with this one. Good luck!

  Marked as helpful

  1

  ---

  

  Basirat Hamzat•110

  @FortwinhamzPosted almost 3 years ago

  @mcdud Thank you so much, Just got this and I'll fix it.

  0