Mobile first using HTML, CSS FLEX AND GRID

Community feedback

• 

  Katie•405

  @kem522Posted over 3 years ago

  Hello! Great job using grid.

  I noticed that some of your CSS rules are repeated for elements that look similar, you could make your CSS more efficient by grouping them, for example in the profiles section instead of repeating the same styles for profile-1, profile-2 and profile-3 you could group the CSS like this:

  .profile-1,
  .profile-2,
  .profile-3 {
      background-color: hsl(219, 30%, 18%);
      height: 30vh;
      margin: 50px;
      border-radius: 5px;
  }
  
  // then the same for the paragraphs within those profiles
  
  .profile-1 p,
  .profile-2 p,
  .profile-3 p {
      text-align: left;
      padding: 20px;
      color:  hsl(0, 0%, 100%);
      opacity: 0.8;
      line-height: 1.5em;
      font-family: 'Open Sans', sans-serif;
      font-size: 0.9em;
  }
  
  // and you could do the same for the img, h3 and h4 tags too
  

  Then if you had any specific styles you wanted to apply to only one profile card you could do that in a separate block.

  However, in this case it seems like all your profiles cards use the exact same style so you could just have one profile-card class and use it for each of those elements in the HTML. Should save you a decent amount of typing!

  Hope that helped!

  Marked as helpful

  0

  ---

  

  Kurt Gonzales•300

  @KurtGonzalesPosted over 3 years ago

  @kem522 Thank you very much for this! I really appreciate it.

  0
• 

  Jose Berrios•215

  @surphuryPosted over 3 years ago

  I recommend you using grid in stay production's section and testimonial's section... It gonna look much better...

  0