Untitled

<!DOCTYPE html>
<html>

 <head>
  <meta charset="utf-8">
  <meta name="description" content="Página construída para disciplina da Faculdade Pitágoras.">
  <title>Minha Página Pessoal</title>
  <link rel="stylesheet" type="text/css" href="style.css">
 </head>

 <body>
  <h2>Faça login</h2>

  <form>
   <div>
    <label>Usuário</label>
    <input value="admin" disabled>

    <label>Senha</label>
    <input type="password" placeholder="Senha">

    <button style="background-color: blue; color: white;">Entrar</button>
   </div>
  </form>

  <select>
   <option>Despesas</option>
   <option>Ganhos</option>
   <option>Resumo</option>
  </select>

  <h2>Despesas</h2>

  <table>
   <thead>
    <tr>
     <th>Descrição</th>
     <th>Quantidade</th>
     <th>Valor</th>
     <th>Total</th>
    </tr>
   </thead>

   <tbody>

    <tr>
     <td>Leite</td>
     <td>12</td>
     <td>R$ 3,00</td>
     <td>R$ 36,00</td>
    </tr>

    <tr>
     <td>Frigideira</td>
     <td>2</td>
     <td>R$ 25,00</td>
     <td>R$ 50,00</td>
    </tr>

    <tr>
     <td>Leite Infantil NAN</td>
     <td>1</td>
     <td>R$ 40,00</td>
     <td>R$ 40,00</td>
    </tr>

   </tbody>

   <tfoot>
    <tr>
     <td></td>
     <td></td>
     <th>Total</th>
     <td>R$ 126,00</td>
    </tr>
   </tfoot>

  </table>

  <p>Essas <span>despesas</span> consideram <strong>apenas</strong> o período da <em>segunda quinzena</em> de agosto.</p>
  <p style="font-family: 'Comic Sans MS'">Controle de orçamento para viabilizar economia.</p>

  <div>
   <div id="primeira-coluna">
    <p>
    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
    </p>
   </div>

   <div id="segunda-coluna">
    <p>
     É um fato conhecido de todos que um leitor se distrairá com o conteúdo de texto legível de uma página quando estiver examinando sua diagramação. A vantagem de usar Lorem Ipsum é que ele tem uma distribuição normal de letras, ao contrário de "Conteúdo aqui, conteúdo aqui", fazendo com que ele tenha uma aparência similar a de um texto legível. Muitos softwares de publicação e editores de páginas na internet agora usam Lorem Ipsum como texto-modelo padrão, e uma rápida busca por 'lorem ipsum' mostra vários websites ainda em sua fase de construção. Várias versões novas surgiram ao longo dos anos, eventualmente por acidente, e às vezes de propósito (injetando humor, e coisas do gênero).
    </p>
   </div>
  </div>

  <div id="paragrafos">
   <p class="corpo-do-texto">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis viverra leo. Duis vitae elit congue, pharetra erat sed, semper dui. Phasellus sodales, mi eu accumsan vehicula, felis quam convallis enim, in efficitur ligula sapien nec erat. Quisque quis ligula et tellus consectetur dapibus nec vel neque. Etiam efficitur varius sapien in aliquet. Nunc leo massa, gravida sed massa id, semper malesuada ipsum. Integer pharetra dolor justo, vitae tristique ligula condimentum sed. Sed lobortis arcu metus, vitae pharetra sem sagittis vitae. Sed vulputate pulvinar ultricies. Nulla enim ligula, interdum non odio ut, tincidunt gravida dui. Donec in quam dui. Praesent non sagittis massa. Proin nisi odio, sagittis a enim id, scelerisque iaculis lorem. Donec luctus, dolor ac facilisis eleifend, odio lacus tempor lectus, vitae luctus velit diam quis sapien.
   </p>

   <p class="corpo-do-texto">
    Fusce euismod cursus tristique. In consectetur ultricies semper. Aliquam vitae nibh nec neque feugiat imperdiet in ac risus. Proin rhoncus venenatis tellus at efficitur. Donec porta vulputate rutrum. Etiam mauris risus, vulputate accumsan consectetur a, aliquam vitae ante. Duis non mattis urna, vel condimentum nulla. Nulla facilisi. Sed id ornare metus, a tempor felis.
   </p>

   <p class="corpo-do-texto">
    Etiam ac pharetra nisl. Cras ut ultricies mauris. Cras at felis erat. Vestibulum id blandit velit, vel porta mi. Pellentesque quis mi purus. Nulla blandit consequat semper. Curabitur hendrerit eros tellus. Ut laoreet pharetra posuere. Sed vitae velit eu sapien tristique viverra in non metus. Maecenas in enim eu velit vehicula ornare.
   </p>

   <p class="corpo-do-texto">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rutrum erat elit, eget eleifend eros auctor at. Proin eleifend mauris id justo dapibus cursus. Donec congue ligula at quam facilisis, ut volutpat augue aliquam. Sed tempor, nulla a aliquet luctus, purus augue sagittis nisl, pellentesque porttitor quam magna at sem. Nulla sit amet tortor pharetra quam condimentum gravida. Fusce varius, libero at eleifend viverra, arcu enim euismod nibh, quis mollis ligula elit id tellus. Vivamus ligula justo, volutpat ac congue in, elementum eget elit. Cras vitae tortor elementum, fringilla leo eget, fermentum sem. Nullam nec bibendum tellus.
   </p>

   <p class="corpo-do-texto">
    Maecenas ultricies convallis enim ac tempus. Vestibulum tincidunt ullamcorper lacus et lacinia. Morbi id ipsum placerat, dapibus nisl sed, malesuada quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed dictum viverra finibus. Vivamus vitae eros ultrices, pharetra leo vel, posuere orci. Aliquam quis imperdiet nisl. Curabitur nisl orci, sagittis vel libero a, elementum commodo urna. Etiam semper dolor quis felis aliquet, a blandit nisl placerat. Aenean elementum lobortis libero vel semper. Aenean enim dui, pharetra vitae ornare sit amet, consectetur at ex. Curabitur odio leo, mattis a cursus sed, viverra sed dolor. Suspendisse euismod leo non molestie maximus. Etiam sed nunc aliquet, iaculis mi at, commodo enim. Nunc a metus dictum, condimentum arcu vel, consectetur lectus. Nullam scelerisque, sem porta semper suscipit, libero risus pellentesque risus, sed tincidunt velit nulla eu massa.
   </p>
  </div>

 </body>

</html>