update

phellowpy · Aug 4, 2024 · ffe1d09 · ffe1d09
1 parent a016d27
commit ffe1d09
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 14 deletions.
diff --git a/assets/css/contato.css b/assets/css/contato.css
@@ -27,13 +27,14 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
+    object-fit: cover;
     background-color: rgba(101, 224, 121, 0.7);
-    padding: 1rem;
     border-radius: 10px;
 }
 
 .form-image img {
-    width: 31rem;
+    border-radius: 10px;
+    width: 100%;
 }
 
 .form {

diff --git a/assets/css/style.css b/assets/css/style.css
@@ -108,12 +108,7 @@ img {
   &::before {
     content: "";
 	  display: block;
-    padding-top: 56.25%; // 16:9 aspect ratio
-  }
-  @media(min-width: 40rem) {
-    &::before {
-      padding-top: 66.6%; // 3:2 aspect ratio
-    }
+    padding-top: 70%; // 16:9 aspect ratio
   }
 }
 

diff --git a/assets/html/contato.html b/assets/html/contato.html
@@ -24,15 +24,15 @@
     <div class="container">
         <div class="form-image">
               <div class="mySlides fade">
-                <img src="../../assets/img/contato/porco.jpeg" style="width:100%; border-radius: 50%;">
+                <img src="../../assets/img/contato/porco.jpeg">
               </div>
 
               <div class="mySlides fade">
-                <img src="../../assets/img/contato/vaca.jpeg" style="width:100%; border-radius: 50%;">
+                <img src="../../assets/img/contato/vaca.jpeg">
               </div>
 
               <div class="mySlides fade">
-                  <img src="../../assets/img/contato/galinha.jpeg" style="width:100%; border-radius: 50%;">
+                  <img src="../../assets/img/contato/galinha.jpeg">
                 </div>
               <br>
 
@@ -58,8 +58,8 @@ <h1 style="color: white;">Entre em contato</h1>
                     </div>
 
                     <div class="input-box">
-                        <label for="lastname">Sobrenome</label>
-                        <input id="lastname" type="text" name="lastname" placeholder="Digite seu sobrenome" required>
+                        <label for="telephone">Telefone</label>
+                        <input id="telephone" type="tel" name="telephone" placeholder="Digite seu telefone" required>
                     </div>
                     <div class="input-box">
                         <label for="email">E-mail</label>
@@ -76,7 +76,7 @@ <h1 style="color: white;">Entre em contato</h1>
 
 
                 <div class="continue-button">
-                    <button><a href="#">Continuar</a> </button>
+                  <button type="button" onclick="checkForm()">Continuar</button>
                 </div>
             </form>
         </div>
@@ -113,6 +113,21 @@ <h1 style="color: white;">Entre em contato</h1>
           dots[slideIndex-1].className += " active";
           setTimeout(showSlides, 2000); // Change image every 2 seconds
         }
+
+        // mensagem do formulario
+
+        function checkForm() {
+            const firstname = document.getElementById('firstname').value;
+            const lastname = document.getElementById('telephone').value;
+            const email = document.getElementById('email').value;
+            const text = document.getElementById('text').value;
+
+            if (firstname && telephone && email && text) {
+                alert('O formulário não possui Backend para sua informação ser enviada para algum lugar, isso é apenas um formulário ilustrativo!');
+            } else {
+                alert('Preencha todos os campos, apenas lembre-se que isso e apenas um formulario ilustrativo!');
+            }
+        }
         </script>
 </body>