Estilos CSS para Tarjetas de Beneficios Responsivas

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:

¡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).