https://github.com/lia-oliveira/four-card-feature-section
A Four Card Feature Section solution for a Frontend Mentor challenge. Built with HTML and CSS, utilizing Flexbox and CSS Grid to create a fully responsive website.
https://github.com/lia-oliveira/four-card-feature-section
card-feature challenge css css-flexbox css-grid frontend-mentor html html-semantico layout-responsive layout-responsivo
Last synced: about 2 months ago
JSON representation
A Four Card Feature Section solution for a Frontend Mentor challenge. Built with HTML and CSS, utilizing Flexbox and CSS Grid to create a fully responsive website.
- Host: GitHub
- URL: https://github.com/lia-oliveira/four-card-feature-section
- Owner: lia-oliveira
- Created: 2024-11-24T19:25:25.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-11-28T10:51:33.000Z (6 months ago)
- Last Synced: 2025-02-07T07:41:32.494Z (3 months ago)
- Topics: card-feature, challenge, css, css-flexbox, css-grid, frontend-mentor, html, html-semantico, layout-responsive, layout-responsivo
- Language: CSS
- Homepage: https://four-card-feature-section-brown-theta.vercel.app
- Size: 218 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Four card feature section solution
This is a solution to the [Four card feature section challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/four-card-feature-section-weK1eFYK). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Frontend Mentor - Four card feature section solution](#frontend-mentor---four-card-feature-section-solution)
- [Table of contents](#table-of-contents)
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
## Overview
### The challenge
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
### Screenshot
Preview:
My solution:
### Links
- Solution URL: [Four Card Feature Section Repo](https://github.com/lia-oliveira/four-card-feature-section)
- Live Site URL: [Four Card Feature Section Live](https://four-card-feature-section-brown-theta.vercel.app/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- CSS Variables
### What I learned
There were many lessons learned. Positioning elements was certainly the most significant, but the ones listed below were also important:
1 - Merging rows in a CSS grid using span.
```css
.card--1 {
grid-column: 1;
grid-row: 1 / span 2;
align-self: center;
}
```
2 - Using the data-icon attribute in HTML5 to reference an icon added to the layout via CSS.
```html
...
Monitors activity to identify project roadblocks
```
```css
.card__description[data-icon="supervisor"]::after {
content: "";
background-image: url('./../images/icon-supervisor.svg');
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
width: 64px;
height: 64px;
position: absolute;
right: 3rem;
top: calc(55% + 0.5rem);
}
```
3 - Applying BEM modifiers to change the card's header colors.
```css
.card--cyan {
border-top: 3px solid var(--co-Primary-cyan);
}
```
### Continued development
I definitely need more practice with positioning elements using CSS Grid.
### Useful resources
The main resources I used were:
[Complete Guide Grid - CSS Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/)
[CSS Grid Layout Guia Completo - Origamid](https://www.origamid.com/projetos/css-grid-layout-guia-completo/)
[CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout)
[CSS Grid](https://www.alura.com.br/artigos/css-grid-guia-propriedades-grid-container-grid-item?srsltid=AfmBOopuPEd-vj69wAlyypzRAjRUgEEHBBGvFuyrHe4NejKAlBwhHFCX)
[CSS Flexbox Guia Completo](https://origamid.com/projetos/flexbox-guia-completo/)
## Author
- Website - [Github](https://github.com/lia-oliveira)
- Frontend Mentor - [@lia-oliveira](https://www.frontendmentor.io/profile/lia-oliveira)
- Twitter - [@byliaoliveira](https://x.com/byliaoliveira)