Roshmaa 6 months ago
commit 6c7169c5b6
  1. 13
      createAccount.html
  2. 55
      login.css
  3. 17
      login.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>

@ -4,32 +4,51 @@ body {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color:#fff background-color: #f0f0f0; /* Light background color */
} }
.login-container{
background-color: rgb(126, 87, 174); .login-container {
height: 400px; background-color: rgb(126, 87, 174); /* Purple background */
width: 500px; width: 400px;
display: flex; padding: 20px;
border-radius: 10px; 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; padding: 10px;
border-radius: 5px; border-radius: 5px;
border: none; border: none;
} width: 80%;
form }
{
margin: 0 auto;
width: 300px;
align-items: center;
display: flex;
justify-content: center; input[type="submit"] {
background-color: #4CAF50;
color: white;
cursor: pointer;
font-size: 16px;
} }
.details-container{ input[type="submit"]:hover {
background-color: #45a049; /* Darker green on hover */
}
align-items: center; .text {
margin-top: 10px; /* Add space above the text */
}
.text a {
color: lightblue; /* Gold color for the link */
text-decoration: none; /* Remove underline */
}
.text a:hover {
text-decoration: underline; /* Underline on hover */
} }

@ -8,18 +8,17 @@
</head> </head>
<body> <body>
<div class="login-container"> <div class="login-container">
<h1>Login</h1>
<form action="post"> <form action="post">
<div class="details-container"> <div class="details-container">
<label for="email">Email: </label><br> <label for="email">Email:</label><br>
<input type="email" id = "email" name="email" placeholder="example@gmail.com"> <input type="email" id="email" name="email" placeholder="example@gmail.com"><br>
<br> <label for="password">Password:</label><br>
<label for="password">Password: </label><br> <input type="password" name="password" id="password"><br>
<input type="password" name="password" id="password"><br> <input type="submit" name="login" id="login" value="Login"><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>
<p class="text">Don't Have an account?<a href="createAccount.html">Create an Account</a></p> </div>
</form> </form>
</div> </div>
</div>
</body> </body>
</html> </html>
Loading…
Cancel
Save