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

---

⚡ Features

🌑 Dark Theme	💜 Neon Glow	✨ Input Focus Effects	🔲 Neon Border	🖱️ Hover Animations	📱 Responsive
Deep dark background for maximum neon contrast	Glowing neon purple and cyan color accents	Inputs light up with neon glow on focus	Card and button borders glow on interaction	Smooth neon pulse on hover states	Clean layout on all screen sizes

---

🖥️ UI Preview

╔══════════════════════════════════════════════════════════╗
║  ░░░░░░░░░░░░░░ DARK BACKGROUND ░░░░░░░░░░░░░░░░░░░░░░  ║
║                                                          ║
║      ┌─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐           ║
║      ╎  💜 neon border glow                 ╎           ║
║      ╎                                       ╎           ║
║      ╎         L O G I N                     ╎           ║
║      ╎                                       ╎           ║
║      ╎  ┌─────────────────────────────────┐  ╎           ║
║      ╎  │  Username  ···· neon focus glow │  ╎           ║
║      ╎  └─────────────────────────────────┘  ╎           ║
║      ╎                                       ╎           ║
║      ╎  ┌─────────────────────────────────┐  ╎           ║
║      ╎  │  Password  ···· neon focus glow │  ╎           ║
║      ╎  └─────────────────────────────────┘  ╎           ║
║      ╎                                       ╎           ║
║      ╎      [ ⚡ LOGIN ⚡ ]  ← neon btn      ╎           ║
║      ╎                                       ╎           ║
║      └─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘           ║
╚══════════════════════════════════════════════════════════╝

✦ Click the inputs and button — watch the neon glow activate!

---

🎨 CSS Highlights

Neon Glow on Card Border

.wrapper {
  border: 2px solid #9333ea;
  box-shadow:
    0 0 10px #9333ea,
    0 0 20px #9333ea,
    0 0 40px #9333ea,
    inset 0 0 10px rgba(147, 51, 234, 0.1);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 12px;
}

Neon Input Focus Effect

input:focus {
  outline: none;
  border-color: #c084fc;
  box-shadow:
    0 0 5px #c084fc,
    0 0 15px #c084fc,
    0 0 30px rgba(192, 132, 252, 0.4);
  color: #fff;
}

Glowing Neon Button

.btn {
  background: transparent;
  border: 2px solid #9333ea;
  color: #c084fc;
  letter-spacing: 2px;
  text-transform: uppercase;
  box-shadow: 0 0 10px #9333ea, 0 0 20px #9333ea;
  transition: all 0.3s ease;
}

.btn:hover {
  background: #9333ea;
  color: #fff;
  box-shadow:
    0 0 20px #9333ea,
    0 0 40px #9333ea,
    0 0 60px #9333ea;
}

Dark Body Background

body {
  background: #0d0d0d;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Segoe UI', sans-serif;
}

---

📁 Project Structure

Neon-affect-Login-Page/
│
├── 📄 index.html    ← Complete project: HTML + CSS in one file
└── 📄 README.md     ← Project documentation

---

🚀 Run It Yourself

Option 1 — Live (instant, no setup)

🔗 https://safin313-stack.github.io/Neon-affect-Login-Page/

Option 2 — Clone and open locally

git clone https://github.com/Safin313-stack/Neon-affect-Login-Page.git
open index.html

Option 3 — VS Code Live Server

1. Install Live Server extension
2. Right-click index.html → Open with Live Server ✅

---

🛠️ Tech Stack

┌──────────────────────────────────────────────────────┐
│           Frontend · Single File · No JS             │
├─────────────────┬────────────────────────────────────┤
│  HTML5          │  Login form structure              │
│  CSS3           │  Neon glow · box-shadow · focus    │
│  Technique      │  Multi-layer box-shadow for neon   │
│  Theme          │  Dark background + purple neon     │
└─────────────────┴────────────────────────────────────┘

---

📚 Key CSS Concepts Used

box-shadow (multi-layer)  → stacked shadows create the neon glow effect
:focus pseudo-class       → activates neon glow when input is selected
:hover pseudo-class       → intensifies neon on button hover
rgba() background         → semi-transparent dark card overlay
border + box-shadow combo → glowing neon border technique
letter-spacing            → spaced uppercase text on button
text-transform: uppercase → styled button label
transition                → smooth glow intensity change on interaction

---

💡 Credits & Inspiration

Special thanks to TCW - AI & coding resources (Telegram Community) for ideas, guidance, and coding support throughout this project. 🙏

---

👤 Developer

Saharia Hassan Safin Front-end Developer

 

"Because every login deserves a little neon magic" ⚡

---

_{MIT License · © 2025 Saharia Hassan Safin · ⭐ Star this repo if it glowed up your day!}