Update: HTML e CSS

Atualização no HTML Semântico e alguns estilos no rodapé
Davi-D18 · Oct 18, 2024 · b7e2ce8 · b7e2ce8
1 parent f905474
commit b7e2ce8
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 56 deletions.
diff --git a/index.html b/index.html
@@ -72,10 +72,12 @@ <h1 class="fade-in">Outubro Rosa</h1>
       </div>
 
       <div class="info-autor">
-        <p>Luiz Davi</p>
-        <p>Instrutora: Fernanda Corrêa</p>
-        <p>Facilitador: João Pedro</p>
-        <p>Layout criado para fins de estudos na escola vai na web</p>
+        <ul class="informacoes-extras">
+          <li>Luiz Davi</li>
+          <li>Instrutora: Fernanda Corrêa</li>
+          <li>Facilitador: João Pedro</li>
+          <li>Layout criado para fins de estudos na escola vai na web</p>
+        </ul>
       </div>
 
       <img

diff --git a/src/styles/style.css b/src/styles/style.css
@@ -23,20 +23,19 @@ header .hero {
 header .hero h1 {
   text-transform: uppercase;
 }
-
-ul {
+header ul {
   display: flex;
   gap: 2rem;
   list-style-type: none;
 }
-ul a {
+header ul a {
   text-decoration: none;
   color: white;
   font-size: 22px;
   text-transform: uppercase;
   position: relative;
 }
-ul a::after {
+header ul a::after {
   content: "";
   position: absolute;
   width: 0;
@@ -46,7 +45,7 @@ ul a::after {
   bottom: -3px; /* Distância do texto */
   transition: width 0.6s ease-in-out;
 }
-ul a::before {
+header ul a::before {
   content: "";
   position: absolute;
   width: 0;
@@ -56,10 +55,10 @@ ul a::before {
   bottom: -3px; /* Distância do texto */
   transition: width 0.5s ease-in-out;
 }
-ul a:hover::before {
+header ul a:hover::before {
   width: 100%;
 }
-ul a:hover::after {
+header ul a:hover::after {
   width: 100%;
 }
 
@@ -110,8 +109,16 @@ footer {
   padding-inline: 7vw;
   padding-block: 4vh;
 }
-footer .info-autor {
+footer ul {
+  list-style-type: none;
+}
+footer ul li {
+  margin-top: 7px;
+}
+footer .informacoes-extras {
   text-align: center;
+  display: flex;
+  flex-direction: column;
 }
 footer img {
   width: 60px;

diff --git a/src/styles/style.css.map b/src/styles/style.css.map
diff --git a/src/styles/style.scss b/src/styles/style.scss
@@ -30,53 +30,54 @@ header {
       text-transform: uppercase;
     }
   }
-}
-
-
-ul {
-  display: flex;
-  gap: 2rem;
-  list-style-type: none;
-
-  a {
-    text-decoration: none;
-    color: white;
-    font-size: 22px;
-    text-transform: uppercase;
-    position: relative;
-
-    &::after {
-      content: "";
-      position: absolute;
-      width: 0;
-      height: 1px;
-      background-color: #fff;
-      left: 0;
-      bottom: -3px; /* Distância do texto */
-      transition: width 0.6s ease-in-out;
-    }
-
-    &::before {
-      content: "";
-      position: absolute;
-      width: 0;
-      height: 1px;
-      background-color: #fff;
-      right: 0;
-      bottom: -3px; /* Distância do texto */
-      transition: width 0.5s ease-in-out;
-    }
 
-    &:hover::before {
-      width: 100%;
-    }
-
-    &:hover::after {
-      width: 100%;
+  ul {
+    display: flex;
+    gap: 2rem;
+    list-style-type: none;
+
+    a {
+      text-decoration: none;
+      color: white;
+      font-size: 22px;
+      text-transform: uppercase;
+      position: relative;
+
+      &::after {
+        content: "";
+        position: absolute;
+        width: 0;
+        height: 1px;
+        background-color: #fff;
+        left: 0;
+        bottom: -3px; /* Distância do texto */
+        transition: width 0.6s ease-in-out;
+      }
+
+      &::before {
+        content: "";
+        position: absolute;
+        width: 0;
+        height: 1px;
+        background-color: #fff;
+        right: 0;
+        bottom: -3px; /* Distância do texto */
+        transition: width 0.5s ease-in-out;
+      }
+
+      &:hover::before {
+        width: 100%;
+      }
+
+      &:hover::after {
+        width: 100%;
+      }
     }
   }
 }
 
+
+
 // Estilos das seções
 
 section {
@@ -139,8 +140,18 @@ footer {
   padding-inline: 7vw;
   padding-block: 4vh;
 
-  .info-autor {
+  ul {
+    list-style-type: none;
+
+    li {
+      margin-top: 7px;
+    }
+  }
+
+  .informacoes-extras{
     text-align: center;
+    display: flex;
+    flex-direction: column;
   }
 
   img {