Fecha de Publicación: Septiembre 23 de 2015
Cordial Saludo,
Aqui encontrarán los códigos de las paginas que terminamos de realizar en clase del miercoles 23 de septiembre, correspondientes a menu Fotos, Multimedia y Contactenos.
Se debe COPIAR los códigos en su cuaderno de los section de “Fotos”, “Multimedia” y "Contacto", al igual que estilos.css, las imágenes pueden imprimirlas y pegarlas.
Código del Section "Fotos" del archivo fotos.html
<section id="principal_fotos">
<article id="fotos1_5">
<figure
id="img1">
<img
class="fotos" src="imagenes/img1.jpg" width="150"
height="150" alt="imagen1" />
</figure>
<figure id="img2">
<figure id="img2">
<img
class="fotos" src="imagenes/img2.jpg" width="150"
height="150" alt="imagen2" />
</figure>
<figure
id="img3">
<img
class="fotos" src="imagenes/img3.jpg" width="150"
height="150" alt="imagen3" />
</figure>
<figure
id="img4">
<img
class="fotos" src="imagenes/img4.jpg" width="150"
height="150" alt="imagen4" />
</figure>
<figure
id="img5">
<img
class="fotos" src="imagenes/img5.jpg" width="150"
height="150" alt="imagen5" />
</figure>
</figure>
</article>
<article id="fotos6_10">
<figure
id="img6">
<img
class="fotos" src="imagenes/img6.jpg" width="150"
height="150" alt="imagen6" />
</figure>
<figure
id="img7">
<img
class="fotos" src="imagenes/img7.jpg" width="150"
height="150" alt="imagen7" />
</figure>
<figure
id="img8">
<img
class="fotos" src="imagenes/img8.jpg" width="150"
height="150" alt="imagen8" />
</figure>
<figure
id="img9">
<img
class="fotos" src="imagenes/img9.jpg" width="150"
height="150" alt="imagen9" />
</figure>
<figure
id="img10">
<img
class="fotos" src="imagenes/img10.jpg"
width="150" height="150" alt="imagen10" />
</figure>
</article>
</section>
Código del Section "Multimedia" del archivo multimedia.html
<section id="principal_multimedia">
Código del Section "Contactenos" del archivo contacto.html
<section id="principal_contactenos">
Código de archivo estilos.css
<article
id="audio">
<h1>Audio</h1>
<p>Aquí
podemos reproducir una pista de audio de tipo mp3 que tenemos almacenada en la carpeta
Multimedia de mi equipo local. </p>
<hr />
<br />
<audio
id="pista_audio" controls>
<source
src="Multimedia/cancion.mp3" type="audio/mpeg" />
</audio>
<br />
Canción: Película
Lenta publicada
</article>
<article
id="video1">
<h1>Vídeo
1</h1>
<p>Aqui
podemos reproducir un video almacenado en nuestro equipo local</p>
<video
src="multimedia/video1.mp4" width="300"
height="300" controls></video>
</article>
<article
id="video2">
<h1>Vídeo
2</h1>
<p>Aqui
podemos reproducir un video desde Internet - Youtube</p>
<iframe width="300"
height="250"
src="https://www.youtube.com/embed/0Cme6BjNXZE"
frameborder="0" allowfullscreen></iframe>
</article>
</section>
Código del Section "Contactenos" del archivo contacto.html
<section
id="contacto">
<h2>Contáctanos</h2>
<article
id="contactanos">
<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="email" id="email" name="email_txt" required
/>
</div>
<div>
<label
for="asunto">Digita tu asunto: </label> <br />
<input
type="text" id="asunto" name="asunto_txt"
required />
</div>
<div>
<label
for="comentarios">Digita tus comentarios:</label>
<textarea
name="comentarios_txa" id="comentarios" cols="31"
rows="5" required></textarea>
</div>
<div id="boton">
<input
type="submit" id="enviar" name="enviar_btn"
value="Enviar" />
</div>
</fieldset>
</form>
</article>
</section>
<section
id="mapa">
<h2>Mapa</h2>
<br />
<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>
</section>
</section>Código de archivo estilos.css
/* ESTILOS DEL SECTION
FOTOS.HTML ---*/
#principal_fotos {
width: 90%;
margin: 5px auto;
border: 2px solid #CCCCCC;
background: #CCCCCC;
}
#fotos1_5, #fotos6_10 {
margin: 15px;
padding: 10px;
border: 2px solid #FFFFFF;
text-align: center;
}
.fotos {
border-radius: 75px;
box-shadow: 5px 5px 5px #F60;
}
.fotos:hover {
border-radius: 15px;
width: 300px;
height: 300px;
}
#img1, #img2, #img3, #img4, #img5 {
display: inline-block;
vertical-align: top;
margin: 5px;
padding: 15px;
}
#img6, #img7, #img8, #img9, #img10 {
display: inline-block;
vertical-align: top;
margin: 5px;
padding: 15px;
}
/* ESTILOS DEL SECTION
MULTIMEDIA.HTML ---*/
#principal_multimedia {
width: 90%;
margin: 5px auto;
padding: 10px;
border: 2px solid #CCCCCC;
background: #f60;
}
#audio, #video1, #video2{
width: 30%;
margin: 10px;
padding: 5px;
background: #FFFFFF;
display: inline-block;
vertical-align: top;
}
#audio h1, #video1 h1, #video2 h1 {
text-align:center;
}
#video1, #video2 {
text-align:center;
}
/* ESTILOS DEL SECTION
CONTACTO.HTML ---*/
#principal_contactenos{
width: 90%;
margin: 5px auto;
border: 2px solid #CCCCCC;
background: #FFFFFF;
}
#contacto {
width: 30%;
background: #011E30;
color: #FFFFFF;
border-radius: 20px;
}
#mapa {
width: 30%;
background: #011E30;
text-align: center;
padding: 15px;
border-radius: 20px;
}
#contacto, #mapa {
display: inline-block;
vertical-align: top;
}
#mapa h2 {
color: #FFFFFF;
}
#contactanos {
margin: 0.5em;
padding: 0.5em;
}
legend {
color: #F90;
font-size: 24px;
font-weight: bold;
text-align:
center;
}
fieldset {
border: 3px solid
#F60;
border-radius:
10px;
padding: 10px;
}
input[type="text"], input[type="email"], textarea {
background:
#000000;
border-radius:
5px;
color: #F60;
font-size: 24px;
padding: 5px;
width: 95%;
}
input[type="text"]:focus,
input[type="email"]:focus, textarea:focus {
background:
#FFFFFF;
}
input[type="submit"] {
background: #F90;
border-radius: 0
15px;
color: #500;
font-size: 24px;
padding: 5px;
}
input[type="submit"]:hover {
background:
#7BBFD5;
border-radius:
15px 0;
color: #000;
cursor: pointer;
}
#boton {
text-align: center;
}
No hay comentarios:
Publicar un comentario