From 4430201ca61c60128e5d945dbafaa51fa57cfcf3 Mon Sep 17 00:00:00 2001
From: Henrique Caetano de Barros <henrique.barros@sc.senai.br>
Date: Wed, 17 May 2023 23:05:18 -0300
Subject: [PATCH] Eventos - estrutura inicial

---
 css/eventos.css               | 56 +++++++++++++++++++++++++++++++++--
 css/extincoes.css             |  9 +++---
 css/parques-naturais.css      | 13 ++++----
 paginas/eventos.html          | 50 ++++++++++++++++++++++++++++++-
 paginas/extincoes.html        |  6 ++--
 paginas/parques-naturais.html |  8 ++---
 6 files changed, 120 insertions(+), 22 deletions(-)

diff --git a/css/eventos.css b/css/eventos.css
index fa4eddd..e2c49b0 100644
--- a/css/eventos.css
+++ b/css/eventos.css
@@ -18,8 +18,60 @@ h1 {
 
 
 footer {
-    position: absolute;
+    position: fixed;
     bottom: 50px;
     text-align: center;
     margin-inline: 20px;
-}
\ No newline at end of file
+}
+
+.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;
+  }
+  
+  .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;
+    }
+  }
\ No newline at end of file
diff --git a/css/extincoes.css b/css/extincoes.css
index 3782a10..c013bf2 100644
--- a/css/extincoes.css
+++ b/css/extincoes.css
@@ -36,19 +36,18 @@ footer {
 
 .table-content table, .table-content th, .table-content td {
   border-collapse: collapse;
-  border: 1px solid black;
+  border: 1px solid #999;
   border-inline: none;
   text-align: center;
-  border-color: #999
 }
 
 .table-content tr {
   height: 35px;
 }
 
-.tr-color {
-  background-color: #eee;  
-} 
+th, tr:nth-child(odd) td {
+  background-color: #eee;
+}
 
 .caption {
   display: flex;
diff --git a/css/parques-naturais.css b/css/parques-naturais.css
index c765d65..e022cf7 100644
--- a/css/parques-naturais.css
+++ b/css/parques-naturais.css
@@ -33,19 +33,18 @@
     min-width: 700px;
   }
 
-  .tr-color {
-    background-color: #eee;  
-  } 
-  
+  th, tr:nth-child(odd) {
+    background-color: #eee;
+  }
+
   .table-content table, .table-content th, .table-content td {
     border-collapse: collapse;
-    border: 1px solid black;
+    border: 1px solid #999;
     border-inline: none;
     text-align: left;
-    border-color: #999
   }
 
-  .colspan {
+  [colspan] {
     font-weight: bold;
     width: 100%;
     text-align: center;
diff --git a/paginas/eventos.html b/paginas/eventos.html
index 2cb5919..944be7b 100644
--- a/paginas/eventos.html
+++ b/paginas/eventos.html
@@ -30,8 +30,56 @@
 
     </nav>   
 
-    <h1>Eventos</h1>
 
+    <div class="table-content">
+      <div>
+        <caption><a class="caption">Eventos</a></caption>
+        <table>
+          <tr>
+            <th>Título</th>
+            <th>Data</th>
+            <th>Capacidade</th>
+            <th>Preço</th>
+            <th>Categoria</th>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+        </table>
+      </div>
+    </div>
     
 
 
diff --git a/paginas/extincoes.html b/paginas/extincoes.html
index 2ff5b0c..f842759 100644
--- a/paginas/extincoes.html
+++ b/paginas/extincoes.html
@@ -35,7 +35,7 @@
       <div>
         <caption><a class="caption">Animais em extinção</a></caption>
         <table>
-          <tr class="tr-color">
+          <tr>
             <th>Animal</th>
             <th>Quantidade</th>
           </tr>
@@ -43,7 +43,7 @@
             <td>Lobo-guará</td>
             <td>23000</td>
           </tr>
-          <tr class="tr-color">
+          <tr>
             <td>Onça-pintada</td>
             <td>10000</td>
           </tr>
@@ -51,7 +51,7 @@
             <td>Panda-gigante</td>
             <td>2500</td>
           </tr>
-          <tr class="tr-color">
+          <tr>
             <td>Arara-azul-de-lear</td>
             <td>1200</td>
           </tr>
diff --git a/paginas/parques-naturais.html b/paginas/parques-naturais.html
index 9e68989..17db9a4 100644
--- a/paginas/parques-naturais.html
+++ b/paginas/parques-naturais.html
@@ -34,7 +34,7 @@
       <div>
         <caption><a class="caption">Parques naturais</a></caption>
         <table>
-          <tr class="tr-color">
+          <tr>
             <th>Nome</th>
             <th>Área (m2)</th>
             <th>Local</th>
@@ -44,7 +44,7 @@
             <td>1.291.000.000</td>
             <td>Piauí</td>
           </tr>
-          <tr class="tr-color">
+          <tr>
             <td>Parque Estadual de Dois Irmãos</td>
             <td>3.874.000</td>
             <td rowspan="2">Pernambuco</td>
@@ -53,7 +53,7 @@
             <td>Parque Ecológico da Serra Negra</td>
             <td>32.400</td>
           </tr>
-          <tr class="tr-color">
+          <tr>
             <td>Parque Nacional de Ubajara</td>
             <td>5.630.000</td>
             <td>Ceará</td>
@@ -63,7 +63,7 @@
             <td>913.000.000</td>
             <td>Bahia</td>
           </tr>
-          <tr class="colspan tr-color">
+          <tr>
             <td colspan="3">Somatório das áreas: 2.213.536.400 m2</td>
           </tr>
         </table>