Anjaliavv51 · BVPKARTHIKEYA · Jan 11, 2025 · Jan 11, 2025 · Jan 11, 2025 · Jan 11, 2025
diff --git a/contact.html b/contact.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <title>Contact Us</title>
+</head>
+<body>
+    <div class="container">
+        <h2>Contact Us</h2>
+        <form id="contactForm">
+            <div class="input-group">
+                <i class="fas fa-user"></i>
+                <input type="text" id="name" placeholder="Your Name" required>
+            </div>
+            <div class="input-group">
+                <i class="fas fa-envelope"></i>
+                <input type="email" id="email" placeholder="Your Email" required>
+            </div>
+            <div class="input-group">
+                <i class="fas fa-phone"></i>
+                <input type="tel" id="phone" placeholder="Your Phone Number" required>
+            </div>
+            <button type="submit">Submit</button>
+        </form>
+        <div id="responseMessage"></div>
+    </div>
+
+    <footer class="main-footer">
+        <div class="footer-content">
+            <div class="footer-section">
+                <h3>मातृबोधः</h3>
+                <p>Educating children through India's timeless wisdom and cultural heritage.</p>
+                <div class="social-links">
+                    <a href="#" target="_blank" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
+                    <a href="#" target="_blank" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
+                    <a href="#" target="_blank" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
+                    <a href="#" target="_blank" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
+                    <a href="#" target="_blank" aria-label="Linkedin"><i class="fab fa-linkedin-in"></i></a>
+                </div>
+            </div>
+
+            <div class="footer-section">
+                <h4>Quick Links</h4>
+                <ul>
+                    <li><a href="#hero">Home</a></li>
+                    <li><a href="#wisdom">About Us</a></li>
+                    <li><a href="#content">Our Courses</a></li>
+                    <!-- need to add contact page link -->
+                    <li><a href="contact.html">Contact</a></li> <!-- Changed to #contact -->
+                </ul>
+            </div>
+
+            <div class="footer-section">
+                <h4>Learning Paths</h4>
+                <ul>
+                    <!-- need to add respective page link -->
+                    <li><a href="#">Counting</a></li> <!-- Updated link -->
+                    <li><a href="#">Days</a></li> <!-- Updated link -->
+                    <li><a href="#">Activities</a></li> <!-- Updated link -->
+                </ul>
+            </div>
+
+            <div class="footer-section">
+                <h4>Contact Us</h4>
+                <ul class="contact-info">
+                    <li><i class="fas fa-envelope"></i><a href="mailto:[email protected]">[email protected]</a></li>
+                    <li><i class="fas fa-map-marker-alt"></i><span>India</span></li>
+                </ul>
+            </div>
+        </div>
+
+        <div class="footer-bottom">
+            <p>&copy; 2024 मातृबोधः. Made with ❤️ by 
+               <a href="#" target="_blank">@Sakthi</a>.
+            </p>
+        </div>
+    </footer>
+
+    <!-- External Scripts -->
+    <script src="//code.tidio.co/5w3m6cpl10rvqjkkmhv1nx8p0fqloyq6.js" async></script>
+    <script src="scrollscript.js"></script>
+    <script src="audio.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
+    <script src="index.js"></script>
+    <script src="script.js"></script>
+
+</body>
+</html>
+
+
diff --git a/script.js b/script.js
@@ -0,0 +1,21 @@
+document.getElementById('contactForm').addEventListener('submit', function(event) {
+    event.preventDefault(); 
+
+    const name = document.getElementById('name').value.trim();
+    const email = document.getElementById('email').value.trim();
+    const phone = document.getElementById('phone').value.trim();
+
+
+    if (name === '' || email === '' || phone === '') {
+        alert('Please fill in all fields.');
+        return;
+    }
+
+
+    const responseMessage = document.getElementById('responseMessage');
+
+    responseMessage.innerHTML = `<p>Thank you, ${name}! Your message has been sent.</p>`;
+
+
+    document.getElementById('contactForm').reset();
+});
diff --git a/styles.css b/styles.css
@@ -579,3 +579,149 @@ nav {
     margin-right: 3%;
   }
 }
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f4f4f4;
+  margin: 0;
+  padding: 0;
+}
+
+.container {
+  max-width: 400px;
+  margin: 50px auto;
+  padding: 20px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+h2 {
+  text-align: center;
+}
+
+.input-group {
+  position: relative;
+  margin-bottom: 20px;
+}
+
+.input-group i {
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  color: #aaa;
+}
+
+.input-group input {
+  width: 100%;
+  padding: 10px 10px 10px 40px; /* Add padding to the left for the icon */
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.input-group input:focus {
+  border-color: #007BFF; /* Change border color on focus */
+}
+
+button {
+  width: 100%;
+  padding: 10px;
+  background-color: #007BFF; /* Bootstrap primary color */
+  color: white;
+  border: none;
+  border-radius: 4px;
+}
+
+button:hover {
+  background-color: #0056b3; /* Darker shade on hover */
+}
+
+#responseMessage {
+  margin-top: 20px;
+  text-align: center;
+}
+body {
+  font-family: Arial, sans-serif;
+}
+
+.container {
+  padding: 20px;
+}
+
+.main-footer {
+  background-color: white; /* Dark background for footer */
+  color: white; /* White text */
+  padding: 20px 0;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+.container {
+  padding: 20px;
+}
+
+.main-footer {
+  background-color: white; /* White background for the footer */
+  border-top: 5px solid orange; /* Orange border at the top */
+  color: black; /* Black text color */
+  padding: 20px 0;
+}
+
+.footer-content {
+  display: flex; /* Flexbox for layout */
+  justify-content: space-between; /* Space between sections */
+  max-width: 1200px; /* Max width for footer */
+  margin: 0 auto; /* Center align */
+}
+
+.footer-section {
+  flex: 1; /* Equal space for each section */
+  padding: 20px;
+}
+
+.footer-section h4,
+.footer-section h3 {
+  margin-bottom: 15px;
+}
+
+.footer-section ul {
+  list-style-type: none; /* Remove bullet points */
+  padding: 0;
+}
+
+.footer-section ul li {
+  margin-bottom: 10px; /* Space between list items */
+}
+
+.footer-section a {
+  color: black; /* Black links */
+  text-decoration: none; /* Remove underline */
+}
+
+.footer-section a:hover {
+  text-decoration: underline; /* Underline on hover */
+}
+
+.social-links a {
+  margin-right: 15px; /* Space between social icons */
+  color: black; /* Black color for icons */
+}
+
+.footer-bottom {
+  text-align: center; /* Center align bottom text */
+  margin-top: 20px;
+}
+
+.footer-bottom p {
+  margin: 0; /* Remove default margin */
+}
+
+
+