/four-card

Primary LanguageHTML

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

Links

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox

What I learned

@media (prefers-reduced-motion: no-preference) {
    * {
        scroll-behavior: smooth;
    }
}
box-shadow: 0 10px 30px 1px hsla(234, 12%, 34%, 0.2);
<section role="region" aria-label="system's quality as a supervisor" class="card greenish">

Continued development

I need to learn more about the behaviour of elements after they are wrapped into a div. When I nested two of my sections in a div, their width changed but I don't know why. Also, I need to investigate why my first card's width is different than other cards even though they all have the same classes.

Author