Untitled

avatar
unknown
html
2 years ago
3.7 kB
5
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...