Four Cards

Table of contents

• Overview
  • Screenshot and live site URL
• My process
  • Built with
  • What I learned
  • Useful resources
• Author
• Inspired by

Overview

Screenshot and live site URL

Desktop	Tablet	Mobile

Live Site URL

My process

Built with

• CSS grid
• CSS Flexbox

What I learned

1. This was my first time working with CSS Grid, and I have to say—it was such a fun learning experience! I was already familiar with Flexbox and had built a few things with it before, but creating a 2D layout using Grid opened up a whole new world. At first, I struggled a bit with setting up the layout, but then it clicked: I could combine Grid and Flexbox! That made everything so much easier to structure and style.

2. I also learned how to use the ::before pseudo-element in CSS to add some nice visual flair to elements. I was thrilled when I managed to implement a colorful top border for my card components using this technique. The little detail—especially with the smooth, rounded corners—really added a nice touch to the overall design:

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background: cyan;
}

Useful resources

• ::before pseudo-element

Author

• Github - @AminForouzan
• Frontend Mentor - @AminForouzan

Inspired by

• Four card feature section challenge on Frontend Mentor.