Product preview card component

---

Deseamos que este proyecto desate el genio frontend que llevas dentro.

Siempre procuramos crear un código coherente, limpio y ordenado, que facilite su compresión y lectura.

📁Código del proyecto

🌐Página web

🎨Diseño del proyecto

👋Hablemos

---

Estructura del proyecto

Puedes crear una carpeta en el disco c:\workspace\product-preview-card-component para almacenar este proyecto.

---

Setup

---

Código HTML

  <section class="card">
    <div class="card__img">
      <picture class="card__picture">
        <source media="(min-width: 1020px)" srcset="images/image-product-desktop.jpg">
        <source media="(min-width: 375px)" srcset="images/image-product-mobile.jpg">
        <img src="images/image-product-desktop.jpg" alt="Parfum Product" class="card__picture-img">
      </picture>
    </div>
    <div class="card__content">
      <span class="card__content-stitle">Perfume</span>
      <h1 class="card__content-mtitle">Gabrielle Essence Eau De Parfum</h1>
      <p class="card__content-text">A floral, solar and voluptuous interpretation composed by Olivier Polge,
        Perfumer-Creator for the House of CHANEL.</p>
      <div class="price">
        <span class="price--new">$149.99</span>
        <del class="price--old">$169.99</del>
      </div>
      <a href="#" class="button">
        <img src="images/icon-cart.svg" alt="icon cart" class="button--icon">
        <span class="button--text">Add to Cart</span>
      </a>
    </div>
  </section>

---

Código CSS

/* Fuente */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&display=swap');

:root {
  /* Colores primarios*/
  --dark-cyan-color: hsl(158, 36%, 37%);
  --cream-color: hsl(30, 38%, 92%);

  /* Colores neutrales */
  --very-dark-blue: hsl(212, 21%, 14%);
  --dark-grayish-blue: hsl(228, 12%, 48%);
  --white-color: hsl(0, 0%, 100%);

  /* Fuentes */
  --fuente-montserrat: 'Montserrat', sans-serif;
  --fuente-fraunces: 'Fraunces', serif;
}

body {
  font-family: var(--fuente-montserrat);
  font-size: 18px;
  color: var(--dark-grayish-blue);
  background-color: var(--cream-color);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Card styles */
.card {
  width: 90%;
  border-radius: 10px;
  background-color: var(--white-color);
  box-shadow: 3px 6px 4px rgba(0, 0, 0, .1);
}

.card__picture-img {
  width: 100%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* Content styles */
.card__content {
  padding: 20px;
}

.card__content-stitle {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 5px;
}

.card__content-mtitle {
  color: var(--very-dark-blue);
  font-family: var(--fuente-fraunces);
  font-size: 32px;
}

.card__content-text {
  margin-top: -10px;
  font-size: 14px;
  line-height: 28px;
}

/* Price styles */
.price {
  display: flex;
  align-items: center;
}

.price--new {
  font-size: 40px;
  font-family: var(--fuente-fraunces);
  color: var(--dark-cyan-color);
}

.price--old {
  margin-left: 20px;
}

/* Button styles */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  background-color: var(--dark-cyan-color);
  color: var(--white-color);
  font-weight: 700;
  margin-top: 20px;
  text-decoration: none;
  cursor: pointer;
  border-radius: 8px;
}

.button--icon {
  width: 22px;
}

.button--text {
  margin-left: 15px;
}


/* Media queries */
@media screen and (min-width: 1020px) {

  body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-size: 14px;
  }

  .card {
    width: 650px;
    height: 500px;
    display: flex;
    flex-direction: row;
    box-shadow: 1px 1px 9px rgba(0, 0, 0, .1);
  }

  .card__img {
    width: 500px;
  }

  .card__picture-img {
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 10px;
  }

  .card__content {
    padding: 30px;
  }

  .card__content-stitle {
    font-weight: 700;
  }

  .card__content-mtitle {
    margin-top: 20px;
    font-size: 45px;
    line-height: 45px;
    width: 280px;
  }

  .card__content-text {
    margin: -10px 0 30px;
    width: 230px;
  }

  .price {
    margin-top: -10px;
  }

  .button {
    margin-top: 25px;
  }

  .button:hover {
    background-color: hsl(158, 50%, 15%);
  }

}

---

Conclusión

¡La práctica hace al maestro!

Deseo y te animo a seguir programando, codificando y estudiando para convertirte en un desarrollador web frontend altamente competitivo.

Este proyecto es original de Frontend Mentor.

Si tienes algo en mente, no dudes en escribirme, casi siempre respondo de inmediato.

¡Feliz aprendizaje!👋