3 replies

Login Page Improvements/Changes

I'm still learning html and css. What can I improve in my login page?

<body>
<div class="main-container">
<div class="form-container">
<h1>Login</h1>
<form action="">
<div class="input-container">
<label for="">Username</label>
<input type="text">
</div>
<div class="input-container">
<label for="">Password</label>
<input type="password">
</div>
<div class="button-container">
<button>Login</button>
</div>
<div class="create-account">
<a href="">Create an account</a>
</div>
</form>
</div>
</div>
</body>

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.main-container {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}

.form-container {
height: 500px;
width: 440px;
border-radius: 10px;
border: solid 1px #000000;
}

.form-container h1 {
margin: 20px 0;
text-align: center;
}

form {
margin: 90px 0;
}

.input-container {
width: 100%;
margin: 20px 0;
display: flex;
justify-content: center;
align-items: center;
}

.input-container input {
width: 60%;
padding: 20px 0;
border-radius: 5px;
}

.button-container {
width: 100%;
display: flex;
margin: 20px 0;
justify-content: center;
}

.button-container button {
width: 60%;
padding: 20px 0;
border-radius: 5px;
}

.create-account {
display: flex;
margin: 20px 0;
align-items: center;
justify-content: center;
}

.create-account a {
text-decoration: none;
}

Login Page Improvements/Changes

Login Page Improvements/Changes

Similar Threads

Similar Threads

Similar Threads