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.

If you can suggest any improvements or have seen any thing I should know then feel free to let me know.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

In this challenge we have to code the given design of what frontend mentor named as 3 column preview card components. These are comparatively easy challanges in newbie section. The screenshot below shows you my take on this challenge.

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

This is the screenshot of the challenge solution by me.

Links

• Frontend Mentor Solution: URL
• Live Site: URl

My process

The design output is as asked, however I have take a different approach on this to make the border-radius work in both horizontal and on vertical view card (or desktop view or mobile view) by a wrapping individual card inside a main div and then applying the border-radius on the main div, and then overflow hidden will cover the extra visible corners.

Built with

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

What I learned

I got to know about the min/max width & height importance while coding the cards and I learned about a new thing which I haven't used untill now that is the mix-blend-mode.

• mix-blend-mode property of an element is used to specify the blending of an element’s background with the element’s parent. This property I used on the button "Learn More", which enabled the button text color to blend with their respective parent cards background-colors. To see code snippets, see below:

<a href="#" class="btn"> Learn More </a>

.btn{
  display: inline-block;
  margin-top: 1.625rem;
  text-decoration: none;
  border: 2px solid white;
  border-radius: 100vw;
  font-size: 1rem;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 400;
  background-color: var(--very-light-gray);
  mix-blend-mode: screen;    /* <--  this is where is used the mode */
  padding: 0.75rem 1.5rem;
  transition: background-color 0.3s ease-in;
}

Useful resources

• mix-blend-mode - This helped me for blending button color. I really liked this pattern and will use it going forward.

Author

• Frontend Mentor - @v-codey