Skip to content

f-lajoc/product-card

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

product-card

We Code |Frontend Mentor - Product preview card component solution

This is a solution to the Product preview card component challenge on Frontend Mentor.

Table of contents

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

Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Media Query
  • Mobile-first workflow

What I learned

To really use Flexbox,

Using 'content property' in css to add images instead of background image or not putting the image in my html.

'em unit' can be used for images and still turn out pretty

Continued development

I would love to get better at Flex

Start using 'picture element'(srcset) for Responsiveness in my coming projects

Useful resources

Author

Acknowledgments

About

We Code |Frontend Mentor - Product preview card component solution

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published