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.
- Solution URL: GitHub
- Live Site URL: GitHub Page
- HTML
- CSS variables
- SCSS
- BEM
- Flexbox
In the current projection, I have attempted to apply the SCSS.
<div class="card__left">
<img
src="./images/image-product-desktop.jpg"
alt="Chanel Paris Perfume"
class="card__image"
/>
</div>
.card {
&__left {
width: 50%;
}
&__image {
width: 100%;
height: 100%;
}
}
@media (max-width: 375px) {
.card {
&__left {
width: 100%;
height: 40%;
}
&__image {
object-fit: cover;
}
In the next task I will explore the secrets of the preprocessor.
- SCSS - This page helped me understand how SCSS works.
- Frontend Mentor - @maciej-szeremeta