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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover and focus states for interactive elements

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: GitHub Pages

My process

Built with

• VS Code
• Responsively
• Mozilla Firefox Developers editor
• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• SASS
• Mobile-first workflow

What I learned

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;
  }
}

Continued development

I need to improve my habilities to start a gulp-sass environment because at first it takes time to do

Useful resources

• Udemy Course (in spanish) - Im studying this Udemy course and I learn really a lot

Author

• Website (now on GitHub) - Francisco J Casado
• Frontend Mentor - @Franche020