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.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
Desktop preview (with hover button):
- Solution URL: Repository
- Live Site URL: Web page
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
I learned to put an image as a background
<div class="image">
</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);
- Website - Alejandro Morales Landeo
- Frontend Mentor - @amoraleslandeo
I wanna say thanks to my daily support Roberto 🙌😉 who has become my developer Mentor and guide through this process that is just beggining.