Form Section Completed

Portfolio-Website-Task1/index.html

@@ -180,44 +180,87 @@ <h5 class="card-title"><a href="https://aitzaz-hakro.github.io/Projects/Project1
           </div>
         </div>
       </div>    
-      <hr > 
+      <!-- <hr >  -->
 
 
 
       <!-- ********************----Contact  Portion ----************************************************************************ -->
-
       <div class="contactportion col-md-12">
-        <div class="col contennt col-md-12 ">
-
-        <div class="col-md-8 " id="Contact" style="margin-top: 90px;">
-          <h1 style="font-size: 3.4rem; margin-bottom: 30px;  margin-left: 40px; "> <span class="text-primary">Contact Me</span></h1>
-        </div>
+        <!-- <div class="col contennt col-md-12 "> -->
+         <div class="col">
+          <div class="row">
+          <div class="col-md-8 " id="Contact" style="margin-top: 90px;">
+            <h1 style="font-size: 3.4rem; margin-bottom: 30px;  margin-left: 40px; "> <span class="text-primary">Contact Me</span></h1>
+          </div>
+
+
+
+      <form id="contactForm" onsubmit="sendEmail(event)">
         <div class="form-floating mb-3 col-md-6">
-          <input type="Name" class="form-control" id="floatingPassword" placeholder="Name">
+          <input type="name" class="form-control" id="floatingPassword"  name="name"  placeholder="Name" required>
           <label for="floatingPassword">Your Name</label>
         </div>
         <div class="form-floating col-md-6 mb-3">
-          <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
+          <input type="email" class="form-control" id="floatingInput email" placeholder="[email protected]" name="email" required>
           <label for="floatingInput">Email address</label>
         </div>
         <div class="form-floating col-md-6 ">
-          <textarea class="form-control" placeholder="Leave a message here" id="floatingTextarea"></textarea>
+          <textarea class="form-control" placeholder="Leave a message here" id="floatingTextarea message" name="message" required></textarea>
           <label for="floatingTextarea">Message</label>
         </div>
         <div class="col-md-12 mt-3">
-          <button type="button" class="btn btn-primary">Submit</button>
-      </div>
-      </div>   
-        <hr>    
-
-          </div>
-        </div>
-      </div>
+          <button type="submit" class="btn btn-primary">Submit</button>
+      </form>
+
+     </div>
+     </div>
+       </div>   
+
+
+   </div>
+
+
 
 
 
 
 
       <script src="Bootstrap/bootstrap.bundle.js"></script>
+      <script src="https://cdn.emailjs.com/dist/email.min.js"></script>
+     <script> 
+      // template_jo5chcn template_id
+// service_58a0k2o  service_id
+// aAzEqBPEgwzj79xo3 public_id
+emailjs.init("RwXk0YbMf5i9cfx8Y");
+
+// Handle form submission
+document.getElementById('contactForm').addEventListener('submit', function(event) {
+  event.preventDefault(); // Prevent the default form submission
+
+  // Collect form data
+  const name = document.getElementById('name').value;
+  const email = document.getElementById('email').value;
+  const message = document.getElementById('message').value;
+
+  // Prepare email template parameters
+  const templateParams = {
+    from_name: name,
+    from_email: email,
+    message: message
+  };
+
+  // Send email using EmailJS
+  emailjs.send('service_58a0k2o', 'template_jo5chcn', templateParams)
+    .then(response => {
+      alert('Email sent successfully!');
+      document.getElementById('contactForm').reset(); // Reset form fields
+    })
+    .catch(error => {
+      console.error('Error sending email:', error);
+      alert('Failed to send email. Please try again.');
+    });
+});
+     </script>  
+
 </body>
 </html>

Portfolio-Website-Task1/style.css

@@ -189,7 +189,7 @@ body{
 
 }
 
-@media only screen and (min-width: 1537px){
+@media only screen and (min-width: 2000px){
   .desc{
     font-size: 1rem;
   }
@@ -198,7 +198,7 @@ body{
   .animate3,
   .animate4,
   .animate5, .img {
-    /* width: 100vh; */
+
     width: 200px !important;
 
     opacity: 0;