welcometoopensource/index.html at main · Piyush0000/welcometoopensource · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!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>मातृबोधः</title>
    <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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <header>
        <nav>
            <!-- Wrap the logo text in an anchor tag -->
            <a href="#hero" class="logo">मातृबोधः</a>
            <ul class="nav-links">
                <li><a href="#hero">Home</a></li>
                <li><a href="#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</a></li>
                        <li><a href="feedback.html">Feedback</a></li>
                    </ul>
                </li>
                <li><a href="login.html">Login</a></li>
            </ul>
            <a href="#" class="btn-contact">Contact</a>

        </nav>
    </header>
    <!-- Hero Section -->
    <section id="hero" class="hero">
        <h1 class="wave-text">
          <span>मा</span><span>तृ</span><span>बो</span><span>धः</span><span><img id="audio-icon" src="https://ttdevasthanams.ap.gov.in/muteIcon.svg"></span>
        </h1>
        <h2>वक्रतुण्ड महाकाय सूर्यकोटि समप्रभ। निर्विघ्नं कुरु मे देव सर्वकार्येषु सर्वदा॥</h2>
        <p class="subtitle">A Chariot of Indian Children with Ancient Wisdom for Modern Times</p>
        <a href="#" class="btn">View Services</a>
      </section>

    <!-- Wisdom Section -->
    <section id="wisdom" class="wisdom-section">
        <div class="wisdom-content">
            <h1>मातृबोधः</h1>
            <h2>Educating Kids with India’s Cultural Heritage</h2>
            <p>Our platform offers an immersive learning experience for children, blending education with the timeless wisdom of India's rich cultural traditions.
                Through interactive lessons, games, and stories, we introduce kids to the beauty of Sanskrit, ancient Indian mythology, and values like the Purusharthas. Whether it's learning to count with the Vedas or exploring the adventures of Hanuman, we provide a fun and engaging way for children to connect with their heritage.
                With a focus on fostering curiosity and cultural pride, our platform creates a learning environment that inspires young minds.</p>
            <a href="#" class="bt">Get in touch</a>
        </div>
        <div class="wisdom-image">
            <img src="/1.jpg" alt="Krishna and Arjuna on chariot">
        </div>
    </section>
    <section class="content-section" id="content">
        <!-- Roadmap Cards -->
        <div class="roadmap">
            <div class="roadmap-card">
                <img src="WhatsApp Image 2024-09-13 at 00.42.39_4ba68142.jpg" alt="1" style="width: 350px;">
                <h1>Beyond Numbers</h1>
                <p>Explore the world of numbers through Indian cultural wisdom! Learn how each number holds deep significance in myths, traditions, and festivals.
                    From the Trimurti (3 Gods) to the Dashavatara (10 Avatars of Vishnu), let your child discover the beauty behind the numbers.
                    Fun games and interactive lessons will make counting an immersive experience!</p>
            </div>
            <div class="roadmap-card">
                <img src="WhatsApp Image 2024-09-05 at 23.59.21_11f94952.jpg" alt="2" style="width: 350px;">
                <h1>Cultural Colors</h1>
                <p>Colors aren't just visual they tell stories!
                   Discover how each color symbolizes something profound in Indian culture.
                    Whether it's the strength of red in Durga, the knowledge of yellow in Saraswati, or the calmness of blue in Krishna, let your child connect with the traditions that these colors represent.</p>
            </div>
            <div class="roadmap-card">
                <img src="66a59b6a-d2a8-439d-b4de-9aa0d5b7930b.jpeg" alt="3" style="width: 350px;">
                <h1>Heritage Map</h1>
                <p>Travel across India's diverse regions and unlock the rich heritage hidden in temples, monuments, and cultural sites.
                    With our interactive Heritage Map, your child can explore historical landmarks and their fascinating stories, from Kashi Vishwanath to the Shakti Peethas.
                    Through fun games and engaging activities, they can solve puzzles, collect cultural artifacts, and embark on adventures through India's vast history!</p>
            </div>
        </div>
    </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="fab fa-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</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</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>Contact Us</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="//code.tidio.co/5w3m6cpl10rvqjkkmhv1nx8p0fqloyq6.js" async></script>
    <script src="scrollscript.js"></script>
    <script src="audio.js"></script>
</body>
</html>