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

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

Screenshots

Screenshot Desktop 1440px

Screenshot Mobile 376px

Screenshot Mobile 333px

Links

• Solution URL: product-card
• Live Site URL: product-card

My process

Built with

• HTML5
• CSS
• Flexbox

What I learned

I had the opportunity to implement my knowledge of html, css and flexbox, in such a way that it can greatly improve my skills in these tools.

/* MEDIA QUERIES */
@media (min-width: [width]) and (max-width: [width]) {
  /* ... */
}

/* VARIABLES */
:root {
   --dark-cyan: hsl(158, 36%, 37%);
}

/* FILTERS */
.card__image--perfume {
    filter: brightness(80%);
    filter: saturate(100%);
}

/* USE VARIABLES */
.card__description--details {
    color: var(--dark-grayish-blue);
}

/* EXPAND AN IMAGE */
.card__image--perfume {
    object-fit: cover;
}

Continued development

Useful resources

Author

• Website - product-card
• Frontend Mentor - @fdippiton
• Twitter - @f_dippiton

Acknowledgments