[Proyecto] FORMULARIO - CONTACTO | HTML5 y CSS3 parte 3: Trabajando con formularios y tablas | Alura Latam

contacto.html

<!DOCTYPE html>


<html>
    <head>
        <meta charset="UTF-8">
        <title>Contacto - Barbería Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <header>
        <div class="caja">
            <h1><img src="imagenes/logo.png"></h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="productos.html">Productos</a></li>
                    <li><a href="contacto.html">Contacto</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main>
        <form>
            <label for="nombreapellido">Nombre y Apellido</label>
            <input type="text" id="nombreapellido">

            <label for="correoelectronico">Correo Electrónico</label>
            <input type="text" id="correoelectronico">

            <label for="telefono">Teléfono</label>
            <input type="text" id="telefono">

            <input type="submit" value="Enviar formulario">

        </form>
    </main>
    <footer>
        <img src="imagenes/logo-blanco.png">
        <p class="copyright">&copy Copyright Barbería Alura - 2022</p>
    </footer>
    </body>
</html>

style.css

header{
    background-color: #BBBBBB;
    padding: 20px 0;
}

.caja{
width: 940px;
position: relative;
margin: 0 auto;
}

nav{
    position: absolute;
    top: 110px;
    right: 0;
}

nav li{
    display: inline;
    margin: 0 0 0 15px;
}

nav a{
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

nav a:hover{
    color: #c78c19;
    text-decoration: underline;
}

.productos{
    width: 940px;
    margin: 0 auto;
    padding: 50px;
}

.productos li{
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;
}

.productos li:hover{
    border-color:#c78c19;
}

.productos li:active{
    border-color: #088c19;
}

.productos h2{
    font-size: 30px;
    font-weight: bold;
}

.productos li:hover h2{
    font-size: 33px;
}

.producto-descripcion{
    font-size: 18px;
}

.producto-precio{
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}

footer{
    text-align: center;
    background: url(imagenes/bg.jpg);
    padding: 40px;
}

.copyright{
    color: #FFFFFF;
    font-size: 13px;
    margin: 20px;
}

main{
    width: 940px;
    margin: 0 auto;
}

form{
    margin: 40px 0;
}

form label{
    display: block;
    font-size: 20px;
    margin: 0 0 10px;
}

form input{
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}

Hola, espero que estés bien!

Gracias por compartir tu código con nosotros, nos alegra mucho que estés practicando programación, la práctica es fundamental para consolidar tus nuevos conocimientos.

Te recomiendo que compartas la solución de tus ejercicios en nuestro servidor de Discord, ahí tenemos un canal exclusivo para esto #comparteTuCodigo, también puedes usar Linkedin para hacer esto, ya que el alcance es mayor y tu publicación puede llegar a más personas. Otra forma de guardar tus ejercicios es a través de Github, así a medida que avances podrás ir construyendo tu portafolio y en este caso el foro sería solo para aclarar cualquier duda que puedas tener sobre el contenido de los cursos.

Mucho éxito en todo lo que te propongas y si tienes alguna duda aquí estaremos para apoyarte.

¡Vamos juntos!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios