Ayushparikh-code · spy-in-shadows · Oct 23, 2025 · Oct 23, 2025 · Oct 23, 2025 · Oct 23, 2025
diff --git a/Cosmic-Login-Page/README.md b/Cosmic-Login-Page/README.md
@@ -0,0 +1,22 @@
+# 🌌 Cosmic Login Page
+
+A modern, responsive login page with a glowing cosmic gradient background and floating label inputs.
+
+## ✨ Features
+- Responsive design
+- Smooth input animations
+- Glassmorphism effect
+- Gradient background
+- Hover transitions on the login button
+
+## 🧠 Tech Used
+- HTML5
+- CSS3 (Flexbox, gradients, transitions)
+
+## 📸 Preview
+![screenshot](https://github.com/spy-in-shadows/Web-dev-mini-projects/blob/add-cosmic-login-page/Cosmic-Login-Page/screenshot.png?raw=true)
+![screenshot](https://github.com/spy-in-shadows/Web-dev-mini-projects/blob/add-cosmic-login-page/Cosmic-Login-Page/screenshot1.png?raw=true)
+
+---
+
+⭐ **Contributed by:** [spy-in-shadows](https://github.com/spy-in-shadows)
diff --git a/Cosmic-Login-Page/index.html b/Cosmic-Login-Page/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Cosmic Login Page</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <div class="login-box">
+      <h2>Welcome Back</h2>
+      <form>
+        <div class="input-box">
+          <input type="text" required>
+          <label>Username</label>
+        </div>
+        <div class="input-box">
+          <input type="password" required>
+          <label>Password</label>
+        </div>
+        <button type="submit" class="btn">Login</button>
+        <p class="signup">Don't have an account? <a href="#">Sign up</a></p>
+      </form>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/Cosmic-Login-Page/screenshot.png b/Cosmic-Login-Page/screenshot.png
diff --git a/Cosmic-Login-Page/screenshot1.png b/Cosmic-Login-Page/screenshot1.png
diff --git a/Cosmic-Login-Page/style.css b/Cosmic-Login-Page/style.css
@@ -0,0 +1,96 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Poppins', sans-serif;
+}
+
+body {
+  height: 100vh;
+  background: radial-gradient(circle at top right, #2b1055, #7597de);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.container {
+  position: relative;
+  width: 100%;
+  max-width: 400px;
+  padding: 2rem;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 1rem;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(15px);
+}
+
+.login-box h2 {
+  color: #fff;
+  text-align: center;
+  margin-bottom: 2rem;
+  font-weight: 600;
+}
+
+.input-box {
+  position: relative;
+  margin: 20px 0;
+}
+
+.input-box input {
+  width: 100%;
+  padding: 12px 10px;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid #fff;
+  color: #fff;
+  outline: none;
+  font-size: 1rem;
+}
+
+.input-box label {
+  position: absolute;
+  top: 12px;
+  left: 10px;
+  color: #ccc;
+  pointer-events: none;
+  transition: 0.3s;
+}
+
+.input-box input:focus ~ label,
+.input-box input:valid ~ label {
+  top: -10px;
+  color: #fff;
+  font-size: 0.85rem;
+}
+
+.btn {
+  width: 100%;
+  background: linear-gradient(90deg, #667eea, #764ba2);
+  border: none;
+  padding: 10px;
+  color: #fff;
+  font-size: 1rem;
+  border-radius: 30px;
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+.btn:hover {
+  background: linear-gradient(90deg, #764ba2, #667eea);
+  transform: scale(1.03);
+}
+
+.signup {
+  text-align: center;
+  color: #eee;
+  margin-top: 15px;
+}
+
+.signup a {
+  color: #fff;
+  font-weight: 600;
+  text-decoration: none;
+}
diff --git a/Index.md b/Index.md
@@ -34,6 +34,7 @@
 | [Compound Interest Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Compound%20Interest%20Calculator) | A basic calculator which helps to calculate compound interest based on user input.                                                                                                                                                  |
 | [Countdown-Timer](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Countdown_Timer)                         | Simple Web App which helps to make some important occasions.                                                                                                                                                                        |
 | [Corona-Tracker](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Corona-tracker)                          | Beginner friendly project which uses basic APIs and provides real-time data of vaccines and corona cases.                                                                                                                            |
+| [Cosmic-Login-Page](https://github.com/spy-in-shadows/Web-dev-mini-projects/tree/add-cosmic-login-page/Cosmic-Login-Page)                          | A modern, responsive login page with a glowing background and floating label inputs.                                                                                                                            |
 | [Custom-Range-Slider](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Custom-Range-Slider)                 | Simple Custom Range Slider written in HTML, CSS, and JavaScript.                                                                                                                                                                     |
 | [Digital Clock](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/DIGITAL-JAVASCRIPT-CLOCK)                  | Simple Clock App written in HTML, CSS, and JavaScript.                                                                                                                                                                              |
 | [Dinosaur Game](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/JAVASCRIPT%20GAME)                         | A web app which allows you to play the dinosaur game where you have to make the dinosaur jump and save himself from the cactus.                                                                                                     |