built complete functional contact us section

index.html

@@ -5,6 +5,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <link
       href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
       rel="stylesheet"
@@ -13,6 +14,17 @@
     <link rel="stylesheet" href="./Image-Gallery/style.css">
     <title>Arpan Codes | Tourguide</title>
 
+    <script src="index.js"></script>
+
+    <script type="text/javascript"
+        src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js">
+</script>
+<script type="text/javascript">
+   (function(){
+      emailjs.init("WB9rAyWwwLZube-er");
+   })();
+</script>
+
   <style>
   html {
     scroll-behavior: smooth;
@@ -29,7 +41,7 @@
         <li class="link"><a href="#trip">Pricing</a></li>
         <li class="link"><a href="#ReviewGallery">Reviews</a></li>
       </ul>
-      <a href="https://www.linkedin.com/in/arpan-chowdhury-775294251/" class="btn">Contact Us</a>
+      <a href="#contact"><button class="btn">Contact Us</button></a>
     </nav>
     <header>
       <section class="section__container header__container" id="Home">
@@ -181,6 +193,35 @@ <h2 class="section__title">
           </div>
         </div>
       </div>
+    </section><br><br>
+
+
+    <section class="contact">
+    <h2 class="section__title" align="center" id="contact">Contact Us</h2>
+    <div class="contact-form">
+      <div class="left">
+        <!-- Add your image here -->
+        <img src="./img/flat-design-illustration-customer-support_23-2148887720.avif" alt="Contact Image" style="max-width: 100%; width: 500px;">
+      </div>
+      <div class="right">
+        <form>
+          <div class="mb-3">
+            <label for="exampleInputName" class="form-label text-light">Name</label>
+            <input type="text" class="form-control" id="exampleInputName" placeholder="Enter your name">
+          </div>
+          <div class="mb-3">
+            <label for="exampleInputEmail2" class="form-label text-light">Email address</label>
+            <input type="email" class="form-control" id="exampleInputEmail2" aria-describedby="emailHelp" placeholder="Enter your email">
+            <div id="emailHelp" class="form-text text-light">We'll never share your email with anyone else.</div>
+          </div>
+          <div class="mb-3">
+            <label for="exampleInputMessage" class="form-label text-light">Message</label>
+            <textarea class="form-control" id="exampleInputMessage" rows="4" placeholder="feel free to ask your queries!"></textarea>
+          </div>
+          <button type="submit" class="btn btn-primary"  onclick="sendMail()">Submit</button>
+        </form>
+        </div>
+      </div>
         <!-- New div components (hidden initially) -->
         <div id="newDiv" style="display: none;">
           <div class="image-container">
@@ -218,10 +259,14 @@ <h2 class="section__title">
             <div class="btn-container">
                 <button class="btn" id="prev">Prev</button>
                 <button class="btn" id="next">Next</button>
-            </div>
-        </div>
+          </div>
+      </div>
     </section>
 
+
+
+
+
     <section class="subscribe" id="Contact">
       <div class="section__container subscribe__container">
         <div class="subscribe__content">

index.js

@@ -0,0 +1,22 @@
+function sendMail() {
+    var params = {
+      name: document.getElementById("exampleInputName").value,
+      email: document.getElementById("exampleInputEmail2").value,
+      message: document.getElementById("exampleInputMessage").value,
+    };
+
+    const serviceID = "service_hi7jvka";
+    const templateID = "template_2mu6atu";
+
+      emailjs.send(serviceID, templateID, params)
+      .then(res=>{
+          document.getElementById("exampleInputName").value = "";
+          document.getElementById("exampleInputEmail2").value = "";
+          document.getElementById("exampleInputMessage").value = "";
+          console.log(res);
+          alert("Your message sent successfully!!")
+
+      })
+      .catch(err=>console.log(err));
+
+  }

styles.css

@@ -546,6 +546,7 @@ header {
     grid-template-columns: repeat(2, 1fr);
   }
 }
+<<<<<<< HEAD
 /* doing changes */
 #goToTopBtn {
   display: none;
@@ -563,3 +564,42 @@ header {
 #goToTopBtn:hover {
   background-color: #0056b3;
 }
+=======
+
+
+
+.contact-form {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.contact-form .left {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.contact-form .right {
+  flex: 1;
+  padding-left: 20px;
+}
+
+.right .form-control {
+  width: 100%;
+  max-width: 600px; /* Adjust the maximum width as needed */
+}
+
+/* Additional styling for responsiveness */
+@media (max-width: 768px) {
+  .contact-form {
+    flex-direction: column;
+  }
+
+  .contact-form .right {
+    padding-left: 0;
+    margin-top: 10px; /* Adjust as needed */
+  }
+}
+>>>>>>> 376263b (built complete functional contact us section)