fix tabela.html page

amagovpt · Oct 30, 2023 · e284254 · e284254
1 parent 58c0b08
commit e284254
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 29 deletions.
diff --git a/exercicio/corrigido/styles-corrigido.css b/exercicio/corrigido/styles-corrigido.css
@@ -0,0 +1,18 @@
+/* General */
+.spacer {
+  display: block;
+  width: 100%;
+  height: 150px;
+}
+
+/* Footer */
+.footer-supporters {
+  background-color: #ccc;
+}
+.footer-supporters__title {
+  color: #000;
+}
+
+.apoios-logos img {
+  width: 25%;
+}
diff --git a/exercicio/corrigido/tabela.html b/exercicio/corrigido/tabela.html
@@ -1,22 +1,27 @@
 <!DOCTYPE html>
-<html>
+<html lang="pt-PT">
 
 <head>
     <meta charset="UTF-8">
     <title>Exemplo de Erros de Acessibilidade</title>
     <link rel="stylesheet" href="../styles.css">
+    <link rel="stylesheet" href="styles-corrigido.css">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
 </head>
 
 <body>
+    <div class="skip-link visually-hidden">
+        <a href="#main">Pular para o Conteúdo Principal</a>
+    </div>
 
     <header>
         <a href="index.html">
             <img src="../img/logo1234.svg" alt="logo1234.svg">
         </a>
 
         <div class="navegação">
-            <a href="#">Evento</a>
-            <a href="#">Inscrição</a>
+            <a href="evento.html">Evento</a>
+            <a href="inscricao.html">Inscrição</a>
             <div class="submenu">
                 <a class="submenu-toggle" href="#">Workshops &#9662;</a>
                 <div class="submenu-content">
@@ -25,8 +30,8 @@
                     <a href="#" style="white-space: nowrap;">Exercício prático III</a>
                 </div>
             </div>
-            <a href="#">Agenda</a>
-            <a href="#">Gravações</a>
+            <a href="tabela.html">Agenda</a>
+            <a href="videos.hmtl">Gravações</a>
         </div>
 
         <div class="button-container">
@@ -37,32 +42,31 @@
 
             <div class="language-container">
                 <button class="language-button">
-                    <div class="language-icon">
+                    <span class="language-icon">
                         <img src="../img/language.svg" alt="Idioma">
-                    </div>
-                    <a class="language-option">PT</a>
+                    </span>
+                    <span class="language-option">PT</span>
                 </button>
                 <div class="language-dropdown">
-                    <a class="language-option">ENG</a>
+                    <a href="#" class="language-option">ENG</a>
                 </div>
             </div>
         </div>
     </header>
 
 
 
-    <main>
-
-        <div >
-        <h1>Programação e Oradores</h1>
+    <main id="main">
+        <section class="container py-4">
+            <h1>Programação e Oradores</h1>
 
-        <h3>Agenda do Evento</h3>
+            <h2>Agenda do Evento</h2>
 
-            <table class="styled-table">
+            <table class="styled-table mt-4">
                 <tr>
-                    <td>Horário</td>
-                    <td>Atividade</td>
-                    <td>Local</td>
+                    <th>Horário</th>
+                    <th>Atividade</th>
+                    <th>Local</th>
                 </tr>
                 <tr>
                     <td>08:00 - 09:00</td>
@@ -84,20 +88,17 @@ <h3>Agenda do Evento</h3>
                     <td>Palestra de Abertura</td>
                     <td>Sala Principal</td>
                 </tr>
+                <caption class="visually-hidden">Agenda do evento</caption>
             </table>
-        </div>
-
+        </section>
     </main>
-
-
-
-
-    <div class="footer-supporters">
-        <h3>Apoios</h3>
+    <div class="spacer mt-5"></div>
+    <section class="footer-supporters">
+        <h2 class="footer-supporters__title">Apoios</h2>
         <div class="apoios-logos">
-            <img src="../img/republicaportuguesa_black.png" alt="Logo 1"
+            <img class="img-fluid" src="../img/republicaportuguesa_black.png" alt="Logo 1"
                 style="filter: invert(0) hue-rotate(0deg); visibility: visible !important;">
-            <img src="../img/FUE_black.svg" alt="Logo 2"
+            <img class="img-fluid" src="../img/FUE_black.svg" alt="Logo 2"
                 style="filter: invert(0) hue-rotate(0deg); visibility: visible !important;">
         </div>
         <div class="footer-policies">
@@ -109,7 +110,7 @@ <h3>Apoios</h3>
                 <a href="/contactos">Contactos</a>
             </div>
         </div>
-    </div>
+    </section>
 
 
 </body>