galaxy/Forms/omar-alghaish_fluffy-cougar-42.html

67 lines
1.3 KiB
HTML

<div class="form-container">
<p>Login</p>
<form class="form">
<label>Email</label>
<input type="text" class="input" placeholder="Enter yout email">
<label>Password</label>
<input type="password" class="input" placeholder="Password">
<button>Submit</button>
</form>
</div>
<style>
/* From Uiverse.io by omar-alghaish - Tags: login, form */
.form-container {
width: 300px;
background: linear-gradient(180deg,rgb(0, 183, 255) 25%,rgb(255, 255, 255) 20%);
height: 350px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.form {
width: 80%;
display: flex;
flex-direction: column;
margin-top: 40px;
}
.form-container p {
position: absolute;
top: 10%;
left: 10%;
font-size: 30px;
font-weight: 900;
color: rgb(255, 255, 255);
}
.form-container label {
color: rgb(40, 42, 44);
margin-top: 15px;
margin-bottom: 5px;
font-size: 15px;
}
.form-container .input {
padding: 10px;
height: 35px;
border: none;
background-color: rgb(224, 231, 236);
}
.form-container .input:focus {
outline: none;
}
.form-container button {
border: none;
height: 35px;
margin-top: 30px;
background-color: rgb(0, 183, 255);
color: white;
font-size: 16px;
}
</style>