Proyecto haz lo que hicimos en clase | HTML5 y CSS3 parte 3: Trabajando con formularios y tablas | Alura Latam

codigo html 

    <!DOCTYPE html>

    <head>
        <meta charset="UTF-8">
        <title>Contacto-Barberia-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" class="input-padron">

                <label for="correoelectronico">Correo Electronico</label>
                <input type="text" id="correoelectronico" class="input-padron">

                <label for="telefono">Telefono</label>
                <input type="text" id="telefono" class="input-padron">

                <label for="mensaje">Mensaje</label>
                <textarea cols="60" rows="10" id="mensaje"></textarea>

                <div>

                    <p>Como le gustaria que lo contactemos?</p>


                    <label for="radio-email"><input type="radio" name="contacto" value="email" id="radio-email">Email</label>


                    <label for="radio-telefono"><input type="radio" name="contacto" value="telefono" id="radio-telefono">Telefono</label>


                    <label for="radio-whatsapp"><input type="radio" name="contacto" value="whatsapp" id="radio-whatsapp">Whatsapp</label>


                </div>    

                <div>
                    <p>En cual horario prefuere ser atendido?</p>

                    <select>
                        <option>Mañana</option>
                        <option>Tarde</option>
                        <option>Noche</option>
                    </select>
                </div>

                <label class="checkbox"><input type="checkbox">Le gustaria recibir novedades de la Barberia Alura?</label>

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

            </form>
        </main>

        <footer>
            <img src="imagenes/logo-blanco.png">
            <p class="copyright"> &copy; Copyright Barberia Alura - 2020</p>
        </footer> 
    </body>
</html>


    codigo css


    header{
    background-color: #bbbbbb;
    padding: 20 px 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: black;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

nav a:hover{
    color: #c78c19; /*crea animacion de color*/
    text-decoration: underline; /*subrrayado*/

}



.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 black;
    border-radius: 10px;
}

.productos li:hover{
    border-color: #c78c19;
    font-size: 33px;
}

.productos li:active{  /*cambia el color al hacer click*/
    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); /*url para agregar imagen*/
    padding: 40px;
}

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

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

form{
    margin: 40px 0;
}

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

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

.checkbox{
    margin: 20px 0;
}

                                    /*gerarquia id=100,class=10,etiqueta=1.*/

¡Hola! Espero que estés muy bien.

¡Muchas gracias por tu aporte! Es genial ver los puntos de vista y maneras de hacer los ejercicios de nuestros estudiantes, ya que esto enriquece mucho nuestros conocimientos.

¡Si tienes alguna pregunta sobre el contenido de los cursos, no dudes en preguntarnos! Por favor, recuerda utilizar las etiquetas para indicarnos si tu consulta es una duda, sugerencia o cualquier otro tema. De esta manera, podremos filtrar y procesar las dudas y consultas de manera más eficiente, mejorando aún más nuestro desempeño y tiempo de respuesta.

Además, te recomiendo que te unas a nuestra comunidad en Discord. ¡Allí podrás interactuar con otros compañeros, compartir tus ideas y aprender aún más! La interacción es instantánea y te permitirá llegar a muchas más personas. Así que si tienes algún comentario, opinión, recomendación o simplemente quieres compartir tus pensamientos y como hiciste tus ejercicios con la comunidad, ¡no dudes en hacerlo por Discord!

Estamos seguros de que tu aporte será muy valioso para todos nosotros. ¡Un saludo! :)

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