Henrique Caetano de Barros
3 years ago
7 changed files with 180 additions and 0 deletions
Unified View
Diff Options
-
+87 -0css/musicas.css
-
+1 -0index.html
-
+1 -0paginas/eventos.html
-
+1 -0paginas/extincoes.html
-
+1 -0paginas/formulario.html
-
+88 -0paginas/musicas.html
-
+1 -0paginas/parques-naturais.html
+ 87
- 0
css/musicas.css
View File
| @ -0,0 +1,87 @@ | |||||
| @import url('./menu.css'); | |||||
| body { | |||||
| margin: 0; | |||||
| } | |||||
| h1 { | |||||
| text-align: center; | |||||
| } | |||||
| .musicas-container { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| flex-direction: column; | |||||
| width: 100vw; | |||||
| } | |||||
| footer { | |||||
| padding-bottom: 50px; | |||||
| text-align: center; | |||||
| margin-inline: 20px; | |||||
| } | |||||
| .table-content { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| margin-top: 80px; | |||||
| min-height: 585px; | |||||
| } | |||||
| .table-content table { | |||||
| min-width: 700px; | |||||
| } | |||||
| th, tr:nth-child(odd) { | |||||
| background-color: #eee; | |||||
| } | |||||
| .table-content table, .table-content th, .table-content td { | |||||
| border-collapse: collapse; | |||||
| border: 1px solid #999; | |||||
| border-inline: none; | |||||
| text-align: left; | |||||
| } | |||||
| [colspan] { | |||||
| font-weight: bold; | |||||
| width: 100%; | |||||
| text-align: center; | |||||
| padding-left: 0; | |||||
| } | |||||
| .table-content tr { | |||||
| height: 35px; | |||||
| } | |||||
| table td:nth-child(-n+3) { | |||||
| width: 30%; | |||||
| } | |||||
| td:nth-of-type(3) { | |||||
| width: 25%; | |||||
| } | |||||
| table:last-child td { | |||||
| width: 15%; | |||||
| } | |||||
| .caption { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| font-weight: bold; | |||||
| font-size: 25px; | |||||
| margin-bottom: 10px; | |||||
| } | |||||
| @media (max-width: 750px) { | |||||
| .table-content th, .table-content td { | |||||
| padding-inline: 10px; | |||||
| } | |||||
| .table-content table { | |||||
| min-width: 0; | |||||
| width: 90vw; | |||||
| } | |||||
| } | |||||
+ 1
- 0
index.html
View File
+ 1
- 0
paginas/eventos.html
View File
+ 1
- 0
paginas/extincoes.html
View File
+ 1
- 0
paginas/formulario.html
View File
+ 88
- 0
paginas/musicas.html
View File
| @ -0,0 +1,88 @@ | |||||
| <!DOCTYPE html> | |||||
| <html> | |||||
| <head> | |||||
| <title>Músicas</title> | |||||
| <meta charset="utf-8"/> | |||||
| <meta name="viewport" content="width=device-width,initial-scale=1"/> | |||||
| <link rel="icon" type="image/png" href="../images/netuno.png" /> | |||||
| <link rel="stylesheet" type="text/css" href="../css/musicas.css" /> | |||||
| </head> | |||||
| <body> | |||||
| <div class="musicas-container"> | |||||
| <nav> | |||||
| <a href="https://www.netuno.org/pt/"><img src="../images/netuno.png" alt="Logo do framework Netuno"></a> | |||||
| <input id="menu-control" class="menu-control" type="checkbox" /> | |||||
| <ul class="menu"> | |||||
| <li onclick="location.href='https://www.netuno.org/pt/'"><img src="../images/netuno.png" alt="Logo do framework Netuno"></li> | |||||
| <li onclick="location.href='../index.html'">Home</li> | |||||
| <li onclick="location.href='./extincoes.html'">Extinções</li> | |||||
| <li onclick="location.href='./parques-naturais.html'">Parques naturais</li> | |||||
| <li onclick="location.href='./formulario.html'">Formulário</li> | |||||
| <li onclick="location.href='./eventos.html'">Eventos</li> | |||||
| <li>Músicas</li> | |||||
| </ul> | |||||
| <label class="label-icon" for="menu-control" > | |||||
| <img src="../images/menu.svg" alt="ícone de um menu" /> | |||||
| </label> | |||||
| </nav> | |||||
| <div class="table-content"> | |||||
| <div> | |||||
| <caption><a class="caption">Músicas</a></caption> | |||||
| <table> | |||||
| <tr> | |||||
| <th>Música</th> | |||||
| <th>Autor</th> | |||||
| <th>Estilo</th> | |||||
| <th>Número da ordem</th> | |||||
| </tr> | |||||
| <tr> | |||||
| <td></td> | |||||
| <td></td> | |||||
| <td></td> | |||||
| <td></td> | |||||
| </tr> | |||||
| <tr> | |||||
| <td></td> | |||||
| <td></td> | |||||
| <td></td> | |||||
| <td></td> | |||||
| </tr> | |||||
| <tr> | |||||
| <td></td> | |||||
| <td></td> | |||||
| <td></td> | |||||
| <td></td> | |||||
| </tr> | |||||
| <tr> | |||||
| <td></td> | |||||
| <td></td> | |||||
| <td></td> | |||||
| <td></td> | |||||
| </tr> | |||||
| <tr> | |||||
| <td></td> | |||||
| <td></td> | |||||
| <td></td> | |||||
| <td></td> | |||||
| </tr> | |||||
| </table> | |||||
| </div> | |||||
| </div> | |||||
| <footer>Copyright © 2023 Extinções Company - Todos os direitos reservados</footer> | |||||
| </div> | |||||
| </body> | |||||
| </html> | |||||