pagina contato concluida

contato.html

@@ -43,6 +43,44 @@ <h1 class = "textbanner">Quer falar com a gente?</h1>
     </div>
 </main>
 
+    <!-- Formulário para Contatos -->
+    <section class="Container">
+    <div id="formulario">
+        <h2>Nosso Contato</h2>
+        <form action="mailto:[email protected]?subject=contatodosite">
+        <input type="text" name="nome" id="nome" placeholder="Nome" required>
+        <br>
+        <input type="email" name="email" id="email" placeholder="E-Mail" required>
+        <br>
+        <input type="tel" name="number" id="number" placeholder="Celular" required>
+        <br>
+        <textarea name="mensagem" id="mensagem" cols="10" rows="10" placeholder="Qual sua dúvida ou problema?" required></textarea>
+        <br>
+        <input type ="submit" value="Enviar">
+        <input type="reset">
+        </form>
+    </div>
+    </section>
+
+    <!-- Section Zap -->
+    <section class = "zap">
+        <div class= "Container FlexSection">
+            <div class = "textzap">
+                <h2>Chama a gente no <span class = "spanzap">Whatsapp!</span></h2>
+                <p>Entra em contato que a gente resolve seu problema</p>
+                <a href="https://api.whatsapp.com/send?phone=5511123456789" target="_blank" class="Buttonzap">Chama aí!</a>
+            </div>
+            <div class = "imagemzap">
+                <img src="./img/qrcodezap.PNG" alt="qrcode zap">
+            </div>
+        </div>
+        </section>
+
+        <!-- Google Maps Integrado -->
+        <section class="Container">
+        <iframe id = "maps1" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3657.7659721597747!2d-46.577542724740866!3d-23.540918260841387!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5ec26cfdcfed%3A0x49e7eb66fd4f1f2!2sSenac%20Tatuap%C3%A9%20-%20Cel.%20Lu%C3%ADs%20Americano!5e0!3m2!1spt-BR!2sbr!4v1712777172287!5m2!1spt-BR!2sbr" width="347" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+        <iframe id = "maps2"src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3657.7659721597747!2d-46.577542724740866!3d-23.540918260841387!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5ec26cfdcfed%3A0x49e7eb66fd4f1f2!2sSenac%20Tatuap%C3%A9%20-%20Cel.%20Lu%C3%ADs%20Americano!5e0!3m2!1spt-BR!2sbr!4v1712777172287!5m2!1spt-BR!2sbr" width="700" height="350" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+    </section>
 
     <!-- Rodapé -->
 <footer>

style.css

@@ -73,6 +73,7 @@ body {
     flex-direction: row;
 }
 
+
 /* Customização dos cards */
 
 
@@ -176,6 +177,7 @@ body {
 }
 
 
+
 /* Smartphone portrait */
 /* Cabeçalho */
 header {
@@ -455,6 +457,50 @@ footer{
         font-weight: bolder;
     }
 
+    /* Formatação do formulário */
+   #formulario input[type="text"], 
+   #formulario input[type="email"],
+   #formulario input[type="tel"],
+   #formulario textarea {
+        margin-top: 7px;
+        width: 100%;
+        box-sizing: border-box;
+        padding: 10px;
+        border-radius: 5px;
+        border: 1px solid #cccccc;  
+    }
+
+    #formulario input[type="submit"],
+    #formulario input[type="reset"] {
+        background-color: var(--vermelhoLayout);
+        border: none;
+        color: white;
+        padding: 10px 20px;
+        border-radius: 5px;
+        cursor: pointer;
+        margin-left: 1px;
+    }
+
+    #formulario input[type="reset"] {
+        background-color: var(--vermelhoLayout);
+    }
+
+    #formulario h2 {
+        text-align: center;
+        margin: 50px 0px 25px 0px;
+    }
+
+    #formulario form {
+        background-color: white;
+        padding: 20px;
+        border-radius: 10px;
+        box-shadow: 0 2px 4px rgba(0,0,0, 0.1,); 
+    }
+
+    /* Google Maps */
+    #maps2{
+        display: none;
+    }
 
 
 /* Smartphone landscape */
@@ -791,7 +837,15 @@ footer{
         font-size: 1.6em;
         margin-bottom: 10px;
     }
-
+
+    /* Google Maps */
+    #maps1 {
+    display: none;
+    }
+    #maps2 {
+        display: block;
+        margin-left: 310px;
+    }
 
 }