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.

Overview
My process
- Built with
- What I learned
Author
Acknowledgments

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

Desktop preview:

Desktop preview (with hover button):

Responsive:

My process

Built with

Semantic HTML5 markup
CSS custom properties
Flexbox

What I learned

I learned to put an image as a background

<div class="image">
  &nbsp;
</div>

Also learned this sequence of attributes to adapted an image inside a background

.image {
    width: 300px;
    height: 450px;
    background-image: url('../images/image-product-desktop.jpg');
    background-size: contain;
    background-repeat: no-repeat;
}

I learned to use the 'overflow' attribute to adapt the images to a specific measurement of a background

overflow: hidden;

And i learned this attribute to calc any math operation

width: calc(300px - 31.5px - 31.5px);

Author

Website - Alejandro Morales Landeo
Frontend Mentor - @amoraleslandeo

Acknowledgments

I wanna say thanks to my daily support Roberto 🙌😉 who has become my developer Mentor and guide through this process that is just beggining.

amoraleslandeo/product-preview-card-component-figma.github.io