From be2b2fb8c305a696bd182a2b67cbbbc51244648a Mon Sep 17 00:00:00 2001
From: Ana Luiza <163297069+analuizaIF@users.noreply.github.com>
Date: Wed, 2 Oct 2024 15:02:12 -0300
Subject: [PATCH 1/6] estrutura html e estilo

---
 assets/css/styles.css | 249 ++++++++++++++++++++++++++++++++++++++++++
 index.html            | 210 +++++++++++++++--------------------
 2 files changed, 338 insertions(+), 121 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index e69de29..76b461d 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -0,0 +1,249 @@
+/*Importacoes de fontes*/
+
+/*** VARIABLES & THEMES ***/
+
+:root {
+    --primary-color: #cf0f0f;
+    --primary-color-contrast: #ffffff;
+    --field-background-color: #000;
+}
+  
+.light-theme {
+    --page-background: linear-gradient(
+        180deg,
+        #ffffff 0%,
+        #ffffff 65%,
+        rgba(255, 255, 255, 0.75) 100%
+);
+
+    --header-background-color: #e3e3e3;
+    --highlight-color: #000000;
+    --featured-font-family: "Archivo", sans-serif;
+    --character-top-image-src: url("../images/characters/kids-on-the-bike.svg");
+    --character-top-image-color: #ffffff;
+    --character-bottom-image-src: url("../images/characters/inverted-world-monster.svg");
+    --character-bottom-image-color: #e5e5e5;
+    --background-lamp-image: url("../images/backgrounds/lamps.png");
+    --footer-background-color: #b5bbbf;
+}
+
+
+.dark-theme {
+    --page-background: linear-gradient(
+    180deg,
+    #050000 0%,
+    #130404 65%,
+    rgba(19, 1, 1, 0.75) 100%
+);
+    --header-background-color: #220f0f;
+    --highlight-color: #ffffff;
+    --featured-font-family: "Rubik Glitch", sans-serif;
+    --character-bottom-image-src: url("../images/characters/kids-on-the-bike.svg");
+    --character-bottom-image-color: rgba(255, 255, 255, 0.1);
+    --character-top-image-src: url("../images/characters/inverted-world-monster.svg");
+    --character-top-image-color: #000;
+    --background-lamp-image: url("../images/backgrounds/lamps-inverted.png");
+    --footer-background-color: #000;
+    }
+
+
+/*Inicio da estilizacao*/
+
+*{
+    margin: 0;
+    box-sizing: border-box;
+}
+
+h1, h2, h3{
+    font-family: var(--featured-font-family);
+    font-size: 3rem;
+    color: var(--primary-color);
+    text-transform: uppercase;
+    margin-bottom: 40px;
+}
+
+p{
+    color: var(--highlight-color);
+}
+
+p, input, label, textarea{
+    font-family: "Libre Baskerville", serif;
+}
+
+button{
+    padding: 16px 30px;
+    background-color: transparent;
+    font-weight: 900;
+    font-family: var(--featured-font-family);
+    font-size: 1.25rem;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: background 1s;
+}
+
+/*Estilizacao do cabecalho (Header)*/
+header{
+    background-color: var(--header-background-color);
+    min-height: 850px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+}
+
+header::before{
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-image: url(../images/banner/florest.webp);
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center 90%;
+    filter: saturate(0);
+    opacity: 0.2;
+}    
+
+.header-conteudo{
+    max-width: 700px;
+    padding: 80px 20px;
+    text-align: center;
+    z-index: 2;
+}
+
+.header-conteudo img{
+    width: 80%;
+}
+
+.header-conteudo p{
+    margin: 30px 0 50px;
+}
+
+.header-conteudo button{
+    border: 3px solid var(--primary-color);
+    color: var(--primary-color);
+}
+
+.header-conteudo button:hover{
+    background-color: var(--primary-color);
+    color: var(--primary-color-contrast);
+}
+
+/*Estilizando imagens*/
+.world-characters{
+    width: 100%;
+    max-width: 900px;
+    position: absolute;
+}
+
+#top-characters{
+    height: 100%;
+    background-color: var(--character-top-image-color);
+    bottom: -3px;
+    
+    mask: var( --character-top-image-src) bottom / 100% no-repeat;
+    --webkit-mask: var( --character-top-image-src) bottom / 100% no-repeat;
+}
+
+#bottom-characters{
+    height: 500px;
+    background-color: var(--character-bottom-image-color);
+    top: 3px;
+    transform: rotateZ('180deg') scaleX(-1);
+    position: relative;   
+
+    mask: var(--character-bottom-image-src-image-src) bottom / contain no-repeat;
+    --webkit-mask: var(--character-bottom-image-src-image-src) bottom / 100% no-repeat;
+}
+
+main{
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/*Secao um*/
+section{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 95px;
+}
+
+.container{
+    max-width: 1200px;
+}
+
+#section-invert-world{
+    align-items: center;
+}
+
+#section-invert-world .section-texts{
+    width: 50%;
+}
+
+#section-invert-world .section-texts h2{
+    max-width: 300px;
+}
+
+/*Secao dois*/
+#section-stranger-things-trailer .section-texts{
+    width: 50%;
+    text-align: right;   
+}
+
+#section-stranger-things-trailer .section-texts h2{
+    max-width: 425px;
+    display: inline-block;
+}
+
+#section-stranger-things-trailer .video-frame{
+    background-color: var(--primary-color);
+}
+
+#section-stranger-things-trailer .video-frame iframe{
+    position: relative;
+    bottom: 24px;
+    left: 24px;
+    border: 2px solid;
+    border-image: linear-gradient(
+        var(--primary-color),
+        var(--primary-color-contrast)
+    );
+    border-image-slice: 10;
+}
+
+/*Secao tres*/
+#section-stranger-things-gallery{
+    width: 100%;
+    justify-content: center;
+    background-image: url(../images/backgrounds/lamps.png) 120% / 50% no-repeat;
+}
+#section-stranger-things-gallery .container{
+    width: 100%;
+}
+
+#section-stranger-things-gallery .container h2{
+    width: 800px;
+}
+
+#section-stranger-things-gallery .gallery-container{
+    display: flex;
+    gap: 50px;
+    padding-left: 20px;
+}
+
+#section-stranger-things-gallery .gallery-image{
+    width: 250px;
+    height: 250px;
+    outline: 20px solid var(--highlight-color); /*BRANCO*/
+    border: 3px solid var(--primary-color);
+    box-sizing: initial;
+}
+
+#section-stranger-things-gallery .gallery-image img{
+    width: 100px;
+    height: 100px;
+    object-fit: cover;
+    border: 10px solid var(--highlight-color); /*BRANCO*/
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 4748c0e..d533980 100644
--- a/index.html
+++ b/index.html
@@ -1,140 +1,108 @@
 <!DOCTYPE html>
 <html lang="pt-br">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Mundo Invertido | Semana Front-end</title>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Landing page no Mundo Invertido (Stranger Things)">
+    <meta name="author" content="analuizaIF">
+    <link rel="stylesheet" href="assets/css/styles.css">
+    <title>Stranger Things</title>
+</head>
+<body class="light-theme" >
+    
+    <header>
+        <audio id="music">
+            <source src="assets/musics/normal-world.mpeg">
+        </audio>
 
-    <link rel="stylesheet" href="assets/css/styles.css" />
-  </head>
-  <body class="light-theme" aria-label="O site está utilizando o tema light" role="body">
-    <header aria-label="Cabeçalho da página.">
-      <audio id="music" autoplay>
-        <source src="assets/musics/normal-world.mpeg" aria-details="Audio do site" />
-      </audio>
-      <div class="header-content">
-        <img class="invert-element" src="assets/images/banner/logo.svg" alt="Imagem principal Mundo Invertido. Semana Frontend DIO." />
-        <p class="invert-element" role="text">
-          Uma jornada para quem não tem medo do desconhecido. O caminho para o
-          Mundo invertido é incerto, repleto de obstáculos e perigos. Porém, a
-          recompensa é grande: salvar Hawkings e o mundo todo das garras de
-          Vecna. Você está preparado? Então clique no botão abaixo para entrar
-          no Mundo Invertido!
-        </p>
-        <button id="switch-theme-button" onclick="switchTheme()">Inverter Mundos</button>
-      </div>
+        <div class="header-conteudo">
+            <img class="invert-elementp" src="assets/images/banner/logo (1).svg" alt="Imagem principal">
+            <p class="invert-elemento">Uma jornada para quem não tem medo do desconhecido. O caminho para o Mundo invertido é incerto, repleto de obstáculos e perigos. Porém, a recompensa é grande: salvar Hawkings e o mundo todo das garras de Vecna. Você está preparado? Então clique no botão abaixo para entrar no Mundo Invertido!</p>
+            <button id="switch-theme-button" onclick="="switchTheme()>Inverter Mundos</button>
+        </div>
 
-      <div id="top-characters" class="world-characters"></div>
+        <div id="top-characters" class="world-characters"></div>
     </header>
 
     <main>
-      <div id="bottom-characters" class="world-characters"></div>
+        <div id="bottom-characteres" class="world-characters"></div>
+        <section id="section-invert-world" class="container">
+            <div class="section-texts">
+                <h2>O Mundo Invertido</h2>
+                <p role="text">O Mundo Invertido parece uma cópia do nosso mundo, mas com criaturas horrendas, tempestades assustadoras, muita escuridão e entidades malignas. Um reino controlado por Vecna, que tem planos de trazer tudo isso ao nosso mundo. </p>
+            </div>
+            <img class="invert-elemento" src="assets/images/content/inverted-world.png" alt="Imagem Ilustrativa com a tematica série Stranger Things">
+        </section>
 
-      <section id="section-inverted-world" class="container">
-        <div class="section-texts">
-          <h1>O Mundo Invertido</h1>
-          <p role="text">
-            O Mundo Invertido parece uma cópia do nosso mundo, mas com criaturas
-            horrendas, tempestades assustadoras, muita escuridão e entidades
-            malignas. Um reino controlado por Vecna, que tem planos de trazer
-            tudo isso ao nosso mundo.
-          </p>
-        </div>
+        <section id="section-stranger-things-trailer" class="container">
+            <div class="video-frame">
+                <iframe
+                width="460"
+                height="215"
+                src="https://www.youtube.com/embed/SJ9EFhQ3ANQ?controls=0"
+                title="YouTube video player"
+                frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowfullscreen>
+                </iframe>
+            </div>
 
-        <img
-          class="invert-element"
-          src="assets/images/content/inverted-world.png"
-          alt="Image ilustrativa do Mundo Invertido"
-        />
-      </section>
+            <div class="section-texts">
+                <h2>Stranger Things Vol. 4</h2>
+                <p role="text">Mais experientes, os heróis de Stranger Things também precisam enfrentar desafios maiores do que nunca e fazer decisões que vão mudar suas vidas para sempre. Confira ao lado o trailer da quarta temporada. </p>
+            </div>
+        </section>
 
-      <section id="section-stranger-things-trailer" class="container">
-        <div class="video-frame" aria-hidden="true">
-          <iframe
-            width="460"
-            height="215"
-            src="https://www.youtube.com/embed/SJ9EFhQ3ANQ?controls=0"
-            title="YouTube video player"
-            frameborder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            allowfullscreen
-          ></iframe>
-        </div>
-        <div class="section-texts">
-          <h2>Stranger Things Vol. 4</h2>
-          <p role="text">
-            Mais experientes, os heróis de Stranger Things também precisam
-            enfrentar desafios maiores do que nunca e fazer decisões que vão
-            mudar suas vidas para sempre. Confira ao lado o trailer da quarta
-            temporada.
-          </p>
-        </div>
-      </section>
+        <section id="section-stranger-things-gallery">
+            <div class="container-section-text">
+                <h2>A segunda série mais assistida da netflix</h2>
+                <ul class="gallery-container" role="gallery">
+                    <li class="gallery-image invert-element">
+                        <img src="assets/images/content/serie-image-01.png" alt="Imagem Ilustrativa da série Stranger Things">
+                    </li>
+                    <li class="gallery-image invert-element">
+                        <img src="assets/images/content/serie-image-02.png" alt="Imagem Ilustrativa da série Stranger Things">
+                    </li>
+                    <li class="gallery-image invert-element">
+                        <img src="assets/images/content/serie-image-03.png" alt="Imagem Ilustrativa da série Stranger Things">
+                    </li>
+                </ul>
+            </div>
+        </section>
 
-      <section id="section-stranger-things-gallery">
-        <div class="container section-text">
-          <h2>A segunda série mais assistida da Netflix</h2>
-          <ul class="gallery-container" role="gallery">
-            <li class="gallery-image invert-element">
-              <img src="assets/images/content/serie-image-01.png" alt="Imagem de Vecna" />
-            </li>
-            <li class="gallery-image invert-element">
-              <img src="assets/images/content/serie-image-02.png" alt="Imagem ilustrativa dos amigos de Eleven" />
-            </li>
-            <li class="gallery-image invert-element">
-              <img src="assets/images/content/serie-image-03.png" alt="Imagem Eleven assustada" />
-            </li>
-          </ul>
-        </div>
-      </section>
+        <section id="section-form" class="container">
+            <h2>O clube Dungeons & Dragons</h2>
+            <p>Para deter Vecna, os heróis de Stranger Things também precisam de você. 
+            O Clube de D&D mais famoso de Hawkings está com vagas abertas para sua próxima aventura. Se você é destemido, gosta de desafios e não tem medo de rodar o D20, chegou a hora de se inscrever para fazer parte da nova campanha. </p>
+            
+            <div class="form-container">
+                <h3>entre para o clube de d&d e tenha experiências de <span>outro mundo</span>.</h3>
+                
+                <div class="form-container">
+                    <form >
+                        <label for="txtName">Nome Completo:</label>
+                        <input type="text" name="nome" id="txtName">
 
-      <section id="section-form" class="container">
-        <h2>O Clube Dungeons & Dragons</h2>
-        <p>
-          Para deter Vecna, os heróis de Stranger Things também precisam de
-          você. O Clube de D&D mais famoso de Hawkings está com vagas abertas
-          para sua próxima aventura. Se você é destemido, gosta de desafios e
-          não tem medo de rodar o D20, chegou a hora de se inscrever para fazer
-          parte da nova campanha.
-        </p>
+                        <label for="txtEmail">E-mail:</label>
+                        <input type="text" name="email" id="txtEmail">
 
-        <div class="form-content">
-          <h3>Entre para o clube de D&D e tenha experiências de <span>outro mundo<span></span></h3>
+                        <label for="txtLevel">Level:</label>
+                        <input type="text" name="level" id="txtLevel">
 
-          <div class="form-container">
-            <form>
-              <label for="name">Nome Completo</label>
-              <input type="text" name="name" id="txtName">
-          
-              <label for="email">E-mail</label>
-              <input type="email" name="email" id="txtEmail">
-          
-              <label for="level">Level</label>
-              <input type="text" name="level" id="txtLevel">
-          
-              <label for="character">Personagem</label>
-              <textarea name="character" cols="30" rows="10" id="txtCharacter"></textarea>
-            
-              <button type="button" id="btnSubscribe">Me inscrever</button>
-            </form>
-            
-          </div>
-        </div>
-      </section>
+                        <label for="txtCharacter">Personagem:</label>
+                        <textarea name="character" id="txtCharacter" cols="10" rows="10"></textarea>
+
+                        <button type="button" id="btnSubscribe">Me inscrever</button>
+                    </form>
+                </div>
+            </div>
+        </section>
     </main>
 
     <footer>
-      <p>
-        Projeto construído para fins didáticos, com o objetivo de colocar em
-        prática os conhecimentos de HTML, CSS e JavaScript aprendidos na DIO._
-      </p>
-      <img src="assets/images/footer/logo.svg" alt="">
+        <p>Projeto construído para fins didáticos, com o objetivo de colocar em prática os conhecimentos de HTML, CSS e JavaScript aprendidos na DIO._</p>
+        <img src="assets/images/footer/logo.svg" alt="Logotipo DIO">
     </footer>
-    
-    <script type="module" src="assets/js/main.js"></script>
-    <script>
-      
-    </script>
-  </body>
+
+</body>
 </html>
\ No newline at end of file

From 8dea0801d530a4d4b8efb1dc8e9adc6c20c4246e Mon Sep 17 00:00:00 2001
From: Ana Luiza <163297069+analuizaIF@users.noreply.github.com>
Date: Wed, 2 Oct 2024 15:02:43 -0300
Subject: [PATCH 2/6] commit html

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index d533980..1151cf0 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
         <div class="header-conteudo">
             <img class="invert-elementp" src="assets/images/banner/logo (1).svg" alt="Imagem principal">
             <p class="invert-elemento">Uma jornada para quem não tem medo do desconhecido. O caminho para o Mundo invertido é incerto, repleto de obstáculos e perigos. Porém, a recompensa é grande: salvar Hawkings e o mundo todo das garras de Vecna. Você está preparado? Então clique no botão abaixo para entrar no Mundo Invertido!</p>
-            <button id="switch-theme-button" onclick="="switchTheme()>Inverter Mundos</button>
+            <button id="switch-theme-button" onclick="switchTheme()">Inverter Mundos</button>
         </div>
 
         <div id="top-characters" class="world-characters"></div>

From 14c374b78de725a5fac6d2c7b6d964f3ab6c8034 Mon Sep 17 00:00:00 2001
From: Ana Luiza <163297069+analuizaIF@users.noreply.github.com>
Date: Thu, 3 Oct 2024 10:09:53 -0300
Subject: [PATCH 3/6] algumas alteracoes - ontem

---
 README.md             |  57 ++------------
 assets/css/styles.css | 179 +++++++++++++++++++++++++++++++++++++++---
 assets/js/main.js     |   0
 index.html            |  62 ++++++++++-----
 4 files changed, 214 insertions(+), 84 deletions(-)
 create mode 100644 assets/js/main.js

diff --git a/README.md b/README.md
index d55b71c..051a62b 100644
--- a/README.md
+++ b/README.md
@@ -2,40 +2,22 @@
     <img width="300" src="https://micheleambrosio.github.io/semana-frontend-mundo-invertido/assets/images/banner/logo.svg">
 </p>
 
--------
+# Stranger Things
 Uma jornada para quem não tem medo do desconhecido. O caminho para o Mundo Invertido é incerto, repleto de obstáculos e perigos. Porém, a recompensa é grande: salvar Hawkings e o mundo todo das garras de Vecna. Você está preparado(a)? 
 
-## ▶️ Semana Front-end
-- [Live Dia 01](https://www.youtube.com/watch?v=FZgIQUDn8zo)
-- [Live Dia 02](https://www.youtube.com/watch?v=WHbhgxJLbN4)
 ## 💻 Tecnologias
 - HTML
 - CSS
 - JavaScript
 
-## 💬 Assuntos abordados
-- HTML
-    - Estruturação da página 
-    - Semântica
-    - Acessibilidade
-    - Web Scraping
-    - SEO
-- CSS
-    - Posicionamentos
-    - Pseudo-elementos
-    - Pseudo-classes
-    - Flexbox
-    - Animações 
-- JavaScript
-    - Introdução ao JavaScript
-    - Manipulação do DOM
-    - Introdução ao Firebase
-    - Integração com o Firebase
-
 ## 🎨 Variáveis do Tema CSS
 ```css
-/*** VARIABLES & THEMES ***/
+/*FONTS*/
+@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&family=Archivo:ital,wght@0,100..900;1,100.900 display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
 
+/*** VARIABLES & THEMES ***/
 :root {
   --primary-color: #cf0f0f;
   --primary-color-contrast: #ffffff;
@@ -78,30 +60,3 @@ Uma jornada para quem não tem medo do desconhecido. O caminho para o Mundo Inve
   --footer-background-color: #000;
 }
 ```
-## 🔗 Links auxiliares
-
-- [W3C - World Wide Web Consortium](http://w3c.org)
-- [WAI - Web Acessibility Initiative](https://www.w3.org/WAI/)
-- [WCAG 2](https://www.w3.org/WAI/WCAG21/quickref/) 
-- [Figma](https://www.figma.com/file/I3Q42CcVUziRN3iMfTrbfb/Stranger-Things?node-id=0%3A1) 
-- [Demo](https://micheleambrosio.github.io/semana-frontend-mundo-invertido/) 
-## 🌎 Nossas redes sociais
-<p>
-    <img align=left margin=10 width=80 src="https://avatars.githubusercontent.com/u/16018277?v=4"/>
-    <p>&nbsp&nbsp&nbspDiogo Medeiros Mainardes<br>
-    &nbsp&nbsp&nbsp<a href="http://instagram.com/diogomainardes.dev">Instagram</a>&nbsp;|&nbsp;<a href="https://github.com/diogomainardes">GitHub</a>&nbsp;|&nbsp;<a href="https://www.linkedin.com/in/diogomainardes/">LinkedIn</a>&nbsp;|&nbsp;<a href="https://www.twitch.tv/dimmbr">Twitch</a></p>
-</p>
-<br/><br/>
-<p>
-    <img align=left margin=10 width=80 src="https://avatars.githubusercontent.com/u/55519539?v=4"/>
-    <p>&nbsp&nbsp&nbspMichele Queiroz Ambrosio<br>
-    &nbsp&nbsp&nbsp<a href="http://instagram.com/programi_">Instagram</a>&nbsp;|&nbsp;<a href="https://github.com/micheleambrosio">GitHub</a>&nbsp;|&nbsp;<a href="https://www.linkedin.com/in/michele-ambrosio-a4899661/">LinkedIn</a>&nbsp;|&nbsp;<a href="https://www.twitch.tv/michele_ambrosio">Twitch</a></p>
-</p>
-<br/><br/>
-<p>
-    <img align=left margin=10 width=80 src="https://avatars.githubusercontent.com/u/3266640?v=4"/>
-    <p>&nbsp&nbsp&nbspRenan Johannsen de Paula <br>
-    &nbsp&nbsp&nbsp<a href="https://github.com/RenanJPaula">GitHub</a>&nbsp;|&nbsp;
-    <a href="https://www.linkedin.com/in/renanjpaula/">LinkedIn</a>
-    </p>
-</p>
\ No newline at end of file
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 76b461d..76f2a54 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -1,4 +1,7 @@
-/*Importacoes de fontes*/
+/*FONTS*/
+@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
 
 /*** VARIABLES & THEMES ***/
 
@@ -14,7 +17,7 @@
         #ffffff 0%,
         #ffffff 65%,
         rgba(255, 255, 255, 0.75) 100%
-);
+        );
 
     --header-background-color: #e3e3e3;
     --highlight-color: #000000;
@@ -34,7 +37,8 @@
     #050000 0%,
     #130404 65%,
     rgba(19, 1, 1, 0.75) 100%
-);
+    );
+    
     --header-background-color: #220f0f;
     --highlight-color: #ffffff;
     --featured-font-family: "Rubik Glitch", sans-serif;
@@ -46,12 +50,25 @@
     --footer-background-color: #000;
     }
 
+/*Configuracoe para tema escuro*/
+.dark-theme button, 
+.dark-theme h1, 
+.dark-theme h2, 
+.dark-theme h3{
+    letter-spacing: 5px;
+    font-weight: normal;
+}
+
+.dark-theme .invert-element{
+    transform: rotateZ(180deg) scaleX(-1);
+}
 
 /*Inicio da estilizacao*/
 
 *{
     margin: 0;
     box-sizing: border-box;
+    transition: 1s;
 }
 
 h1, h2, h3{
@@ -71,7 +88,7 @@ p, input, label, textarea{
 }
 
 button{
-    padding: 16px 30px;
+    padding: 16px 32px;
     background-color: transparent;
     font-weight: 900;
     font-family: var(--featured-font-family);
@@ -141,7 +158,7 @@ header::before{
     background-color: var(--character-top-image-color);
     bottom: -3px;
     
-    mask: var( --character-top-image-src) bottom / 100% no-repeat;
+    mask: var(--character-top-image-src) bottom / 100% no-repeat;
     --webkit-mask: var( --character-top-image-src) bottom / 100% no-repeat;
 }
 
@@ -149,11 +166,12 @@ header::before{
     height: 500px;
     background-color: var(--character-bottom-image-color);
     top: 3px;
-    transform: rotateZ('180deg') scaleX(-1);
+    transform: rotateZ(180deg) scaleX(-1);
     position: relative;   
 
-    mask: var(--character-bottom-image-src-image-src) bottom / contain no-repeat;
-    --webkit-mask: var(--character-bottom-image-src-image-src) bottom / 100% no-repeat;
+    mask: var(--character-bottom-image-src) bottom / contain no-repeat;
+    --webkit-mask: var(--character-bottom-image-src) bottom / 100% no-repeat;
+    
 }
 
 main{
@@ -163,6 +181,16 @@ main{
     align-items: center;
 }
 
+main::before{
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background: var(--page-background) no-repeat, url(../images/backgrounds/florest.png) no-repeat;
+    background-size: cover;
+    z-index: -1;
+}
+
 /*Secao um*/
 section{
     display: flex;
@@ -217,8 +245,9 @@ section{
 #section-stranger-things-gallery{
     width: 100%;
     justify-content: center;
-    background-image: url(../images/backgrounds/lamps.png) 120% / 50% no-repeat;
+    background-image: var(--background-lamp-image) 120% / 50% no-repeat;
 }
+
 #section-stranger-things-gallery .container{
     width: 100%;
 }
@@ -236,14 +265,138 @@ section{
 #section-stranger-things-gallery .gallery-image{
     width: 250px;
     height: 250px;
-    outline: 20px solid var(--highlight-color); /*BRANCO*/
+    outline: 20px solid var(--highlight-color); 
     border: 3px solid var(--primary-color);
     box-sizing: initial;
 }
 
 #section-stranger-things-gallery .gallery-image img{
-    width: 100px;
-    height: 100px;
+    width: 100%;
+    height: 100%;
     object-fit: cover;
-    border: 10px solid var(--highlight-color); /*BRANCO*/
+    border: 10px solid var(--highlight-color); 
+}
+
+/*Secao quatro*/
+#section-form{
+    flex-direction: column;
+    align-items: center;
+    gap: 40px;
+    text-align: center;
+}
+
+#section-form h2{
+    width: 600px;
+}
+
+#section-form .form-content h3{
+    color: var(--highlight-color);
+    flex-basis: 30%;
+    text-align: left;
+    margin: 0;
+}
+
+#section-form .form-content h3 span{
+    color: var(--primary-color);
+}
+
+#section-form .form-content{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#section-form  .form-container{
+    flex-basis: 50%;
+    position: relative;
+}
+
+#section-form  .form-container::after{
+    content: "";
+    background-color: var(--highlight-color);
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 24px;
+    left: 24px;
+    z-index: -1;
+}
+
+#section-form  .form-container form{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 24p;
+    background-color: var(--primary-color);
+    color: var(--primary-color-contrast);
+    text-align: left;
+}
+
+#section-form  .form-container form button{
+    border: none;
+    background-color: var(--field-background-color);
+    color: var(--primary-color-contrast);
+    max-width: 300px;
+    align-self: center;
+}
+
+#section-form  .form-container form button:hover{
+    background-color: var(--primary-color-contrast);
+    color: var(--field-background-color);
+}
+
+/*Formulario*/
+input, textarea{
+    border: 2px solid var(--primary-color-contrast);
+    background-color: var(--field-background-color);
+    color: var(--primary-color-contrast);
+    padding: 8px;
+    margin-bottom: 24px;
+    font-size: 1rem;
+}
+
+label{
+    margin-bottom: 8px;
+}
+
+input:focus-visible, textarea:focus-visible{
+    border: none;
+    border-color: #000000;
+}
+
+/*Footer*/
+footer{
+    padding: 60px 0;
+    background-color: var(--footer-background-color);
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+}
+
+footer p {
+    max-width: 700px;
+    margin-bottom: 24px;
+}
+
+footer::before, footer::after{
+    content: "";
+    width: 300px;
+    height: 200px;
+    background: url(../images/footer/tape.svg) no-repeat;
+    background-size: contain;
+    position: absolute;
+    bottom: -30px;
+}
+
+footer::before{
+    left: -50px;
+    transform: rotateZ(-10deg);
+}
+
+footer::after{
+    right: -50px;
+    transform: rotateZ(10deg);
 }
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..e69de29
diff --git a/index.html b/index.html
index 1151cf0..aa194ed 100644
--- a/index.html
+++ b/index.html
@@ -2,21 +2,21 @@
 <html lang="pt-br">
 <head>
     <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Landing page no Mundo Invertido (Stranger Things)">
     <meta name="author" content="analuizaIF">
+
     <link rel="stylesheet" href="assets/css/styles.css">
     <title>Stranger Things</title>
 </head>
-<body class="light-theme" >
+<body class="light-theme">
     
     <header>
-        <audio id="music">
-            <source src="assets/musics/normal-world.mpeg">
-        </audio>
+        <audio id="music" src="assets/musics/normal-world.mpeg" autoplay></audio>
 
         <div class="header-conteudo">
-            <img class="invert-elementp" src="assets/images/banner/logo (1).svg" alt="Imagem principal">
+            <img class="invert-elemento" src="assets/images/banner/logo (1).svg" alt="Imagem principal">
             <p class="invert-elemento">Uma jornada para quem não tem medo do desconhecido. O caminho para o Mundo invertido é incerto, repleto de obstáculos e perigos. Porém, a recompensa é grande: salvar Hawkings e o mundo todo das garras de Vecna. Você está preparado? Então clique no botão abaixo para entrar no Mundo Invertido!</p>
             <button id="switch-theme-button" onclick="switchTheme()">Inverter Mundos</button>
         </div>
@@ -26,6 +26,7 @@
 
     <main>
         <div id="bottom-characteres" class="world-characters"></div>
+
         <section id="section-invert-world" class="container">
             <div class="section-texts">
                 <h2>O Mundo Invertido</h2>
@@ -54,19 +55,20 @@ <h2>Stranger Things Vol. 4</h2>
         </section>
 
         <section id="section-stranger-things-gallery">
-            <div class="container-section-text">
+            <div class="container section-text">
                 <h2>A segunda série mais assistida da netflix</h2>
-                <ul class="gallery-container" role="gallery">
-                    <li class="gallery-image invert-element">
-                        <img src="assets/images/content/serie-image-01.png" alt="Imagem Ilustrativa da série Stranger Things">
-                    </li>
-                    <li class="gallery-image invert-element">
-                        <img src="assets/images/content/serie-image-02.png" alt="Imagem Ilustrativa da série Stranger Things">
-                    </li>
-                    <li class="gallery-image invert-element">
-                        <img src="assets/images/content/serie-image-03.png" alt="Imagem Ilustrativa da série Stranger Things">
-                    </li>
-                </ul>
+                
+                <div class="gallery-container">
+                    <div class="gallery-image invert-elemento">
+                        <img src="assets/images/content/serie-image-01.png" alt="Imagens Ilustrativa da serie Stranger Things"/>
+                    </div>
+                    <div class="gallery-image invert-elemento">
+                        <img src="assets/images/content/serie-image-02.png" alt="Imagens Ilustrativa da serie Stranger Things"/>
+                    </div>
+                    <div class="gallery-image invert-elemento">
+                        <img src="assets/images/content/serie-image-03.png" alt="Imagens Ilustrativa da serie Stranger Things"/>
+                    </div>
+                </div>
             </div>
         </section>
 
@@ -75,11 +77,11 @@ <h2>O clube Dungeons & Dragons</h2>
             <p>Para deter Vecna, os heróis de Stranger Things também precisam de você. 
             O Clube de D&D mais famoso de Hawkings está com vagas abertas para sua próxima aventura. Se você é destemido, gosta de desafios e não tem medo de rodar o D20, chegou a hora de se inscrever para fazer parte da nova campanha. </p>
             
-            <div class="form-container">
+            <div class="form-content">
                 <h3>entre para o clube de d&d e tenha experiências de <span>outro mundo</span>.</h3>
                 
                 <div class="form-container">
-                    <form >
+                    <form>
                         <label for="txtName">Nome Completo:</label>
                         <input type="text" name="nome" id="txtName">
 
@@ -92,7 +94,7 @@ <h3>entre para o clube de d&d e tenha experiências de <span>outro mundo</span>.
                         <label for="txtCharacter">Personagem:</label>
                         <textarea name="character" id="txtCharacter" cols="10" rows="10"></textarea>
 
-                        <button type="button" id="btnSubscribe">Me inscrever</button>
+                        <button type="button">Me inscrever</button>
                     </form>
                 </div>
             </div>
@@ -104,5 +106,25 @@ <h3>entre para o clube de d&d e tenha experiências de <span>outro mundo</span>.
         <img src="assets/images/footer/logo.svg" alt="Logotipo DIO">
     </footer>
 
+    <script>
+        window.addEventListener('click', function() {
+          const audio = document.getElementById('music');
+          audio.play();
+          audio.volume = 0.2;
+        })
+  
+        function switchTheme() {
+          document.body.classList.toggle('dark-theme');
+          document.body.classList.toggle('light-theme');
+  
+          const theme = document.body.classList[0];
+          const music = theme === 'light-theme' ? 'normal-world.mpeg' : 'inverted-world.mpeg'
+  
+          const audio = document.getElementById('music');
+          audio.src = `assets/musics/${music}`;
+          audio.play();
+          audio.volume = 0.2;
+        }
+      </script>
 </body>
 </html>
\ No newline at end of file

From eb2940bdb74d613c2bebe1b61cb1a9ed36a6993b Mon Sep 17 00:00:00 2001
From: Ana Luiza <163297069+analuizaIF@users.noreply.github.com>
Date: Thu, 3 Oct 2024 10:42:32 -0300
Subject: [PATCH 4/6] correcao de erros HTML

---
 assets/css/styles.css |  46 +++++-----
 index.html            | 198 +++++++++++++++++++++---------------------
 2 files changed, 125 insertions(+), 119 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index 76f2a54..c88070b 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -147,32 +147,31 @@ header::before{
 }
 
 /*Estilizando imagens*/
-.world-characters{
+.world-characters {
     width: 100%;
     max-width: 900px;
     position: absolute;
-}
-
-#top-characters{
+  }
+  
+  .world-characters#top-characters {
     height: 100%;
     background-color: var(--character-top-image-color);
     bottom: -3px;
-    
-    mask: var(--character-top-image-src) bottom / 100% no-repeat;
-    --webkit-mask: var( --character-top-image-src) bottom / 100% no-repeat;
-}
-
-#bottom-characters{
+  
+    mask: var(--character-top-image-src) bottom / contain no-repeat;
+    -webkit-mask: var(--character-top-image-src) bottom / 100% no-repeat;
+  }
+  
+  .world-characters#bottom-characters {
     height: 500px;
     background-color: var(--character-bottom-image-color);
     top: 3px;
     transform: rotateZ(180deg) scaleX(-1);
-    position: relative;   
-
+    position: relative;
+  
     mask: var(--character-bottom-image-src) bottom / contain no-repeat;
-    --webkit-mask: var(--character-bottom-image-src) bottom / 100% no-repeat;
-    
-}
+    -webkit-mask: var(--character-bottom-image-src) bottom / 100% no-repeat;
+  }
 
 main{
     position: relative;
@@ -346,22 +345,27 @@ section{
 }
 
 /*Formulario*/
-input, textarea{
+input,
+textarea {
     border: 2px solid var(--primary-color-contrast);
     background-color: var(--field-background-color);
     color: var(--primary-color-contrast);
     padding: 8px;
+}
+
+input,
+textarea {
     margin-bottom: 24px;
-    font-size: 1rem;
 }
 
-label{
+label {
     margin-bottom: 8px;
 }
 
-input:focus-visible, textarea:focus-visible{
-    border: none;
-    border-color: #000000;
+input:focus-visible,
+textarea:focus-visible {
+    outline: none;
+    border-color: black;
 }
 
 /*Footer*/
diff --git a/index.html b/index.html
index aa194ed..60690a0 100644
--- a/index.html
+++ b/index.html
@@ -10,121 +10,123 @@
     <link rel="stylesheet" href="assets/css/styles.css">
     <title>Stranger Things</title>
 </head>
+
 <body class="light-theme">
-    
     <header>
         <audio id="music" src="assets/musics/normal-world.mpeg" autoplay></audio>
+        
+      <div class="header-content">
+        <img class="invert-element" src="assets/images/banner/logo.svg" alt="" />
+        <p class="invert-element">Uma jornada para quem não tem medo do desconhecido. O caminho para o Mundo invertido é incerto, repleto de obstáculos e perigos. Porém, arecompensa é grande: salvar Hawkings e o mundo todo das garras de Vecna. Você está preparado? Então clique no botão abaixo para entrar no Mundo Invertido!</p>
+        <button id="switch-theme-button" onclick="switchTheme()">Inverter Mundos</button>
+      </div>
 
-        <div class="header-conteudo">
-            <img class="invert-elemento" src="assets/images/banner/logo (1).svg" alt="Imagem principal">
-            <p class="invert-elemento">Uma jornada para quem não tem medo do desconhecido. O caminho para o Mundo invertido é incerto, repleto de obstáculos e perigos. Porém, a recompensa é grande: salvar Hawkings e o mundo todo das garras de Vecna. Você está preparado? Então clique no botão abaixo para entrar no Mundo Invertido!</p>
-            <button id="switch-theme-button" onclick="switchTheme()">Inverter Mundos</button>
-        </div>
-
-        <div id="top-characters" class="world-characters"></div>
+      <div id="top-characters" class="world-characters"></div>
     </header>
 
     <main>
-        <div id="bottom-characteres" class="world-characters"></div>
+      <div id="bottom-characters" class="world-characters"></div>
 
-        <section id="section-invert-world" class="container">
-            <div class="section-texts">
-                <h2>O Mundo Invertido</h2>
-                <p role="text">O Mundo Invertido parece uma cópia do nosso mundo, mas com criaturas horrendas, tempestades assustadoras, muita escuridão e entidades malignas. Um reino controlado por Vecna, que tem planos de trazer tudo isso ao nosso mundo. </p>
-            </div>
-            <img class="invert-elemento" src="assets/images/content/inverted-world.png" alt="Imagem Ilustrativa com a tematica série Stranger Things">
-        </section>
-
-        <section id="section-stranger-things-trailer" class="container">
-            <div class="video-frame">
-                <iframe
-                width="460"
-                height="215"
-                src="https://www.youtube.com/embed/SJ9EFhQ3ANQ?controls=0"
-                title="YouTube video player"
-                frameborder="0"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                allowfullscreen>
-                </iframe>
-            </div>
+      <section id="section-inverted-world" class="container">
+        <div class="section-texts">
+          <h2>O Mundo Invertido</h2>
+          <p> O Mundo Invertido parece uma cópia do nosso mundo, mas com criaturas horrendas, tempestades assustadoras, muita escuridão e entidades malignas. Um reino controlado por Vecna, que tem planos de trazer tudo isso ao nosso mundo.</p>
+        </div>
 
-            <div class="section-texts">
-                <h2>Stranger Things Vol. 4</h2>
-                <p role="text">Mais experientes, os heróis de Stranger Things também precisam enfrentar desafios maiores do que nunca e fazer decisões que vão mudar suas vidas para sempre. Confira ao lado o trailer da quarta temporada. </p>
+        <img
+          class="invert-element"
+          src="assets/images/content/inverted-world.png"
+          alt="Mundo Invertido"
+        />
+      </section>
+
+      <section id="section-stranger-things-trailer" class="container">
+        <div class="video-frame">
+          <iframe
+            width="460"
+            height="215"
+            src="https://www.youtube.com/embed/SJ9EFhQ3ANQ?controls=0"
+            title="YouTube video player"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+          ></iframe>
+        </div>
+        <div class="section-texts">
+          <h2>Stranger Things Vol. 4</h2>
+          <p>Mais experientes, os heróis de Stranger Things também precisam enfrentar desafios maiores do que nunca e fazer decisões que vão mudar suas vidas para sempre. Confira ao lado o trailer da quarta temporada.</p>
+        </div>
+      </section>
+
+      <section id="section-stranger-things-gallery">
+        <div class="container section-text">
+          <h2>A segunda série mais assistida da Netflix</h2>
+          <div class="gallery-container">
+            <div class="gallery-image invert-element">
+              <img src="assets/images/content/serie-image-01.png" alt="" />
+            </div>
+            <div class="gallery-image invert-element">
+              <img src="assets/images/content/serie-image-02.png" alt="" />
             </div>
-        </section>
-
-        <section id="section-stranger-things-gallery">
-            <div class="container section-text">
-                <h2>A segunda série mais assistida da netflix</h2>
-                
-                <div class="gallery-container">
-                    <div class="gallery-image invert-elemento">
-                        <img src="assets/images/content/serie-image-01.png" alt="Imagens Ilustrativa da serie Stranger Things"/>
-                    </div>
-                    <div class="gallery-image invert-elemento">
-                        <img src="assets/images/content/serie-image-02.png" alt="Imagens Ilustrativa da serie Stranger Things"/>
-                    </div>
-                    <div class="gallery-image invert-elemento">
-                        <img src="assets/images/content/serie-image-03.png" alt="Imagens Ilustrativa da serie Stranger Things"/>
-                    </div>
-                </div>
+            <div class="gallery-image invert-element">
+              <img src="assets/images/content/serie-image-03.png" alt="" />
             </div>
-        </section>
+          </div>
+        </div>
+      </section>
+
+      <section id="section-form" class="container">
+        <h2>O Clube Dungeons & Dragons</h2>
+        <p>Para deter Vecna, os heróis de Stranger Things também precisam de você. O Clube de D&D mais famoso de Hawkings está com vagas abertas para sua próxima aventura. Se você é destemido, gosta de desafios e não tem medo de rodar o D20, chegou a hora de se inscrever para fazer parte da nova campanha.</p>
+
+        <div class="form-content">
+          <h3>Entre para o clube de D&D e tenha experiências de <span>outro mundo<span></span></h3>
+
+          <div class="form-container">
+            <form action="">
+              <label for="name">Nome Completo:</label>
+              <input type="text" name="name">
+
+              <label for="email">E-mail:</label>
+              <input type="email" name="email">
+
+              <label for="level">Level:</label>
+              <input type="text" name="level">
 
-        <section id="section-form" class="container">
-            <h2>O clube Dungeons & Dragons</h2>
-            <p>Para deter Vecna, os heróis de Stranger Things também precisam de você. 
-            O Clube de D&D mais famoso de Hawkings está com vagas abertas para sua próxima aventura. Se você é destemido, gosta de desafios e não tem medo de rodar o D20, chegou a hora de se inscrever para fazer parte da nova campanha. </p>
+              <label for="character">Personagem:</label>
+              <textarea name="character" cols="30" rows="10"></textarea>
             
-            <div class="form-content">
-                <h3>entre para o clube de d&d e tenha experiências de <span>outro mundo</span>.</h3>
-                
-                <div class="form-container">
-                    <form>
-                        <label for="txtName">Nome Completo:</label>
-                        <input type="text" name="nome" id="txtName">
-
-                        <label for="txtEmail">E-mail:</label>
-                        <input type="text" name="email" id="txtEmail">
-
-                        <label for="txtLevel">Level:</label>
-                        <input type="text" name="level" id="txtLevel">
-
-                        <label for="txtCharacter">Personagem:</label>
-                        <textarea name="character" id="txtCharacter" cols="10" rows="10"></textarea>
-
-                        <button type="button">Me inscrever</button>
-                    </form>
-                </div>
-            </div>
-        </section>
+              <button type="button">Me inscrever</button>
+            </form>
+          </div>
+        </div>
+      </section>
     </main>
 
     <footer>
-        <p>Projeto construído para fins didáticos, com o objetivo de colocar em prática os conhecimentos de HTML, CSS e JavaScript aprendidos na DIO._</p>
-        <img src="assets/images/footer/logo.svg" alt="Logotipo DIO">
+      <p>Projeto construído para fins didáticos, com o objetivo de colocar em prática os conhecimentos de HTML, CSS e JavaScript aprendidos na DIO._</p>
+      <img src="assets/images/footer/logo.svg" alt="">
     </footer>
 
     <script>
-        window.addEventListener('click', function() {
-          const audio = document.getElementById('music');
-          audio.play();
-          audio.volume = 0.2;
-        })
-  
-        function switchTheme() {
-          document.body.classList.toggle('dark-theme');
-          document.body.classList.toggle('light-theme');
-  
-          const theme = document.body.classList[0];
-          const music = theme === 'light-theme' ? 'normal-world.mpeg' : 'inverted-world.mpeg'
-  
-          const audio = document.getElementById('music');
-          audio.src = `assets/musics/${music}`;
-          audio.play();
-          audio.volume = 0.2;
-        }
-      </script>
-</body>
+      window.addEventListener('click', function() {
+        const audio = document.getElementById('music');
+        audio.play();
+        audio.volume = 0.2;
+      })
+
+      function switchTheme() {
+        document.body.classList.toggle('dark-theme');
+        document.body.classList.toggle('light-theme');
+
+        const theme = document.body.classList[0];
+        const music = theme === 'light-theme' ? 'normal-world.mpeg' : 'inverted-world.mpeg'
+
+        const audio = document.getElementById('music');
+        audio.src = `assets/musics/${music}`;
+        audio.play();
+        audio.volume = 0.2;
+      }
+    </script>
+  </body>
 </html>
\ No newline at end of file

From ac0caabaea4b5f5946c5273ef925fdbf6161c777 Mon Sep 17 00:00:00 2001
From: Ana Luiza <163297069+analuizaIF@users.noreply.github.com>
Date: Thu, 3 Oct 2024 10:50:57 -0300
Subject: [PATCH 5/6] =?UTF-8?q?CSS=20imgs=20que=20n=C3=A3o=20apareciam?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/styles.css | 602 ++++++++++++++++++++++--------------------
 1 file changed, 310 insertions(+), 292 deletions(-)

diff --git a/assets/css/styles.css b/assets/css/styles.css
index c88070b..13658a3 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -1,406 +1,424 @@
-/*FONTS*/
-@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
+/***  FONTS ***/
+@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Rubik+Glitch&display=swap");
 
-/*** VARIABLES & THEMES ***/
+/***  VARIABLES & THEMES ***/
 
 :root {
-    --primary-color: #cf0f0f;
-    --primary-color-contrast: #ffffff;
-    --field-background-color: #000;
+  --primary-color: #cf0f0f;
+  --primary-color-contrast: #ffffff;
+  --field-background-color: #000;
 }
-  
-.light-theme {
-    --page-background: linear-gradient(
-        180deg,
-        #ffffff 0%,
-        #ffffff 65%,
-        rgba(255, 255, 255, 0.75) 100%
-        );
 
-    --header-background-color: #e3e3e3;
-    --highlight-color: #000000;
-    --featured-font-family: "Archivo", sans-serif;
-    --character-top-image-src: url("../images/characters/kids-on-the-bike.svg");
-    --character-top-image-color: #ffffff;
-    --character-bottom-image-src: url("../images/characters/inverted-world-monster.svg");
-    --character-bottom-image-color: #e5e5e5;
-    --background-lamp-image: url("../images/backgrounds/lamps.png");
-    --footer-background-color: #b5bbbf;
+.light-theme {
+  --page-background: linear-gradient(
+    180deg,
+    #ffffff 0%,
+    #ffffff 65%,
+    rgba(255, 255, 255, 0.75) 100%
+  );
+  --header-background-color: #e3e3e3;
+  --highlight-color: #000000;
+  --featured-font-family: "Archivo", sans-serif;
+  --character-top-image-src: url("../images/characters/kids-on-the-bike.svg");
+  --character-top-image-color: #ffffff;
+  --character-bottom-image-src: url("../images/characters/inverted-world-monster.svg");
+  --character-bottom-image-color: #e5e5e5;
+  --background-lamp-image: url("../images/backgrounds/lamps.png");
+  --footer-background-color: #b5bbbf;
 }
 
-
 .dark-theme {
-    --page-background: linear-gradient(
+  --page-background: linear-gradient(
     180deg,
     #050000 0%,
     #130404 65%,
     rgba(19, 1, 1, 0.75) 100%
-    );
-    
-    --header-background-color: #220f0f;
-    --highlight-color: #ffffff;
-    --featured-font-family: "Rubik Glitch", sans-serif;
-    --character-bottom-image-src: url("../images/characters/kids-on-the-bike.svg");
-    --character-bottom-image-color: rgba(255, 255, 255, 0.1);
-    --character-top-image-src: url("../images/characters/inverted-world-monster.svg");
-    --character-top-image-color: #000;
-    --background-lamp-image: url("../images/backgrounds/lamps-inverted.png");
-    --footer-background-color: #000;
-    }
+  );
+  --header-background-color: #220f0f;
+  --highlight-color: #ffffff;
+  --featured-font-family: "Rubik Glitch", sans-serif;
+  --character-bottom-image-src: url("../images/characters/kids-on-the-bike.svg");
+  --character-bottom-image-color: rgba(255, 255, 255, 0.1);
+  --character-top-image-src: url("../images/characters/inverted-world-monster.svg");
+  --character-top-image-color: #000;
+  --background-lamp-image: url("../images/backgrounds/lamps-inverted.png");
+  --footer-background-color: #000;
+}
 
-/*Configuracoe para tema escuro*/
-.dark-theme button, 
-.dark-theme h1, 
-.dark-theme h2, 
-.dark-theme h3{
-    letter-spacing: 5px;
-    font-weight: normal;
+.dark-theme button,
+.dark-theme h1,
+.dark-theme h2,
+.dark-theme h3 {
+  letter-spacing: 5px;
+  font-weight: normal;
 }
 
-.dark-theme .invert-element{
-    transform: rotateZ(180deg) scaleX(-1);
+.dark-theme .invert-element {
+  transform: rotateZ(180deg) scaleX(-1);
 }
 
-/*Inicio da estilizacao*/
+* {
+  margin: 0;
+  box-sizing: border-box;
+  transition: 1s;
+}
 
-*{
-    margin: 0;
-    box-sizing: border-box;
-    transition: 1s;
+body {
+  background: var(--page-background);
 }
 
-h1, h2, h3{
-    font-family: var(--featured-font-family);
-    font-size: 3rem;
-    color: var(--primary-color);
-    text-transform: uppercase;
-    margin-bottom: 40px;
+h1,
+h2,
+h3 {
+  font-family: var(--featured-font-family);
+  font-size: 3rem;
+  color: var(--primary-color);
+  text-transform: uppercase;
+  margin-bottom: 40px;
 }
 
-p{
-    color: var(--highlight-color);
+p {
+  color: var(--highlight-color);
 }
 
-p, input, label, textarea{
-    font-family: "Libre Baskerville", serif;
+p,
+input,
+textarea,
+label {
+  font-family: "Libre Baskerville", serif;
 }
 
-button{
-    padding: 16px 32px;
-    background-color: transparent;
-    font-weight: 900;
-    font-family: var(--featured-font-family);
-    font-size: 1.25rem;
-    text-transform: uppercase;
-    cursor: pointer;
-    transition: background 1s;
+button {
+  padding: 16px 32px;
+  background-color: transparent;
+  font-weight: 900;
+  font-family: var(--featured-font-family);
+  font-size: 1.25rem;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: background 1s;
 }
 
-/*Estilizacao do cabecalho (Header)*/
-header{
-    background-color: var(--header-background-color);
-    min-height: 850px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
+/*INICIO DA ESTILIZACAO DA PAGINA*/
+main {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
 }
 
-header::before{
-    content: "";
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    background-image: url(../images/banner/florest.webp);
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center 90%;
-    filter: saturate(0);
-    opacity: 0.2;
-}    
+main::before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background: var(--page-background) no-repeat,
+    url("../images/backgrounds/florest.png") no-repeat;
+  background-size: cover;
+  z-index: -1;
+}
 
-.header-conteudo{
-    max-width: 700px;
-    padding: 80px 20px;
-    text-align: center;
-    z-index: 2;
+input,
+textarea {
+  border: 2px solid var(--primary-color-contrast);
+  background-color: var(--field-background-color);
+  color: var(--primary-color-contrast);
+  padding: 8px;
 }
 
-.header-conteudo img{
-    width: 80%;
+input,
+textarea {
+  margin-bottom: 24px;
+}
+
+label {
+  margin-bottom: 8px;
 }
 
-.header-conteudo p{
-    margin: 30px 0 50px;
+input:focus-visible,
+textarea:focus-visible {
+  outline: none;
+  border-color: black;
 }
 
-.header-conteudo button{
-    border: 3px solid var(--primary-color);
-    color: var(--primary-color);
+/*CABECALHO - HEADER*/
+
+header {
+  background-color: var(--header-background-color);
+  min-height: 850px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
 }
 
-.header-conteudo button:hover{
-    background-color: var(--primary-color);
-    color: var(--primary-color-contrast);
+header::before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-image: url("../images/banner/florest.webp");
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center 90%;
+  filter: saturate(0);
+  opacity: 0.2;
 }
 
-/*Estilizando imagens*/
-.world-characters {
-    width: 100%;
-    max-width: 900px;
-    position: absolute;
-  }
-  
-  .world-characters#top-characters {
-    height: 100%;
-    background-color: var(--character-top-image-color);
-    bottom: -3px;
-  
-    mask: var(--character-top-image-src) bottom / contain no-repeat;
-    -webkit-mask: var(--character-top-image-src) bottom / 100% no-repeat;
-  }
-  
-  .world-characters#bottom-characters {
-    height: 500px;
-    background-color: var(--character-bottom-image-color);
-    top: 3px;
-    transform: rotateZ(180deg) scaleX(-1);
-    position: relative;
-  
-    mask: var(--character-bottom-image-src) bottom / contain no-repeat;
-    -webkit-mask: var(--character-bottom-image-src) bottom / 100% no-repeat;
-  }
+.header-content {
+  max-width: 700px;
+  padding: 80px 20px;
+  text-align: center;
+  z-index: 2;
+}
 
-main{
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+.header-content img {
+  width: 80%;
 }
 
-main::before{
-    content: "";
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    background: var(--page-background) no-repeat, url(../images/backgrounds/florest.png) no-repeat;
-    background-size: cover;
-    z-index: -1;
+.header-content p {
+  margin: 30px 0 50px;
 }
 
-/*Secao um*/
-section{
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 95px;
+.header-content button {
+  border: 3px solid var(--primary-color);
+  color: var(--primary-color);
 }
 
-.container{
-    max-width: 1200px;
+.header-content button:hover {
+  background-color: var(--primary-color);
+  color: var(--primary-color-contrast);
 }
 
-#section-invert-world{
-    align-items: center;
+/**WORLD CHARACTERS STYLES**/
+
+.world-characters {
+  width: 100%;
+  max-width: 900px;
+  position: absolute;
 }
 
-#section-invert-world .section-texts{
-    width: 50%;
+.world-characters #top-characters {
+  height: 100%;
+  background-color: var(--character-top-image-color);
+  bottom: -3px;
+
+  mask: var(--character-top-image-src) bottom / contain no-repeat;
+  -webkit-mask: var(--character-top-image-src) bottom / 100% no-repeat;
 }
 
-#section-invert-world .section-texts h2{
-    max-width: 300px;
+.world-characters #bottom-characters {
+  height: 500px;
+  background-color: var(--character-bottom-image-color);
+  top: 3px;
+  transform: rotateZ(180deg) scaleX(-1);
+  position: relative;
+
+  mask: var(--character-bottom-image-src) bottom / contain no-repeat;
+  -webkit-mask: var(--character-bottom-image-src) bottom / 100% no-repeat;
 }
 
-/*Secao dois*/
-#section-stranger-things-trailer .section-texts{
-    width: 50%;
-    text-align: right;   
+/**SECTIONS STYLES**/
+
+section {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 95px;
 }
 
-#section-stranger-things-trailer .section-texts h2{
-    max-width: 425px;
-    display: inline-block;
+/*SECAO UM*/
+
+.container {
+  max-width: 1200px;
 }
 
-#section-stranger-things-trailer .video-frame{
-    background-color: var(--primary-color);
+#section-inverted-world {
+  align-items: center;
 }
 
-#section-stranger-things-trailer .video-frame iframe{
-    position: relative;
-    bottom: 24px;
-    left: 24px;
-    border: 2px solid;
-    border-image: linear-gradient(
-        var(--primary-color),
-        var(--primary-color-contrast)
-    );
-    border-image-slice: 10;
+#section-inverted-world .section-texts {
+  width: 50%;
 }
 
-/*Secao tres*/
-#section-stranger-things-gallery{
-    width: 100%;
-    justify-content: center;
-    background-image: var(--background-lamp-image) 120% / 50% no-repeat;
+#section-inverted-world .section-texts h2 {
+  max-width: 300px;
 }
 
-#section-stranger-things-gallery .container{
-    width: 100%;
+/*SECAO DOIS*/
+
+#section-stranger-things-trailer .section-texts {
+  width: 50%;
+  text-align: right;
 }
 
-#section-stranger-things-gallery .container h2{
-    width: 800px;
+#section-stranger-things-trailer .section-texts h2 {
+  max-width: 425px;
+  display: inline-block;
 }
 
-#section-stranger-things-gallery .gallery-container{
-    display: flex;
-    gap: 50px;
-    padding-left: 20px;
+#section-stranger-things-trailer .video-frame {
+  background-color: var(--primary-color);
 }
 
-#section-stranger-things-gallery .gallery-image{
-    width: 250px;
-    height: 250px;
-    outline: 20px solid var(--highlight-color); 
-    border: 3px solid var(--primary-color);
-    box-sizing: initial;
+#section-stranger-things-trailer .video-frame iframe {
+  position: relative;
+  bottom: 24px;
+  left: 24px;
+  border: 2px solid;
+  border-image: linear-gradient(
+    var(--primary-color),
+    var(--primary-color-contrast)
+  );
+  border-image-slice: 10;
 }
 
-#section-stranger-things-gallery .gallery-image img{
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border: 10px solid var(--highlight-color); 
+/*SECAO TRES*/
+
+#section-stranger-things-gallery {
+  width: 100%;
+  background: var(--background-lamp-image) 120% / 50% no-repeat;
+  justify-content: center;
 }
 
-/*Secao quatro*/
-#section-form{
-    flex-direction: column;
-    align-items: center;
-    gap: 40px;
-    text-align: center;
+#section-stranger-things-gallery .container {
+  width: 100%;
 }
 
-#section-form h2{
-    width: 600px;
+#section-stranger-things-gallery .container h2 {
+  width: 800px;
 }
 
-#section-form .form-content h3{
-    color: var(--highlight-color);
-    flex-basis: 30%;
-    text-align: left;
-    margin: 0;
+#section-stranger-things-gallery .gallery-container {
+  display: flex;
+  gap: 50px;
+  padding-left: 20px;
 }
 
-#section-form .form-content h3 span{
-    color: var(--primary-color);
+#section-stranger-things-gallery .gallery-image {
+  width: 250px;
+  height: 250px;
+  outline: 20px solid var(--highlight-color);
+  border: 3px solid var(--primary-color);
+  box-sizing: initial;
 }
 
-#section-form .form-content{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+#section-stranger-things-gallery .gallery-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border: 10px solid var(--highlight-color);
 }
 
-#section-form  .form-container{
-    flex-basis: 50%;
-    position: relative;
+/*SECAO QUATRO*/
+
+#section-form {
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
+  text-align: center;
 }
 
-#section-form  .form-container::after{
-    content: "";
-    background-color: var(--highlight-color);
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 24px;
-    left: 24px;
-    z-index: -1;
+#section-form h2 {
+  width: 600px;
 }
 
-#section-form  .form-container form{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 24p;
-    background-color: var(--primary-color);
-    color: var(--primary-color-contrast);
-    text-align: left;
+#section-form .form-content h3 {
+  color: var(--highlight-color);
 }
 
-#section-form  .form-container form button{
-    border: none;
-    background-color: var(--field-background-color);
-    color: var(--primary-color-contrast);
-    max-width: 300px;
-    align-self: center;
+#section-form .form-content h3 span {
+  color: var(--primary-color);
 }
 
-#section-form  .form-container form button:hover{
-    background-color: var(--primary-color-contrast);
-    color: var(--field-background-color);
+#section-form .form-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-/*Formulario*/
-input,
-textarea {
-    border: 2px solid var(--primary-color-contrast);
-    background-color: var(--field-background-color);
-    color: var(--primary-color-contrast);
-    padding: 8px;
+#section-form .form-content h3 {
+  flex-basis: 30%;
+  text-align: left;
+  margin: 0;
 }
 
-input,
-textarea {
-    margin-bottom: 24px;
+#section-form .form-container {
+  flex-basis: 50%;
+  position: relative;
 }
 
-label {
-    margin-bottom: 8px;
+#section-form .form-container::after {
+  content: "";
+  background-color: var(--highlight-color);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 24px;
+  left: 24px;
+  z-index: -1;
 }
 
-input:focus-visible,
-textarea:focus-visible {
-    outline: none;
-    border-color: black;
+#section-form .form-container form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 24px;
+  background-color: var(--primary-color);
+  color: var(--primary-color-contrast);
+  text-align: left;
 }
 
-/*Footer*/
-footer{
-    padding: 60px 0;
-    background-color: var(--footer-background-color);
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
-    overflow: hidden;
+#section-form .form-container form button {
+  border: none;
+  background-color: var(--field-background-color);
+  color: var(--primary-color-contrast);
+  max-width: 300px;
+  align-self: center;
+}
+
+#section-form .form-container form button:hover {
+  background-color: var(--primary-color-contrast);
+  color: var(--field-background-color);
+}
+
+/*RODAPÉ*/
+
+footer {
+  padding: 60px 0;
+  background-color: var(--footer-background-color);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
 }
 
 footer p {
-    max-width: 700px;
-    margin-bottom: 24px;
+  max-width: 700px;
+  margin-bottom: 24px;
 }
 
-footer::before, footer::after{
-    content: "";
-    width: 300px;
-    height: 200px;
-    background: url(../images/footer/tape.svg) no-repeat;
-    background-size: contain;
-    position: absolute;
-    bottom: -30px;
+footer::before,
+footer::after {
+  content: "";
+  width: 300px;
+  height: 200px;
+  background: url("../images/footer/tape.svg") no-repeat;
+  background-size: contain;
+  position: absolute;
+  bottom: -30px;
 }
 
-footer::before{
-    left: -50px;
-    transform: rotateZ(-10deg);
+footer::before {
+  left: -50px;
+  transform: rotateZ(-10deg);
 }
 
-footer::after{
-    right: -50px;
-    transform: rotateZ(10deg);
+footer::after {
+  right: -50px;
+  transform: rotateZ(10deg);
 }
\ No newline at end of file

From 96eb36abf20f745958a700a8ad51896e079320b0 Mon Sep 17 00:00:00 2001
From: Ana Luiza <163297069+analuizaIF@users.noreply.github.com>
Date: Thu, 3 Oct 2024 10:56:50 -0300
Subject: [PATCH 6/6] ultimo commit!?