faq.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link
      rel="icon"
      href="DALL·E 2024-08-28 12.19.31 - A clean and moderately detailed logo for a Sanskrit education website. T.webp"
    />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FAQ</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="animations.css">
    <link rel="stylesheet" href="scontentcss.css">
    <link rel="stylesheet" href="footercss.css">
    <link rel="stylesheet" href="counting.css">
    <link rel="stylesheet" href="faq.css">
    <link rel="stylesheet" href="Scroll.css">
    <!-- Font Awesome CDN link --> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <!-- font awesome kit link -->
    <script src="https://kit.fontawesome.com/422e4af3c2.js" crossorigin="anonymous"></script>
</head>
<body>
    <!-- Scroll -->
    <div id="scrollButton" class="hidden">
        <div class="outer-circle">
            <div class="inner-circle">
                <div class="arrow">↑</div>
            </div>
        </div>
    </div>
    <header>
        <nav>
            <!-- Wrap the logo text in an anchor tag -->
            <a href="#hero" class="logo">मातृबोधः</a>
            <ul class="nav-links">
                <li><a href="index.html">Home</a></li>
                <li><a href="index.html#wisdom">About</a></li>
                <li class="dropdown">
                    <a href="#">Content</a>
                    <ul class="dropdown-content">
                        <li><a href="countingpage.html">Counting</a></li>
                        <li><a href="#">Days</a></li>
                        <li><a href="activities.html">Activities</a></li>
                        <li><a href="Vedic_Facts.html">VedicFacts</a></li>
                    </ul>
                </li>
                <li><a href="login.html">Login</a></li>
                <li><a href="faq.html">FAQ</a></li>
                <li><a href="contact.html" >Contact</a></li>

            </ul>
            <div class="toggle-menu">☰</div>
        </nav>
    </header>
  <div class="faq-container">
    <h1>Frequently Asked Questions</h1>
    <div class="faq">
      <h3 class="faq-question">What is the purpose of this website?</h3>
      <div class="faq-answer">
        <p>Our website aims to educate children about India's rich cultural heritage, including its history, traditions, art, literature, and diverse cultures in an engaging and interactive way.</p>
      </div>
    </div>
    <div class="faq">
      <h3 class="faq-question">What age group is this website suitable for?</h3>
      <div class="faq-answer">
        <p>The content on this website is designed for children aged 6 to 14 years. However, anyone interested in learning about India's cultural heritage can explore the site.</p>
      </div>
    </div>
    <div class="faq">
      <h3 class="faq-question">What kind of resources can I find on this website?</h3>
      <div class="faq-answer">
        <p>You can find a variety of resources, including interactive lessons, fun activities, educational videos, and stories about historical events and famous personalities from India.</p>
      </div>
    </div>
    <div class="faq">
      <h3 class="faq-question">How can I contact support if I have any questions or issues?</h3>
      <div class="faq-answer">
        <p>If you have any questions or issues, you can contact our support team through the "Contact us" page. Fill out the form, and our team will get back to you as soon as possible.</p>
      </div>
    </div>
    <!-- Add more FAQs as needed -->
  </div>


    <script>
        
// script.js
// script.js
document.addEventListener('DOMContentLoaded', () => {
    const faqQuestions = document.querySelectorAll('.faq-question');

    faqQuestions.forEach(question => {
        question.addEventListener('click', () => {
            const answer = question.nextElementSibling;

            if (answer.style.maxHeight) {
                answer.style.maxHeight = null;
                answer.style.padding = "0 10px";
            } else {
                answer.style.maxHeight = answer.scrollHeight + "px";
                answer.style.padding = "10px";
            }
        });
    });
});


    </script>

    <!-- Updated Footer Section --> 
<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="https://github.com/Anjaliavv51/Matrubodhah"
          target="_blank"
          aria-label="Facebook"
          ><i class="fab fa-facebook"></i
        ></a>
        <a
          href="https://github.com/Anjaliavv51/Matrubodhah"
          target="_blank"
          aria-label="Twitter"
          ><i
          class="fa-brands fa-square-x-twitter"></i></a>
        <a
          href="https://github.com/Anjaliavv51/Matrubodhah"
          target="_blank"
          aria-label="Instagram"
          ><i class="fab fa-instagram"></i
        ></a>
        <a
          href="https://github.com/Anjaliavv51/Matrubodhah"
          target="_blank"
          aria-label="YouTube"
          ><i class="fab fa-youtube"></i
        ></a>
        <a
          href="https://github.com/Anjaliavv51/Matrubodhah"
          target="_blank"
          aria-label="Linkedin"
          ><i class="fa-brands fa-linkedin-in"></i
        ></a>
      </div>

      <!-- GitHub Star Button -->
      <div class="github-star">
        <a href="https://github.com/Anjaliavv51/Matrubodhah" target="_blank">
          <i class="fab fa-github"></i> Star on GitHub
        </a>
      </div>
    </div>

    <div class="footer-section">
      <h4>Quick Links <div class="underline"><span></span></div></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>
        <li><a href="#hero">Contact</a></li>
      </ul>
    </div>

    <div class="footer-section">
      <h4>Learning Paths <div class="underline"><span></span></div></h4>
      <ul>
        <li><a href="countingpage.html">Counting</a></li>
        <li><a href="#hero">Days</a></li>
        <li><a href="#hero">Activities</a></li>
      </ul>
    </div>

    <div class="footer-section">
      <h4>Newsletter <div class="underline"><span></span></div></h4>
      <form>
        <i class="fas fa-envelope"></i>
        <input type="email" placeholder="Enter your email id" required>
        <button type="submit"><i class="fas fa-arrow-right"></i></button>
      </form>
      <br>
      <h4>Contact Us <div class="underline"><span></span></div></h4>
      <ul class="contact-info">
        <li>
          <i class="fas fa-envelope"></i
          ><a href="mailto:info@matrubodhah.edu">info@matrubodhah.edu</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 <span class="heart">❤️</span> by
      <a href="https://github.com/Anjaliavv51/Matrubodhah" target="_blank"
        >@Sakthi</a
      >
    </p>
  </div>
</footer>


    <script src="Scroll.js"></script>
    <script src="scrollscript.js"></script>
    <script src="audio.js"></script>
    <script src="index.js"></script>
</body>
</html>