Codigo de Section de
pagina contacto.html
<section
id="principal_contactenos">
<article id="contactenos">
<h2>Contáctanos</h2>
<article
id="formulario">
<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
id="boton">
<input
type="submit" id="enviar" name="enviar_btn"
value="Enviar" />
</div>
</fieldset>
</form>
</article>
</article>
<article id="mapa">
<h2>Mapa</h2>
<iframe
src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d7903.821932142012!2d-72.4875!3d7.904370000000001!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2sco!4v1436650754351"
width="350" height="250" frameborder="0"
style="border:0" allowfullscreen></iframe>
</article>
<article id="logos">
<figure id="twiter">
<a href="http://www.twitter.com" target
="_blank"><img src="imagenes/logotwiter.png"
width="300" height="100" alt="twiter"
/></a>
</figure>
<figure id="facebook">
<a href="http://www.facebook.com" target
="_blank"><img src="imagenes/logofacebook.png"
width="300" height="100" alt="Facebook"
/></a>
</figure>
<figure id="instagram">
<a href="http://www.instagram.com" target
="_blank"><img src="imagenes/logoinstagram.jpg"
width="300" height="100" alt="instagram"
/></a>
</figure>
</article>
</section>
/* Estilos de Section de
contacto */
#principal_contacto {
width: 90%;
margin: 5px auto;
border: 2px solid #CCCCCC;
background: #FFFFFF;
}
#contactenos {
width: 30%;
background: #011E30;
color: #FFFFFF;
border-radius: 20px;
}
div {
border: 2px solid #CCCCCC;
margin: 5px;
text-align: center;
}
#mapa {
width: 30%;
background: #011E30;
text-align: center;
padding: 15px;
border-radius:20px;
}
#logos {
width: 30%;
text-align: center;
padding: 15px;
border-radius:20px;
border: 3px solid #000000;
}
#contacto, #mapa, #logos {
display:inline-block;
vertical-align:top;
margin: 7px;
}
|
No hay comentarios:
Publicar un comentario