EJERCICIO 1
<!DOCTYPE
html>
<html
lang="es">
<head>
<title>Estructura
Básica</title>
<meta
charset="utf-8"/>
<meta
name="description" content="HTML 5 y CSS 3" />
<link rel="stylesheet"
href="estilos.css"/>
</head>
<body>
<h1><marquee>Estructura
Semántica HTML5</marquee></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>
CODIGO CSS
*{
margin: 0;
padding: 0;
}
body{
font-size: 1.5em;
font-family: Verdana;
color: #FFFFFF;
}
h1{
color: #F00;
background: #1E6381;
max-width: 1080px;
margin: 0.25em auto;
text-align: center;
border-radius:0.5em;
text-shadow: 5px 5px 10px
rgba(255,255,255,0.5);
}
header{
background: #1E6381;
padding: 0.25em;
margin: 0.25em auto;
max-width: 960px;
text-align: center;
border-radius:0.5em;
}
nav{
background: #1E6381;
padding: 0.25em;
margin: 0.25em auto;
max-width: 960px;
text-align: center;
border-radius:0.5em;
}
#contenedor{
max-width:960px;
/*background: #000000;*/
margin: 0.5em auto;
}
#principal{
background: #1E6381;
border-radius:0.5em;
width: 65%;
min-height: 200px;
text-align: center;
}
aside{
background: #1E6381;
width: 32%;
border-radius:0.5em;
text-align: center;
min-height: 200px;
}
#principal,
aside{
display: inline-block;
vertical-align: top;
margin: 0.25em auto;
}
article{
background: #011E30;
border-radius: 0.5em;
min-height: 160px;
padding: 0.25em;
}
footer{
background: #1E6381;
padding: 0.25em;
margin: 0.25em auto;
max-width: 960px;
text-align: center;
border-radius:0.5em;
}
No hay comentarios:
Publicar un comentario