Merge branch 'tech-explorer-riyaaa:main' into main

riyaahlawat · Jun 24, 2024 · 16a3b25 · 16a3b25
2 parents 81a3c55 + 270da30
commit 16a3b25
Show file tree

Hide file tree

Showing 4 changed files with 162 additions and 149 deletions.
diff --git a/contact_us.html b/contact_us.html
diff --git a/index.html b/index.html
@@ -36,6 +36,7 @@
   <link rel="stylesheet" href="styles/palette.css">
   <link rel="stylesheet" href="styles/modal.css">
   <link rel="stylesheet" href="styles/about.css">
+  <link rel="stylesheet" href="styles/contact.css">
   <link rel="stylesheet" href="styles/info-keyboard.css">
 </head>
 
@@ -264,7 +265,7 @@ <h3>Amazon DynamoDB 📊</h3>
     <div class="footer-container">
       <div class="footer-container-left">
         <div class="footer-item">
-          <a class="footer-icons" href="contact_us.html">
+          <a class="footer-icons"  href="javascript:void(0);" id="contacts-contactBtn"> 
             <i class="fa fa-envelope"></i>
             Contact Us
           </a>
@@ -323,7 +324,35 @@ <h1>Meet the Developers</h1>
         </div>
         <!-- developers pop-up end  -->
 
+
+
+   <!-- contact pop-up start  ( Akansha chaurasia ) -->
+<div class="contacts-popup" id="contacts-popup">
+  <div class="contacts-popup-things">
+      <span class="contacts_close" id="contacts-close-popup">&times;</span>
+      <div class="contacts-container">
+          <div class="contacts-map-container">
+              <!-- Embed your map iframe here -->
+              <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3500.8056942573885!2d77.2294329757856!3d28.665536075646727!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd0683919c3b%3A0xf5fc331b74c2b9e2!2sIndira%20Gandhi%20Delhi%20Technical%20University%20for%20Women!5e0!3m2!1sen!2sin!4v1718804452113!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+          </div>
+          <div class="contacts-contact-form-container">
+              <h1>Contact Us</h1>
+              <form class="contacts-contact-form">
+                <input type="hidden" name="access_key" value="47c3ce45-249f-4c39-97e7-80972e46017d">
+                <input type="text" id="name" name="name" placeholder="Name" required>
+                <input type="email" id="email" name="email" placeholder="Email" required>
+                <input type="text" id="phone" name="phone" placeholder="Phone No" required>
+                <textarea id="message" name="message" rows="4" placeholder="Write your message" required></textarea>
+                <button type="submit">Submit</button>
+              </form>
+          </div>
       </div>
+  </div>
+</div>
+
+ <!-- contact pop-up end  --> 
+
+    </div>
       <div class="footer-container-right">
         <div class="footer-icons">
           <span class="footer-content">
@@ -351,6 +380,7 @@ <h1>Meet the Developers</h1>
   <script src="js/script.js"></script>
   <script src="js/palette.js"></script>
   <script src="js/modal.js"></script>
+  <script src="js/contact.js"></script>
   <script src="js/info-keyboard.js"></script>
 
 </body>

diff --git a/js/contact.js b/js/contact.js
@@ -0,0 +1,32 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const contactBtn = document.getElementById('contacts-contactBtn');
+    const popup = document.getElementById('contacts-popup');
+    // const closeBtn = document.getElementById('contacts_close');
+    const closeBtn = document.querySelector('.contacts_close');
+
+    document.getElementById('name').disabled = false;
+document.getElementById('message').disabled = false;
+
+    // Function to open the popup
+    function openPopup() {
+        popup.style.display = 'flex';
+    }
+
+    // Function to close the popup
+    function closePopup() {
+        popup.style.display = 'none';
+    }
+
+    // Event listener for the contact button
+    contactBtn.addEventListener('click', openPopup);
+
+    // Event listener for the close button
+    closeBtn.addEventListener('click', closePopup);
+
+    // Close the popup if user clicks outside the popup
+    window.addEventListener('click', function(event) {
+        if (event.target === popup) {
+            closePopup();
+        }
+    });
+});
diff --git a/styles/contact.css b/styles/contact.css
@@ -0,0 +1,99 @@
+@import url('variables.css');
+
+.contacts-popup {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    justify-content: center;
+    align-items: center;
+    z-index: 1000; /* Ensure popup is above other content */
+}
+
+.contacts-popup-things {
+    background-color: rgb(255, 234, 184);
+    padding: 20px;
+    border-radius: 10px;
+    position: relative;
+    width: 90%;
+    max-width: 1200px;
+    height: 70vh;
+    box-sizing: border-box;
+    overflow: auto; /* Enable scrolling for large content */
+}
+
+.contacts_close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 24px;
+    cursor: pointer;
+}
+
+.contacts-container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+
+.contacts-map-container, .contacts-contact-form-container {
+    flex: 1;
+}
+
+.contacts-map-container iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+}
+
+.contacts-contact-form-container {
+    background-color: rgb(255, 234, 184);
+    padding: 30px;
+    box-sizing: border-box;
+}
+
+.contacts-contact-form-container h1 {
+    text-align: center;
+    margin-bottom: 20px;
+    color: #be0065;
+}
+
+.contacts-contact-form {
+    display: flex;
+    flex-direction: column;
+}
+
+.contacts-contact-form input, .contacts-contact-form textarea {
+    padding: 10px;
+    margin-bottom: 15px;
+    border: none;
+    border-radius: 10px;
+    outline: none;
+    background: #ffffff;
+    color: #be0065;
+    border: 2px solid #d91c81;
+    font-size: 14px;
+}
+
+.contacts-contact-form input::placeholder, .contacts-contact-form textarea::placeholder {
+    color: #be0065;
+}
+
+.contacts-contact-form button {
+    padding: 10px 40px;
+    border: none;
+    border-radius: 20px;
+    background-color: #be0065;
+    color: rgb(255, 238, 197);
+    font-size: 14px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    align-self: center;
+}
+
+.contacts-contact-form button:hover {
+    background-color: #c2186a;
+}