Untitled
unknown
html
3 years ago
3.7 kB
8
Indexable
<!DOCTYPE html>
<html>
<head>
<style>
header
{
background-color: aqua;
}
.content
{
display: flex;
}
footer
{
clear: both;
background-color: green;
}
nav
{
width: 10%;
background-color: red;
}
.sections
{
background-color: green;
width: 90%;
}
.divided-section
{
display: flex;
background-color: gray;
}
.divided-section-1
{
width: 60%;
}
.divided-section-2
{
width: 40%;
background-color: orange;
}
</style>
</head>
<body>
<header>
<h1>Esto es una header</h1>
</header>
<div class="content">
<nav>
<ul>
<li><a href="https://www.iesvirgendelcarmen.com/">Enlace</a></li>
<li><a href="https://www.iesvirgendelcarmen.com/">Enlace</a></li>
<li><a href="https://www.iesvirgendelcarmen.com/">Enlace</a></li>
</ul>
</nav>
<div class="sections">
<section>
<h1>Esta es un seccion</h1>
<div class="divided-section">
<div class="divided-section-1">
<article>
<h1>Esto es un artículo</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt temporibus
blanditiis libero accusamus consectetur autem amet accusantium nemo magnam, ab
est quibusdam nisi porro, perspiciatis error debitis, optio vero veritatis! Lorem
ipsum dolor sit amet consectetur adipisicing elit. Totam maxime, reiciendis ab
architecto molestiae praesentium sapiente incidunt, inventore possimus unde
nihil natus modi. Dolorem optio provident incidunt aperiam ab eius.
</p>
</article>
</div>
<div class="divided-section-2">
<aside>
<h1>Esto es un aside dentro de una sección</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus sit
suscipit earum maxime, eos praesentium consequuntur deserunt nulla!
Possimus, harum cupiditate! Magni hic ullam voluptatum magnam ea minima
repudiandae placeat?
</p>
</aside>
</div>
</div>
</section>
<section>
<h1>Esto es una seccion</h1>
<div class="divided-section">
<div class="divided-section-1">
</div>
<div class="divided-section-2">
<aside>
<h1>Esto es un aside dentro de una sección</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus sit
suscipit earum maxime, eos praesentium consequuntur deserunt nulla!
Possimus, harum cupiditate! Magni hic ullam voluptatum magnam ea minima
repudiandae placeat?
</p>
</aside>
</div>
</div>
</section>
</div>
</div>
<footer>
<h1>Esto es un footer</h1>
</footer>
</body>
</html>Editor is loading...