Estilizando nuestro sitio web: T-Shirts

← Diseño Web ⌂ Home

Título de la sección

Lo primero a estilizar van a ser los márgenes de la sección. Observamos que se encuentra dentro de la clase tshirts entonces empecemos por ahí:

.tshirts {
    background-color: #fafafa;
    padding: 20px
}

En clases pasadas agregamos un margen a cada playera, pero lo eliminamos para que queden alineados el título y las playeras, la propiedad a eliminar era la de margin:

.tshirt {
    border-color: #3B3B3B;
    border-width: 1px;
    border-style: solid;
    /* border: 1px solid #3B3B3B*/

    border-top-right-radius: 50px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 50px;

    padding: 20px;
    background-color: white;
}

Ahora seguimos con el título de la sección, vemos que todos los títulos de las secciones se encuentran dentro de h2, entonces de una vez haremos los cambios para todos:

h2 {
    color: #00C6CF;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 40px;
}

Ahora tenemos que poner las playeras de manera horizontal, para lograrlo nos ayudaremos de nuevo de flex, y dando un tamaño fijo a cada uno de los contenedores de la playera.

Pondremos un wrapper tshirts-wrapper para las playeras en el html:

<div class="tshirts-wrapper">

    <!-- Playera 1 -->
    <article class="tshirt">
        <h3 class="tshirt-title">Playera de Star Wars</h3>
        <figure class="tshirt-image-container">
            <img class="tshirt-image" src="img/playera-starwars.png" alt="Playera Star Wars" height="300px">
        </figure>
        <p class="tshirt-price"><strong>Precio:</strong> $300.00 MXN</p>
        <p class="tshirt-size"><strong>Tallas disponibles:</strong> CH / M / G / XL</p>
        <a href="playera-starwars.html" class="tshirt-btn-buy">¡Comprar!</a>
    </article>

    <!-- Playera 2 -->
    <article class="tshirt">
        <h3 class="tshirt-title">Playera de Batman</h3>
        <figure class="tshirt-image-container">
            <img class="tshirt-image" src="img/playera-batman.png" alt="Playera Batman" height="300px">
        </figure>
        <p class="tshirt-price"><strong>Precio:</strong> $350.00 MXN</p>
        <p class="tshirt-size"><strong>Tallas disponibles:</strong> CH / M / G / XL</p>
        <a href="playera-batman.html" class="tshirt-btn-buy">¡Comprar!</a>
    </article>

    <!-- Playera 3 -->
    <article class="tshirt">
        <h3 class="tshirt-title">Playera de NASA</h3>
        <figure class="tshirt-image-container">
            <img class="tshirt-image" src="img/playera-nasa.png" alt="Playera NASA" height="300px">
        </figure>
        <p class="tshirt-price"><strong>Precio:</strong> $350.00 MXN</p>
        <p class="tshirt-size"><strong>Tallas disponibles:</strong> CH / M / G / XL</p>
        <a href="playera-nasa.html" class="tshirt-btn-buy">¡Comprar!</a>
    </article>

</div>

Y a ese wrapper le activamos el flex:

.tshirts-wrapper {
    display: flex;
}

El siguiente paso será, como lo mencionamos arriba, darle un ancho fijo a cada playera y un espaciado, observen las últimas 3 propiedades:

.tshirt {
    border-color: #3B3B3B;
    border-width: 1px;
    border-style: solid;
    /* border: 1px solid #3B3B3B*/

    border-top-right-radius: 50px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 50px;

    padding: 20px;
    background-color: white;

    text-align: center;
    width: 400px;
    margin-right: 20px;
    flex-shrink: 0;
}

Y ¿qué pasa cuando tenemos muchas playeras? Aquí tenemos dos opciones:

  1. Hacer el wrap automático de flex.
  2. Crear un scroll horizontal.

Probemos el wrap de flex agregando flex-wrap: wrap; en el contenedor:

.tshirts-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

Y ahora probemos el scroll horizontal agregando overflow-x: auto; en el container:

.tshirts-wrapper {
    display: flex;
    justify-content: space-between;
    overflow-x: auto;
}

Por el momento dejaré esta última opción. Ahora es turno de los elementos que conforman a cada una de las playeras:

.tshirt-title {
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.tshirt-price {
    font-size: 20px;
    margin: 0;
}

.tshirt-size {
    margin: 0;
}

.tshirt-btn-buy {
    text-decoration: none;
    border: 1px solid #00C6CF;
    background-color: #00C6CF;
    color: white;
    border-radius: 10px;
    padding: 10px;
    text-transform: uppercase;
    margin-top: 20px;
    display: inline-block;
}

Como ejercicio, te toca replicar los cambios para la otra sección de playeras que tenemos.