Fecha
de Publicación: Agosto 19 de 2015
Cordial
Saludo Muchachos.
Estos
son los códigos de los archivos index.html y estilos.css del ejercicio 1 que se
desarrollo en clase del miércoles 19 de agosto.
La imagen de la página la pueden imprimir y pegar, los códigos deben
COPIARLOS, para que se guíen en la evaluación Bimestral de la próxima semana.
Exitos! Cristian !
Ejercicio
1 aplicando HTML5 y CSS3
Codigo
de archivo index.html
<!DOCTYPE
html>
<html
lang="es">
<head>
<meta
charset="utf-8"/>
<meta
name="description" content="Ejercicio HTML5 y CSS3"/>
<title>Ejercicio
HTML</title>
<link rel="stylesheet"
href="estilos.css" />
</head>
<body>
<header>
<h1>TITULO DE MI
SITIO WEB</h1>
</header>
<nav>
<ul>
<li>Principal</li>
<li>Fotos</li>
<li>Videos</li>
<li>Contacto</li>
</ul>
</nav>
<section>
<article>
<h1> Título del
Artículo 1 </h1>
<h2> Contenido del
artículo 1</h2>
<p>Aquí va el
texto del artículo 1</p>
<figure>
<img
src="imagenes/foto1.jpg" width="300" height="200"
alt="Foto Banda Niños" />
<figcaption>Esta es la banda del
ITG</figcaption>
</figure>
<p>Aquí termina el
Articulo 1</p>
</article>
</section>
<aside>
<p>Información 1</p>
<br />
<br />
<br />
<p>Información 2</p>
</aside>
<footer>
<p>Derechos Reservados -
crisotos@hotmail.com - @crisotos</p>
</footer>
</body>
</html>
Codigo
de archivo estilos.css
*
{
margin:
0;
padding:
0;
}
h1
{
font:
bold 24px verdana;
}
header
{
width:
50%;
margin:
10px auto;
padding:
20px;
border:
2px solid #F60;
background:
#0AFAD6;
color:
#192A62;
text-align:
center;
border-radius:
50px 10px 50px 10px;
box-shadow:
0.50em 0.50em 0.50em rgba(200,120, 0, 0.5);
-webkit-transition:-webkit-transform
1s ease 0.5s;
}
header:hover{
-webkit-transform:scale(0.5);
}
nav
{
width:
90%;
background:
#F5F36B;
margin:
5px auto;
text-align:
center;
}
li
{
display:inline-block;
padding:
5px 20px 5px 20px;
font:
bold 14px arial;
}
section
{
width:
70%;
margin:
20px;
background:
#F5F36B;
}
aside
{
width:
20%;
margin:
20px 0px;
background:
#CCCCCC;
text-align:
center;
}
section,
aside {
display:
inline-block;
vertical-align:
top;
}
footer
{
width:
90%;
margin:
10px auto;
padding:
20px;
text-align:
center;
border-top:
2px solid #999999;
}
article
h1 {
text-align:
center;
}
No hay comentarios:
Publicar un comentario