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" class="input-padron"></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" class="input-padron"></dd>
</dl>
<dl>
<dt><label for="tel">Teléfono: </label></dt>
<dd><input type="tel" name="Tel" id="tel" placeholder="(xx)xxxx xxxx" class="input-padron"></dd>
</dl>
<dl>
<dt><label for="mensaje">Mensaje: </label>
<dd><textarea name="mensaje" id="Mensaje" cols="70" rows="10" class="input-padron"></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>¿En cual horario prefiere ser atendido</label></dt>
<dd>
<select>
<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;
}
.input-padron{
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;
}
