CursosEmpresasBlogLiveConfPrecios

Estilos CSS para Tarjetas de Beneficios Responsivas

Clase 20 de 32 • Curso de Responsive Design: Maquetación Mobile First

Clase anteriorSiguiente clase
Resumen

Luego de aplicar los estilos en la sección de beneficios, vamos a crear los estilos de las tarjetas de la segunda sección en que estamos trabajando.

Por supuesto, empezamos por el contenedor y luego el contenido.

Crear estilos en el contenedor

  • Llamamos la clase del contenedor de la primera tarjeta con .product-detail–card.
  • Ajustamos su ancho al 90% y alto en 150px.
  • Le damos un ancho mínimo de 288px y un máximo de 400px. Esto es para que evite crecer más y se distorsione en pantallas muy grandes.
  • Añadimos un margen superior e inferior de 15px y lo hacemos auto a los lados para que se centre.
  • Añadimos un padding de 15px.
  • Un color de fondo –black para que contraste con el color del contenedor principal.
  • Redondeamos sus esquinas con border-radius: 5px.
  • Creamos una sombra para la caja con ***box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16)***.
.product-detail--card {
    width: 90%;
    min-width: 288px;
    max-width: 400px;
    height: 150px;
    margin: 15px auto;
    padding: 15px;
    background-color: var(--black);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}

Aplicando estilos al ícono

  • Llamamos la clase de nuestra etiqueta span desde la clase de su contenedor.
  • Colocamos display: inline-block para que el ícono ocupe una línea de espacio.
  • Le damos un alto y ancho de 20px.
  • Añadimos un margin-bottom: 10px.
  • Agregamos el ícono con ***background-image: url(""***).
  • Ajustamos que ocupe toda la caja con cover, lo centramos y nos aseguramos que no se llegue a repetir la imagen.
.product-detail--card .clock {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-image: url("./assets/icons/clock.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Aplicar estilos al texto

Ten en cuenta los siguientes dos elementos:

Título

  • Llamamos la etiqueta que contiene nuestro título por el nombre de su clase con .product–card-title.
  • Le damos un margin-bottom: 15px.
  • Ajustamos el tamaño de fuente en 1.8rem y le damos un ancho bold.
  • Ajustamos el interlineado en 1.8rem y le damos color con la variable –just-white.
.product--card-title {
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.8rem;
    color: var(--just-white);
}

Cuerpo

  • Llamamos la etiqueta que contiene nuestro texto cuerpo por el nombre de su clase con .product–card-body.
  • Ajustamos el tamaño de fuente en 1.4rem y le damos un ancho de 500.
  • Ajustamos el interlineado en 1.8rem y le damos color de #808080.
.product--card-body {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #808080;
}

El resultado final de la tarjeta se vería de esta forma:
image.png

¡Se ve muy bien! Como te habrás dado cuenta faltan otras tres tarjetas con sus respectivos contenidos. Esto te corresponde a ti. Toma lo aprendido y aplícalo en crear lo demás.

Recuerda que no hay una forma de lograrlo, sino múltiples. Así que inténtalo a tu manera y diviértete. Nos vemos más adelante para continuar trabajando en este proyecto.

Contribución creada por: José Miguel Veintimilla (Platzi Contributor).