diff --git a/Cosmic-Login-Page/README.md b/Cosmic-Login-Page/README.md new file mode 100644 index 000000000..86eaf574b --- /dev/null +++ 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 new file mode 100644 index 000000000..23e505e64 --- /dev/null +++ b/Cosmic-Login-Page/index.html @@ -0,0 +1,28 @@ + + + + + + Cosmic Login Page + + + +
+
+

Welcome Back

+
+
+ + +
+
+ + +
+ + +
+
+
+ + diff --git a/Cosmic-Login-Page/screenshot.png b/Cosmic-Login-Page/screenshot.png new file mode 100644 index 000000000..a5d318442 Binary files /dev/null and b/Cosmic-Login-Page/screenshot.png differ diff --git a/Cosmic-Login-Page/screenshot1.png b/Cosmic-Login-Page/screenshot1.png new file mode 100644 index 000000000..8de126956 Binary files /dev/null and b/Cosmic-Login-Page/screenshot1.png differ diff --git a/Cosmic-Login-Page/style.css b/Cosmic-Login-Page/style.css new file mode 100644 index 000000000..6eee891da --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/Index.md b/Index.md index 5fb8d6d5c..44be51b37 100644 --- 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. |