Parte Index PW2 2018

<html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head>

        <title>Minha página inicial</title>

        <style>
            #top { width:100%; padding:10px; display:inline-block; border-bottom:1px solid black; background-color:yellow; }
            #lin1 { width:100%; padding:10px; clear:both; margin-top:10px;    border-bottom:1px solid black; display:inline-block; background-color:green; }
            #logo { height: 90px; }
            #menu {  }
            #section1 { width:80%; }
            .menu-nav { list-style-type: none; margin: 0; padding: 0; font-size:20px; }
            .menu-nav li { float:left;  background-color:blue; border: 1px solid gray; }
            .menu-nav li a {
            display: block;
            color: red;
            text-align: center;
            padding: 16px;
            text-decoration: none;
            }
            .menu-nav li a:hover {
            background-color: yellow;
            }
            #texto1 { width:80%;  }
            .col2{ width:80%; float:left; }
            .col3{ width:20%; float:left; }
            .button { width:140px; background-color:white; height:40px; padding:20px; margin-bottom:30px; }

        </style>
    </head>
    <body>
    <div id="top">
        <div class="col2">
            <div id="logo">
                <h1>MEU SITE</h1>
            </div>
            <div id="menu">
            <ul class="menu-nav">
            <li><a href="#">menu 1</a></li>
            <li><a href="#">menu 2</a></li>
            <li><a href="#">menu 3</a></li>
            <li><a href="#">menu 4</a></li>
            </ul>
            </div>
        </div>
        <div class="col3">
            <div id="section1">
            <h3>Seção 1</h3>
            Algum texto por padrão apenas para marcar posição no espaço. Um pouco mais de texto para marcar posição.<br/>
            Buscar
            <br/>
            <input type="search" placeholder="Buscar"/>
            <br/>
            </div>
        </div>
    </div>
    <div id="lin1">
        <div class="col2">
            <div id="texto1">
                <h2>Título</h2>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a orci non augue dapibus tristique. In sed nibh et erat tempus accumsan sit amet eu nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac erat vitae massa porta dapibus vel ultricies velit. Nullam tincidunt nec elit eu rhoncus. Pellentesque sollicitudin, est in vehicula tempor, felis lacus egestas libero, ut condimentum dolor mi eget felis. Nulla suscipit rutrum molestie. Donec hendrerit pulvinar facilisis. Fusce nec lorem eros. Morbi turpis dui, auctor in cursus quis, sollicitudin ac quam. Vestibulum vel nisl pulvinar, aliquam dui at, pretium ex. Sed sed nulla feugiat, gravida neque id, placerat sapien. Integer et placerat elit.

Fusce scelerisque consectetur ligula ut suscipit. <p>Nunc quis vestibulum ex. Morbi euismod felis eros. Morbi fermentum nibh quis odio tincidunt ultricies. Mauris vel nisl non enim dapibus efficitur. Donec iaculis mauris sit amet dolor posuere, sed iaculis lorem bibendum. Nunc vel scelerisque lacus, sed fringilla quam. Integer iaculis lacus at enim auctor consequat id quis nisi. Phasellus non venenatis est, vitae rhoncus diam. Nulla justo purus, feugiat sed iaculis vitae, tristique ac magna. Duis semper metus fermentum tellus maximus, a pretium metus auctor.Fusce scelerisque consectetur ligula ut suscipit. Nunc quis vestibulum ex. Morbi euismod felis eros. Morbi fermentum nibh quis odio tincidunt ultricies. Mauris vel nisl non enim dapibus efficitur. Donec iaculis mauris sit amet dolor posuere, sed iaculis lorem bibendum. Nunc vel scelerisque lacus, sed fringilla quam. Integer iaculis lacus at enim auctor consequat id quis nisi. Phasellus non venenatis est, vitae rhoncus diam. Nulla justo purus, feugiat sed iaculis vitae, tristique ac magna. Duis semper metus fermentum tellus maximus, a pretium metus auctor.</p>

            </div>

        </div>
        <div class="col3">
            <div id="section1">
            <br>
            <input type="button" class="button" value="Botão" />
            <br/>
            <input type="button" class="button" value="Botão" />
            <p>
            Algum texto por padrão apenas para marcar posição no espaço. Um pouco mais de texto para marcar posição.</p>
            </div>
        </div>
    </div>
    </body>

</html>