css

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;
+  }  
+}
+

menu.css

@@ -0,0 +1,80 @@
+
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center; 
+    width: 100%;
+    height: 50px;
+    border-bottom: 1px solid black;
+  }
+  
+  nav a img, ul img {
+    width: 53px;
+  }
+  
+  .menu-control, .label-icon, ul img {
+    display: none;
+  }
+  
+  .menu {
+    display: flex;
+    list-style: none;
+  }
+  
+  .menu li {
+    margin-right: 50px;
+    cursor: pointer;
+  }
+
+
+  @media (max-width: 750px) {
+    nav {
+      flex-direction: row-reverse;
+    }
+
+    .label-icon, ul img {
+       display: block;  
+    }
+  
+    .label-icon {
+      margin-left: 10px;
+      cursor: pointer;
+    }
+  
+    .label-icon img {
+      height: 30px;
+    }
+  
+    .menu {
+      top: 0;
+      padding-top: 50px;
+      width: 200px;
+      justify-content: flex-start;
+      align-items: center;
+      text-align: center;
+      flex-direction: column;
+      position: fixed;
+      right: 0;
+      background-color: #fff;
+      height: 100%;
+      z-index: 1;
+      box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.4);
+      transform: translateX(110%);
+      transition: transform 0.5s ease;
+    }
+  
+    .menu li {
+      margin-top: 30px;
+    }
+  
+    .menu-control:checked + .menu {
+      transform: translateX(0);
+    }
+  
+  }
+
+  @media (max-width: 350px) { 
+    .menu {
+      width: calc(25px + 50%); 
+    }
+  }

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;
+    }
+  }
+