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
+
+
+
+
+
+
\ 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;
+}