ph-assignment-one/index.html at main · kabir31416/ph-assignment-one · 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1600px, initial-scale=1.0">
    <title>PH-ASSIGNMENT-ONE</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <!-- My viewport 1700px and browser zoom-out 80% -->

</head>
<body class="inter">

    <header>
        <nav>
            <div class="logo">
                <img src="./assets/logo-navbar.png" alt="navebar logo">
            </div>
            <div>
                <ul class="menu">
                    <li>Features</li>
                    <li>How It Works</li>
                    <li>Why It's Different</li>
                </ul>
            </div>

            <button class="btn">Get Early Access</button>
        </nav>

        <section class="hero-section">
            <div class="hero-container">
                <div id="rb-text">
                    <div class="icon">
                    <div class="circle1">
                    <div class="circle2">
                    <div class="circle3"></div></div></div>

                    <p>Early Access Now Open</p>

                    </div>

                </div>
            <div class="text-div">
                <h1 id="stext">Structured thinking, <br><span style="color: #30B868;">not just note-taking.</span></h1>
                <p>
                    A private space to store notes, links, and learning summaries — designed to <br>
                    help you think clearly, connect ideas, and turn learning into long-term knowledge.
                </p>

            </div>

            <div class="btn-div">
                <button class="btn">Start Building Your Vault <img src="assets/ArrowRight.png" alt=""></button>
                <button class="btn-tsp"> <img src="assets/ArrowTri.png" alt="">See How It Works</button>
            </div>


            </div>

        </section>
    </header>

    <section class="note-section">
        <div class="title">
            <h3>Notes don't fail, Structure does.</h3>
            <p>You're not bad at learning. Your tools just weren't built for how knowledge actually works.</p>
        </div>

        <div class="card-container">
            <div class="card-info">
                <img src="assets/Vector.png" alt="">
                <h3>Scattered notes</h3>
                <p>Your ideas live in 10 different apps, none of them connected.</p>
            </div>

            <div class="card-info">
                <img src="assets/Bookmarks.png" alt="">
                <h3>Bookmark overload</h3>
                <p>Hundreds of saved links you'll never revisit or remember.</p>
            </div>

            <div class="card-info">
                <img src="assets/Brain.png" alt="">
                <h3>No idea connections</h3>
                <p>Insights stay isolated, never building into bigger understanding.</p>
            </div>

            <div class="card-info">
                <img src="assets/Info.png" alt="">
                <h3>Forgetting what you learned</h3>
                <p>Knowledge fades because there's no system to retain it.</p>
            </div>

        </div>

    </section>

    <section class="solution">
        <div class="sol-container">
            <div>
                <img src="assets/knowledge.png" alt="">
            </div>

            <div class="sol-text-ctn">
                <div class="txt-p"><p>THE SOLUTION</p></div>
                <div id="txt-sol">
                    <h1>Your second brain,<br>structured by design.</h1>
                    <p>Personal Knowledge Vault isn't another note-taking app. z <br>
                        It's a thinking environment where every note, link, and summary <br>
                        becomes part of an interconnected web of understanding.</p>

                </div>

                <div class="point-container">
                    <div class="point">
                        <img src="assets/CheckCircle.png" alt="">
                        <p>Capture ideas with structure built-in from day one</p>
                    </div>

                    <div class="point">
                        <img src="assets/CheckCircle.png" alt="">
                        <p>Connect related concepts automatically as you write</p>
                    </div>

                    <div class="point">
                        <img src="assets/CheckCircle.png" alt="">
                        <p>Build lasting knowledge through reflection prompts</p>
                    </div>

                    <div class="point">
                        <img src="assets/CheckCircle.png" alt="">
                        <p>Find anything instantly with semantic search</p>
                    </div>

                </div>

            </div>


        </div>

    </section>

    <section class="challenge-section">
        <div class="ch-container">
            <div class="ch-title">
                <h3>Ready to think more clearly?</h3>
                <p>Join thousands of learners who are building their personal knowledge vaults. <br>
                    Start free, no credit card required.</p>

            </div>

            <div class="ch-button">
                <button class="btn">Get Early Access <img src="assets/ArrowRight.png" alt=""></button>
                <p>Free during early access • No credit card needed</p>

            </div>

        </div>

    </section>

    <footer>
        <div class="footer-logo-div">
            <div>
                <img src="assets/logo-footer.png" alt="">
            </div>

            <div class="social-container">
                <h3>Social Links</h3>
                <div class="social-icon">
                    <img src="assets/x.png" alt="">
                    <img src="assets/in.png" alt="">
                    <img src="assets/fb.png" alt="">
                </div>
            </div>

        </div>
        <div class="line"></div>

        <div class="copyright">
            <p>© 2026 Personal Knowledge Vault. All rights reserved.</p>
        </div>

    </footer>

</body>
</html>