Building a Responsive Four Card Feature Section
Introduction
In this blog post, I will walk you through the process of building a responsive Four Card Feature Section. This project is a solution to the Frontend Mentor Four Card Feature Section challenge. The goal is to create a layout that displays four feature cards in a diamond formation on desktop screens and a column layout on mobile screens.
Project Overview
The Four Card Feature Section is a simple yet elegant design that showcases four key features of a product or service. Each card contains a title, a description, and an icon. The cards are color-coded to differentiate between the features.
Technologies Used
- HTML5
- CSS3
- CSS Grid
- Flexbox
- Google Fonts
Project Structure
The project consists of three main files:
index.html
: The HTML structure of the project.
styles.css
: The main CSS file for styling the project.
medias.css
: The CSS file for media queries to handle responsive design.
HTML Structure
The HTML structure is straightforward. It includes a main container that holds the title section and the card section. Each card is represented by a div element with a class of card and specific classes for each feature.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frontend Mentor | Four card feature section</title>
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="./medias.css">
<link href="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" rel="stylesheet">
</head>
<body>
<main>
<section class="container">
<section class="title-container">
<h1 class="text-preset-1">Reliable, efficient delivery</h1>
<h2 class="text-preset-1-bold">Powered by Technology</h2>
<p class="text-preset-2 title-text">Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful</p>
</section>
<section class="card-section">
<div class="card supervisor-card">
<div class="rectangle color1"></div>
<div class="card-text">
<h3 class="text-preset-3 card-title">Supervisor</h3>
<p class="text-preset-4 card-info">Monitors activity to identify project roadblocks</p>
</div>
<picture class="icon image1"></picture>
</div>
<div class="card team-builder-card">
<div class="rectangle color2"></div>
<div class="card-text">
<h3 class="text-preset-3 card-title">Team Builder</h3>
<p class="text-preset-4 card-info">Scans our talent network to create the optimal team for your project</p>
</div>
<picture class="icon image2"></picture>
</div>
<div class="card karma-card">
<div class="rectangle color3"></div>
<div class="card-text">
<h3 class="text-preset-3 card-title">Karma</h3>
<p class="text-preset-4 card-info">Regularly evaluates our talent to ensure quality</p>
</div>
<picture class="icon image3"></picture>
</div>
<div class="card calculator-card">
<div class="rectangle color4"></div>
<div class="card-text">
<h3 class="text-preset-3 card-title">Calculator</h3>
<p class="text-preset-4 card-info">Uses data from past projects to provide better delivery estimates</p>
</div>
<picture class="icon image4"></picture>
</div>
</section>
</section>
</main>
</body>
</html>
CSS Styling
The CSS is divided into two files:
styles.css
for the main styling and
medias.css
for media queries.
styles.css
This file contains the base styles, including global resets, text presets, and mobile layout styles.
/* Global Styles */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
body {
background-color: #FAFAFA;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* Text Presets */
.text-preset-1 {
color: #4D4F62;
font-family: "Poppins", sans-serif;
font-size: 1.5rem;
font-weight: 300;
letter-spacing: 0.01rem;
}
.text-preset-1-bold {
color: #4D4F62;
font-family: "Poppins", sans-serif;
font-size: 1.5rem;
font-weight: 600;
letter-spacing: 0.01rem;
}
.text-preset-2 {
color: #4D4F62;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 0.938rem;
font-weight: 400;
line-height: 1.563rem;
letter-spacing: 0.007rem;
opacity: 0.5;
}
/* Mobile Layout */
main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 375px;
}
.title-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 10.063rem;
width: 19.438rem;
margin: 5.313rem 2rem 4.875rem 2rem;
}
.card-section {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin: 0 2rem 4.875rem 2rem;
}
.card {
display: flex;
flex-direction: column;
background: #FFFFFF;
border-radius: 0.5rem;
box-shadow: 0px 15px 30px -11px rgba(131, 166, 210, 0.50);
height: 13.875rem;
width: 19.438rem;
}
.rectangle {
width: 100%;
height: 0.222rem;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
.color1 {
background-color: #44D3D2;
}
.color2 {
background-color: #EA5454;
}
.color3 {
background-color: #FCAE4A;
}
.color4 {
background-color: #549EF2;
}
.card-title {
padding-top: 1.75rem;
padding-left: 1.75rem;
}
.card-info {
padding-left: 1.75rem;
padding-right: 1.75rem;
padding-bottom: 1.75rem;
}
.icon {
height: 3.563rem;
width: 3.563rem;
margin-right: 1.75rem;
padding-top: 1.75rem;
padding-right: 1.75rem;
padding-bottom: 1.75rem;
align-self: flex-end;
}
.image1 {
background: url(./images/icon-supervisor.svg) 50%/cover no-repeat;
}
.image2 {
background: url(./images/icon-team-builder.svg) 50%/cover no-repeat;
}
.image3 {
background: url(./images/icon-karma.svg) 50%/cover no-repeat;
}
.image4 {
background: url(./images/icon-calculator.svg) 50%/cover no-repeat;
}
medias.css
This file contains the media queries to handle the responsive design. It adjusts the layout for larger screens, arranging the cards in a diamond formation.
@media (min-width: 75rem) {
main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 5rem;
}
.text-preset-1, .text-preset-1-bold {
font-size: 2.25rem;
}
.container {
width: 100%;
max-width: 75rem;
gap: 4rem;
}
.title-container {
width: 100%;
max-width: 33.75rem;
margin: 2rem auto;
}
.card-section {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 2rem;
width: 100%;
margin: 0 auto;
}
.card {
width: 21.875rem;
height: 15.625rem;
}
.rectangle {
height: 0.5rem;
}
.card-title {
padding-top: 1rem;
padding-left: 1rem;
}
.card-info {
padding-left: 1rem;
padding-right: 1rem;
max-width: 19rem;
}
.icon {
height: 4rem;
width: 4rem;
margin-top: 2rem;
margin-right: 1.75rem;
margin-bottom: 1.75rem;
padding-top: 1rem;
padding-right: 1rem;
padding-bottom: 1rem;
}
.supervisor-card {
grid-column: 2 / 3;
grid-row: 2 / 4;
}
.team-builder-card {
grid-column: 3 / 4;
grid-row: 1 / 3;
}
.karma-card {
grid-column: 3 / 4;
grid-row: 3 / 5;
}
.calculator-card {
grid-column: 4 / 5;
grid-row: 2 / 4;
}
}
Key Learnings
- CSS Grid: Using CSS Grid allowed me to create a complex layout with ease. The diamond formation of the cards was achieved by positioning the cards in specific grid columns and rows.
- Responsive Design: Media queries were essential in making the design responsive. The layout changes from a column layout on mobile screens to a diamond formation on desktop screens.
Conclusion
Building the Four Card Feature Section was a great learning experience. It helped me improve my skills in CSS Grid, Flexbox, and responsive design. I encourage you to try this project and see how you can customize it to fit your needs.
You can view the live project here and the source code here.
Top comments (0)