3 Column Preview Card Component

Community feedback

• 

  Jasur Kurbanov•80

  @jasurkurbanovPosted over 2 years ago

  You did awesome job. You could do it better by reducing CSS codes, and also pay attention to namings.

  • Reduce CSS code. Try to include all general stylings

  In you <h1/> tag you missed to include CSS property margin-top: 25px; . Due to this you are writing the same margin-top: 25px; for

  .  {
      margin-top: 25px;
  }
  
  .card-grid-suvs h1 {
      margin-top: 25px;
  }
  
  .card-grid-luxury h1 {
      margin-top: 25px;
  }
  

  As you can see from above codes you are just repeating yourself. Instead of this, you can remove all .card-grid-suvs h1, .card-grid-luxury h1, card-grid-sedans h1. And insert ** margin-top: 25px;** to general card-component <h1/> tag. card-component h1 { margin-top: 25px; }

  The same you're doing for <p> tag.

  .card-grid-sedans p {
      margin-top: 35px;
      line-height: 25px;
  }
  
  .card-grid-suvs p {
      margin-top: 35px;
      line-height: 25px;
  }
  
  .card-grid-luxury p {
      margin-top: 35px;
      line-height: 25px;
  }
  

  First remove all .card-grid-sedans p , .card-grid-suvs p , .card-grid-luxury p and update you CSS like this

  card-component p {
      margin-top: 35px;
      line-height: 25px;
  }
  

  Regarding buttons, also a lot of repetition of code. Look from design it is clear that all button have common design. Only difference it their background-color and border-color. Let's create base-button class, expand your class as you need.

  First create base button class.

  .card-component button {
      background-color: #fff;
      text-decoration: none;
      font-family: 'Lexend Deca', sans-serif;
      padding: 10px 25px;
      border-radius: 25px;
      margin-top: 105px;
  }
  

  Create specific classes for colors

  .orange{
      color: hsl(31, 77%, 52%);
      border: 2px solid hsl(31, 77%, 52%);
  }
  
   .teal{
     color: hsl(184, 100%, 22%);
     border: 2px solid hsl(184, 100%, 22%);
  }
  
  .darkgreen{
    color: hsl(179, 100%, 13%);
    border: 2px solid hsl(179, 100%, 13%);
  }
  
  

  Inside your HTML you will use as follows. Pay attention to <button/> tag

     <div class="card-component">
        <div class="card-grid-sedans">
           ...
           <button class="orange">Learn More</button>
        </div>
        <div class="card-grid-suvs">
            ....
           <button class="teal">Learn More</button>
        </div>
        <div class="card-grid-luxury">
           ....
           <button class="darkgreen">Learn More</button>
         </div>
     </div>
  

  • Naming Since project it not so big you can minimize CSS class names. Change
    from card-component to card from card-grid-[othernames] to card-item

  No need to create three separate card-grid-(sedans, suvs, luxury) classes since as I showed above with button. You can create base class and expand them as you wish, by doing this you can reduce a lot of code and make you code more concise to read. Moreover, software programming principle Open-Closed and programming concepts like DRY, KISS, YAGNI will be applied to you project, if you organize you classes as I showed you with button.

  0
• 

  Nimitsky•40

  @NimitskyPosted over 2 years ago

  ODAYAKA NA FUUIKI TOTEMO SUKI DESU XD

  0