Frontend Mentor - Product preview card component solution

This is a solution to the Product 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

Note: Delete this note and update the table of contents based on what sections you keep.

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

Active State

Mobile Design

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

Continued development

I am also thinking to make this design in css grid also.On future projects I will try to use CSS Grid and also I will try to use more advance CSS properties.

Useful resources

• InternetingIsHard - This webiste has realy amazing toutorial for html and css. It had explained the topics such with simplicty it is very useful if you want to start with html and css.
• Css Tricks - This is an amazing website for Css-Tricks. Kevin Powell The king of css has explained the CSS-Flexbox and Gridbox in very amazig and easy to learn way.

Author

• 
• 
• 
• Frontend Mentor - @Munsif-Ali