•Contact (#393)

CSEdgeOfficial · Jun 4, 2024 · a01a7e7 · a01a7e7
1 parent cf905eb
commit a01a7e7
Show file tree

Hide file tree

Showing 4 changed files with 149 additions and 60 deletions.
diff --git a/ScrollToTop.js b/ScrollToTop.js
@@ -16,4 +16,27 @@ goTopBtn.addEventListener('click', ()=>{
         top:0,
         behavior:"smooth"
     })
-})
+})
+
+//contact form to excel sheet
+const scriptURL = 'https://script.google.com/macros/s/AKfycbzUSaaX3XmlE5m9YLOHOBrRuCh2Ohv49N9bs4bew7xPd1qlgpvXtnudDs5Xhp3jF-Fx/exec';
+const form = document.forms['submitToGoogleSheet']
+const msg = document.getElementById("msg")
+
+form.addEventListener('submit', e => {
+    e.preventDefault()
+    fetch(scriptURL, { method: 'POST', body: new FormData(form) })
+        .then(response => {
+            msg.innerHTML = "Message sent successfully"
+            setTimeout(function () {
+                msg.innerHTML = ""
+            }, 5000)
+            form.reset()
+        })
+        .catch(error => console.error('Error!', error.message))
+})
+
+
+function updateActiveSection() {
+  var scrollPosition = $(window).scrollTop();
+}
diff --git a/home.css b/home.css
@@ -449,7 +449,7 @@ body.dark-mode #Services{
     list-style: none;
 }
 
-/*Styles for Contact */
+/* Styles for Contact */
 
 .fa-linkedin,
 .fa-github,
@@ -461,32 +461,31 @@ body.dark-mode #Services{
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 50px;
-    padding: 50px;
+    gap: 3px;
+    padding: 0;
 }
 
-.contact-style {
+.contact-content {
     display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+    flex-wrap: wrap;
     align-items: center;
+    justify-content: center;
     padding: 50px;
 }
 
-.contact-style div {
-    width: 100%;
-    height: auto;
+.col {
+    flex: 1 1 50%;
+    padding: 20px;
 }
 
-.contact-style #contact-img {
-    width: 60%;
-    height: auto;
-    object-fit: cover;
-    animation: moveUpDown 1.5s infinite alternate;
+.contact-image img {
+    width: 80%;
+    max-width: 300px;  /* Max width to ensure the image isn't too large */
+    border-radius: 20px;
 }
 
-/*Contact Form*/
-.contactForm {
+/* Contact Form */
+.contact {
     width: 100%;
     max-width: 570px;
     margin: auto;
@@ -496,41 +495,91 @@ body.dark-mode #Services{
     border-radius: 10px;
 }
 
-.contactForm label {
-    display: inline-block;
-    margin-bottom: 0.5rem;
-    font-weight: bold;
+.contact input,
+.contact textarea {
+    width: 100%;
+    padding: 15px;
+    border: 0;
+    margin-bottom: 10px;
+    background-color: #e7eaff;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
-.contactForm input[type='text'],
-.contactForm input[type='email'],
-.contactForm textarea {
-    display: block;
-    width: 100%;
-    padding: 0.5rem;
+.contact .submit {
+    width: auto;
+    background-color: #fed700;
+    padding: 10px 12px;
+    font-weight: bold;
+    font-size: 18px;
+    border-radius: 10px;
     font-size: 1rem;
-    line-height: 1.5;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    resize: vertical;
-    margin-bottom: 1rem;
+    margin-top: 3%
 }
 
-.contactForm button {
-    display: inline-block;
-    padding: 0.5rem 1rem;
-    font-size: 1rem;
-    font-weight: bold;
+.contact .submit:hover {
+    transform: scale(1.1);
+    cursor: pointer;
     background-color: #007bff;
+}
+
+#msg {
     color: #fff;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
+    font-size: 20px;
+    margin-top: -8px;
+    display: block;
 }
 
-.contactForm button:hover {
-    background-color: #0056b3;
+.link {
+    height: 70px;
+    width: 70px;
+    background-color: #f4f4f9;
+    border-radius: 35px;
+    text-align: center !important;
+    margin: 7px;
+    line-height: 80px;
+    padding-left: 5px;
+    padding-top: 3px;
+}
+
+.link i {
+    transition: all 0.3s linear;
+}
+
+.link:hover i {
+    transform: scale(1.5);
+}
+
+.youtube:hover .fab.fa-youtube {
+    color: red !important;
+}
+
+.linkedin:hover .fab.fa-linkedin {
+    color: rgb(47, 47, 228) !important;
+}
+
+.instagram:hover .fab.fa-instagram {
+    color: #e11d74 !important;
+}
+
+.github:hover .fab.fa-github {
+    color: black !important;
+}
+
+.mail:hover .fas.fa-envelope {
+    color: #B23121 !important;
+}
+
+
+/* Media Queries for Responsive Design */
+@media (max-width: 768px) {
+    .contact-content {
+        flex-direction: column;
+    }
+
+    .col {
+        flex: 1 1 100%;
+    }
 }
 
 

diff --git a/home.html b/home.html
@@ -292,24 +292,41 @@ <h2 class="section-heading" data-aos="fade-up">Why CSEdge Internship?</h2>
         </table>
     </section>
     <!--Contact Section-->
-    <section id="contact">
-        <h2 class="section-heading" data-aos="fade-up">Contact Us</h2>
-        <p class="section-content" data-aos="fade-up">For more information or inquiries, please contact us:</p>
-        <p class="section-content" data-aos="fade-up">Email: [email protected]</p>
-
-        <div class="contact-icons" data-aos="fade-up">
-            <a href="mailto:[email protected]" target="_blank"><i class="fas fa-envelope fa-2x"
-                    style="color: #0085ff;"></i></a>
-            <a href="https://www.linkedin.com/company/csedge/" target="_blank"><i class="fab fa-linkedin fa-2x"
-                    style="color: #0085ff;"></i></a>
-            <a href="https://github.com/CSEdgeOfficial" target="_blank"><i class="fab fa-github fa-2x"
-                    style="color: #0085ff;"></i></a>
-            <a href="https://www.instagram.com/csedgeofficial" target="_blank"><i class="fab fa-instagram fa-2x"
-                    style="color: #0085ff;"></i></a>
-            <a href="https://youtube.com/@CSEdgeOfficial" target="_blank"><i class="fab fa-youtube fa-2x"
-                    style="color: #0085ff;"></i></a>
+<!-- Contact Section -->
+<section id="contact">
+    <h2 class="section-heading" data-aos="fade-up">Contact Us</h2>
+    <p class="section-content" data-aos="fade-up">For more information or inquiries, please contact us:</p>
+    <p class="section-content" data-aos="fade-up">Email: [email protected]</p>
+
+    <div class="contact-icons" data-aos="fade-up">
+        <a class="link mail" href="mailto:[email protected]" target="_blank"><i
+                class="clshover fas fa-envelope fa-2x" style="color: #0085ff;"></i></a>
+        <a class="link linkedin" href="https://www.linkedin.com/company/csedge/" target="_blank"><i
+                class="clshover fab fa-linkedin fa-2x" style="color: #0085ff;"></i></a>
+        <a class="link github" href="https://github.com/CSEdgeOfficial" target="_blank"><i
+                class="clshover fab fa-github fa-2x" style="color: #0085ff;"></i></a>
+        <a class="link instagram" href="https://www.instagram.com/csedgeofficial" target="_blank"><i
+                class="clshover fab fa-instagram fa-2x" style="color: #0085ff;"></i></a>
+        <a class="link youtube" href="https://youtube.com/@CSEdgeOfficial" target="_blank"><i
+                class="clshover fab fa-youtube fa-2x" style="color: #0085ff;"></i></a>
+    </div>
+
+    <div class="contact-content">
+        <div class="col col-4 contact-image" data-aos="fade-up">
+            <img src="./new/web-developer.251x256.png" alt="Contact Us">
         </div>
-    </section>
+        <div class="col col-8 contact">
+            <form name="submitToGoogleSheet">
+                <input type="text" name="NAME" placeholder="Name" required>
+                <input type="email" name="EMAIL" placeholder="Email" required>
+                <input type="text" name="SUBJECT" placeholder="Subject">
+                <textarea name="MESSAGE" placeholder="Message"></textarea>
+                <input type="submit" value="Send Message" class="submit">
+            </form>
+            <span id="msg"></span>
+        </div>
+    </div>
+</section>
     <!--FAQ Section-->
     <section id="faq" class="faq">
         <h1 class="section-heading" data-aos="fade-up">FAQ</h1>

diff --git a/new/web-developer.251x256.png b/new/web-developer.251x256.png