Enviar arquivos para ''

extincoes.css

@@ -0,0 +1,83 @@
+@import url('./menu.css');
+
+
+body {
+  margin: 0;
+}
+
+h1 {
+  text-align: center;
+}
+
+.extincoes-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100vw;
+}
+
+footer {
+  position: absolute;
+  bottom: 50px;
+  text-align: center;
+  margin-inline: 20px;
+}
+
+.table-content {
+  display: flex;
+  justify-content: center;
+  margin-top: 50px;
+  min-width: 700px;
+}
+
+.table-content table {
+  width: 50vw;
+  min-width: 600px;
+  background-color: rgb(250, 250, 250);
+}
+
+.table-content table, .table-content th, .table-content td {
+  border-collapse: collapse;
+  border: 1px solid black;
+  border-inline: none;
+  text-align: center;
+  border-color: #999
+}
+
+.table-content tr {
+  height: 35px;
+}
+
+.caption {
+  display: flex;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+
+@media (max-width: 750px) {
+  .table-content table {
+    width: 80vw;
+    min-width: 0;
+  }
+
+}
+
+@media (max-width: 350px) { 
+  .table-content table {
+    width: 95vw;
+    min-width: 0;
+  }
+}
+
+@media (max-height: 570px) {
+  footer {
+    position: relative;
+    padding-top: 100px;
+  }
+}
+
+

formulario.css

@@ -0,0 +1,129 @@
+@import url('./menu.css');
+
+
+body {
+  margin: 0;
+}
+
+h1 {
+  text-align: center;
+}
+
+.formulario-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100vw;
+}
+
+.form-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 560px;
+  padding-bottom: 20px;
+}
+
+fieldset {
+    border-radius: 7px;
+    width: 550px;
+    margin-inline: 10px;
+    border-color: #996dff;    
+}
+
+legend {
+    font-weight: bold;
+    font-size: 20px;
+}
+
+input[type='text'] {
+    border: none;
+    border-bottom: 1px solid black;
+    outline: none;
+    width: 320px;
+    border-color: #996dff;
+    padding-left: 10px; 
+}
+
+td {
+    height: 40px;
+    font-size: 18px;
+}
+
+button {
+  font-size: 16px;
+  font-weight: bold;
+  width: 120px;
+  height: 40px;
+  margin-block: 5px;
+  border-radius: 5px;
+  cursor: pointer;
+  background-color: #734bd1;
+  color: #fff;
+  border: none;
+  transition-duration: 0.4s;
+}
+
+button:hover {
+  background-color: #9466ff;
+}
+
+footer {
+  padding-bottom: 50px;
+  text-align: center;
+  margin-inline: 20px;
+}
+
+iframe {
+  width: 300px;
+  height: 100px;
+  border: 2px solid #734bd1;
+  border-radius: 5px;
+  margin-top: 50px;
+}
+
+.msg-sucesso {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  font-weight: bold;
+  font-size: 10vw;
+  text-align: center;
+}
+
+@media (max-width: 600px) {
+  fieldset, input[type='text'] {
+    width: 60vw;      
+  }  
+}
+
+@media (max-width: 450px) {
+  fieldset, input[type='text'] {
+    width: 40vw;      
+  }   
+}
+
+@media (max-width: 350px) {
+  iframe {
+    width: 85vw;      
+  }   
+}
+
+@media (max-width: 280px) {
+  fieldset, input[type='text'] {
+    width: 35vw;      
+  }
+  legend {
+    font-size: 7vw;
+  }
+  td {
+    font-size: 6.5vw;      
+  }   
+}
+
+

index.css

@@ -0,0 +1,39 @@
+@import url('./menu.css');
+
+
+body {
+  margin: 0;
+}
+
+h1 {
+  text-align: center;
+}
+
+.extincoes-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100vw;
+}
+
+footer {
+  position: absolute;
+  bottom: 50px;
+  text-align: center;
+  margin-inline: 20px;
+}
+
+.img-fauna {
+  width: 100%;
+  margin-top: 50px;
+}
+
+
+@media (max-height: 570px) {
+  footer {
+    position: relative;
+    padding-top: 100px;
+  }  
+}
+

index.html

@@ -4,34 +4,40 @@
   <title>Fauna</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/index.css" />           
 </head>
 <body>  
 
-  <div class="img-container">
+  <div class="extincoes-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>
+    <nav>
+      <a href="https://www.netuno.org/pt/"><img src="images/netuno.png" alt="Logo do framework Netuno"></a>
 
-      <span />
+      <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>Home</li>
+        <li onclick="location.href='./paginas/extincoes.html'">Extinções</li>
+        <li onclick="location.href='./paginas/parques-naturais.html'">Parques naturais</li>
+        <li onclick="location.href='./paginas/formulario.html'">Formulário</li>
+      </ul>
 
-    </div>    
+      <label class="label-icon" for="menu-control" >
+          <img src="./images/menu.svg" alt="ícone de um menu" />
+      </label> 
+
+    </nav>   
+
+    <h1>Extinções</h1>
 
     <div>
 
-      <img class="img-fauna" src="https://git.academy.netuno.org/hcbarros/html1/raw/commit/873d7d7280a364ef01d7cef5895ba8bbfd35a9eb/fauna.png" alt="Imagem de fauna silvestre">
+      <img class="img-fauna" src="images/fauna.png" alt="Imagem de fauna silvestre">
 
     </div>
 
-    <footer><h3>Animais em extinção</h3></footer>
+    <footer>Copyright © 2023 Extinções Company - Todos os direitos reservados</footer>
 
   </div>
 

parques-naturais.css

@@ -0,0 +1,97 @@
+@import url('./menu.css');
+
+  body {
+    margin: 0;
+  }
+  
+  h1 {
+    text-align: center;
+  }
+  
+  .parques-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-width: 700px;
+    min-height: 585px;
+  }
+  
+  .table-content table {
+    width: 50vw;
+    min-width: 600px;
+    background-color: rgb(250, 250, 250);
+  }
+  
+  .table-content table, .table-content th, .table-content td {
+    border-collapse: collapse;
+    border: 1px solid black;
+    border-inline: none;
+    text-align: left;
+    border-color: #999
+  }
+
+  .colspan {
+    font-weight: bold;
+    width: 100%;
+    text-align: center;
+    padding-left: 0;
+  }
+
+  .table-content tr {
+    height: 35px;
+  }
+  
+  .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: 220px;
+        width: 90vw;
+    }
+  }
+
+  @media (max-width: 380px) { 
+    .table-content th, .table-content td {
+        padding-inline: 5px;
+    }
+  }
+  
+  @media (max-width: 330px) { 
+    .table-content th, .table-content td {
+      word-break: break-all;
+    }
+    .table-content table {
+      width: 95vw;
+    }
+  }
+  
+  @media (max-width: 260px) { 
+    .caption {
+      font-size: 9.8vw;
+    }
+  }
+