From fbfa3061e57d58d6bd895fc633daffb900e0fcbe Mon Sep 17 00:00:00 2001
From: Vidhiya S B <98318069+VidhiyaSB@users.noreply.github.com>
Date: Sun, 15 Oct 2023 21:22:23 +0530
Subject: [PATCH] Update login.html

* Wrapped the form in a container div with a white background to make it stand out.
* Added labels for the username and password inputs for improved accessibility.
* Centered the form horizontally on the page by setting a maximum width and margin auto
* Added a label for the "Remember me" checkbox.
* The "Cancel" button's appearance has been changed to have a red background with white text for a distinctive look.
* Improved the layout and spacing for better readability and aesthetics.
---
 login.html | 138 ++++++++++++++++++++++++++++++-----------------------
 1 file changed, 77 insertions(+), 61 deletions(-)
diff --git a/login.html b/login.html
index f50c76b..1710720 100644
--- a/login.html
+++ b/login.html
@@ -1,64 +1,80 @@
-<!DOCTYPE html> 
-<html> 
+<!DOCTYPE html>
+<html>
 <head>
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title> Login Page </title>
-<style> 
-Body {
-  font-family: Calibri, Helvetica, sans-serif;
-  background-color: pink;
-}
-button { 
-       background-color: #4CAF50; 
-       width: 100%;
-        color: orange; 
-        padding: 15px; 
-        margin: 10px 0px; 
-        border: none; 
-        cursor: pointer; 
-         } 
- form { 
-        border: 3px solid #f1f1f1; 
-    } 
- input[type=text], input[type=password] { 
-        width: 100%; 
-        margin: 8px 0;
-        padding: 12px 20px; 
-        display: inline-block; 
-        border: 2px solid green; 
-        box-sizing: border-box; 
-    }
- button:hover { 
-        opacity: 0.7; 
-    } 
-  .cancelbtn { 
-        width: auto; 
-        padding: 10px 18px;
-        margin: 10px 5px;
-    } 
-      
-   
- .container { 
-        padding: 25px; 
-        background-color: lightblue;
-    } 
-</style> 
-</head>  
-<body>  
-    <center> <h1> Student Login Form </h1> </center> 
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Login Page</title>
+    <style>
+        body {
+            font-family: Calibri, Helvetica, sans-serif;
+            background-color: pink;
+        }
+
+        button {
+            background-color: #4CAF50;
+            width: 100%;
+            color: white;
+            padding: 15px;
+            margin: 10px 0px;
+            border: none;
+            cursor: pointer;
+        }
+
+        form {
+            border: 3px solid #f1f1f1;
+            max-width: 300px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: white;
+        }
+
+        input[type="text"],
+        input[type="password"] {
+            width: 100%;
+            margin: 8px 0;
+            padding: 12px 20px;
+            display: inline-block;
+            border: 2px solid green;
+            box-sizing: border-box;
+        }
+
+        button:hover {
+            opacity: 0.7;
+        }
+
+        .cancelbtn {
+            width: 100%;
+            padding: 10px;
+            background-color: #ff4a4a;
+            color: white;
+            border: none;
+            cursor: pointer;
+        }
+
+        .container {
+            padding: 25px;
+        }
+
+        h1 {
+            color: black;
+        }
+    </style>
+</head>
+<body>
+    <center>
+        <h1>Student Registration Form</h1>
+    </center>
     <form>
-        <div class="container"> 
-            <label>Username : </label> 
-            <input type="text" placeholder="Enter Username" name="username" required>
-            <label>Password : </label> 
-            <input type="password" placeholder="Enter Password" name="password" required>
-            <button type="submit">Login</button> 
-            <input type="checkbox" checked="checked"> Remember me 
-            <button type="button" class="cancelbtn"> Cancel</button> 
-            Forgot <a href="#"> password? </a> 
-        </div> 
-    </form>   
-</body>   
+        <div class="container">
+            <label for="username">Username:</label>
+            <input type="text" id="username" placeholder="Enter Username" name="username" required>
+            <label for="password">Password:</label>
+            <input type="password" id="password" placeholder="Enter Password" name="password" required>
+            <button type="submit">Login</button>
+            <input type="checkbox" id="remember" checked="checked">
+            <label for="remember">Remember me</label>
+            <button type="button" class="cancelbtn">Cancel</button>
+            <p><a href="#">Forgot password?</a></p>
+        </div>
+    </form>
+</body>
 </html>
-
- 
