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.

• Overview
  • The challenge
  • Screenshot
  • Links
  • Built with
  • What I learned
• Author
• Acknowledgments

Users should be able to:

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

• Solution URL: Click here for code solution
• Live Site URL: View the Live Site Here

• HTML
• CSS custom properties
• Flexbox
• Visual Studio Code

This CSS code was intersting to us and showed us we can do border radius specifically to the top, right, left or bottom of an element.

.card-one{
    background-color: hsl(31, 77%, 52%);
    border: #5E5DF0;
    height: 700px;
    border-top-left-radius: 20px;
    border-bottom-left-radius:20px ;
}

• Website - UbaidRussell.com
• Frontend Mentor - @UbaidRussell
• Twitter - @Ubaidussell

Shoutout to all the developers who created the tools for me to create and make this possible.