EJERCICIO 1 - AGOSTO 2

Fecha de Publicación: Agosto 2 de 2017


Codigo HTML

<!DOCTYPE html>
<html lang="es">
<head>
                <title>Estructura Básica en HTML 5 y CSS3</title>
                <meta charset="utf-8"/>
                <meta name="description" content="Estructura con HTML5 y CSS3 " />
                <link rel="stylesheet" href="estilos.css" />
</head>
 <body>
 <h1>Estructura Semántica HTML5</h1>
                <header>
                               <p>Aqui va el Header</p>
                </header>
                <nav>
                               <p>Aqui va el Nav</p>
                </nav>
                <section id="contenedor">
                               <section id="principal">
                                               <p>Aqui va el Section principal</p>
                                               <article>
                                               <p>Aqui va el Article</p>
                                               </article>
                               </section>
                               <aside>
                                               <p>Aqui va el Aside</p>
                               </aside>            
                   </section>
                <footer>
                               <p>Aqui va el Footer</p>
                </footer>
  </body>           
</html>

Estilos CSS

*{
                margin: 0; /* margenes externos al bloque */
                padding: 0; /* distancia interna de los lados del bloque */
}

body{
                color: Blue;
                font-family: Verdana;
                font-size: 16px;
}

h1{
                color: #F00; /*Rojo*/
                background: #1E6381;
                max-width: 800px; /*Ancho maximo del bloque*/
                border-radius: 15px;
                margin: 5px auto; /*Distancia externa del bloque con los otros bloques */
                padding: 10px;
                text-align: center;
                text-shadow: 5px 5px 10px rgba(255,255,255,0.5);
                /* Sombra para un texto (sobre x, sobre y, desenfoque, transparencia blanco - opacidad */
}

header, nav, footer{ 

 /* cuando los bloques tienen identicos atributos pueden heredarse asi */
                color: White;
                background: #1E6381;
                border-radius: 10px; /*redondear bordes del bloque*/
                margin: 25px auto;   /*arriba y abajo - derecha e izquierda (auto:centra automatico)*/
                max-width: 960px;  /*ancho maximo, dependiendo del tamaño del dispositivo*/
                padding: 12px;
                text-align: center;
}

#contenedor {
                background: Pink; 
                margin: 25px auto;
                max-width: 960px;
                padding: 10px;
                text-align: center;
}

#principal, aside {
                color: White;
                width: 55%; /* ancho de cada bloque -- ej. 65% de los 960px del bloque contenedor */
                background: #1E6381;
                border-radius: 10px;
                margin: 20px auto;
                min-height: 200px;  /* altura minima -- depende del contenido del bloque */
                padding: 10px;
                text-align: center;
                display: inline-block; /*Alinear los dos bloques en la misma linea*/
                vertical-align: top;  /*alinear los bloques arriba iguales */
}

article {
                background: #011E30;
                border-radius: 10px;
                min-height: 160px;
                padding: 15px;
}

aside {
                width: 40%; /* ancho del bloque aside -- ambos suman 95% de los 960px del width del contenedor */
}

No hay comentarios:

Publicar un comentario