PAGINA ITG - INSTITUCION

Fecha de Publicación: Octubre 5 de 2017


CODIGO INDEX.HTML

<!DOCTYPE html>
<html lang="es">
<head>
<title>Pagina ITG</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="estilos_itg.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>

<section id="principal">
<figure id="institucion">
<img src="imagenes/grupo.png" width="300" height="200" alt="Foto grupo" />
</figure>

<article id="art1">
<h1>Reseña Histórica</h1>
<p>El Instituto Técnico Guaimaral, es una institución educativa de carácter oficial y de naturaleza mixta,
con niveles de educación Preescolar, Básica, y Media Técnica. <br />
Fusionada por Decreto 000959 del 12 de noviembre de 2002 con los siguientes centros educativos:
Instituto Técnico Comercial Guaimaral, Colegio Departamental Hermogenes Maza, Escuela Guaimaral No.21,
Centro Alma Luz Vega Rangel y mediante Acuerdo # 0012 de Mayo 16 de 2006, se fusiona el Instituto La Esperanza.
<br /> </p> <br />
</article>
<article id="art2">
<h1> Misión</h1>
<p> El Instituto Técnico Guaimaral , ofrece formación en Ciencia, Tecnología y valores, desarrollando
competencias laborales específicas y ciudadanas a niños, niñas y jóvenes con o sin necesidades
educativas especiales, visionarios, emprendedores, generadores de su proyecto de vida, en ambientes
pacíficos, ecológicos y culturales hacia el fortalecimiento de una sociedad más justa y tolerante.
</p> <br /><br /><br />
</article>
<article id="art3">
<h1> Política de Calidad</h1>
<p> El Instituto Técnico Guaimaral en cumplimiento de su misión y los requisitos legales por los que se rige,
se compromete a asumir con firmeza la implementación y mantenimiento del Sistema de Gestión de la calidad,
mejorando continuamente la eficacia, eficiencia y efectividad de sus procesos académicos y administrativos,
con el apoyo del talento humano competente y comprometido con la formación técnica y en valores,
desarrollando programas académicos que respondan y superen las necesidades de nuestra comunidad educativa.
</p>
</article>
</section>

<footer id="pie">
Diseño de página - Grado 11E 2017 - crisotos@hotmail.com - @crisotos
</footer>
</body>
</html>

CODIGO ESTILOS_ITG.CSS

* {
margin: 0;
padding: 0;
}

#cabecera {
width: 90%;
margin: 5px auto;
padding: 5px;
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;
text-decoration: none;
}

#menu a:hover {
border-radius: 15px;
color: #DF013A;
}

/* Estilos de Section del index.html */

#principal {
width: 90%;
margin: 5px auto;
border: 2px solid #CCCCCC;
background: #CCCCCC;
}

#institucion {
margin: 5px auto;
text-align: center;
}

#institucion img {
border: 3px solid #FAAC58;
}

#art1, #art2, #art3 {
width: 30%;
margin: 5px 10px;
border: 1px solid #CCCCCC;
background: #1E6381;
border-radius: 10px;
padding: 5px;
color: #FFFFFF;
display: inline-block;
vertical-align: top;
}

#art1 h1, #art2 h1, #art3 h1 {
font: bold 24px Comic Sans MS;
color: #F60;
}

/* Estilos del Footer del index.html */

#pie {
width: 90%;
text-align:center;
margin: 15px auto;
padding: 10px;
border-top: 4px solid #441F05;
}











No hay comentarios:

Publicar un comentario