NoteHub-studyspace/index.html at main · ggauravky/NoteHub-studyspace · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico">
    <title>NoteHub - Your Smart Study Space</title>
    <link rel="stylesheet" href="assets/css/styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body>
    <!-- Mobile Menu Overlay -->
    <div class="mobile-menu-overlay" id="mobileMenuOverlay"></div>

    <header class="header">
        <div class="container">
            <nav class="navbar">
                <a href="index.html" class="logo">
                    <span class="logo-icon">📚</span>
                    <span class="logo-text">NoteHub</span>
                </a>
                <ul class="nav-menu" id="navMenu">
                    <li><a href="index.html" class="active">Home</a></li>
                    <li><a href="school.html">School</a></li>
                    <li><a href="college.html">College</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
                <div class="hamburger" id="hamburger">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </nav>
        </div>
    </header>

    <section class="hero animated-bg">
        <div class="container">
            <div class="hero-content">
                <div class="hero-badge">✨ V2.0 Now Live</div>
                <h1 class="hero-title">Your ultimate hub for <br><span class="typing-text"></span><span class="cursor">|</span></h1>
                <p class="hero-description">All your school and college academic materials in one place. Beautifully designed, meticulously organized, and 100% free.</p>
                <div class="hero-buttons">
                    <a href="#quick-access" class="btn-primary pulse-btn">Start Learning</a>
                    <a href="about.html" class="btn-outline">Our Story</a>
                </div>
            </div>

            <!-- Floating Decorative Elements -->
            <div class="floating-shape shape-1"></div>
            <div class="floating-shape shape-2"></div>
            <div class="floating-shape shape-3"></div>
        </div>
    </section>

    <section class="features" id="features">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Why choose NoteHub?</h2>
                <p class="section-description">Built for modern students who demand simplicity, speed, and premium quality in their study materials.</p>
            </div>

            <!-- Modern Bento Box Grid -->
            <div class="bento-grid">
                <!-- Large Card -->
                <div class="bento-card bento-large">
                    <div class="bento-icon">⚡</div>
                    <h3>Lightning Fast Navigation</h3>
                    <p>Stop wasting time digging through PDFs. Our hierarchical hub system lets you jump from your Class to your Subject to your exact Chapter in less than 3 seconds.</p>
                </div>

                <!-- Medium Card -->
                <div class="bento-card bento-medium bg-gradient-1">
                    <div class="bento-icon">📖</div>
                    <h3>Structured Perfectly</h3>
                    <p>Every note features beautiful formula boxes, code snippets, and key definitions.</p>
                </div>

                <!-- Small Cards -->
                <div class="bento-card bento-small">
                    <div class="bento-icon">🌍</div>
                    <h3>100% Free Forever</h3>
                    <p>Education shouldn't have a paywall.</p>
                </div>

                <div class="bento-card bento-small">
                    <div class="bento-icon">💡</div>
                    <h3>By Students, For Students</h3>
                    <p>We know exactly what you need to ace exams.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="quick-access" id="quick-access">
        <div class="container">
            <div class="section-header text-center">
                <h2 class="section-title">Select Your Portal</h2>
                <p class="section-description">Dive right into your curriculum.</p>
            </div>

            <div class="portal-grid">
                <a href="school.html" class="portal-card school-portal">
                    <div class="portal-content">
                        <div class="portal-icon">🎓</div>
                        <h3>School Notes</h3>
                        <p>Comprehensive curriculum for Classes 9 through 12 across all major streams.</p>
                        <span class="portal-link-text">Enter Portal &rarr;</span>
                    </div>
                </a>

                <a href="college.html" class="portal-card college-portal">
                    <div class="portal-content">
                        <div class="portal-icon">🏛️</div>
                        <h3>College Notes</h3>
                        <p>Deep academic content for B.Tech, BCA, BBA, and MBA degree programs.</p>
                        <span class="portal-link-text">Enter Portal &rarr;</span>
                    </div>
                </a>
            </div>
        </div>
    </section>

    <footer class="footer">
        <div class="container">
            <p class="footer-credit">Made with 💙 by Gaurav, Nikhil & Devansh</p>
            <p class="footer-copyright">© 2025 NoteHub StudySpace</p>
        </div>
    </footer>

    <button id="backToTop" class="back-to-top">↑</button>

    <script src="assets/js/main.js"></script>
</body>
</html>