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 and focus states for interactive elements
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
In this challenge, my hardest task was the adjust the image and the description of product to screen size appropriate, instead use <img> tag, I used a tag with background-img, this estrategy is common but hard too when we have to resize the components.
How I did what I saw:
<!-- html into <main id="main"></main> tag -->
<div class="image-prod" alt="perfume image"></div>
/* a part of page's css */
#container {
max-width: 35rem;
height: 28rem;
display: flex;
align-items: center;
border-radius: 0.5rem;
}
.image-prod {
background: var(--bg-image);
background-size: cover;
width: 50%;
border-radius: 0.5rem 0 0 .5rem;
height: 100%;
}
The JS was not necessary.
- Website - Portifólio
- Frontend Mentor - @Dex64ter
- Instagram - @davijozedjs