CODIGO HTML5
<!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="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>
CODIGO CSS3
* {
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 {
/*background: Blue;*/
font: 36px Monotype
Corsiva;
}
#titulos, #escudo {
display:
inline-block;
vertical-align: top;
}
#menu {
width: 90%;
margin: 10px auto;
padding: 5px;
text-align: center;
border: 5px 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;
text-decoration:
none;
}
#menu a:hover {
border-radius: 15px;
color: #DF013A;
}
No hay comentarios:
Publicar un comentario