Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

validaciones

!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;}

1 respuesta

Muy buen desarrollo compañero, te falto poner el CSS como código para leerlo mejor, tenlo en cuenta para la próxima.