Product preview card component

Frontend Mentor Challenge

View Demo · Report Bug

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.

Links

• Solution URL: Product preview card component (HTML + SASS) | Frontend Mentor
• Live Site URL: https://product-card-component-c98bee.netlify.app/

Table of contents

• Overview
  • The challenge
• My process
  • Built with
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

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

My process

Built with

• Semantic HTML5 markup
• Accessibility
• SASS
• CSS Grid
• Flexbox

Useful resources

• Accessibility - Inclusively Hidden
• SASS

Author

• Frontend Mentor - @hector535