vencewho
KPCKevin Powell - Community
•Created by vencewho on 4/26/2024 in #front-end
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;
}
4 replies
KPCKevin Powell - Community
•Created by vencewho on 12/13/2023 in #back-end
Local Storage Usage In React Using Axios
9 replies
KPCKevin Powell - Community
•Created by vencewho on 12/12/2023 in #back-end
What's wrong with my code? Currently learning back-end & bumped into a problem.
14 replies