INTRODUCTION

This is my attempt at the four-card feature section challenge on Frontend Mentor. I’ll be building this project using only HTML and vanilla CSS to keep things simple and beginner-friendly. My focus is on creating a clean and well-structured design while making the code easy to understand. If you’d like to follow along, you can download the starter files for the project at Frontend Mentor.

THE GOAL

The goal is to build both the desktop version using css grid layout for multiple column
multiple column layout and the mobile version of this challenge
Single-column image of challenge. For this challenge, I will be taking the mobile-first approach to design.

THE HTML

Four card feature section


  
  
    
      
        Reliable, efficient delivery
        Powered by Technology
      
      
        Our Artificial Intelligence powered tools use millions of project data points
        to ensure that your project is successful
      
    

    
      Supervisor
      Monitors activity to identify project roadblocks
      
        
      
    

    
      Team Builder
      Scans our talent network to create the optimal team for your project
      
        
      
    

    
      Karma
      Regularly evaluates our talent to ensure quality
      
        
      
    

    
      Calculator
      Uses data from past projects to provide better delivery estimates
      
        
      
    

  
  
    
      Challenge by Frontend Mentor.
      Coded by thelastmedici.
    
  





    Enter fullscreen mode
    


    Exit fullscreen mode
    




For the markup, I wrapped everything inside a div with the class container within the body. I used the header tag to structure the head section of the design. Each card was placed inside its own div for easier styling, and I used h1, h3, and p tags to differentiate between text elements
  
  
  The CSS

  
  
  Mobile Design
For the styling, I followed a mobile-first approach, initially stacking the cards in a single-column layout. I also imported a Google Font to select the specified typography from the style guide. Below is the code for the mobile version

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
      font-size: 16px;
      font-family: 'Poppins', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
}

.container {
    margin-top: 40px;
    max-width: 310px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header{
    padding: 15px;
}

header p{
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    font-family: 'Poppins';
    padding-top: 10px;
    line-height: 1.25rem;
    color:  hsl(212, 6%, 44%);
}

h1{
    font-size: 22px;
}

h1 span{
    color: hsl(212, 6%, 44%);
    font-weight: 400;
}

.supervisor, .team-builder, .karma, .calculator{
    padding: 22px;
    margin: 20px;
    border-radius:5px;
    box-sizing: border-box; 
}
.supervisor{
    border-top: 5px solid hsl(180, 62%, 55%);
    box-shadow: 0px 15px 19px -2px hsl(212, 66%, 93%);

}
.team-builder{
    border-top: 5px solid hsl(0, 78%, 62%);
    box-shadow: 0px 15px 19px -2px hsl(212, 66%, 93%);
}
.karma{
    border-top: 5px solid hsl(45, 100%, 50%);
    box-shadow: 0px 15px 19px -2px hsl(212, 66%, 93%);
}
.calculator{
    border-top: 5px solid hsl(212, 86%, 64%);
    box-shadow: 0px 15px 19px -2px hsl(212, 66%, 93%);
}

.supervisor p{
    color: hsl(212, 6%, 44%);
    font-size: 0.7rem;
    font-weight: 400;
}

.supervisor .image{
    padding-left: 150px;
}

.team-builder p{
    color: hsl(212, 6%, 44%);
    font-size: 0.7rem;
    font-weight: 400;
}
.team-builder .image{
    padding-left: 150px;
}

.karma p{
    color: hsl(212, 6%, 44%);
    font-size: 0.7rem;
    font-weight: 400;
}
.karma .image{
    padding-left: 150px;
}
.calculator p{
    color: hsl(212, 6%, 44%);
    font-size: 0.7rem;
    font-weight: 400;
}
.calculator .image{
    padding-left: 150px;
}



    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  Desktop Design
Designing the desktop version, I used the grid system. Splitting the grid into three columns and setting the grid to auto rows to automatically create rows as needed with a width that doesnt grow beyond 1000px, placing everything in the container div.

.container{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto;
        max-width: 1000px;
        margin-top: 0px;
        overflow-y: hidden;
    }



    Enter fullscreen mode
    


    Exit fullscreen mode
    




For the header section, I placed it in the first column and made it span three columns, just like the goal image, so that the header can be well centered, giving the h1 a font size of 32px so as to make it bold and adding all necessary styling for the paragraph text too, as shown in the goal project. The header section's code is shown below.

header {
        grid-column: 1 / span 3;
        text-align: center;
        max-width: 750px;
        margin: 0 auto;
        margin-left: 40px;
        padding-left: 197px;
        margin-top: -114px;
        margin-bottom: -161px;
    }

    h1{
        font-size: 32px;
    }
    header p {
        text-align: center;
        font-weight: 500;
        font-size: 14px;
        font-family: 'Poppins';
        padding-top: 10px;
        padding-left: -3pc;
        margin-left: 42px;
        margin-right: 13px;
        line-height: 1.25rem;
        color: hsl(212, 6%, 44%);
    }



    Enter fullscreen mode
    


    Exit fullscreen mode
    




Like the code below described in the target image, each testimonial part is positioned in its appropriate grid location.

karma {
        grid-column: 2;
        grid-row: 3;
        margin-bottom: 74px;
        margin-top: -364px;
    }
    .team-builder{
        margin-top: -165px;
    }
    .supervisor{
        margin-left: 20px;
    }



    Enter fullscreen mode
    


    Exit fullscreen mode
    




To guarantee a smooth transition from mobile to desktop, the desktop screen was constructed with a 1024px media query.

@media (min-width: 1024px)



    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  Conclusion
Overall, this project is suitable for beginners who want to put their skills at building multi-column CSS grids and responsive layouts to the test.
  
  
  Links to my solution:
1) https://github.com/thelastmedici/four-card-feature-section2) live-link