latest commit

.vscode/launch.json

+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
\ No newline at end of file

index.html

@@ -24,6 +24,27 @@
   </header>
 
   <main class="main__container">
+
+    <div class="modal" id="modal1"> <!-- Modal -->
+      <form class="modal__form">
+        <div class="modal__header"> <!-- Modal__Header-->
+          <button type="button" class="modal__button--close" data-close-button>&times;</button>
+          <h1>Quer ficar por dentro das novidades?</h1>
+          <p>Inscreva-se na nossa newsletter mensal, e fique sabendo de tudo que acontece.</p>
+        </div>
+        <hr>
+        <div class="modal__body"> <!-- Modal__Body-->
+          <label for="email"><b>E-mail</b></label>
+          <input type="text" placeholder="E-mail" name="email"  />
+          <label for="password"><b>Senha</b></label>
+          <input type="password" placeholder="Senha" name="password"  />
+          <button class="modal__button--submit" type="submit">Inscrever-se</button>
+        </div>
+      </form>
+    </div>
+
+    <div id="modal__background"></div>
+
     <section id="home" class="section__intro"> 
       <div class="section__text">
         <h1>O café que você merece.</h1>

script.js

 // Switch mode (light-dark)
- let darkswitch = document.querySelector('.header__img--moon');
- let body = document.querySelector('body');
+let darkswitch = document.querySelector(".header__img--moon");
+let body = document.querySelector("body");
 
- darkswitch.onclick = function() {
-    body.classList.toggle('dark');
- }
\ No newline at end of file
+darkswitch.onclick = function () {
+  body.classList.toggle("dark");
+};
+
+// Modal
+const segundoplano = document.getElementById("modal__background");
+const closeModalButton = document.querySelector("[data-close-button]");
+
+// Segundo plano ao abrir o modal
+segundoplano.addEventListener("click", () => {
+  const modal = document.querySelectorAll(".modal.active");
+  modal.forEach((modal) => {
+    closeModal(modal);
+  });
+});
+
+// Botão para fechar o modal
+closeModalButton.addEventListener("click", () => {
+  const modal = closeModalButton.closest(".modal");
+  closeModal(modal);
+});
+
+// Função abrir modal
+function openModal(modal) {
+  if (modal == null) return;
+  modal.classList.add("active");
+  segundoplano.classList.add("active");
+}
+
+// Função fechar modal
+function closeModal(modal) {
+  if (modal == null) return;
+  modal.classList.remove("active");
+  segundoplano.classList.remove("active");
+}
+
+// Ativar modal ao carregar a pág.
+window.addEventListener("load", () => {
+  const modal = document.getElementById("modal1");
+  setTimeout(() => {
+    openModal(modal);
+  }, 1000);
+});

styles.css

@@ -17,11 +17,13 @@ html,
 body {
   margin: 0;
   padding: 0;
+  transition: background 1s;
 }
 
 .dark {
   background-color: var(--corQuinta);
   color: var(--corSexta);
+  transition: background 0.5s;
 }
 
 .dark header {
@@ -435,3 +437,121 @@ footer h3 {
   border: none;
   border-radius: 9999px;
 }
+
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  transition: 500ms ease-in-out;
+  border-radius: 10px;
+  z-index: 2;
+  background-image: url(images/brooke-cagle-X4RJG4aNi8o-unsplash.jpg);
+  min-height: 570px;
+  width: 1200px;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.modal.active {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.modal__form {
+  position: absolute;
+  max-width: 400px;
+  margin: 20px;
+  padding: 10px 25px 25px 25px;
+  right: 0;
+  background-color: var(--corQuinta);
+}
+
+.modal__header {
+  display: flex;
+  flex-direction: column;
+  
+}
+
+.modal__body {
+  padding-block-start: 10px;
+}
+
+.modal__form h1 {
+  color: var(--corSegunda);
+  font-size: x-large;
+}
+
+.modal__form p {
+  color: var(--corPrimeira);
+}
+
+.modal__form label {
+  padding-inline-start: 14px;
+  color: var(--corPrimeira);
+}
+
+.modal__button--submit {
+  padding: 10px;
+  margin-inline-start: 5px;
+  border-radius: 9999px;
+  border: none;
+  background-color: var(--corSegunda);
+  color: var(--corPrimeira);
+  transition: 0.4s;
+}
+
+.modal__button--submit:hover {
+  background-color: var(--corPrimeira);
+  color: var(--corSegunda);
+  transition: 0.4s;
+  cursor: pointer;
+}
+
+.modal__button--close {
+  color: var(--corSegunda);
+  margin: 0px 0px 20px auto;
+  border: none;
+  outline: none;
+  background: none;
+  height: 20px;
+  font-weight: bold;
+  font-size: 1.25rem;
+}
+
+.modal__button--close:hover {
+  color: var(--corPrimeira);
+  cursor: pointer;
+}
+
+input[type=text], input[type=password] {
+  width: 100%;
+  padding: 15px;
+  margin: 5px 0 22px 0;
+  border: none;
+  border-radius: 9999px;
+  background: #f1f1f1;
+}
+
+input[type=text]:focus, input[type=password]:focus {
+  background-color: #ddd;
+  outline: none;
+}
+
+#modal__background {
+  position: fixed;
+  opacity: 0;
+  transition: 200ms ease-in-out;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  background-color: rgba(0, 0, 0, 0.8);
+  pointer-events: none;
+}
+
+#modal__background.active {
+  opacity: 1;
+  pointer-events: all;
+}
\ No newline at end of file