Estilizando nuestro sitio web: Promotions

← Diseño Web ⌂ Home

Sección de promociones

La sección de promociones debe resaltar, para lograr eso crearemos un HERO con una imagen de fondo fullscreen. Lo primero, cambiar la estructura de nuestro HTML de la sección:

 <section id="promociones" class="promotions-hero">
    <div class="promotions-inner">
        <h2 class="promotions-title">Promociones</h2>
        <p class="promotions-subtitle">
            En la compra de 2 playeras llévate la tercera <strong>¡GRATIS!</strong>
        </p>
        <a href="#contacto" class="promotions-btn">¡Informes!</a>
    </div>
</section>

Lo siguiente, hacer que ocupe el total de alto y ancho de la pantalla:

.promotions-hero {
    width: 100vw;
    height: 100vh;

    max-width:100%; 
}

Textos

Los textos debemos centrarlos, tanto vertical como horizontal y lo haremos con ayuda de flex:

.promotions-hero {
    width: 100vw;
    height: 100vh;

    max-width:100%; 

    display: flex;
    justify-content: center;
    align-items: center;
}

Observemos que lo que se centró fueron los elementos, no el texto en sí, así que con ayuda de la alineación podremos lograrlo también:

.promotions-hero {
    width: 100vw;
    height: 100vh;

    max-width:100%; 

    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;
}

Ahora mejoremos el texto cambiando el tamaño y márgen:

.promotions-title {
    font-size: 5rem;
    margin-top: 0;
    margin-bottom: 0.5em;
}

Botón

Tenemos que estilizar el botón, lo primero será posicionarlo, bordes, padding y márgenes:


.promotions-btn {
    display: block;
    width: 200px;
    border: 3px solid black;
    padding: 1em;
    margin-top: 50px;
}

Podemos ver que el botón no se centra correctamente, esto es por que tiene un ancho fijo, a diferencía de los otros elementos. Para centrarlo únicamente hay que hacer que los márgenes laterales tomen el valor de auto:

.promotions-btn {
    display: block;
    width: 200px;
    border: 3px solid black;
    padding: 1em;
    margin-top: 50px;

    margin-left: auto;
    margin-right: auto;
} 

Y estilizaremos el botón para hacerlo más atractivo, cambiando su tamaño, color, background, etc.

.promotions-btn {
    display: block;
    width: 200px;
    border: 3px solid white;
    padding: 1em;
    margin-top: 50px;

    margin-left: auto;
    margin-right: auto;

    color: white;
    text-decoration: none;
    font-size: 1.5rem;
    border-radius: 20px;
    background-color: rgba(147, 112, 219, 0.8);
}       

Background

Vamos a colocar la imagen que tenemos en nuestra parte del header de la siguiente forma:


.promotions-hero {
    width: 100vw;
    height: 100vh;

    max-width:100%; 

    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;

    background-image: url('../img/hero-background.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Hace que la imagen se quede en el mismo lugar cuando hacemos scroll */
}

Toques finales

Lo primero que notamos es que el texto no es muy legible aún, un truco es agregar una pequeña opacidad a la imagen con una capa superior y cambiar los textos a blanco.

Entonces empecemos por el color del texto:

.promotions-hero {
    width: 100vw;
    height: 100vh;

    max-width:100%; 

    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;

    background-image: url('../img/hero-background.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Hace que la imagen se quede en el mismo lugar cuando hacemos scroll */

    color: white;
}

.promotions-title {
    font-size: 5rem;
    margin-top: 0;
    margin-bottom: 0.5em;

    color: white;
}

Y ahora agregaremos otra imagen que servira para lograr el efecto que queremos. El truco está en que podemos tener dos imagenes de fondo para el mismo elemento pero una de ellas debe ser un gradiente. Observemos la línea del background-image como cambió:

.promotions-hero {
    width: 100vw;
    height: 100vh;

    max-width:100%; 

    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;

    background-image: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4)), url('../img/hero-background.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Hace que la imagen se quede en el mismo lugar cuando hacemos scroll */

    color: white;
}