- HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../css/reset.css"> <link rel="stylesheet" href="../css/contacto.css"> </head> <body> <header> <div class="caja"> <h1> <img src="../img/logo.png" alt=""> </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> <section> <form> <dl> <dt><label for="nombre">Nombre y Apellido: </label></dt> <dd><input type="text" name="Nombre" id="nombre" placeholder="Escribe tu nombre"></dd> </dl> <dl> <dt><label for="email">Correo electronico: </label></dt> <dd><input type="email" name="Email" id="Email" dir="ltr" placeholder="Escribe tu correo electronico"></dd> </dl> <dl> <dt><label for="tel">Teléfono: </label></dt> <dd><input type="tel" name="Tel" id="tel" placeholder="(xx)xxxx xxxx"></dd> </dl> <dl> <dt><label for="mensaje">Mensaje: </label> <dd><textarea name="mensaje" id="Mensaje" cols="100" rows="8"></textarea></dd> </dl> <dl> <dt><label for="contact">¿Como le gustaria que lo contactaramos?</label></dt> <dd><input type="radio" name="contact" value="email">Email</dd> <dd><input type="radio" name="contact" value="telefono">Teléfono</dd> <dd><input type="radio" name="contact" value="whatsapp">Whatsapp</dd> </dl> <dl> <dt><label for="">¿En cual horario prefiere ser atendido</label></dt> <dd> <select name="" id=""> <option value="">Mañana</option> <option value="">Tarde</option> <option value="">Noche</option> </select> </dd> </dl> <dl> <dd><input type="checkbox" name="selector" id="selector">¿Le gustaria recibir novedades de la barberia por correo electronico?</dd> </dl> <dl> <dd><input type="submit" name="enviar" value="Enviar Formulario"></dd> </dl> </form> </section> <footer> <div> <img src="../img/logo-blanco.png" alt=""> <p class="piepagina"> © Copyright Barberia Alura - 2022</p> </div> </footer> </body> </html> - CSS:
header{
background-color: #bbbbbb;
padding: 20px 0;
}
.caja{
width: 940px;
position: relative;
margin: 0 auto;
}
nav{
position: absolute;
right: 0;
top: 110px;
}
nav li{
display:inline;
margin: 0 0 0 15px;
}
nav a{
color: black;
font-weight: bold;
text-decoration: none;
font-size: 22px;
}
nav a:hover{
color: orange;
text-decoration: underline;
}
section{
width: 940px;
margin: 0 auto;
}
form{
margin: 40px 0;
}
form dt{
font-size: 20px;
margin: 0 0 10px;
}
form dd{
margin: 0 0 20px;
}
form input{
padding: 10px 25px;
width: 50%;
}
footer{
text-align: center;
background-image: url(../img/bg.jpg);
padding: 40px;
}
.piepagina{
color: white;
font-size: 13px;
margin: 20px;
}
