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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

Four Card Feature Section Design As the name suggest this design focuses on a Title and four cards design, with each card having its function.

The challenge

The Challenge was to make a replica of the design provided in the design folder.

Screenshot

Links

• Live Site URL: Live site URL

My process

The process of this build started with applying the proper HTML semantic markup, necessary div containers to style the elements. The major CSS Tools used for this build are, Grid and Positioning, follwed the use of margins paddings etc...

Built with

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

What I learned

This challenge helped me challenge myself in using CSS tools as i was kinda in a fix then i remebered what i had learned so far and it all came together. Still continued on Learning how to properly use grid.

Author

• Frontend Mentor - @modade97
• Twitter - @modadegospel