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
  • Useful resources
• Author
• Acknowledgments

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: Frontendmentor.io
• Live Site URL: Vercel's live site URL here

My process

Built with

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

What I learned

I learned to structurate CSS from general to particular styles beginning from variables and global selectors like root, html and *.

:root {
  --Bright-orange: hsl(31, 77%, 52%);
  --Dark-cyan: hsl(184, 100%, 22%);
  --Very-dark-cyan: hsl(179, 100%, 13%);
  --Transparent-white-paragraphs: hsla(0, 0%, 100%, 0.75);
  --Verylight-gray-background-headings-buttons: hsl(0, 0%, 95%);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 15px;
}

body {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Lexend Deca", sans-serif;
  background-color: var(--Verylight-gray-background-headings-buttons);
}

Use of pseudo-classes: The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements.

p:first-of-type {
  text-transform: uppercase;
  color: var(--Verylight-gray-background-headings-buttons);
  font-size: 30px;
  font-family: "Big Shoulders Display", cursive;
  margin: 30px 0 30px 0;
}
p:last-of-type {
  color: var(--Transparent-white-paragraphs);
  line-height: 25px;
  padding-right: 20px;
}

The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

.sedan-box button:hover {
  background-color: var(--Bright-orange);
  color: var(--Verylight-gray-background-headings-buttons);
}

Continued development

In future challenges I plan to use Tailwindcss for styling and Vite as frontend development environmnt.

Useful resources

• First of type pseudo-class in order to reduce the amount of repeated code.
• Hover pseudo-class - Hover pseudo-class for active states.

Author

• Website - Gustavo Sanchez
• Frontend Mentor - @gusanchedev
• Github - @gusanchedev
• Twitter - @gusanchedev
• Linkedin - gusanchedev

Acknowledgments

Thanks to Mariapaz for being my friend and support 💙