navbar ok

3 years ago · d38d35faeb
--- a/.DS_Store
+++ b/.DS_Store
--- a/img/.DS_Store
+++ b/img/.DS_Store
--- a/img/mamute-home.jpeg
+++ b/img/mamute-home.jpeg
--- a/img/whale.png
+++ b/img/whale.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,31 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style/index.css">
    <title>Document</title>
 </head>
 <body>
    <main class="navbar">
        <a href="./index.html"><img src="./img/whale.png" alt="logo"></a>
        <div class="pages">
            <a href="./index.html">Home</a>
            <a href="#">Parques Naturais</a>
            <a href="#">Extinções</a>
        </div>
    </main>
    <article>

    </article>
 </body>
 </html>

 <!-- Crie uma nova página chamada extincoes.html, com uma tabela simples que contenha o nome de 5 animais em extinção e a quantidade para cada um deles.
 Crie outra página chamada parques-naturais.html, com a lista de 5 parques naturais do Brasil e a área em m2 para cada um deles.
 Deve ter o cabeçalho da tabela e o footer com o somatório.
 Pelo menos 2 parques devem ser do mesmo estado, sendo que não pode repetir o nome do estado.
 No rodapé da tabela deve conter o somatório das áreas agrupando colunas.
 Crie um formulário que receba o nome do animal, quantidade, o nome do parque e o estado.
 Realize a submissão do formulário para um iframe com a mensagem que foi salvo com sucesso. -->
--- a/style/index.css
+++ b/style/index.css
@ -0,0 +1,35 @@
 body {
    margin: 0;
    padding: 0;
    font-family: Roboto, Helvetica, sans-serif;
 }

 .navbar{
    background-color: gray;
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
    width: 100vw;
 }

 .navbar img {
    width: 40px;
    height: 30px;
    margin: 5px 20px;
 }

 .pages a {
    text-decoration: none;
    margin-right: 10px;
    color: white;
    font-size: 14px;
 } 

 .pages a:hover {
    color: rgb(196, 208, 251);
 }

 a:last-child {
    margin-right: 20px;
 }