| @ -0,0 +1,27 @@ | |||||
| i | |||||
| h1 { | |||||
| text-align: center; | |||||
| } | |||||
| table, th, td { | |||||
| border: 1px solid black; | |||||
| border-collapse: collapse; | |||||
| } | |||||
| .table-content { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| margin-top: 50px; | |||||
| } | |||||
| .caption { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| font-weight: bold; | |||||
| font-size: 18px; | |||||
| } | |||||
| @ -0,0 +1,46 @@ | |||||
| body { | |||||
| margin: 0; | |||||
| } | |||||
| .menu-container table, .menu-container th, .menu-container td { | |||||
| min-width: 100px; | |||||
| border: 1px solid black; | |||||
| border-collapse: collapse; | |||||
| text-align: center; | |||||
| } | |||||
| .menu-container table { | |||||
| border-top: none; | |||||
| } | |||||
| .img-container { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| flex-direction: column; | |||||
| } | |||||
| .menu-container { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| width: 100%; | |||||
| } | |||||
| .menu-container img, .menu-container span { | |||||
| width: 40px; | |||||
| } | |||||
| .menu-container table { | |||||
| border-top: none; | |||||
| } | |||||
| .img-fauna { | |||||
| width: 100%; | |||||
| margin-top: 50px; | |||||
| } | |||||
| footer { | |||||
| margin-top: 3vh; | |||||
| } | |||||
| @ -1,11 +1,39 @@ | |||||
| <!DOCTYPE html> | <!DOCTYPE html> | ||||
| <html> | <html> | ||||
| <head> | <head> | ||||
| <title>Título Página</title> | |||||
| <title>Fauna</title> | |||||
| <meta charset="utf-8"/> | |||||
| <meta name="viewport" content="width=device-width,initial-scale=1"/> | <meta name="viewport" content="width=device-width,initial-scale=1"/> | ||||
| <link rel="stylesheet" type="text/css" href="css/index.css" /> | |||||
| </head> | </head> | ||||
| <body> | |||||
| <h1>Título do Conteúdo</h1> | |||||
| <p>Texto alterado do conteúdo...</p> | |||||
| <body> | |||||
| <div class="img-container"> | |||||
| <div class="menu-container"> | |||||
| <a href="https://www.netuno.org/pt/"><img src="https://git.academy.netuno.org/hcbarros/html1/raw/branch/master/netuno.png" alt="Logo do framework Netuno"></a> | |||||
| <table> | |||||
| <tr> | |||||
| <td><a href="index.html">Página principal</a></td> | |||||
| <td><a href="paginas/extincoes.html">Extinções</a></td> | |||||
| <td><a href="#">Parques naturais</a></td> | |||||
| <td><a href="#">Formulário</a></td> | |||||
| </tr> | |||||
| </table> | |||||
| <span /> | |||||
| </div> | |||||
| <div> | |||||
| <img class="img-fauna" src="https://git.academy.netuno.org/hcbarros/html1/raw/commit/873d7d7280a364ef01d7cef5895ba8bbfd35a9eb/fauna.png" alt="Imagem de fauna silvestre"> | |||||
| </div> | |||||
| <footer><h3>Animais em extinção</h3></footer> | |||||
| </div> | |||||
| </body> | </body> | ||||
| </html> | </html> | ||||
| @ -0,0 +1,65 @@ | |||||
| <!DOCTYPE html> | |||||
| <html> | |||||
| <head> | |||||
| <title>Extinções</title> | |||||
| <meta charset="utf-8"/> | |||||
| <meta name="viewport" content="width=device-width,initial-scale=1"/> | |||||
| <link rel="stylesheet" type="text/css" href="../css/extincoes.css" /> | |||||
| <link rel="stylesheet" type="text/css" href="../css/index.css" /> | |||||
| </head> | |||||
| <body> | |||||
| <div class="img-container"> | |||||
| <div class="menu-container"> | |||||
| <a href="https://www.netuno.org/pt/"><img src="https://git.academy.netuno.org/hcbarros/html1/raw/branch/master/netuno.png" alt="Logo do framework Netuno"></a> | |||||
| <table> | |||||
| <tr> | |||||
| <td><a href="../index.html">Página principal</a></td> | |||||
| <td><a href="#">Extinções</a></td> | |||||
| <td><a href="#">Parques naturais</a></td> | |||||
| <td><a href="#">Formulário</a></td> | |||||
| </tr> | |||||
| </table> | |||||
| <span /> | |||||
| </div> | |||||
| <h1>Extinções</h1> | |||||
| <div class="table-content"> | |||||
| <div> | |||||
| <caption><a class="caption">Animais em extinção</a></caption> | |||||
| <table> | |||||
| <tr> | |||||
| <th>Animal</th> | |||||
| <th>Quantidade</th> | |||||
| </tr> | |||||
| <tr> | |||||
| <td>Lobo-guará</td> | |||||
| <td>23000</td> | |||||
| </tr> | |||||
| <tr> | |||||
| <td>Onça-pintada</td> | |||||
| <td>10000</td> | |||||
| </tr> | |||||
| <tr> | |||||
| <td>Panda-gigante</td> | |||||
| <td>2500</td> | |||||
| </tr> | |||||
| <tr> | |||||
| <td>Arara-azul-de-lear</td> | |||||
| <td>1200</td> | |||||
| </tr> | |||||
| <tr> | |||||
| <td>Baleia-fin</td> | |||||
| <td>400</td> | |||||
| </tr> | |||||
| </table> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </body> | |||||
| </html> | |||||