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.