labenuexercicios · FeZanette · Jul 9, 2023 · Jul 9, 2023 · Jul 29, 2023 · Jul 29, 2023
diff --git a/Fontes/Lato-Black.ttf b/Fontes/Lato-Black.ttf
diff --git a/Fontes/Lato-BlackItalic.ttf b/Fontes/Lato-BlackItalic.ttf
diff --git a/Fontes/Lato-Bold.ttf b/Fontes/Lato-Bold.ttf
diff --git a/Fontes/Lato-BoldItalic.ttf b/Fontes/Lato-BoldItalic.ttf
diff --git a/Fontes/Lato-Hairline.ttf b/Fontes/Lato-Hairline.ttf
diff --git a/Fontes/Lato-HairlineItalic.ttf b/Fontes/Lato-HairlineItalic.ttf
diff --git a/Fontes/Lato-Heavy.ttf b/Fontes/Lato-Heavy.ttf
diff --git a/Fontes/Lato-HeavyItalic.ttf b/Fontes/Lato-HeavyItalic.ttf
diff --git a/Fontes/Lato-Italic.ttf b/Fontes/Lato-Italic.ttf
diff --git a/Fontes/Lato-Light.ttf b/Fontes/Lato-Light.ttf
diff --git a/Fontes/Lato-LightItalic.ttf b/Fontes/Lato-LightItalic.ttf
diff --git a/Fontes/Lato-Medium.ttf b/Fontes/Lato-Medium.ttf
diff --git a/Fontes/Lato-MediumItalic.ttf b/Fontes/Lato-MediumItalic.ttf
diff --git a/Fontes/Lato-Regular.ttf b/Fontes/Lato-Regular.ttf
diff --git a/Fontes/Lato-Semibold.ttf b/Fontes/Lato-Semibold.ttf
diff --git a/Fontes/Lato-SemiboldItalic.ttf b/Fontes/Lato-SemiboldItalic.ttf
diff --git a/Fontes/Lato-Thin.ttf b/Fontes/Lato-Thin.ttf
diff --git a/Fontes/Lato-ThinItalic.ttf b/Fontes/Lato-ThinItalic.ttf
diff --git a/Imagens/1.1.jpg b/Imagens/1.1.jpg
diff --git a/Imagens/Img/Screenshot_10.png b/Imagens/Img/Screenshot_10.png
diff --git a/Imagens/Img/Screenshot_11.png b/Imagens/Img/Screenshot_11.png
diff --git a/Imagens/Img/Screenshot_12.png b/Imagens/Img/Screenshot_12.png
diff --git a/Imagens/Img/Screenshot_13.png b/Imagens/Img/Screenshot_13.png
diff --git a/Imagens/Img/Screenshot_14.png b/Imagens/Img/Screenshot_14.png
diff --git a/Imagens/Img/Screenshot_15.png b/Imagens/Img/Screenshot_15.png
diff --git a/Imagens/Img/Screenshot_16.png b/Imagens/Img/Screenshot_16.png
diff --git a/Imagens/Img/Screenshot_17.png b/Imagens/Img/Screenshot_17.png
diff --git a/Imagens/Img/Screenshot_18.png b/Imagens/Img/Screenshot_18.png
diff --git a/Imagens/Img/Screenshot_19.png b/Imagens/Img/Screenshot_19.png
diff --git a/Imagens/Img/Screenshot_20.png b/Imagens/Img/Screenshot_20.png
diff --git a/Imagens/Img/Screenshot_21.png b/Imagens/Img/Screenshot_21.png
diff --git a/Imagens/Img/Screenshot_22.png b/Imagens/Img/Screenshot_22.png
diff --git a/Imagens/Img/Screenshot_23.png b/Imagens/Img/Screenshot_23.png
diff --git a/Imagens/Img/Screenshot_24.png b/Imagens/Img/Screenshot_24.png
diff --git a/Imagens/Img/Screenshot_25.png b/Imagens/Img/Screenshot_25.png
diff --git a/Imagens/Img/Screenshot_26.png b/Imagens/Img/Screenshot_26.png
diff --git a/Imagens/Img/Screenshot_27.png b/Imagens/Img/Screenshot_27.png
diff --git a/Imagens/Img/Screenshot_28.png b/Imagens/Img/Screenshot_28.png
diff --git a/Imagens/Img/Screenshot_29.png b/Imagens/Img/Screenshot_29.png
diff --git a/Imagens/Img/Screenshot_30.png b/Imagens/Img/Screenshot_30.png
diff --git a/Imagens/Img/Screenshot_31.png b/Imagens/Img/Screenshot_31.png
diff --git a/Imagens/Img/Screenshot_4.png b/Imagens/Img/Screenshot_4.png
diff --git a/Imagens/Img/Screenshot_5.png b/Imagens/Img/Screenshot_5.png
diff --git a/Imagens/Img/Screenshot_7.png b/Imagens/Img/Screenshot_7.png
diff --git a/Imagens/Img/Screenshot_8.png b/Imagens/Img/Screenshot_8.png
diff --git a/Imagens/Img/Screenshot_9.png b/Imagens/Img/Screenshot_9.png
diff --git a/Imagens/Img/images (0).jpeg b/Imagens/Img/images (0).jpeg
diff --git a/Imagens/Img/images (1).jpg b/Imagens/Img/images (1).jpg
diff --git a/Imagens/Img/images (2).jpg b/Imagens/Img/images (2).jpg
diff --git a/Imagens/Img/images (4).jpg b/Imagens/Img/images (4).jpg
diff --git a/Imagens/Img/images (5).png b/Imagens/Img/images (5).png
diff --git a/Imagens/Logo1.jpg b/Imagens/Logo1.jpg
diff --git a/Imagens/Logo1.png b/Imagens/Logo1.png
diff --git a/Imagens/Logo2.jpg b/Imagens/Logo2.jpg
diff --git a/Imagens/Logo2.png b/Imagens/Logo2.png
diff --git a/Imagens/Redes sociais/APP1.png b/Imagens/Redes sociais/APP1.png
diff --git a/Imagens/Redes sociais/APP2.png b/Imagens/Redes sociais/APP2.png
diff --git a/Imagens/Redes sociais/APP3.png b/Imagens/Redes sociais/APP3.png
diff --git a/Imagens/Redes sociais/APP4.png b/Imagens/Redes sociais/APP4.png
diff --git a/Imagens/Redes sociais/Cifrão.jpeg b/Imagens/Redes sociais/Cifrão.jpeg
diff --git a/Imagens/Redes sociais/Face1.png b/Imagens/Redes sociais/Face1.png
diff --git a/Imagens/Redes sociais/Face2.png b/Imagens/Redes sociais/Face2.png
diff --git a/Imagens/Redes sociais/Face3.png b/Imagens/Redes sociais/Face3.png
diff --git a/Imagens/Redes sociais/Face4.png b/Imagens/Redes sociais/Face4.png
diff --git a/Imagens/Redes sociais/Insta1.png b/Imagens/Redes sociais/Insta1.png
diff --git a/Imagens/Redes sociais/Insta2.png b/Imagens/Redes sociais/Insta2.png
diff --git a/Imagens/Redes sociais/Insta3.png b/Imagens/Redes sociais/Insta3.png
diff --git a/Imagens/Redes sociais/Simbolo_Cifrão.png b/Imagens/Redes sociais/Simbolo_Cifrão.png
diff --git a/Imagens/Redes sociais/Simbolo_Cifrão_01.png b/Imagens/Redes sociais/Simbolo_Cifrão_01.png
diff --git a/Imagens/Redes sociais/Simbolo_Insta.png b/Imagens/Redes sociais/Simbolo_Insta.png
diff --git a/Imagens/Redes sociais/Simbolo_Whats.png b/Imagens/Redes sociais/Simbolo_Whats.png
diff --git a/Imagens/Redes sociais/Simbolo_Whats_01.png b/Imagens/Redes sociais/Simbolo_Whats_01.png
diff --git a/Imagens/Redes sociais/TikTok1.png b/Imagens/Redes sociais/TikTok1.png
diff --git a/Imagens/Redes sociais/TikTok2.png b/Imagens/Redes sociais/TikTok2.png
diff --git a/Imagens/Redes sociais/Whats1.png b/Imagens/Redes sociais/Whats1.png
diff --git a/Imagens/Redes sociais/Whats2.png b/Imagens/Redes sociais/Whats2.png
diff --git a/Imagens/Redes sociais/Whats3.png b/Imagens/Redes sociais/Whats3.png
diff --git a/Imagens/Redes sociais/Youtube1.png b/Imagens/Redes sociais/Youtube1.png
diff --git a/Imagens/Redes sociais/Youtube2.png b/Imagens/Redes sociais/Youtube2.png
diff --git a/Imagens/Simbolos/Acessibilidade1.png b/Imagens/Simbolos/Acessibilidade1.png
diff --git a/Imagens/Simbolos/Cafe1.png b/Imagens/Simbolos/Cafe1.png
diff --git a/Imagens/Simbolos/Cama1.png b/Imagens/Simbolos/Cama1.png
diff --git a/Imagens/Simbolos/Cozinha2.png b/Imagens/Simbolos/Cozinha2.png
diff --git a/Imagens/Simbolos/Estudos2.png b/Imagens/Simbolos/Estudos2.png
diff --git a/Imagens/Simbolos/Gym1.png b/Imagens/Simbolos/Gym1.png
diff --git a/Imagens/Simbolos/Lavanderia1.png b/Imagens/Simbolos/Lavanderia1.png
diff --git a/Imagens/Simbolos/Livro1.jpg b/Imagens/Simbolos/Livro1.jpg
diff --git a/Imagens/Simbolos/Pet1.png b/Imagens/Simbolos/Pet1.png
diff --git a/Imagens/Simbolos/Pet2.png b/Imagens/Simbolos/Pet2.png
diff --git a/Imagens/Simbolos/Pet3.png b/Imagens/Simbolos/Pet3.png
diff --git a/Imagens/Simbolos/Pet4.png b/Imagens/Simbolos/Pet4.png
diff --git a/Imagens/Simbolos/Pet5.png b/Imagens/Simbolos/Pet5.png
diff --git a/Imagens/Simbolos/Yoga2.png b/Imagens/Simbolos/Yoga2.png
diff --git a/Imagens/Video/1037437004-preview.mp4 b/Imagens/Video/1037437004-preview.mp4
diff --git a/Imagens/Video/1100878705-preview.mp4 b/Imagens/Video/1100878705-preview.mp4
diff --git a/Imagens/Video/1103318901-preview.mp4 b/Imagens/Video/1103318901-preview.mp4
diff --git a/Imagens/Video/1103692839-preview.mp4 b/Imagens/Video/1103692839-preview.mp4
diff --git a/Imagens/Wireframe.jpg b/Imagens/Wireframe.jpg
diff --git a/README.md b/README.md
@@ -130,3 +130,27 @@ A sua Landing Page deve conter:
 4.  Abra um novo Pull Request (PR) com a frase **PR para correção**. Caso não saiba como fazê-lo, assista a esse [vídeo](https://www.canva.com/design/DAFY4nS5W2c/t92uFMR61YtmA7bCwj2S1Q/watch).
 5.  Envie o link do seu PR e do surge no [formulário de entrega](https://forms.gle/nrh5KpDhAMwXBjC29).
 
+
+Link para acessar o projeto:
+https://orange-ship.surge.sh/#intro
+
+Imagens versão desktop:
+![Alt text](image.png)
+![Alt text](image-1.png)
+![Alt text](image-2.png)
+![Alt text](image-3.png)
+![Alt text](image-4.png)
+![Alt text](image-5.png)
+![Alt text](image-6.png)
+![Alt text](image-7.png)
+
+Imagens versão mobile:
+![Alt text](image-8.png)
+![Alt text](image-9.png)
+![Alt text](image-10.png)
+![Alt text](image-11.png)
+![Alt text](image-12.png)
+![Alt text](image-13.png)
+![Alt text](image-14.png)
+![Alt text](image-15.png)
+![Alt text](image-16.png)
diff --git a/image-0.png b/image-0.png
diff --git a/image-1.png b/image-1.png
diff --git a/image-10.png b/image-10.png
diff --git a/image-11.png b/image-11.png
diff --git a/image-12.png b/image-12.png
diff --git a/image-13.png b/image-13.png
diff --git a/image-14.png b/image-14.png
diff --git a/image-15.png b/image-15.png
diff --git a/image-16.png b/image-16.png
diff --git a/image-2.png b/image-2.png
diff --git a/image-3.png b/image-3.png
diff --git a/image-4.png b/image-4.png
diff --git a/image-5.png b/image-5.png
diff --git a/image-6.png b/image-6.png
diff --git a/image-7.png b/image-7.png
diff --git a/image-8.png b/image-8.png
diff --git a/image-9.png b/image-9.png
diff --git a/index.html b/index.html
@@ -0,0 +1,256 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400&family=Roboto:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css" type="text/css">
+    <script src="script.js" defer></script>
+    <title>F4 LIFE</title>
+</head>
+
+<body>
+    <input id="close-menu" class="close-menu" type="checkbox" aria-label="Close menu" role="button">
+    <label class="close-menu-label" for="close-menu" title="close-menu"></label>
+
+    <div>
+        <aside class="menu main-background">
+        <div class="main-content menu-content">
+            <!-- <h1 onclick="getElementById('close-menu').checked=false;>  -->
+            <h1> 
+                <a href="#"><img class="logo-tamanho" src="./Imagens/1.1.jpg" alt="logo"></a>
+            </h1>
+
+            <nav>
+                <ul>
+                    <li><a href="#intro">HOME</a></li>
+                    <li><a href="#secao2">F4 LIFE</a></li>
+                    <li><a href="#grid-one">ALUGUE</a></li>
+                    <li><a href="#gallery">GALERIA DE IMAGENS</a></li>
+                    <li><a href="#contact">BUSCAR IMÓVEL</a></li>
+                </ul>
+            </nav>
+            <div>
+                <button id="btnLogin" class="menu-botao">Login</button>
+            </div>
+            <div id="formularioCadastro">
+                    <h5>Cadastro</h5>
+                    <form>
+                    <label for="nome">Nome:</label>
+                    <input type="text" id="nome" name="nome" required>
+
+                    <label for="senha">Senha:</label>
+                    <input type="password" id="senha" name="senha" required>
+
+                    <button onclick="coletarInformacoes()" class="menu-botao1" type="submit">Cadastrar</button>
+                    </form>
+            </div>
+        </div>   
+        </aside>
+    </div>
+
+    <div class="menu-spacing"></div>
+
+    <section id="intro" class="intro-img section"> 
+        <div class="intro">
+            <video autoplay muted loop id="intro-img">
+                <source src="/Imagens/Video/1103318901-preview.mp4" type="video/mp4">
+                Seu browser não suporta o video.
+              </video>
+        </div>
+
+        <div class="main-content1 intro-content intro-content-teste">    
+            <div class="intro-text-content">
+                <h2>O que é o aluguel de república para pessoas universitárias?</h2>
+                <p class="intro-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel sequi velit quasi dolore in, alias, quaerat tempora cumque inventore quidem eius totam deserunt sapiente quos neque harum distinctio mollitia ipsam!</p>
+            </div>
+        </div>
+    </section>
+
+    <section id="secao2" class="white-background">
+        <div class="main-content secao2-content">
+            <h2>Se você procura um local especial para seus estudos, venha alugar na F4 LIFE!</h2>
+            <p>Conteúdo</p>
+            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, unde inventore! Quae nulla laboriosam consequatur suscipit aspernatur magnam tempora ratione, odio fugit consectetur eveniet necessitatibus quis eos facilis ipsam. Harum.</p>
+            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, unde inventore! Quae nulla laboriosam consequatur suscipit aspernatur magnam tempora ratione, odio fugit consectetur eveniet necessitatibus quis eos facilis ipsam. Harum.</p>
+        </div>
+    </section>
+
+    <section id="grid-one" class="grid-one main-background section">
+        <div class="main-content grid-one-content">
+            <h2 class="grid-main-heading-secao2">Alugue</h2>
+            <p class="grid-description">Breve descrição</p>
+
+            <div class="grid">
+                <article>
+                    <h3 class="secao2-h3">Segurança</h3>
+                    <p class="secao2-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. At deleniti corporis ad sequi nisi! Perspiciatis nobis corporis voluptatum, omnis aut sequi illum, commodi ipsa ab cumque voluptates, tenetur culpa consectetur.</p>
+                </article>
+                <article>
+                    <h3 class="secao2-h3">Tranquilidade</h3>
+                    <p class="secao2-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. At deleniti corporis ad sequi nisi! Perspiciatis nobis corporis voluptatum, omnis aut sequi illum, commodi ipsa ab cumque voluptates, tenetur culpa consectetur.</p>
+                </article>
+                <article>
+                    <h3 class="secao2-h3">Acessibilidade</h3>
+                    <p class="secao2-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. At deleniti corporis ad sequi nisi! Perspiciatis nobis corporis voluptatum, omnis aut sequi illum, commodi ipsa ab cumque voluptates, tenetur culpa consectetur.</p>
+                </article>
+            </div>
+            <div class="grid-imagens">
+                <img  class="icones-quadrados" src="./Imagens/Simbolos/Acessibilidade1.png" alt="acessibilidade">
+                <img class="icones-quadrados" src="./Imagens/Simbolos/Cafe1.png" alt="cafe">
+                <img class="icones-quadrados" src="./Imagens/Simbolos/Cama1.png" alt="cama">        
+                <img class="icones-quadrados" src="./Imagens/Simbolos/Cozinha2.png" alt="cozinha">
+                <img class="icones-quadrados" src="./Imagens/Simbolos/Estudos2.png" alt="lampada">
+                <img class="icones-quadrados" src="./Imagens/Simbolos/Gym1.png" alt="ginastica">
+                <img class="icones-quadrados" src="./Imagens/Simbolos/Lavanderia1.png" alt="lavanderia">
+                <img class="icones-quadrados" src="./Imagens/Simbolos/Livro1.jpg" alt="livro">
+                <img class="icones-quadrados" src="./Imagens/Simbolos/Pet1.png" alt="pet">
+                <img class="icones-quadrados" src="./Imagens/Simbolos/Yoga2.png" alt="yoga">
+              </div>
+        </div>
+    </section>
+
+    <section id="gallery" class="white-background section">
+        <div class="main-content grid-one-content">
+            <h2 class="grid-main-heading">Galeria</h2>
+            <p class="grid-description1">Breve descrição</p>
+
+            <div class="grid">
+                <div class="gallery-img">
+                    <img class="img-tamanho" src="./Imagens/Img/Screenshot_19.png" alt="#">
+                </div>
+                <div class="gallery-img">
+                    <img class="img-tamanho" src="./Imagens/Img/Screenshot_20.png" alt="#">
+                </div>
+                <div class="gallery-img">
+                    <img class="img-tamanho" src="./Imagens/Img/Screenshot_21.png" alt="#">
+                </div>
+                <div class="gallery-img">
+                    <img class="img-tamanho" src="./Imagens/Img/Screenshot_22.png" alt="#">
+                </div>
+                <div class="gallery-img">
+                    <img class="img-tamanho" src="./Imagens/Img/Screenshot_23.png" alt="#">
+                </div>
+                <div class="gallery-img">
+                    <img class="img-tamanho" src="./Imagens/Img/Screenshot_9.png" alt="#">
+                </div>
+                <div class="gallery-img">
+                    <img class="img-tamanho" src="./Imagens/Img/Screenshot_24.png" alt="#">
+                </div>
+                <div class="gallery-img">
+                    <img class="img-tamanho" src="./Imagens/Img/Screenshot_26.png" alt="#">
+                </div>
+                <div class="gallery-img">
+                    <img class="img-tamanho" src="./Imagens/Img/Screenshot_27.png" alt="#">
+                </div>
+                <div class="gallery-img">
+                    <img class="img-tamanho" src="./Imagens/Img/Screenshot_28.png" alt="#">
+                </div>
+                <div class="gallery-img">
+                    <img class="img-tamanho" src="./Imagens/Img/Screenshot_29.png" alt="#">
+                </div>
+                <div class="gallery-img">
+                    <img class="img-tamanho" src="./Imagens/Img/Screenshot_30.png" alt="#">
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section id="contact" class="intro main-background main-content3 section"> 
+        <div class="contact-form">
+            <fieldset class="form-grid">
+
+                <h2 class="contact-titulo">Encontre aqui sua moradia estudantil. Faça sua busca!</h2>
+                <p class="contact-p">Conteúdo como fazer a busca</p>
+                <p class="contact-p">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, unde inventore! Quae nulla laboriosam consequatur suscipit aspernatur magnam tempora ratione, odio fugit consectetur eveniet necessitatibus quis eos facilis ipsam. Harum.</p>
+
+                <div class="form-group full-width">
+                    <label for="cidade">Cidade</label>
+                    <input type="text" name="Busque pela cidade" id="cidade" placeholder="Cidade">
+                    <label for="bairro">Bairro</label>
+                    <input type="text" name="Busque pelo bairro" id="bairro" placeholder="Bairro">
+                    <label for="instituicao">Instituição de Ensino</label>
+                    <input type="text" name="Busque pela instituição de ensino" id="instituicao" placeholder="Instituição de ensino">
+                    <label for="moradia">Tipo de moradia</label>
+                    <input type="text" name="Escolha o tipo de moradia" id="moradia" placeholder="Tipo de moradia">
+                    <label for="aluguel">Valor do aluguel</label>
+                    <input type="text" name="Escolha o valor" id="aluguel" placeholder="Valor do aluguel">
+                </div>
+                <div class="form-group full-width">
+                        <label for="mensagem">Mensagem</label>
+                        <textarea name="mensagem" id="mensagem" cols="30" rows="10" placeholder="Mensagem"></textarea>
+                </div>
+                <div class="form-group full-width">
+                        <button type="submit">Buscar moradia</button>
+                </div>
+            </fieldset>         
+        </div>
+    </section>     
+
+    <section id="redes-sociais">          
+        <div class="main-content2 redes-sociais-content">
+            <div>       
+                <h2>Siga a F4LIFE</h2>
+                <p>Faça parte da nossa comunidade nas redes sociais</p>
+            </div>
+            <div class="redes-sociais-column">
+                <img class="rede-social-img" src="./Imagens/Redes sociais/Face4.png" alt="">
+                <img class="rede-social-img" src="./Imagens/Redes sociais/Insta2.png" alt="">
+                <img class="rede-social-img" src="./Imagens/Redes sociais/TikTok2.png" alt="">
+                <img class="rede-social-img" src="./Imagens/Redes sociais/Whats1.png" alt="">
+                <img class="rede-social-img" src="./Imagens/Redes sociais/Youtube2.png" alt="">
+            </div>
+        </div>
+    </section>
+
+    <section id="app">          
+        <div class="main-content2 app-content">
+            <div>       
+                <h2>App da F4LIFE</h2>
+                <p>Tudo que nossos residentes precisam saber da F4LIFE em um único lugar!<br>Baixe e aproveite!</p>
+            </div>
+            <div class="app-column">
+                <img class="app-img" src="./Imagens/Redes sociais/APP1.png">
+                <img class="app-img" src="./Imagens/Redes sociais/APP2.png">
+            </div>
+        </div>
+    </section>
+
+    <footer>
+        <section id="footer"> 
+            <div class="main-content1 footer-content">
+                <h1> 
+                    <a href="#"><img class="footer-logo-tamanho" src="./Imagens/1.1.jpg" alt="logo"></a>
+                </h1>
+                <nav class="footer-coluna">
+                    <ul class="sem-bolinhas">
+                        <li><a class="footer-anchor" href="#">HOME</a></li>
+                        <li><a class="footer-anchor" href="#">F4 LIFE</a></li>
+                        <li><a class="footer-anchor" href="#">ALUGUE</a></li>
+                        <li><a class="footer-anchor" href="#">ANUNCIE SEU IMÓVEL</a></li>
+                        <li><a class="footer-anchor" href="#">CONTATO</a></li>
+                    </ul>
+                </nav>
+                <nav class="footer-coluna">
+                    <ul class="sem-bolinhas">
+                        <li><a class="footer-anchor" href="#">FAQ</a></li>
+                        <li><a class="footer-anchor" href="#">Política de privacidade</a></li>
+                        <li><a class="footer-anchor" href="#">Formas de pagamento</a></li>
+                        <li><a class="footer-anchor" href="#">Trabalhe conosco</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </section>    
+    </footer>
+
+    <div class="white-background">
+        <div> 
+            <p class="dados-dev">©Copyright 2023 by Fernanda Zanette. All rights reversed.</p>
+        </div>
+    </div>
+
+    <a class="back-to-top" href="#">➤</a>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,27 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const btnLogin = document.getElementById("btnLogin");
+  const formularioCadastro = document.getElementById("formularioCadastro");
+
+  btnLogin.addEventListener("click", function () {
+    formularioCadastro.style.display = "block";
+  });
+})
+
+function coletarInformacoes() {
+      // Obter o valor digitado no input
+  const emailInput = document.getElementById("email");
+  const email = emailInput.value;
+
+  if (email.trim() === "") {
+        // Verificar se nada foi digitado
+    alert("Nada foi digitado. Por favor, digite um endereço de e-mail.");
+  } else {
+        // Exibir mensagem com o e-mail e limpar o input
+    alert("Entraremos em contato através do endereço " + email);
+    emailInput.value = "";
+  }
+}
+
+document.getElementById('close-menu').addEventListener('click', function(closeMenu) {
+  document.getElementById('close-menu').checked = false;
+})