EJERCICIO 2 - PARTE 6 FINAL

Fecha de Publicación: Octubre 3 de 2016

CODIGO HTML DE MENU “CONTACTENOS”

<section id="principal_contactenos">

            <article id="contactenos">

            <form>

                        <fieldset>

                        <legend>Envianos Tus Comentarios</legend>

                        <div>

                        <label for="nombre">Digita tu nombre:</label><br />

                        <input type="text" id="nombre" name="nombre_txt" required />

                        </div>

                        <div>

                        <label for="email">Digita tu e-mail:</label><br />

                        <input type="text" id="email" name="email_txt" required />

                        </div>

                        <div>

                        <label for="asunto">Digita el asunto:</label><br />

                        <input type="text" id="asunto" name="asunto_txt" required />

                        </div>

                        <div>

                        <label for="comentarios">Digita el Comentario:</label><br />

<textarea name="comentarios_txa" id="comentarios" cols="30" rows="5"required> </textarea>

                        </div>

<div id="boton">

                        <input type="submit" id="enviar" name="enviar_btn" value="Enviar" />

                        </div>

                        </fieldset>

            </form>

            </article>

                                                          

            <article id="mapa">

                        <h2>Mapa</h2>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3951.8566539545936!2d-72.49640518580169!3d7.910039507687217!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e66453fb21cfaf1%3A0xe7e44ce0bd90869e!2sInstituto+Tecnico+Guaimaral+Sede+B!5e0!3m2!1ses!2sco!4v1474932542959"

width="350" height="270" frameborder="0" style="border:0" allowfullscreen></iframe>

            </article>

                       

            <article id="enlaces">

                        <h2>Enlaces de Interes</h2>

                        <br />

                        <figure id="facebook">

<a href="http://www.facebook.com" target="_blank"><img src="imagenes/facebook.png" width="180" height="60" alt="logo" /></a>

                        </figure>

                        <br />

                        <figure id="twitter">

<a href="http://www.twitter.com" target="_blank"><img src="imagenes/twitter.jpg"width="180" height="60" alt="logo2" /></a>

                        </figure>

                        <br />

                        <figure id="google">

<a href="http://www.google.com" target="_blank"><img src="imagenes/google.gif" width="180" height="60" alt="logo3" /></a>

                        </figure>

            </article>

</section>

CODIGO CSS

/*Estilos del Section de contacto.html*/

#principal_contactenos {

width: 90%;

margin: 5px auto;

background: #CCCCCC;

text-align: center;

}

#contactenos, #mapa, #enlaces {

width: 30%;

background: #011E30;

color: #FFFFFF;

border-radius: 20px;

padding: 15px;

display:inline-block;

vertical-align:top;

}

#mapa h2, #enlaces h2 {

color: #FFFFFF;

}

legend {

color: #FFFFFF;

font-size: 24px;

font-weight: bold;

text-align: center;

}

fieldset {

border: 8px solid #F60;

border-radius: 10px;

padding: 10px;

margin: 5px;

}

input[type="submit"] {

background:#F90;

border-radius: 0 15px;

color: #500;

font-size: 24px;

padding: 5px;

}

#boton {

text-align:center;

}