Four Card Feature Section

Community feedback

• 

  hitmorecode•7,560

  @hitmorecode

  Posted about 2 years ago

  Congratulations well done. I have a few tips for you. When you have components which are identical, it is better to use classes instead of id. The layout and style of all four cards are identical, if you use class you only have to style one card and it will apply to all four cards. This will save you time writing your CSS.

  When using id you have to style every single card separately and with this you will repeat the same lines of code multiple times.

  For example if you look at the CSS for id secao-esquerda, box-top, box-bottom, secao-direita, they are all the same. You can change it to this:

  <div class="secao" id="esquerda">
  <div class="secao" id="box-top">
  <div class="secao" id="bottom">
  <div class="secao" id="direita">
  

  #you only have to write this one time and it will apply to all four cards
  .secao {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  background-color: white;
  width: 350px;
  padding: 30px;
  margin: 20px;
  border-radius: 5px;
  transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: rgba(28, 34, 26, 0.082) 0 8px 15px;
  }
  
  **because the top borders are not the same, you can style them separately
  #esquerda {
  border-top: 3px solid hsl(180, 62%, 55%);
  }
  #box-top {
  border-top: 3px solid hsl(0, 78%, 62%);
  }
  #box-bottom {
  border-top: 3px solid hsl(34, 97%, 64%);
  }
  #direita {
  border-top: 3px solid hsl(212, 86%, 64%);
  }
  

  The same goes for the <p>. If you give all <p> inside the cards a class

  <p class="card-description">

  **you only have to write this one time and it will be the same for all <p> inside all cards
  .card-description {
  font-size: 14px;
  margin-top: 10px;
  color: hsl(229, 6%, 66%);
  }
  

  01

  Marked as helpful