Frontend Mentor - 3-column preview card component solution

This is a solution to the 3-column preview card component challenge on Frontend Mentor.

Table of contents

• 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.

Links

• Solution URL: [https://github.com/jdKheppar/3-column-card-component]
• Live Site URL: [https://jdkheppar.github.io/3-column-card-component/]

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• CSS Media Queries

What I learned

I have used three media queries for three different screen sizes and

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

element {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

The above css property will round the element from top-left or right and bottom-left or right. I also used google fonts.

Continued development

I want to learn some other ways to center the main content and apply other styles accordingly. I have plans to add a new media query regarding mobile landscape viewport

Author

• Website - Add your name here
• Frontend Mentor - [https://www.frontendmentor.io/profile/jdKheppar)