Estilizando nuestro sitio web: Hero y Footer

← Diseño Web ⌂ Home

Estilizando el Hero

Para estilizar el hero nos apoyaremos de flex, agregamos las siguientes propiedades de flex al final de la clase .hero:

.hero {
    height: 300px;
    background-image: url('../img/hero-background.jpg');
    background-size: 500px 300px;
    background-repeat: no-repeat;
    background-position-x: right;
    background-color: #3B3B3B;
    color: white;

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

Estilizando el Footer

Para el footer agregaremos la clase que tiene asociada .contact y las siguientes propiedades:

.contact {
    color: white;
    background-color: #3B3B3B;
    text-align: center;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

Y para el formulario estilizaremos los elementos input que se encuentran dentro, para eso agregaremos unas clases que nos ayudarán a lograrlo:

<footer id="contacto" class="contact">
    <p>Puedes encontrarnos en los teléfonos: 1234-1234 y 4321-4321</p>
    <form action="https://formspree.io/hola@alejandrozepeda.mx" method="POST" class="contact-form">
        <label for="correo">Correo:</label>
        <input id="correo" type="email" name="email" placeholder="correo@ejemplo.com" class="form-input">

        <label for="comentario">Comentario:</label>
        <input id="comentario" type="text" name="message" placeholder="Dudas o comentarios" class="form-input">

        <input type="submit" value="Enviar" class="form-btn">
    </form>
    <p>
        <small>Todos los derechos reservados. 2019. Playeras Geek.</small>
    </p>
</footer>

Y por parte del CSS vamos a estilizar los input y el botón:

.contact-form .form-input {
    border-color: white;
    border-style: solid;
    border-radius: 10px;
    padding: 5px;
    margin: 15px 10px 15px 0px;
}

.contact-form .form-btn {
    display: block;
    margin: 0 auto;
    background: transparent;
    color: white;
    width: 100px;
    padding: 5px 0px;
    border-radius: 5px;
    text-transform: uppercase;
}

.contact small {
    color: gray;
}