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

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

• Desktop view
• Mobile view

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My Process

Built with

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

What I learned

Learn about writing clean Html architecture and structure the css file Learn about media queries and CSS grid as a way to make a responsive layout

To see how you can add code snippets, see below:

section {
  ...,
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 716px) {
  section {
    grid-template-columns: 1fr;
  }

  .first {
    border-radius: 10px 10px 0 0;
  }

  .third {
    border-radius: 0 0 10px 10px;
  }

  .card {
    max-width: 274.5px;
    height: 430px;
    min-width: 200px;
  }
}

Author

• Website - Add your name here
• Frontend Mentor - @Dodolight
• Twitter - @Donan82838492