Skip to content

kens-visuals/four-card-feature-section

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Frontend Mentor - Four Card Feature Section Solution

This is a solution to the Four Card Feature Section Challenge on Frontend Mentor.

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

screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • SCSS custom properties
  • CSS Flexbox
  • CSS Grid
  • Mobile-first workflow

Continued development

I've had a lot of fun building this project, here is why. I've wanted to work on a project that will allow me to use both CSS Flexbox and CSS Grid at the same time, that will fit to the needs of the project harmonically. This project was the perfect candidate to achieve what I've wanted to do for a while. Moreover, this was a perfect project to use BEM convention. There are a lot of pieces that are technically the same, so BEM helped me to use its power to shorten my CSS, and of course BEM + SCSS makes both of them even more powerful.

Useful resources

  • Box Shadow Collection - This is a really good collection of various CSS box-shadows by CSS Scan, which helped me to achieve some cool hover effects.

Author