From 9fcb74fdc5fbfce5880e863630efa050a58f00aa Mon Sep 17 00:00:00 2001
From: Akansha_chaurasia <125260131+Akansha77@users.noreply.github.com>
Date: Tue, 4 Jun 2024 19:52:56 +0000
Subject: [PATCH 1/2] contact and developers added

---
 contact_us.html | 148 ++++++++++++++++++++++++++++++++++++++++++++++++
 developers.html | 111 ++++++++++++++++++++++++++++++++++++
 index.html      |   4 +-
 3 files changed, 261 insertions(+), 2 deletions(-)
 create mode 100644 contact_us.html
 create mode 100644 developers.html
diff --git a/contact_us.html b/contact_us.html
new file mode 100644
index 0000000..b681e7b
--- /dev/null
+++ b/contact_us.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact Us</title>
+    <style>
+        @import url('variables.css');
+        body {
+            
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: rgb(26, 26, 56);
+            color: #fff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+        }
+
+        .logo {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            width: 100px;
+            height: auto;
+        }
+
+        .container {
+            display: flex;
+            max-width: 1200px;
+            width: 100%;
+            height: 70vh;
+            border-radius: 20px;
+            overflow: hidden;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+        }
+
+        .map-container, .contact-form-container {
+            flex: 1;
+        }
+
+        .map-container iframe {
+            width: 100%;
+            height: 100%;
+            border: 0;
+        }
+
+        .contact-form-container {
+            background-color: rgb(255 238 197);
+            padding: 30px;
+            box-sizing: border-box;
+        }
+
+        .contact-form-container h1 {
+            text-align: center;
+            margin-bottom: 20px;
+            color: #d91c81;
+        }
+
+        .contact-form {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .contact-form input, .contact-form textarea {
+            padding: 10px;
+            margin-bottom: 15px;
+            border: none;
+            border-radius: 10px;
+            outline: none;
+            background: #ffffff;
+            color: #000000;
+            border: 2px solid #d91c81;
+        }
+
+        .contact-form input::placeholder, .contact-form textarea::placeholder {
+            color: #000000;
+        }
+
+        .contact-form button {
+            padding: 10px 40px;
+            border: none;
+            border-radius: 20px;
+            background-color: #d91c81;
+            color: #fff;
+            font-size: 14px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+            align-self: center;
+        }
+
+        .contact-form button:hover {
+            background-color: #c2186a;
+        }
+    </style>
+</head>
+<body>
+    <img src="Logos/Cloud Club Logos/transparent-bg-logos/Frame 18.png" alt="Logo" class="logo">
+    <div class="container">
+        <div class="map-container">
+            <iframe
+                src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d11171.988663604827!2d77.23127128580353!3d28.666913805085137!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd0683919c3b%3A0xf5fc331b74c2b9e2!2sIndira%20Gandhi%20Delhi%20Technical%20University%20for%20Women!5e0!3m2!1sen!2sin!4v1717526253911!5m2!1sen!2sin"
+                width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
+            </iframe>
+        </div>
+        <div class="contact-form-container">
+            <h1>Contact Us</h1>
+            <form action="https://api.web3forms.com/submit" method="POST" class="contact-form">
+                <input type="hidden" name="access_key" value="0438a67e-75ff-4680-9cd1-c3358935fa06">
+                <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>
+    <script>
+        document.getElementById('contact-form').addEventListener('submit', function(event) {
+            event.preventDefault();
+            
+            // Gather form data
+            const formData = {
+                name: event.target.name.value,
+                email: event.target.email.value,
+                phone: event.target.phone.value,
+                message: event.target.message.value
+            };
+            
+            // Simple form validation
+            if (formData.name && formData.email && formData.phone && formData.message) {
+                // For now, just log the form data to the console
+                console.log('Form submitted:', formData);
+                
+                // Clear the form
+                event.target.reset();
+                
+                // Show a success message (optional)
+                alert('Thank you for your message!');
+            } else {
+                alert('Please fill out all required fields.');
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/developers.html b/developers.html
new file mode 100644
index 0000000..44284d2
--- /dev/null
+++ b/developers.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DEVELOPERS</title>
+    <style>
+        @import url('variables.css');
+        body {
+            font-family: 'Arial', sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: rgb(255 238 197);
+            color: rgb(253, 246, 227);
+        }
+        header {
+            background-color: #be0065;
+            color: #fff;
+            padding: 20px 0;
+            text-align: center;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        .container {
+            width: 90%;
+            max-width: 1200px;
+            margin: 40px auto;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-around;
+        }
+        .creator {
+            background: #be0065;
+            margin: 20px;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            flex-basis: calc(33.333% - 40px);
+            text-align: center;
+            transition: transform 0.3s, box-shadow 0.3s;
+        }
+        .creator:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+        }
+        .creator img {
+            border-radius: 50%;
+            margin-bottom: 20px;
+            width: 100px;
+            height: 100px;
+            object-fit: cover;
+        }
+        .creator h2 {
+            margin: 10px 0 5px;
+            font-size: 24px;
+            color: #ffffff;
+        }
+        .creator p {
+            margin: 0;
+            font-size: 16px;
+            color: #ffffff;
+        }
+        @media (max-width: 768px) {
+            .creator {
+                flex-basis: calc(50% - 40px);
+            }
+        }
+        @media (max-width: 480px) {
+            .creator {
+                flex-basis: 100%;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>DEVELOPERS</h1>
+    </header>
+    <div class="container">
+        <div class="creator">
+            <img src="https://via.placeholder.com/100" alt="Riya Ahlawat">
+            <h2>Riya Ahlawat</h2>
+            <p>Linkedin Profile</p>
+        </div>
+        <div class="creator">
+            <img src="https://via.placeholder.com/100" alt="Pulak Srivastava">
+            <h2>Pulak Srivastava</h2>
+            <p>Linkedin Profile</p>
+        </div>
+        <div class="creator">
+            <img src="https://via.placeholder.com/100" alt="Advika Singhal">
+            <h2>Advika Singhal</h2>
+            <p>Linkedin Profile</p>
+        </div>
+        <div class="creator">
+            <img src="https://via.placeholder.com/100" alt="Samridhhi Tiwari">
+            <h2>Samridhhi Tiwari</h2>
+            <p>Linkedin Profile</p>
+        </div>
+        <div class="creator">
+            <img src="https://via.placeholder.com/100" alt="Tanvi Bisht">
+            <h2>Tanvi Bisht</h2>
+            <p>Linkedin Profile</p>
+        </div>
+        <div class="creator">
+            <img src="https://via.placeholder.com/100" alt="Akansha Chaurasia">
+            <h2>Akansha Chaurasia</h2>
+            <p>Linkedin Profile</p>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/index.html b/index.html
index ef23c19..f153d80 100644
--- a/index.html
+++ b/index.html
@@ -62,7 +62,7 @@
         <div class="footer-container">
           <div class="footer-container-left">
             <div class="footer-item">
-              <a class="footer-icons" href="">
+              <a class="footer-icons" href="contact_us.html">
                 <i class="fa fa-envelope"></i>
                 Contact Us
               </a>
@@ -86,7 +86,7 @@
               </a>
             </div>
             <div class="footer-item">
-                <a class="footer-icons" href="" target="_blank">
+                <a class="footer-icons" href="developers.html" target="_blank">
                   <i class="fa fa-user"></i>
                   Developers
                 </a>

From 4a00275cdb64a58e58ce4ab0db3e7ddc8d0456e5 Mon Sep 17 00:00:00 2001
From: Akansha_chaurasia <125260131+Akansha77@users.noreply.github.com>
Date: Fri, 14 Jun 2024 14:37:22 +0000
Subject: [PATCH 2/2] contacts and developers updated

---
 contact_us.html |  20 ++++-----
 developers.css  |  98 +++++++++++++++++++++++++++++++++++++++++
 developers.html | 115 +++++++-----------------------------------------
 3 files changed, 123 insertions(+), 110 deletions(-)
 create mode 100644 developers.css

diff --git a/contact_us.html b/contact_us.html
index b681e7b..7f14835 100644
--- a/contact_us.html
+++ b/contact_us.html
@@ -11,8 +11,8 @@
             font-family: Arial, sans-serif;
             margin: 0;
             padding: 0;
-            background-color: rgb(26, 26, 56);
-            color: #fff;
+            background-color: rgb(255 238 197);
+            color: #be0065;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -48,7 +48,7 @@
         }
 
         .contact-form-container {
-            background-color: rgb(255 238 197);
+            background-color: rgb(255, 234, 184);
             padding: 30px;
             box-sizing: border-box;
         }
@@ -56,7 +56,7 @@
         .contact-form-container h1 {
             text-align: center;
             margin-bottom: 20px;
-            color: #d91c81;
+            color: #be0065;
         }
 
         .contact-form {
@@ -71,20 +71,20 @@
             border-radius: 10px;
             outline: none;
             background: #ffffff;
-            color: #000000;
+            color: #be0065;
             border: 2px solid #d91c81;
         }
 
         .contact-form input::placeholder, .contact-form textarea::placeholder {
-            color: #000000;
+            color: #be0065;
         }
 
         .contact-form button {
             padding: 10px 40px;
             border: none;
             border-radius: 20px;
-            background-color: #d91c81;
-            color: #fff;
+            background-color: #be0065 ;
+            color:  rgb(255 238 197);
             font-size: 14px;
             cursor: pointer;
             transition: background-color 0.3s ease;
@@ -97,7 +97,7 @@
     </style>
 </head>
 <body>
-    <img src="Logos/Cloud Club Logos/transparent-bg-logos/Frame 18.png" alt="Logo" class="logo">
+    <img src="Logos/Cloud Club Logos/transparent-bg-logos/Frame 14.png" alt="Logo" class="logo">
     <div class="container">
         <div class="map-container">
             <iframe
@@ -108,7 +108,7 @@
         <div class="contact-form-container">
             <h1>Contact Us</h1>
             <form action="https://api.web3forms.com/submit" method="POST" class="contact-form">
-                <input type="hidden" name="access_key" value="0438a67e-75ff-4680-9cd1-c3358935fa06">
+                <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>
diff --git a/developers.css b/developers.css
new file mode 100644
index 0000000..124e280
--- /dev/null
+++ b/developers.css
@@ -0,0 +1,98 @@
+@import url('variables.css');
+
+body {
+    font-family: 'Courier New', Courier, monospace;
+    background-color: rgb(255 238 197);
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+.poppins-bold {
+    font-family: "Poppins", sans-serif;
+    font-weight: 700;
+    font-style: normal;
+  }
+.back-button {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    background-color: #fff5d7;
+    color: #be0065;
+    padding: 10px 20px;
+    border-radius: 5px;
+    text-decoration: none;
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+.back-button:hover {
+    background-color: #ffe8a4;
+    transform: scale(1.05);
+}
+
+.back-button:active {
+    background-color: #fff5d7;
+}
+
+.contact-container {
+    background-color: #fff5d7;
+    padding: 50px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    width: 80%;
+    max-width: 800px;
+    max-height: 900px;
+    text-align: center;
+}
+
+h1 {
+    color: #be0065;
+    font-size: 2em;
+    margin-bottom: 40px;
+    text-align: left;
+}
+
+.button-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+    margin-top: 10px;
+}
+
+.button {
+    background-color: #f5e3c3;
+    padding: 20px;
+    border-radius: 10px;
+    color: #be0065;
+    text-decoration: none;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    border: 2px solid #e0d2b8;
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+.button i {
+    margin-right: 10px;
+}
+
+.button:hover {
+    background-color: #e0d2b8;
+    transform: scale(1.05);
+}
+
+.button:active {
+    background-color: #d1c4a5;
+}
+
+/* Media query for responsiveness */
+@media (max-width: 600px) {
+    .button-grid {
+        grid-template-columns: 1fr;
+    }
+
+    h1 {
+        text-align: center;
+    }
+}
diff --git a/developers.html b/developers.html
index 44284d2..2ed051b 100644
--- a/developers.html
+++ b/developers.html
@@ -3,109 +3,24 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DEVELOPERS</title>
-    <style>
-        @import url('variables.css');
-        body {
-            font-family: 'Arial', sans-serif;
-            margin: 0;
-            padding: 0;
-            background-color: rgb(255 238 197);
-            color: rgb(253, 246, 227);
-        }
-        header {
-            background-color: #be0065;
-            color: #fff;
-            padding: 20px 0;
-            text-align: center;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-        .container {
-            width: 90%;
-            max-width: 1200px;
-            margin: 40px auto;
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-around;
-        }
-        .creator {
-            background: #be0065;
-            margin: 20px;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            flex-basis: calc(33.333% - 40px);
-            text-align: center;
-            transition: transform 0.3s, box-shadow 0.3s;
-        }
-        .creator:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-        }
-        .creator img {
-            border-radius: 50%;
-            margin-bottom: 20px;
-            width: 100px;
-            height: 100px;
-            object-fit: cover;
-        }
-        .creator h2 {
-            margin: 10px 0 5px;
-            font-size: 24px;
-            color: #ffffff;
-        }
-        .creator p {
-            margin: 0;
-            font-size: 16px;
-            color: #ffffff;
-        }
-        @media (max-width: 768px) {
-            .creator {
-                flex-basis: calc(50% - 40px);
-            }
-        }
-        @media (max-width: 480px) {
-            .creator {
-                flex-basis: 100%;
-            }
-        }
-    </style>
+    <title>Contact</title>
+    <link rel="stylesheet" href="developers.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 </head>
 <body>
-    <header>
-        <h1>DEVELOPERS</h1>
-    </header>
-    <div class="container">
-        <div class="creator">
-            <img src="https://via.placeholder.com/100" alt="Riya Ahlawat">
-            <h2>Riya Ahlawat</h2>
-            <p>Linkedin Profile</p>
-        </div>
-        <div class="creator">
-            <img src="https://via.placeholder.com/100" alt="Pulak Srivastava">
-            <h2>Pulak Srivastava</h2>
-            <p>Linkedin Profile</p>
-        </div>
-        <div class="creator">
-            <img src="https://via.placeholder.com/100" alt="Advika Singhal">
-            <h2>Advika Singhal</h2>
-            <p>Linkedin Profile</p>
-        </div>
-        <div class="creator">
-            <img src="https://via.placeholder.com/100" alt="Samridhhi Tiwari">
-            <h2>Samridhhi Tiwari</h2>
-            <p>Linkedin Profile</p>
-        </div>
-        <div class="creator">
-            <img src="https://via.placeholder.com/100" alt="Tanvi Bisht">
-            <h2>Tanvi Bisht</h2>
-            <p>Linkedin Profile</p>
-        </div>
-        <div class="creator">
-            <img src="https://via.placeholder.com/100" alt="Akansha Chaurasia">
-            <h2>Akansha Chaurasia</h2>
-            <p>Linkedin Profile</p>
+    <body class="poppins-bold">
+    <a href="index.html" class="back-button">Back</a>
+    <div class="contact-container">
+        <h1>Developers</h1>
+        <div class="button-grid">
+            <a href="LINKEDIN PROFILE" class="button"><i class="fas fa-user"></i> Riya Ahlawat</a>
+            <a href="LINKEDIN PROFILE" class="button"><i class="fas fa-user"></i> Pulak Srivastava</a>
+            <a href="LINKEDIN PROFILE" class="button"><i class="fas fa-user"></i> Advika Singhal</a>
+            <a href="LINKEDIN PROFILE" class="button"><i class="fas fa-user"></i> Samridhhi Tiwari</a>
+            <a href="LINKEDIN PROFILE" class="button"><i class="fas fa-user"></i> Tanvi Bisht</a>
+            <a href="https://www.linkedin.com/in/akansha-chaurasia-47235b260/" class="button"><i class="fas fa-user"></i> Akansha Chaurasia</a>
         </div>
     </div>
 </body>
+</body>
 </html>
