style: Updating the second page

index.html

@@ -256,6 +256,9 @@ <h3>Beyond Numbers</h3>
                   <p class="card-text">
                     Beyond Numbers takes children on an enchanting journey through the cultural significance of numbers in Indian traditions, myths, and festivals. From the Trimurti (3 Gods) and Panchabhutas (5 Elements) to the Dashavatara (10 Avatars of Vishnu), each number holds a deeper meaning. By blending math with culture, it inspires curiosity and helps children discover the profound wisdom hidden in numbers.
                   </p>
+                  <button class="main_content" onclick="window.location.href='pages/beyond_num.html'"  style="display: block; /* Makes it a block-level element */
+                    margin: 10px auto; /* Auto centers horizontally */
+                    text-align: center;">View More Content</button>
                   <button class="read-more">Read More</button>
                 </div>
                 <!-- Roadmap Card 2 -->
@@ -265,6 +268,9 @@ <h3>Cultural Colors</h3>
                   <p class="card-text">
                     Colors in Indian culture are rich with symbolism, each carrying deep meanings. Red represents strength and passion, as seen in Goddess Durga, while yellow symbolizes knowledge, celebrated in Goddess Saraswati. Blue embodies divinity and calmness, reflected in Lord Krishna. Learn how these colors connect to spiritual and cultural values, bringing vibrancy to Indian traditions.
                   </p>
+                  <button class="main_content" onclick="window.location.href='pages/cultural_colors.html'"  style="display: block; /* Makes it a block-level element */
+                    margin: 10px auto; /* Auto centers horizontally */
+                    text-align: center;">View More Content</button>
                   <button class="read-more">Read More</button>
                 </div>
                 <!-- Roadmap Card 3 -->
@@ -274,6 +280,9 @@ <h3>Heritage Map</h3>
                   <p class="card-text">
                     Embark on a virtual journey across India's diverse regions and explore its rich heritage. From ancient temples to monumental landmarks, the Heritage Map offers an interactive way for children to discover historical sites and learn about their cultural and spiritual significance. Dive into the fascinating stories behind each iconic place and understand India’s glorious past.
                   </p>
+                  <button class="main_content" onclick="window.location.href='pages/heritage_map.html'"  style="display: block; /* Makes it a block-level element */
+                    margin: 10px auto; /* Auto centers horizontally */
+                    text-align: center;">View More Content</button>
                   <button class="read-more">Read More</button>
                 </div>
               </div>

pages/beyond_num.css

@@ -0,0 +1,166 @@
+*{
+    text-align: center;
+    background-color: #ffffff;
+    font-family: 'poppins', sans-serif;
+    color:rgb(218, 128, 76);;
+}
+nav{
+    position: fixed;
+    width: 100%;
+    background-color: white;
+    top: 0;
+    /* box-shadow: 0px 0px 1px black; */
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 5px;
+    margin-bottom: 10px;
+    padding: 10px 30px;
+    align-items: center;
+
+}
+nav a{
+    text-decoration: none;
+    color:black;
+}
+.logo {
+    font-size: 30px;
+    font-weight: bold;
+    color: black;
+    flex: 1;
+    text-align: left;
+    text-decoration: none;
+    cursor: pointer;
+    transition: color 0.3s ease;
+  }
+
+  .logo:hover {
+    color: rgb(106, 97, 97);
+  }
+
+  .nav-links {
+    list-style: none;
+    display: flex;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    flex: 1;
+    justify-content: flex-end;
+    margin-right: 7px;
+    font-size: 15px;
+  }
+
+  .nav-links li {
+    margin: 0 20px;
+    position: relative;
+  }
+
+  .nav-links a {
+    text-decoration: none;
+    color: black;
+    font-weight: bolder;
+    position: relative;
+    transition: color 0.3s ease;
+  }
+
+  .nav-links a::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: -3px;
+    width: 0;
+    height: 2px;
+    background-color: #e5a186;
+    transition: width 0.3s ease;
+  }
+
+  .nav-links a:hover {
+    color: #e5a186;
+  }
+
+  .nav-links a:hover::after {
+    width: 100%;
+  }
+
+  .nav-links .dropdown {
+    position: relative;
+  }
+
+  .nav-links .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: white;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
+    z-index: 1;
+    list-style: none;
+    padding: 0;
+  }
+
+  .nav-links .dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+  }
+
+  .nav-links .dropdown:hover .dropdown-content {
+    display: block;
+  }
+
+  .nav-links .dropdown-content a:hover {
+    background-color: #f1f1f1;
+  }
+
+  .menu-toggle {
+    display: none;
+}
+.data1{
+    margin-top: 40px;
+    padding: 40px;
+    color: black;
+}
+.data{
+    margin-top: 20px;
+    color: black;
+}
+.data p,.data1 p{
+  animation: fade-in 6s ease;
+  color: black;
+}
+h2{
+    text-decoration: wavy;
+    /* text-decoration: underline; */
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    background-color: #e5a186;
+    color: white;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-right: 2px;
+    padding-left: 2px;
+    border-radius: 10px;
+    animation: fade-in 2s ease;
+}
+.data1 h2{
+  background-color: #e5a186;
+  color: white;
+  padding-right: 2px;
+  padding-left: 2px;
+
+}
+img{
+    border: 2px solid black;
+    border-radius: 15px;
+    box-shadow: 0px 2px 10px rgb(231, 125, 59);
+}
+
+@keyframes fade-in{
+    from{
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to{
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

pages/beyond_num.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="beyond_num.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <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"
+    />
+    <style>
+        /* Scroll to Top Button */
+        #scrollToTopBtn {
+            display: none;
+            position: fixed;
+            bottom: 132px;
+            right: 30px;
+            height: 55px;
+            width: 55px;
+            background-color: rgb(218, 128, 76);
+            color: white;
+            border: none;
+            border-radius: 50%;
+            padding: 10px;
+            cursor: pointer;
+            font-size: 15px;
+        }
+        #scrollToTopBtn:hover {
+            background-color: rgb(218, 128, 76);
+        }
+    </style>
+
+</head>
+<body>
+    <nav class="appbar">
+        <!-- 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="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.html">Activities</a></li>
+                    <li><a href="../feedback.html">Feedback</a></li>
+                </ul>
+            </li>
+            <li id="loginlist" ><a href="../login.html">Login</a></li>
+            <li id="profilelist"><a  href="../profile.html">Profile</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>
+    <br>
+    <div class="data1">
+        <H1 style="text-decoration: underline;">Beyond Numbers: Unraveling the Magic of Ancient Times</H1>
+        <img src="../images/numerals-cover.jpg" title="Beyond Numbers" alt="Beyond Numbers" width="500" border-radius="10px">
+        <p>Numbers are more than just mathematical symbols—they carry deep cultural, spiritual, and philosophical significance. In ancient Indian traditions, numbers are woven into myths, festivals, and cosmic principles, revealing profound wisdom. Beyond Numbers takes children on a fascinating journey through these connections, helping them discover the magic hidden within numerical patterns. By blending mathematics with cultural heritage, this approach not only nurtures curiosity but also instills a deeper appreciation for the timeless knowledge embedded in numbers.
+
+            <h2>The Cultural Significance of Numbers</h2>
+
+            Each number holds unique meaning in Indian philosophy and traditions. For instance, the number 3 represents the Trimurti, the three supreme deities—Brahma (the Creator), Vishnu (the Preserver), and Shiva (the Destroyer). This divine trinity signifies the cosmic cycle of creation, preservation, and destruction, demonstrating the balance that governs the universe. Similarly, the concept of Panchabhutas—the five great elements—earth, water, fire, air, and space—forms the foundation of life, emphasizing harmony between nature and existence.
+
+
+            <h2>Numbers in Myths and Epics</h2>
+
+            Indian epics like the Ramayana and Mahabharata are rich with numerical symbolism. The number 7 appears frequently, such as the Sapta Rishis (Seven Sages) who guide human wisdom and the Saptapadi (Seven Steps) in Hindu weddings, representing the vows that bind two souls together. The Dashavatara, or 10 avatars of Vishnu, symbolizes different stages of evolution, from the aquatic form of Matsya (fish) to the enlightened Krishna and Kalki. These avatars illustrate the cycle of change and adaptation, linking mythology to philosophical thought.
+
+
+            <h2>Numbers in Festivals and Traditions</h2>
+
+            Festivals in India also celebrate numerical themes. The 9 nights of Navaratri honor the nine forms of Goddess Durga, each representing different aspects of strength and devotion. Similarly, the 108 beads of a prayer mala hold spiritual significance, as the number 108 is considered sacred in Vedic mathematics and cosmology. It is believed to represent the wholeness of existence, with connections to the Sun, Moon, and Earth’s celestial rhythms.
+
+
+            <h2>Teaching Math Through Culture</h2>
+
+            By exploring numbers in this way, children develop an intuitive understanding of mathematical concepts while also appreciating their cultural roots. Learning about zero, for example, reveals how ancient Indian mathematicians revolutionized the number system, shaping the way we understand mathematics today. The Fibonacci sequence, which appears in nature, also finds mention in ancient Indian architecture and temple designs, demonstrating the harmony between numbers and the universe.
+
+
+            <h2>Inspiring Curiosity and Wonder</h2>
+
+            Through Beyond Numbers, children not only learn about numbers but also uncover stories, traditions, and philosophies that make math more engaging and meaningful. When they see how numbers connect to history, mythology, and nature, they develop a holistic perspective—one that encourages both analytical thinking and cultural awareness.
+
+            By blending ancient wisdom with modern learning, Beyond Numbers transforms mathematics into an adventure, showing children that numbers are more than calculations—they are the language of the universe, filled with meaning, mystery, and magic.</p>
+    </div>
+</body>
+</html>

pages/cultural_colors.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="beyond_num.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <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"
+    />
+    <style>
+        /* Scroll to Top Button */
+        #scrollToTopBtn {
+            display: none;
+            position: fixed;
+            bottom: 132px;
+            right: 30px;
+            height: 55px;
+            width: 55px;
+            background-color: rgb(218, 128, 76);
+            color: white;
+            border: none;
+            border-radius: 50%;
+            padding: 10px;
+            cursor: pointer;
+            font-size: 15px;
+        }
+        #scrollToTopBtn:hover {
+            background-color: rgb(218, 128, 76);
+        }
+    </style>
+
+</head>
+<body style="padding: 90px;">
+    <nav class="appbar">
+        <!-- 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="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.html">Activities</a></li>
+                    <li><a href="../feedback.html">Feedback</a></li>
+                </ul>
+            </li>
+            <li id="loginlist" ><a href="../login.html">Login</a></li>
+            <li id="profilelist"><a  href="../profile.html">Profile</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>
+    <br>
+    <div class="data">
+        <H1 style="text-decoration: underline;">Cultural Significance of Colors in India and Ancient Times</H1>
+        <img src="../images/16-indian-painting-dancer-bharatanatyam-evitaworks.jpg" title="Cultural Significance of Colors in India and Ancient Times" alt="Cultural Significance of Colors in India and Ancient Times" width="500" border-radius="10px">
+            <p>India has a rich and diverse history where colors hold deep symbolic meanings, influencing traditions, spirituality, clothing, and rituals. Since ancient times, colors have been an integral part of Indian culture, with their significance rooted in religion, mythology, and daily life. Many of these associations continue to thrive today, reflecting India's vibrant heritage.</p>
+            <h2 >Red – Auspiciousness, Power, and Marriage</h2>
+
+            Red has been one of the most important colors in Indian culture for thousands of years. It symbolizes auspiciousness, power, and fertility. In Hinduism, red is associated with Goddess Durga, who represents strength and protection. It is also the color of sindoor (vermilion), worn by married women as a sign of marital status and prosperity. In weddings, brides traditionally wear red sarees or lehengas, as it is believed to bring good fortune and happiness. Ancient Indian scriptures and murals often depict red as a color of passion, energy, and transformation.            
+
+            <h2 >Yellow – Knowledge, Learning, and Prosperity</h2>
+
+            Yellow is the color of knowledge, learning, and wisdom in Indian tradition. It is closely linked to Goddess Saraswati, the deity of wisdom, music, and arts. Many students and devotees wear yellow on Vasant Panchami, a festival dedicated to learning. Yellow also signifies prosperity and is associated with Lord Vishnu, who is often depicted wearing yellow garments. In ancient times, turmeric, a sacred yellow spice, was widely used in rituals, medicine, and food, symbolizing purification and health.
+
+
+            <h2 >Blue – Divinity, Strength, and Infinity</h2>
+
+            Blue is regarded as the color of divinity and cosmic power in Indian culture. Lord Krishna and Lord Shiva, two of the most revered deities, are depicted with blue skin, symbolizing their boundless energy and transcendental nature. The color represents stability, strength, and infinite potential. Ancient Indian art and temple carvings often feature blue to depict the vastness of the sky and ocean, signifying eternal truth and wisdom.
+
+
+            <h2>Green – Life, Fertility, and Nature</h2>
+
+            Green has always symbolized life, renewal, and harmony in Indian traditions. It is closely associated with nature and the agricultural cycles that sustain life. Green also represents peace and prosperity, often linked to Lord Ganesha, who is believed to remove obstacles and bring success. In ancient India, green was used in natural dyes made from plants and minerals for clothing and artwork. Even today, green is an essential color in festivals like Eid and is seen in many traditional outfits.            
+
+            <h2 >White – Purity, Peace, and Mourning</h2>
+
+            White is a color of purity, peace, and spirituality in Indian culture. It is often worn by sages and ascetics who renounce worldly life in pursuit of enlightenment. In ancient India, white was associated with satvik (pure) energy, and it was commonly used in religious ceremonies. Unlike in Western cultures where white symbolizes weddings, in India, it is traditionally worn at funerals as a sign of mourning and detachment from the material world. White is also linked to Goddess Saraswati, who represents wisdom and purity.
+
+            <h2>Black – Protection, Mystery, and Fear</h2>
+            While black is often seen as inauspicious in certain Indian traditions, it also holds protective qualities. Many people wear black threads or kohl to ward off the "evil eye" (nazar dosh). In ancient times, black was associated with the unknown and was sometimes feared, yet it was also seen as a symbol of power and resilience. Lord Shani (Saturn), the deity of karma and justice, is represented with black, as he is believed to bring challenges that ultimately lead to spiritual growth.</p>
+    </div>
+</body>
+</html>