activities.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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"
    />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <link rel="stylesheet" href="activities.css">
  <link rel="stylesheet" href="footercss.css">
  <link rel="stylesheet" href="Scroll.css">
  <!-- font awesome kit link -->
  <script src="https://kit.fontawesome.com/422e4af3c2.js" crossorigin="anonymous"></script>
  <title>Spiritual Activities</title>
</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="pages/about-page.html">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</a></li>
                      <li><a href="Vedic_Facts.html">VedicFacts</a></li>
                      <li><a href="feedback.html">Feedback</a></li>
                  </ul>
              </li>
              <li><a href="login.html">Login</a></li>
              <li><a href="faq.html">FAQ</a></li>
              <li><a href="#" >Contact</a></li>
          </ul>
      </nav>
  
      </header>
  <div class="container">
    <div class="activity-container">
        <div class="image-container">
          <img src="https://lh3.googleusercontent.com/dsQZZfwuwRRc6o0O8qT6zLlI8iGdyhF_ZnZyEIegi13LLTLkADJrG60d6c60TxdHT1PVwDBVb3eVHipBR0Vi9bskvVI_4WhWKWmqxmU00VIi-oUELZCw3MKAPGLuMRcPwukCOwYI" alt="Meditation">
        </div>
        <div class="content-container">
          <h1 class="title">Meditation</h1>
          <p class="description">
            Meditation is a practice in which an individual uses a technique to train attention and awareness and detach from reflexive, "discursive thinking," achieving a mentally clear and emotionally calm and stable state, while not judging the meditation process itself.  
          </p>
          <p class="upcoming"><strong>Upcoming Yoga Session</strong><br>Sun, 19 Jan at Pune</p>
          <button class="know-more">
            <span class="shadow"></span>
            <span class="edge"></span>
            <span class="front text"> Know More </span>
          </button>
        </div>
      </div>
    <div class="activity-container">
        <div class="content-container">
          <h1 class="title">Connect with nature</h1>
          <p class="description">
            Nature is a healer for conditions like depression, anxiety or stress. Its beauty and freshness can help you feel awe and correctness. You can spend your time outdoors and practice yoga, walking, running, meditation, and hiking to get inner peace. 
          </p>
          <p class="upcoming"><strong>Upcoming Tree Plantation Program</strong><br>Sat, 18 Jan at Mumbai</p>
          <button class="know-more">
            <span class="shadow"></span>
            <span class="edge"></span>
            <span class="front text"> Know More </span>
          </button>
        </div>
        <div class="image-container">
            <img src="https://media.licdn.com/dms/image/v2/D4D12AQFT_JibfmEk6Q/article-cover_image-shrink_720_1280/article-cover_image-shrink_720_1280/0/1708732759897?e=2147483647&v=beta&t=TylC6cSGaZ8ZEgFL2q3LAOCYYoMknDMDKpWlx_-5C6E" alt="Connect with nature">
          </div>
      </div>
    <div class="activity-container">
        <div class="image-container">
          <img src="https://gurukul.org/wp-content/uploads/2023/02/From-my-hands-to-his-heart.png" alt="Connect with nature">
        </div>
        <div class="content-container">
          <h1 class="title">Prayer</h1>
          <p class="description">
            Prayer is one of the main ways we practice our spirituality. It is an effort to communicate with the Creator, a Higher Power, and God, or to an object of worship
          </p>
          <p class="upcoming"><strong>Upcoming Bhajan Program </strong><br>Mon, 20 Jan at Kolhapur</p>
          <button class="know-more">
            <span class="shadow"></span>
            <span class="edge"></span>
            <span class="front text"> Know More </span>
          </button>
        </div>
      </div>
    <div class="activity-container">
        <div class="content-container">
            <h1 class="title">Reading Hindu scriptures</h1>
            <p class="description">
                The Bhagavad Gita, often referred to as the Gita, is a Hindu scripture, dated to the second or first century BCE, which forms part of the epic Mahabharata. It is a synthesis of various strands of Indian religious thought, including the Vedic concept of dharma; samkhya-based yoga and jnana; and bhakti.
            </p>
            <p class="upcoming"><strong>Upcoming Bhagavad Gita Session  </strong><br>Thu, 23 Jan at Pune</p>
            <button class="know-more">
                <span class="shadow"></span>
                <span class="edge"></span>
                <span class="front text"> Know More
                </span>
              </button>
        </div>
        <div class="image-container">
          <img src="https://servdharm.com/cdn/shop/products/SD004_6_800x.jpg?v=1676365307" alt="Connect with nature">
        </div>
      </div>
  </div>
  <!-- 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>
      </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>
          <!-- need to add contact page link -->
          <li><a href="#hero">Contact</a></li>
        </ul>
      </div>

      <div class="footer-section">
        <h4>Learning Paths <div class="underline"><span></span></div></h4>
        <ul>
          <!-- need to add respective page link -->
          <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>
</body>
</html>