feat: add form completion popup

contato/index.html

@@ -83,7 +83,8 @@ <h1>Contato</h1>
                     <button type="submit">Submit</button>
                 </form>
                 <div id="successMessage" class="hidden">Thank you for contacting us!</div>
-                <div id="errorMessage" class="hidden">There was an error submitting the form. Please try again.</div>
+                <!-- Popup Modal -->
+
             </div>
             </div>
         </div>

contato/script.js

@@ -45,3 +45,17 @@ document
       document.getElementById("errorMessage").classList.add("visible");
     }
   });
+
+// Script para fechar o modal
+var modal = document.getElementById("successModal");
+var span = document.getElementsByClassName("close")[0];
+
+span.onclick = function () {
+  modal.style.display = "none";
+};
+
+window.onclick = function (event) {
+  if (event.target == modal) {
+    modal.style.display = "none";
+  }
+};

contato/style.css

@@ -146,3 +146,41 @@ button:hover {
 label {
   margin: 5px;
 }
+
+h1,
+p,
+a {
+  animation: appear 1s backwards;
+}
+
+.contact-form {
+  animation: appear 1s backwards;
+}
+
+h1 {
+  animation-delay: 0.2s;
+}
+
+p {
+  animation-delay: 0.8s;
+}
+
+a {
+  animation-delay: 1.6s;
+}
+.contact-form {
+  animation-delay: 0.5s;
+  background-color: rgba(245, 222, 179, 0.8);
+}
+/*
+@media (width < 40rem) {
+  html {
+    font-size: 70%;
+  }
+}
+*/
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+}