Responsive webpage component using CSS flexbox

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted about 1 year ago

  Nice well done. A few tips

  • You have three h1, remove two of them. You can only have one h1 on a page
  • Make it a habit of also adding padding: 0; to css reset
  • Try to make your css dry (don't repeat yourself)

  .card1 .btn {
    padding: 1.1rem 2.5rem; **
    color: var(--bright-orange);
    border: none; **
    font-weight: bold; **
    border-radius: 3rem; **
  }
  
  .card2 .btn {
    padding: 1.1rem 2.5rem; **
    color: var(--dark-cyan);
    border: none; **
    font-weight: bold; **
    border-radius: 3rem; **
  }
  
  .card3 .btn {
    padding: 1.1rem 2.5rem; **
    color: var(--dark-cyan2);
    border: none; **
    font-weight: bold; **
    border-radius: 3rem; **
  }
  

  As you can see all lines marked with ** are repeated lines. You could combined all these lines into one css rule.

  ## With this you have styled all three buttons with one css rule
  .btn {
    padding: 1.1rem 2.5rem;
    border: none;
    font-weight: bold;
    border-radius: 3rem;
  }
  
  .card1 .btn {
    color: var(--bright-orange);
  }
  
  .card2 .btn {
    color: var(--dark-cyan);
  }
  
  .card3 .btn {
    color: var(--dark-cyan2);
  }
  
  ## For button hover you could do something like this, instead of repeating three times the same thing.
  
  .btn:hover {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    cursor: pointer;
  }
  

  • If you change the breakpoint to 930px it should be fine for tablets also

  Marked as helpful

  2