Fecha
de Publicación: Septiembre 2 de 2015
Hola
Muchachos.
Aquí están
publicados los códigos de la pagina que empezamos a realizar hoy miércoles 2 de
septiembre. Se ha realizado el Header y
el Nav.
Se debe
COPIAR los códigos del archivo index.html y estilos.css en el cuaderno, la
imagen la pueden imprimir y pegar.
El próximo
miércoles seguiremos construyendo esta pagina.
Ejercicio
2 de HTML5 y CSS3
Código de archivo index.html
<!DOCTYPE
html>
<html
lang="es">
<head>
<title>Ejercicio 2 HTML5
CSS3</title>
<meta
charset="utf-8"/>
<link rel="stylesheet"
href="estilos.css" />
</head>
<body>
<header
id="cabecera">
<article
id="titulos">
<h1
id="titulo1">INSTITUTO TECNICO GUAIMARAL</h1>
<h2
id="titulo2">Educación Con Calidad Para Todos</h2>
</article>
<figure id="escudo">
<img
src="imagenes/escudo.jpg" alt="Escudo ITG" />
</figure>
</header>
<nav
id="menu">
<ul>
<li><a
href="index.html">La Institución</a></li>
<li><a
href="simbolos.html">Símbolos</a></li>
<li><a
href="Fotos.html">Fotos</a></li>
<li><a
href="multimedia.html">Multimedia</a></li>
<li><a
href="contacto.html">Contactenos</a></li>
</ul>
</nav>
</body>
</html>
Código de archivo estilos.css
* {
margin:
0;
padding:
0;
}
#cabecera
{
margin:
5px auto;
padding:
5px;
width:
90%;
text-align:
center;
border-bottom:
4px solid #441F05;
}
#titulos
{
width:
70%;
}
#titulo1
{
width:
90%;
margin:
5px auto;
padding:
5px;
text-align:
center;
font:
bold 40px Algerian;
color:
#322BEB;
text-shadow:
3px 3px #6A66EC;
}
#titulo2
{
font:
36px Monotype Corsiva;
}
#titulos,
#escudo {
display:
inline-block;
vertical-align:
top;
}
#menu {
width:
90%;
margin:
10px auto;
padding:
5px;
text-align:
center;
border:
1px solid #441F05;
background:
#29B0FD;
}
#menu
li {
margin:
10px;
display:inline-block;
padding:
10px;
}
#menu a
{
padding:
10px;
border:
5px solid #CCCCCC;
background:
#3209FC;
color:
#FFFFFF;
}
#menu
a:hover {
border-radius:
15px;
color:
#DF013A;
}
No hay comentarios:
Publicar un comentario