changes in the login page

6 months ago · 2a1dab2414
parent 77fb173dd2
commit 2a1dab2414
3 changed files with 61 additions and 30 deletions
--- a/createAccount.html
+++ b/createAccount.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <div class="container">
+        
+    </div>
+</body>
+</html>
--- a/login.css
+++ b/login.css
@ -4,32 +4,51 @@ body {
    display: flex;
    justify-content: center; 
    align-items: center;    
-    background-color:#fff
+    background-color: #f0f0f0; /* Light background color */
 }
-.login-container{
-    background-color: rgb(126, 87, 174);
-    height: 400px;
-    width: 500px;
-    display: flex;
-    border-radius: 10px;
+
+.login-container {
+    background-color: rgb(126, 87, 174); /* Purple background */
+    width: 400px; 
+    padding: 20px; 
+    border-radius: 10px; 
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); 
+    text-align: center; 
+}
+
+.login-container h1 {
+    color: #fff; 
+    margin-bottom: 20px; 
 }
- input{
-    margin: 10px 0px;
+
+input {
+    margin: 10px 0; 
    padding: 10px;
    border-radius: 5px;
    border: none;
- }
-form
-{   
-    margin: 0 auto;
-    width: 300px;
-    align-items: center;
-    display: flex;
+    width: 80%; 
+}
+
+input[type="submit"] {
+    background-color: #4CAF50; 
+    color: white;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+input[type="submit"]:hover {
+    background-color: #45a049; /* Darker green on hover */
+}
+
+.text {
+    margin-top: 10px; /* Add space above the text */
+}

-    justify-content: center;
+.text a {
+    color: lightblue; /* Gold color for the link */
+    text-decoration: none; /* Remove underline */
 }

-.details-container{
-    
-    align-items: center;
+.text a:hover {
+    text-decoration: underline; /* Underline on hover */
 }
--- a/login.html
+++ b/login.html
@ -8,18 +8,17 @@
 </head>
 <body>
    <div class="login-container">
+        <h1>Login</h1>
        <form action="post">
            <div class="details-container">
-            <label for="email">Email: </label><br>
-            <input type="email" id = "email" name="email" placeholder="example@gmail.com">
-            <br>
-            <label for="password">Password: </label><br>
-            <input type="password" name="password" id="password"><br>
-            <input type="submit" name="login" id="login" value="Login">
-            <p class="text">Don't Have an account?<a href="createAccount.html">Create an Account</a></p>
-            
+                <label for="email">Email:</label><br>
+                <input type="email" id="email" name="email" placeholder="example@gmail.com"><br>
+                <label for="password">Password:</label><br>
+                <input type="password" name="password" id="password"><br>
+                <input type="submit" name="login" id="login" value="Login"><br>
+                <p class="text">Don't Have an account? <a href="createAccount.html">Create an Account</a></p>
+            </div>
        </form>
    </div>
-</div>
 </body>
-</html>
+</html>