From e46f9c39af537798aa013db8e560c9ba3f745b81 Mon Sep 17 00:00:00 2001 From: Ipsit Date: Sun, 26 Oct 2025 00:39:03 +0530 Subject: [PATCH] Added login_signin --- Login_signin/README.md | 71 ++++++++++++++++++++++++++++++++++ Login_signin/index.html | 44 +++++++++++++++++++++ Login_signin/style.css | 84 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 199 insertions(+) create mode 100644 Login_signin/README.md create mode 100644 Login_signin/index.html create mode 100644 Login_signin/style.css diff --git a/Login_signin/README.md b/Login_signin/README.md new file mode 100644 index 00000000..265227c4 --- /dev/null +++ b/Login_signin/README.md @@ -0,0 +1,71 @@ +# My Login Page + +Hey there! 👋 +This is my **Login Page** made using **HTML and CSS**. +It’s simple, colorful, and has a nice background image. +I made it as part of my web design practice! 😄 + + +--- + +## 💻 Tech Used + +- **HTML** – for the structure +- **CSS** – for all the styling and colors +- Background image from **Freepik** + +--- + +## 🚀 Features + +✨ Clean and simple login form +✨ “Remember Me” checkbox +✨ Cool background image +✨ Hover effects on links and buttons +✨ Centered form using CSS translate + +--- + +## 🧩 How It Works + +- Enter your **username** and **password** +- Click on **Login** +- There’s also a **“Forgot Password or Username?”** link and a **Signup** option + +--- + +## 🛠️ How to Use + +1. Download or copy both files — `index.html` and `style.css`. +2. Make sure both are in the same folder. +3. Open `index.html` in your browser. +4. That’s it! You’ll see the login page. 🎉 + +--- + +## 🧠 What I Learned + +- How to center elements with CSS +- Using background images and gradients +- Styling buttons and hover effects +- Linking external CSS to HTML + +--- + +## 🌟 Future Improvements + +- Add validation using JavaScript +- Create a signup page to go with it +- Make it mobile-friendly + +--- + +## ❤️ Credits + +Background image: [Freepik](https://www.freepik.com) +Made by: **Ipsit** + +--- + +Thanks for checking out my project! 😄 +Feel free to try it or make your own version! 🚀 \ No newline at end of file diff --git a/Login_signin/index.html b/Login_signin/index.html new file mode 100644 index 00000000..bfa6e39f --- /dev/null +++ b/Login_signin/index.html @@ -0,0 +1,44 @@ + + + + + + Document + + + +
+
+

WELCOME

+
+
+
+
+
+ +
+
+ Forgot Password or Username? +

Don't have an account? Signup

+
+
+ + \ No newline at end of file diff --git a/Login_signin/style.css b/Login_signin/style.css new file mode 100644 index 00000000..e9837635 --- /dev/null +++ b/Login_signin/style.css @@ -0,0 +1,84 @@ +body { + width: 100vh; + height: 100vh; + background-image: url(https://img.freepik.com/premium-vector/geometric-gradient-technology-background_23-2149110132.jpg?semt=ais_hybrid&w=740&q=80); + background-repeat: no-repeat; + background-position: center; + background-size: cover; +} +fieldset { + width: 500px; + height: 500px; + position: absolute; + top: 50%; + left: 50%; + translate: -50% -50%; + border-radius: 20px; +} +h1 { + translate: 20%; +} +input, +label, +button, +h4 { + position: relative; + left: 25%; +} +h1 { + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-style: italic; + font-size: 50px; + color: antiquewhite; +} +label { + font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; + font-weight: bold; + color: azure; + font-size: 20px; + left: 20px; +} +input[type="text"], +input[type="password"] { + width: 80%; + left: 20px; + padding: 10px; + border-radius: 10px; + margin-top: 10px; + margin-bottom: 10px; +} +input[type="checkbox"] { + padding: 10px; + border-radius: 10px; + margin: 10px; + margin-right: 0px; + left: 10px; +} + +h4 { + color: white; +} +a { + color: chartreuse; +} +a:hover { + color: chocolate; +} +button { + width: 85%; + border-radius: 10px; + background-color: greenyellow; + padding: 10px; + margin: 10px; + color: rgb(255, 0, 0); + font-weight: bold; + font-size: large; + left: 10px; + font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", + "Lucida Sans Unicode", Geneva, Verdana, sans-serif; +} +button:hover { + background-color: blanchedalmond; + color: brown; + cursor: pointer; +}