EJERCICIO 1 HTML5 Y CSS3

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