Estilizando nuestro sitio web: Detalles

← Diseño Web ⌂ Home

Header

Agregaremos un poco de padding en el header para que no esté pegado a los extremos:

.header {
    background-color: #3B3B3B;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90px;
    padding: 0 20px;
}

Y así mismo que el logo también sea un link:

 <header class="header">
    <a href="index.html">
        <figure class="logo">
            <img src="img/tshirt-white.png" alt="Logo" width="40px">
        </figure>
    </a>
    ...

Sections

Ya que tenemos bien definidas nuestras secciones los <hr> que teniamos ya no serán necesarios, así que vamos a eliminarlos todos.

Y le aumentamos al padding superior e inferiror para tener más espacio en la sección de tshirts:

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

Y al elemento h2 le modificamos el margin para que no interfiera:

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

Bordes y sombras

Un cambio interesante podría ser eliminar bordes de las playeras y agregar una pequeña sombra, eso hace que los diseños se vean un poco más modernos:

.tshirt {
    padding: 20px;
    background-color: white;

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

    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

Pero vemos que las sombras no se alcanzan a ver muy bien, debido al wrapper, está cubriendo parte de ellas ya que no tiene espacio, cambiemos lo siguiente:

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

Y para la playera también le aumentamos su alto:

.tshirt {
    padding: 20px;
    background-color: white;

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

    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    height: 500px;
}

Hero

Nuestro hero aún es una parte del sitio que no está 100% terminada, así que lo que haremos será refactorizarlo a un hero similar al de promociones, es mucho más llamativo.

 <section id="inicio" class="hero">
    <div class="hero-inner">
        <h1>Playeras con diseños para <br/> Geeks, Programadores y <br/>Diseñadores.</h1>
        <h3>¡Tenemos 3x2 en todas las playeras!</h3>
    </div>
</section>

Y el css de .hero lo remplazamos por el siguiente:

.hero {
    color: white;

    width: 100vw;
    height: 50vh;

    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;
}

Y listo.