assignment-1/index.html at main · MirTasinDev/assignment-1 · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KnowledgeVault</title>
    <link rel="stylesheet" href="./style.css">
    <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">
</head>

<body>
    <header id="header">
        <nav id="navbar">
            <div class="logo">
                <img src="assets/logo-navbar.png" alt="logo">
            </div>
            <ul class="menu">
                <li><a href="">Features</a></li>
                <li><a href="">How It Works</a></li>
                <li><a href="">Why It's Different</a></li>
            </ul>
            <div>
                <button class="btn">Get Early Access</button>
            </div>
        </nav>
        <section>
            <div class="bg">
                <h2 class="text-block">Early Access Now Open</h2>

                <div>
                    <h2 class="text-block2">Structured Thinking,</h2>
                    <h2 class="text-block3">Not Just Note-Taking</h2>
                </div>

                <p class="text-block4">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 class="buttons"><button class="btn2">Start Building Your Vault &#8594</button>
                    <button class="btn3"><img src="assets/Vector.png"> See How It Works</button>
                </div>
            </div>
            <div class="tag2">
                <h3>Notes don't fail, Structure does.</h3>
            </div>
            <div class="tag3">
                <p>You're not bad at learning. Your tools just weren't built for how knowledge actually works.</p>
            </div>
            <div id="card-box">
                <div class="card">
                    <img src="assets/Stack.png" alt="icon1">
                    <h4>Scattered notes</h4>
                    <p>Your ideas live in 10 different apps, none of them connected.</p>
                </div>
                <div class="card">
                    <img src="assets/Bookmarks.png" alt="icon2">
                    <h4>Bookmark overload</h4>
                    <p>Hundreds of saved links you'll never revisit or remember.</p>
                </div>
                <div class="card">
                    <img src="assets/Brain.png" alt="icon3">
                    <h4>No idea connections</h4>
                    <p>Insights stay isolated,never building into bigger understanding.</p>
                </div>
                <div class="card">
                    <img src="assets/Info.png" alt="icon4">
                    <h4 class="text9">Forgetting what<br /> you learned</h4>
                    <p class="text10">Knowledge fades because there's no system to retain it.</p>
                </div>

            </div>
            <div class="tag4">
                <img src="assets/knowledge.png" alt="image7">
                <div class="tagmaking">
                    <p class="tag5">The Solution</p>
                    <h5 class="tag6">Your second brain,<br />
                        structured by design.</h5>
                    <p class="tag11">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>

                    <p class="tag12"><img src="./assets/CheckCircle.png" alt="checkcircle>
                        ">Capture ideas with structure built-in from day one</p>
                    <p class="tag12"><img src="./assets/CheckCircle.png" alt="checkcircle>
                        ">Connect related concepts automatically as you write</p>
                    <p class="tag12"><img src="./assets/CheckCircle.png" alt="checkcircle>
                        ">Build lasting knowledge through reflection prompts</p>
                    <p class="tag12"><img src="./assets/CheckCircle.png" alt="checkcircle>
                        ">Find anything instantly with semantic search</p>
                </div>
            </div>
            <div class="ready">
                <h6>Ready to think more clearly?</h6>
                <p>Join thousands of learners who are building their personal knowledge vaults.<br />Start free, no
                    credit card required.</p>
                <button class="btn4">Get Early Access &#8594</button>
                <p>Free during early access • No credit card needed</p>
            </div>
        </section>
    </header>
    <footer>
        <div class="footer-content">
            <div class="footer-details">
                <div class="footer-logo">
                    <img src="assets/logo-footer.png" alt="KnowledgeVault Logo">
                </div>
                <div class="social">
                    <p class="footer-tagline">Social Links</p>
                    <div class="footer-links">
                        <a href="#"><img src=assets/facbook.png alt="Facebook"></a>
                        <a href="#"><img src=assets/likdin.png alt="LinkedIn"></a>
                        <a href="#"><img src=assets/x.png alt="X"></a>
                    </div>
                </div>
            </div>
            <p class="footer-copy">© 2026 Personal Knowledge Vault. All rights reserved.</p>
        </div>
</body>

</html>