_{✦ No login  ·  No install  ·  Opens instantly in your browser ✦}

---

🧠 What You Get

🎯 Hero Section	⚠️ Problems Grid	💡 Solution Section	📋 Feature List	🚀 CTA Section	🔗 Footer
Bold headline with early access badge and dual CTA buttons	4-card grid showing pain points every learner faces	Side-by-side layout with product screenshot and features	Structured bullet list of core product capabilities	Full-width call to action with free access messaging	Logo, social links, and copyright

---

🖥️ Page Structure

╔══════════════════════════════════════════════════════════════╗
║  🧠 KnowledgeVault    Features · How It Works · Why Different ║  ← Header
║                                               [Get Early Access]║
╠══════════════════════════════════════════════════════════════╣
║                  🎯 Early Access Now Open                    ║
║           Structured Thinking,                               ║  ← Hero
║           Not Just Note-Taking.                              ║
║   [ Start Building Your Vault → ]  [ ▶ See How It Works ]   ║
╠══════════════════════════════════════════════════════════════╣
║        Notes Don't Fail, Structure Does.                     ║
║  ╔══════════════╗ ╔══════════════╗ ╔══════════════╗ ╔══════╗ ║  ← Problems
║  ║ 📝 Scattered ║ ║ 🔖 Bookmark  ║ ║ 🧩 No Idea   ║ ║ 💭   ║ ║
║  ║    Notes     ║ ║   Overload   ║ ║  Connections ║ ║ Forg ║ ║
║  ╚══════════════╝ ╚══════════════╝ ╚══════════════╝ ╚══════╝ ║
╠══════════════════════════════════════════════════════════════╣
║  [ Product Image ]  Your Second Brain, Structured By Design. ║  ← Solution
║                     ✓ Capture ideas with structure           ║
║                     ✓ Connect related concepts               ║
║                     ✓ Build lasting knowledge                ║
║                     ✓ Find anything with semantic search     ║
╠══════════════════════════════════════════════════════════════╣
║          Ready To Think More Clearly?                        ║  ← CTA
║            [ Get Early Access → ]                            ║
╠══════════════════════════════════════════════════════════════╣
║  🧠 Logo  ·  Twitter  ·  LinkedIn  ·  Facebook               ║  ← Footer
╚══════════════════════════════════════════════════════════════╝

---

🎨 Design Highlights

Hero Badge + Dual CTA Pattern

<!-- Early access badge draws the eye first -->
<div class="badge">🎯 Early Access Now Open</div>

<h1>Structured Thinking,<br>
  <span class="highlight">Not Just Note-Taking.</span>
</h1>

<!-- Two-button pattern: primary action + soft secondary -->
<button class="primary-button">Start Building Your Vault →</button>
<button class="secondary-button">▶ See How It Works</button>

Problems Grid — 4 Column Card Layout

.problems-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.problem-card {
  padding: 2rem;
  border-radius: 1rem;
  text-align: center;
}

Solution — Side-by-Side Layout

.solution-container {
  display: flex;
  align-items: center;
  gap: 4rem;
}
/* Image left · Content right — classic product layout */

Feature List with Custom Checkmarks

<ul class="feature-list">
  <li class="ic">Capture ideas with structure built-in from day one</li>
  <li class="ic">Connect related concepts automatically as you write</li>
  <li class="ic">Build lasting knowledge through reflection prompts</li>
  <li class="ic">Find anything instantly with semantic search</li>
</ul>

---

📁 Project Structure

Assingment-01-B13-knowledge-vault/
│
├── 📄 index.html          ← Full page · header · hero · problems · solution · CTA · footer
│
├── 📂 styles/
│   ├── 🎨 style.css       ← Full styling · layout · typography · responsive
│   ├── 🖼️  logo-navbar.png ← Header logo
│   ├── 🖼️  logo-footer.png ← Footer logo
│   ├── 🖼️  knowledge.png  ← Solution section product image
│   ├── 📝 Vector.png      ← Scattered notes problem icon
│   ├── 🔖 Bookmarks.png   ← Bookmark overload problem icon
│   ├── 🧠 Brain.png       ← No idea connections problem icon
│   ├── ℹ️  Info.png        ← Forgetting problem icon
│   └── 🔗 social icons    ← Twitter · LinkedIn · Facebook
│
└── 📂 Assingment:01/      ← Assignment submission folder

---

🚀 Run It Yourself

Option 1 — Live (instant, no setup)

🔗 https://safin313-stack.github.io/Assingment-01-B13-knowledge-vault/

Option 2 — Clone and open locally

git clone https://github.com/Safin313-stack/Assingment-01-B13-knowledge-vault.git
cd Assingment-01-B13-knowledge-vault
open index.html

Option 3 — VS Code Live Server

1. Install Live Server extension
2. Right-click index.html → Open with Live Server
3. Site opens at localhost:5500 ✅

---

🛠️ Tech Stack

┌──────────────────────────────────────────────────┐
│           Frontend · Zero Dependencies           │
├─────────────────┬────────────────────────────────┤
│  HTML5          │  Semantic page structure       │
│  CSS3           │  Grid · flexbox · typography   │
└─────────────────┴────────────────────────────────┘

---

🧠 Page Sections Overview

Header    → Logo · nav links (Features, How It Works, Why Different) · CTA button
Hero      → Early access badge · bold headline · description · dual CTA buttons
Problems  → 4-card grid: Scattered Notes · Bookmark Overload · No Connections · Forgetting
Solution  → Product image + "Your Second Brain" copy + 4-point feature list
CTA       → Full-width section · free access messaging · Get Early Access button
Footer    → Logo · social links (Twitter, LinkedIn, Facebook) · copyright

---

👤 Developer

Saharia Hassan Safin Front-end Developer · Programming Hero Batch 13

 

"Building products that look real, one landing page at a time" 🧠

---

_{MIT License · © 2025 Saharia Hassan Safin · ⭐ Star this repo if it helped you!}