This is a solution to the Four card feature section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
| Mobile (375px) | Tablet (768px) | Desktop (1440px) |
|---|---|---|
 |
 |
 |
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Parcel
Nothing special about this one, but one little detail I implemented is the colored borders on the top of the feature cards. Normally, what most people will do is set a border on the card container itself, but since the card has a border-radius, this means the border will also look rounded a little while the design doesn't. To overcome this, I moved the border to an inner container which means the border will not be rounded because .card-content isn't and I added an overflow: hidden to .card to hide the part of the border sticking out from the card.
...
.card {
...
border-radius: 0.5em;
...
overflow: hidden;
}
.card-content {
border-top: 0.3em solid var(--card-border-color);
...
}
...This was the first time I worked with CSS Grid after a very long time. While I forgot the syntax, I didn't forget how dead-simple it was to create layouts with CSS Grid, so it's definitely on my list to get better at and use more for future challenges.
- A Complete Guide to Grid - CSS Tricks is the place to go to for all things CSS, this one helped me remember how to use CSS Grid.
- Website - Mohamed ELIDRISSI
- Frontend Mentor - @elidrissidev
This project is licensed under the MIT License.