mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
80 lines
1.4 KiB
HTML
80 lines
1.4 KiB
HTML
<form class="form">
|
|
<div class="flex">
|
|
<div class="login color">Login</div>
|
|
<label class="color">Username :</label>
|
|
<input type="text" class="input">
|
|
<label class="color">Password :</label>
|
|
<input type="password" class="input">
|
|
<button class="">Log-in</button>
|
|
<br>
|
|
<div class="color align">Don't have account? <span class="span">Sign-Up</span></div>
|
|
</div>
|
|
</form>
|
|
<style>
|
|
/* From Uiverse.io by Piyush831 - Tags: form, creative, box-shadow */
|
|
.form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
background: linear-gradient(to right ,grey,silver);
|
|
padding: 40px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.login {
|
|
font-size: 25px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.form button {
|
|
margin-top: 25px;
|
|
margin-bottom: 6px;
|
|
border-radius: 10px;
|
|
border: none;
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
font-size: 19px;
|
|
font-weight: bold;
|
|
color: grey;
|
|
}
|
|
|
|
.form label {
|
|
margin-top: 20px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.form button:hover {
|
|
box-shadow: 2px 2px 12px white;
|
|
}
|
|
|
|
.input {
|
|
height: 30px;
|
|
outline: none;
|
|
padding: 15px;
|
|
border-radius: 10px;
|
|
border: none;
|
|
font-weight: bold;
|
|
font-size: 15px;
|
|
box-shadow: 2px 2px 12px inset black;
|
|
}
|
|
|
|
.span:hover {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.color {
|
|
color: white;
|
|
}
|
|
|
|
.align {
|
|
text-align: center;
|
|
}
|
|
|
|
</style>
|