Frontend Mentor - 3-column preview card component solution

This is a solution to the 3-column preview card component 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
  • Continued development
• Author

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements

Screenshot

Links

• Solution URL: (https://www.frontendmentor.io/solutions/mobilefirst-3-column-preview-card-ASKApDFDf)
• Live Site URL: (https://marcosfsousa.github.io/three-card-column/)

My process

Built with

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

What I learned

:root {
    --brightorange: hsl(31, 77%, 52%);
    --darkcyan: hsl(184, 100%, 22%);
    --verydarkcyan: hsl(179, 100%, 13%);
    --transparentwhite: hsla(0, 0%, 100%, 0.75);
    --verylightgray: hsl(0, 0%, 95%);
}

Continued development

I will continue to develop these areas: CSS Custom Properties, Responsive Design

Author

• Frontend Mentor - (https://www.frontendmentor.io/profile/marcosfsousa)
• Linkedin- (https://www.linkedin.com/in/omarcossousa/)