Skip to content

Latest commit

 

History

History
121 lines (85 loc) · 3.34 KB

README.md

File metadata and controls

121 lines (85 loc) · 3.34 KB

Frontend Mentor - Four card feature section solution

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.

Table of contents

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

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.

.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.

<article class="card card--cyan card--1">
   ...
   <p class="card__description" data-icon="supervisor">Monitors activity to identify project roadblocks</p>
      </article>
.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.

.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

CSS Grid Layout Guia Completo - Origamid

CSS Grid Layout

CSS Grid

CSS Flexbox Guia Completo

Author