From 72c6e715fc7f3795884f103168316a0cd0552fd2 Mon Sep 17 00:00:00 2001
From: Akshit Bansal <155195875+akshitbansal2005@users.noreply.github.com>
Date: Thu, 17 Oct 2024 13:06:24 +0530
Subject: [PATCH] Update contact.html
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. **HTML Structure:**
   - The document follows a proper HTML structure with essential meta tags, external CSS/JS links, and well-organized content sections, such as header, navigation, contact form, contact information, and footer.

2. **Preloader:**
   - A preloader animation is included to enhance the user experience during page load. This preloader uses a `div` structure with a series of animated `box` elements to give a loading effect. A separate `preloader.js` script handles its behavior.

3. **Navigation Bar:**
   - The navigation bar (`<nav>`) contains a list of tabs with links to different pages (e.g., Home, About, Features, Products, and Contact Us).
   - A dropdown is used for product categories (Men and Women).
   - Additional icons for a shopping cart, user profile, and search are included for better utility.

4. **Contact Form:**
   - The form includes fields for the user's name, email, subject, and message. It includes basic HTML5 validation using the `required` attribute to ensure all fields are filled before form submission.
   - There is also a `validateForm` JavaScript function to provide additional client-side form validation and alert if any field is left empty.
   - The form uses `POST` as the method but lacks a defined action URL (i.e., `action="/submit"` is a placeholder).

5. **Contact Information:**
   - This section includes the company’s addresses, phone numbers, and emails, divided into categories such as the Head Office, Branch Office, and Development Center.
   - Icons from FontAwesome are used to display location, phone, and email information.

6. **Map Integration:**
   - A Google Maps iframe is embedded to visually show the location. However, the source (`src="https://www.google.com/maps/embed?pb=..."`) is incomplete and should be replaced with an actual map embed URL.

7. **Footer Section:**
   - The footer includes three sections: Contact Us, Quick Links, and a Newsletter Subscription form.
   - Contact information is repeated for accessibility, and social media links (LinkedIn, GitHub, Twitter/X, Instagram) are provided.
   - A newsletter subscription input allows users to enter their email to receive updates. It includes a button for submitting their email.

8. **Accessibility and SEO:**
   - Icons and interactive elements such as buttons and input fields have been enhanced with `aria-label` attributes, which improves accessibility for screen readers.
   - The meta tags and structured content improve SEO.

9. **Responsive Design:**
   - The page is mobile-friendly, thanks to the use of viewport meta tags (`<meta name="viewport" content="width=device-width, initial-scale=1.0">`) and a CSS grid layout for responsiveness.

10. **External Resources:**
   - The page relies on external CSS for FontAwesome icons, Google Fonts, AOS (Animate on Scroll library), and a custom `style.css` file.
   - No significant errors related to external CSS loading were identified, except for a redundant inclusion of the same `style.css`.
---
 contact.html | 157 +++++++++++++++++++++++----------------------------
 1 file changed, 72 insertions(+), 85 deletions(-)

diff --git a/contact.html b/contact.html
index 8ecb8e1..52d9da2 100644
--- a/contact.html
+++ b/contact.html
@@ -9,74 +9,52 @@
     <link rel="stylesheet" href="style.css"> <!-- Link to your common CSS file -->
     <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <link rel="stylesheet" href="./style.css">
-    <link rel="stylesheet" herf="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
 </head>
 
 <body>
-       <!-- preloader -->
-  <div id="preloader">
-    <div class="wrapper">
-        <div class="box-wrap">
-            <div class="box one"></div>
-            <div class="box two"></div>
-            <div class="box three"></div>
-            <div class="box four"></div>
-            <div class="box five"></div>
-            <div class="box six"></div>
+    <!-- Preloader -->
+    <div id="preloader">
+        <div class="wrapper">
+            <div class="box-wrap">
+                <div class="box one"></div>
+                <div class="box two"></div>
+                <div class="box three"></div>
+                <div class="box four"></div>
+                <div class="box five"></div>
+                <div class="box six"></div>
+            </div>
         </div>
     </div>
-</div>
+
     <header class="header" id="header">
-          <div class="logo">
-            <a href="/"> <img src="images/logo.png" alt="Logo" srcset=""> </a>
-            <i class="fa-solid fa-bars menu" id="menu"></i>
+        <div class="logo">
+            <a href="/"> 
+                <img src="images/logo.png" alt="TrendTrove Logo"> 
+            </a>
+            <i class="fa-solid fa-bars menu" id="menu" aria-label="Toggle Menu"></i>
         </div>
 
-        
-        <nav class="bg-neutral-100 py-20">
-            <div class="tabs-container">
-                <ul id="tabs" class="tabs">
-                    <li class="tab">
-                        <a href="index.html">Home</a>
-                        <div class="cursor"></div>
-                    </li>
-                    <li class="tab">
-                        <a href="about.html">About</a>
-                        <div class="cursor"></div>
-                    </li>
-                    <li class="tab">
-                        <a href="features.html">Features</a>
-                        <div class="cursor"></div>
-                    </li>
-                    <li class="dropdown tab">
-                        <a class="dropdown-parent">Products</a>
-                        <div class="cursor"></div>
-                        <ul class="dropdown-content ">
-                            <li><a href="mens.html" class="priye">Men</a>
-                            </li>
-                            <li><a href="womens.html">Women</a></li>
-                        </ul>
-                    </li>
-                    <li class="tab" style="margin-left: 15px;">
-                        <a href="contact.html">Contact Us</a>
-                        <div class="cursor"></div>
-                    </li>
-                </ul>
-            </div>
+        <nav>
+            <ul id="tabs" class="tabs">
+                <li class="tab"><a href="index.html">Home</a></li>
+                <li class="tab"><a href="about.html">About</a></li>
+                <li class="tab"><a href="features.html">Features</a></li>
+                <li class="dropdown tab">
+                    <a class="dropdown-parent">Products</a>
+                    <ul class="dropdown-content">
+                        <li><a href="mens.html">Men</a></li>
+                        <li><a href="womens.html">Women</a></li>
+                    </ul>
+                </li>
+                <li class="tab"><a href="contact.html">Contact Us</a></li>
+            </ul>
         </nav>
 
         <nav class="utils">
             <ul class="nav-links">
-                <li class="nav-link">
-                    <i class="fa-solid fa-cart-shopping"></i>
-                </li>
-                <li class="nav-link">
-                    <i class="fa-solid fa-user"></i>
-                </li>
-                <li class="nav-link">
-                    <i class="fa-solid fa-magnifying-glass"></i>
-                </li>
+                <li class="nav-link"><i class="fa-solid fa-cart-shopping" aria-label="Shopping Cart"></i></li>
+                <li class="nav-link"><i class="fa-solid fa-user" aria-label="User Profile"></i></li>
+                <li class="nav-link"><i class="fa-solid fa-magnifying-glass" aria-label="Search"></i></li>
             </ul>
         </nav>
     </header>
@@ -91,45 +69,49 @@ <h3>Send Us a Message</h3>
                 <p>Having any questions or feedback? We'd love to hear from you!<br>
                     Feel free to reach us using the form below.
                 </p>
-                <input type="text" placeholder="Your Name" required>
-                <input type="email" placeholder="Your Email" required>
-                <input type="text" placeholder="Subject" required>
-                <textarea placeholder="Message" required></textarea>
-                <button class="btn-submit">Send Message</button>
+                <form action="/submit" method="POST" onsubmit="return validateForm()">
+                    <input type="text" placeholder="Your Name" name="name" required>
+                    <input type="email" placeholder="Your Email" name="email" required>
+                    <input type="text" placeholder="Subject" name="subject" required>
+                    <textarea placeholder="Message" name="message" required></textarea>
+                    <button type="submit" class="btn-submit">Send Message</button>
+                </form>
             </div>
 
-        <div class="contact-map">
-            <iframe src="https://www.google.com/maps/embed?pb=..."></iframe>
-        </div>
+            <div class="contact-map">
+                <iframe src="https://www.google.com/maps/embed?pb=..." style="border:0;" allowfullscreen="" loading="lazy"></iframe>
+            </div>
         </div>
+
         <div class="contact-info-container">
             <div class="contact-info-box">
                 <i class="fas fa-map-marker-alt"></i>
                 <h3>Address</h3>
                 <ul>
-                    <li><span>Head Office: 123 TrendTrove Blvd, Fashion City, USA</span></li><br>
-                    <li><span>Branch Office:2nd Floor, Bandra West, Mumbai, Maharashtra 400050, India</span></li><br>
+                    <li><span>Head Office: 123 TrendTrove Blvd, Fashion City, USA</span></li>
+                    <li><span>Branch Office: 2nd Floor, Bandra West, Mumbai, Maharashtra 400050, India</span></li>
                     <li><span>Development Center: 789 E-Commerce Hub, Pune, MH 411001.</span></li>
                 </ul>
             </div>
+
             <div class="contact-info-box">
                 <i class="fas fa-phone"></i>
                 <h3>Call Us</h3>
                 <p>+1234567890<br>+91 9876543211<br>+91 9876543212</p>
             </div>
+
             <div class="contact-info-box">
                 <i class="fas fa-envelope"></i>
                 <h3>Email Us</h3>
                 <ul>
-                    <li><span>support@trendtrove.com</span></li><br>
-                    <li><span>trendtrove1004@gmail<br>.com</span></li>
+                    <li><span>support@trendtrove.com</span></li>
+                    <li><span>trendtrove1004@gmail.com</span></li> <!-- Fixed email formatting -->
                 </ul>
             </div>
         </div>
     </div>
 
     <footer class="footer">
-
         <div class="footer-section">
             <h1>Contact Us</h1>
             <ul class="footer-list">
@@ -138,18 +120,10 @@ <h1>Contact Us</h1>
                 <li><a href="tel:+91xxxxxxxx2020">+91 xxxxxx2020</a></li>
                 <li class="border-list"></li>
                 <li class="socials">
-                    <a href="https://www.linkedin.com/in/tejashri-taral-5006a82a0/" id="linkedin" target="_blank">
-                        <i class="fa-brands fa-linkedin"></i>
-                    </a>
-                    <a href="https://github.com/Tejashri-Taral" id="github"target="_blank">
-                        <i class="fa-brands fa-github"></i>
-                    </a>
-                    <a href="https://x.com/Tejashri_10?t=SWxALwKxy-nVrTcbYTFUcA&s=08" id="twitter"target="_blank">
-                        <i class="fa-brands fa-x-twitter"></i>
-                    </a>
-                    <a href="https://www.instagram.com/your_instagram" id="instagram"target="_blank">
-                        <i class="fa-brands fa-instagram"></i>
-                    </a>
+                    <a href="https://www.linkedin.com/in/tejashri-taral-5006a82a0/" target="_blank"><i class="fa-brands fa-linkedin"></i></a>
+                    <a href="https://github.com/Tejashri-Taral" target="_blank"><i class="fa-brands fa-github"></i></a>
+                    <a href="https://x.com/Tejashri_10?t=SWxALwKxy-nVrTcbYTFUcA&s=08" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
+                    <a href="https://www.instagram.com/your_instagram" target="_blank"><i class="fa-brands fa-instagram"></i></a>
                 </li>
             </ul>
         </div>
@@ -168,17 +142,30 @@ <h1>Quick Links</h1>
         <div class="footer-section">
             <h1>Subscribe to Newsletter</h1>
             <ul class="footer-list">
-                <li>Maxime quae inventore sunt odio perspiciatis vitae saepe officia dolorem.</li>
+                <li>Stay updated with our latest trends and offers.</li>
                 <li class="sub">
-                    <input type="text" placeholder="Enter your email">
+                    <input type="email" placeholder="Enter your email" aria-label="Email Address">
                     <button class="btn">Subscribe</button>
                 </li>
             </ul>
         </div>
     </footer>
-    <script src="preloader.js"></script>
 
-    
+    <script src="preloader.js"></script>
+    <script>
+        function validateForm() {
+            // Simple form validation before submission
+            const name = document.querySelector('input[name="name"]').value;
+            const email = document.querySelector('input[name="email"]').value;
+            const subject = document.querySelector('input[name="subject"]').value;
+            const message = document.querySelector('textarea[name="message"]').value;
+            if (!name || !email || !subject || !message) {
+                alert("Please fill all the fields.");
+                return false;
+            }
+            return true;
+        }
+    </script>
 </body>
 
 </html>