Four Card Feature Section With CSS

Community feedback

• 

  konji85•80

  @konji85Posted 5 months ago

  hello, good job i saw your design and your code. i have noticed a few things. firstly when you switch to the mobile display there is no margins between the cards. you can add margin to the card(bottom or top and buttom).also it breaks between the 1023px - 700px. i think you could use

   @media (max-width: 1024px):
  

  instead of

    @media (min-width: 1024px):
  

  secondly, i see that you give each card a class name (yellow-card, cyan-card, blue-card, red-card) which is correct to set the top border color for each but you have replicated the other attributes in each class. instead you could give all a general-name('card' for example)

               <div class="card  blue-card">
  

  then set the style

      .card {
      border: 1px solid white;
      padding: 20px;
      width: 300px;
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  

  and then a unique name for each card to set the differences like the border color

     .cyan-card {
      border-top: 5px solid var(--cyan);
     }
   .yellow-card {
      border-top: 5px solid var(--yellow);
    }
   .red-card {
      border-top: 5px solid var(--red);
    }
    .blue-card {
      border-top: 5px solid var(--blue);
     }
  

  for placing the image to the right bottom corner of the card instead of adding padding i think it is possible to use :

         align-items:end;
  

  and one last thing you could reduce the width of the card a little to make it much like the design

  i wish you happy day

  0