devfzn
387de82f06
Transiciones - clase 'enviar' para input submit. Propiedades CSS: cursor: pointer, transition, transform: scale y rotate.
74 lines
3.0 KiB
HTML
74 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width">
|
|
<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" alt="logo Barbería Alura"></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="nombre_apellido">Nombre y Apellido</label>
|
|
<input type="text" id="nombre_apellido" class="input-padron"
|
|
required/>
|
|
|
|
<label for⁼"email">Correo Eletrónico</label>
|
|
<input type="email" id="email" class="input-padron" required
|
|
placeholder="mail@dominio.com"/>
|
|
|
|
<label for⁼"telefono">Teléfono</label>
|
|
<input type="tel" id="telefono" class="input-padron" required
|
|
placeholder="(99) 9999 9999"/>
|
|
|
|
<label for="mensaje">Mensaje</label>
|
|
<textarea id="mensaje" cols="70" rows="10"class="input-padron"
|
|
required></textarea>
|
|
<fieldset>
|
|
<legend>¿Como prefieres que te contactemos?</legend>
|
|
|
|
<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"> Teléfono</label>
|
|
|
|
<label for="radio-whatsap"><input type="radio" name="contacto"
|
|
value="whatsap" id="radio-whatsap" checked> Whatsapp</label>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>¿En que horario prefieres ser contactado?</legend>
|
|
<select>
|
|
<option>Mañana</option>
|
|
<option>Tarde</option>
|
|
<option>Noche</option>
|
|
</select>
|
|
</fieldset>
|
|
<label class="checkbox"><input type="checkbox" checked>
|
|
¿Te interesa recibir novedades y ofertas?
|
|
</label>
|
|
<input type="submit" class="enviar" value="Enviar Formulario"/>
|
|
</form>
|
|
</main>
|
|
<footer>
|
|
<img src="./imagenes/logo-blanco.png" alt="logo Barbería Alura">
|
|
<!-- Copyleft unicode 🄯 🄯 -->
|
|
<!-- Copyright unicode © © -->
|
|
<p class="copyright">🄯 CopyLeft 2023 - DevFzn</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|