Estilos CSS para Sección de Beneficios en HTML

En la estructura base de la sección de beneficios maquetamos las etiquetas necesarias y sus clases respectivas para empezar a aplicar estilos. ¡Pues ahora es el momento! Vamos a nuestro archivo .css y empezemos con la sección del título.

Aplicar estilos en el contenedor principal

• Llamamos la clase del contenedor de la sección con .main-product-detail.
• Le asignamos un position: relative. Esto es porque el contenedor del logo flotante se creará con position: absolute. Para que un position: absolute pueda posicionarse, busca al primer contenedor padre que tenga un position: relative. Por esto lo colocamos aquí y se mantenga en este contenedor.
• Ajustamos su ancho en un 100% y lo limitamos en un mínimo de 320px.
• Colocamos la altura en auto para que se ajuste a lo que necesite el contenedor.
• Añadimos un padding 20px arriba y abajo y 10px a los lados.

.product-detail--title {
    position: relative;
    width: 100%;
    min-width: 320px;
    height: auto;
    padding: 20px 10px;
    background-color: var(--warm-black);
}

Pasos para aplicar estilos al logo

• Llamamos la clase directa de la etiqueta span del logo con .product-detail–batata-logo.
• Le asignamos un position: absolute para que esté por encima de los demás elementos.
• Ajustamos un ancho en 40px y un alto en 25px.

Para centrarlo entre las dos secciones:

• Elevamos la mitad del logo hacia fuera del contenedor con top: -10px.
• Lo centramos con ***left: calc(50% - 20px)***, donde 50% lo coloca en la mitad, pero no lo centra. Esto se debe a que el logo tiene dimensiones (40px para ser precisos), y como queremos que esté justo en la mitad, le quitamos la mitad de su ancho (20px), posicionándolo justo en el centro.
• Llamamos la imagen con ***background-image: url("")***.

.product-detail--batata-logo {
    position: absolute;
    width: 40px;
    height: 25px;
    top: -10px;
    left: calc(50% - 20px);
    background-image: url("./assets/icons/batata.svg");
}

Agregar estilos al título

Ten en cuenta estos 3 elementos:

Contenedor

• Llamamos la clase del contenedor de nuestro título con .product-detail–title.
• Ajustamos su ancho para que ocupe el 90% de su contenedor principal.
• Establecemos el ancho mínimo en 288px.
• Colocamos el alto en auto para que ocupe lo que necesite el texto. Esto es una buena práctica para que el texto reaccione bien sin importar que tanto se vea comprimido por el ancho.
• Lo centramos con un margin: 0 auto.
• Separamos el texto del extremo superior con un margin-top: 50px.
• Centramos el texto con text-align: center.

.product-detail--title {
    width: 90%;
    min-width: 288px;
    height: auto;
    margin: 0 auto;
    margin-top: 50px;
    text-align: center;
}

H2

• Llamamos la etiqueta h2 desde su contenedor directo con .product-detail–title h2.
• Aplicamos un margin-bottom: 20px para separarlo del párrafo de abajo.
• Ajustamos el tamaño de la fuente a 2.4rem y aplicamos un grosor bold.
• Ajustamos el interlineado en 2.6rem.
• Cambiamos el color con la variable –just-white.

.product-detail--title h2 {
    margin-bottom: 20px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}

p

• Llamamos la etiqueta p desde su contenedor directo con .product-detail–title p.
• Aplicamos un margin-bottom: 20px para separarlo de las secciones de abajo.
• Ajustamos el tamaño de la fuente a 1.4rem y aplicamos un grosor de 500.
• Ajustamos el interlineado en 1.8rem.
• Cambiamos el color a #808080 como nos indica el diseño en Figma.

.product-detail--title p {
    margin-bottom: 20px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #808080;
}

En el navegador, podríamos observar este resultado:

¡Y bien! Recordamos algo importante sobre el position: absolute y su relación directa con su padre con position: relative. Ahora hay que trabajar en las secciones de información de nuestra sección de beneficios.

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