you-dont-need · ipsitdebnath · Oct 25, 2025
diff --git a/Login_signin/README.md 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! 🚀
diff --git a/Login_signin/index.html b/Login_signin/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <form>
+      <fieldset>
+        <h1>WELCOME</h1>
+        <br />
+        <label for="username">Username</label><br />
+        <input
+          type="text"
+          id="username"
+          required
+          placeholder="Enter your username"
+        /><br />
+        <label for="password">Password</label><br />
+        <input
+          type="password"
+          id="password"
+          required
+          placeholder="Enter your password"
+        /><br />
+        <input type="checkbox" id="remember" />
+        <label
+          for="remember"
+          style="
+            font-size: 20px;
+            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial,
+              sans-serif;
+          "
+          >Remember Me</label
+        ><br />
+        <button type="submit">Login</button><br />
+        <a href="" style="margin: 130px">Forgot Password or Username?</a>
+        <h4>Don't have an account? <a href=""> Signup</a></h4>
+      </fieldset>
+    </form>
+  </body>
+</html>
diff --git a/Login_signin/style.css 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;
+}