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
- Solution URL: GitHub
- Live Site URL: GitHub Pages
- VS Code
- Responsively
- Mozilla Firefox Developers editor
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- SASS
- Mobile-first workflow
I learned how to design cards based on just images and to do it responsively, also I practiced with flexbox, css and how to set-up gulp-sass environment in vscode, here is de build in CSS with used media query's. To implement media query in SASS I used the mixin's feature.
.card {
border-radius: 1rem;
background-color: hsl(0deg, 0%, 100%);
width: 37.5rem;
}
@media (min-width: 37.5rem) {
.card {
width: 70rem;
display: flex;
direction: column;
}
}
.contenedor {
max-width: 85%;
margin: 0 auto;
}
@media (min-width: 37.5rem) {
.contenedor {
margin: 0 4rem 0 4rem;
}
}
.imagen {
background-image: url(../../images/image-product-mobile.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
min-width: 100%;
min-height: 25rem;
border-radius: 1rem 1rem 0 0;
margin: 0;
}
@media (min-width: 37.5rem) {
.imagen {
background-image: url(../../images/image-product-desktop.jpg);
min-width: 50%;
border-radius: 1rem 0 0 1rem;
}
}
.header h1 {
font-family: "Fraunces", serif;
}
@media (min-width: 37.5rem) {
.header {
margin-top: 4rem;
}
}
I need to improve my habilities to start a gulp-sass environment because at first it takes time to do
- Udemy Course (in spanish) - Im studying this Udemy course and I learn really a lot
- Website (now on GitHub) - Francisco J Casado
- Frontend Mentor - @Franche020