Diseño y Estilos de Sección de Intercambio con HTML y CSS

Empezamos la segunda sección de nuestro proyecto. Para crearla, primero debemos analizar el diseño que nos entregaron para empezar a maquetar en nuestro index.html. ¡Vamos a ello!

Cómo hacer la división de secciones

Lo primero es agregar una clase indentificadora a la primera de cuatro secciones que tenemos. Usando la metolodología BEM, class=""main-exchange-container"", creamos dentro el primer contenedor div en el que tendremos la imagen. Añadimos la clase backgroundImg.

Creamos el segundo contenedor div para el título h2 y el párrafo p, en el que añadimos el contenido escrito en el diseño. Añadimos la clase main-exchange-container--title, en que main-exchange-container es el bloque y title el elemento. Las tablas que muestra el valor de las monedas es una sección en sí, por lo que es más correcto crear un section en lugar de un div. El div lo colocamos dentro.

        <section class=""main-exchange-container"">
            <div class=""backgroundImg""></div>
            <div class=""main-exchange-container--title"">
                <h2>Visibilizamos todas las tazas de cambio.</h2>
                <p>Traemos información en tiempo real de las casas de cambio y las monedas más importantes del mundo.</p>
            </div>
            <section class=""main-tables-container"">
                <div></div>
            </section>
        </section>

Cómo aplicar estilos a las secciones

Hay 3 elementos que debes tener en cuenta:

main

Ajustamos el ancho al 100% y la altura en auto porque el mismo contenido que agreguemos definirá el espacio que vaya a ocupar.

Agregamos un min-width: 320px para que no se distorcione si llega a medidas más pequeñas.

Le damos un color de fondo con la variable --off-white.

main {
    width: 100%;
    min-width: 320px;
    height: auto;
    background-color: var(--off-white);
}

.main-exchange-container

Llamamos al primer contenedor principal en que estamos trabajando y ajustamos de igual manera el ancho al 100% y la altura en auto.

Añadimos un padding-top: 80px y un padding-bottom: 30px para agregar espacio tanto arriba como abajo.

Alineamos el texto al centro.

.main-exchange-container {
    width: 100%;
    height: auto;
    padding-top: 80px;
    padding-bottom: 30px;
    text-align: center;
}

.main-exchange-container--title

Llamamos al contenedor de la sección de texto y le damos un ancho del 90%. Limitamos el ancho mínimos a 288px y un máximo de 900px.

Añadimos un margin: 0 auto, para que, pese a no ocupar el 100% del ancho, esté siempre en el centro.

.main-exchange-container--title {
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    margin: 0 auto;
}

Hasta ahora visualizaremos esto en el navegador:

¡Muy bien! Nos falta agregar la imagen de fondo y unos estilos a las etiquetas de texto antes de pasar con la sección de las tablas.

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