!DOCTYPE html>
<!-- Cabecera -->
<header>
<img src="Homer.png" width="189" height="57" alt="logo" />
<h1>contactanos-homerisima</h1>
</header>
<!-- Contenido -->
<section>
<figure>
<img class="recorte" src="pintusimp.png" >
</figure>
<main>
<form>
<label for="nombre-apellido">nombres</label>
<input type="text" id="nombre-apellido" class ="input-padron" required>
<label for="edad">edad</label>
<input type="number" id=edad" required placeholder="ejenole;23">
<label for="telefono">telefono</label>
<input type="tel" id="telefono" class ="input-padron" required placeholder="55454">
<label for="correo">correo</label>
<input type="email" id="correo" class ="input-padron" required>
<textarea name="mensaje" id="" cols="30" rows="10"></textarea>
<fieldset>
<p>como quiere ser contactado</p>
<label for="telefono">telefono</label>
<input type="radio" id="telefono" class ="input-padron">
<label for="wasap">wasao</label>
<input type="radio" id="wasap">
</fieldset>
<fieldset>
<p>¿En cuál horario prefiere ser atendido?</p>
<select>
<option>Mañana</option>
<option>Tarde</option>
<option>Noche</option>
</select>
</fieldset>
<label class="checkbox"><input type="checkbox">Le gustaría recibir novedades de la Barbería Alura?</label>
<input type="submit" value="envio">
</form>
</main>
</section>
<!-- Contenido relacionado-->
<aside>
<p>hola</p>
<img src="fam.jpg" width="189" height="889" alt="logo" />
</aside>
<!-- Pie de pagina -->
<footer>
<a href="http://www.ejemplocodigo.com">www.ejemplocodigo.com</a>
</footer>
css
html,body {
height:100%;
}
header { display:block; background:#286af0; padding:10px 0px; } section { width: 79%; background:aqua; float: left; overflow: auto; padding-bottom: 60px; padding-top:30px;
}
aside { float: right; border: 1px solid red; width: 18%; border: 1px solid red; } footer { position: relative; margin-top: -50px; height: 40px; padding:5px 0px; clear: both; background: #f028f0; text-align: center; color: blue; } figure { display: table; margin: 0 auto;
} main { width: 940px; margin: 0 auto; }
form label, form p { display:block; font-size: 20px; margin: 0 0 10px; }
form label { display:block; font-size: 20px; margin: 0 0 10px; }
form input { display: block; margin: 0 0 20px; padding: 10px 25px; width: 50%; } form label, form p { display:block; font-size: 20px; margin: 0 0 10px; } .input-padron { display: block; margin: 0 0 20px; padding: 10px 25px; width: 50%; background: blueviolet; } .checkbox { margin: 20px 0; } .recorte{ margin:2px; top: 40000px; object-fit: cover; object-position: 80% 100%; } fieldset{ background-color: chartreuse;
}
form{ background: #28f07598; font-family:forte;}