mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
86 lines
1.8 KiB
HTML
86 lines
1.8 KiB
HTML
<form class="form">
|
|
<span class="input-span">
|
|
<label for="email" class="label">Email</label>
|
|
<input type="email" name="email" id="email"></span>
|
|
<span class="input-span">
|
|
<label for="password" class="label">Password</label>
|
|
<input type="password" name="password" id="password"></span>
|
|
<span class="span"><a href="#">Forgot password?</a></span>
|
|
<input class="submit" type="submit" value="Log in">
|
|
<span class="span">Don't have an account? <a href="#">Sign up</a></span>
|
|
</form>
|
|
<style>
|
|
/* From Uiverse.io by bociKond - Source: https://dribbble.com/shots/21363706-Haze-Website-Log-in-Page - Tags: form, hover, focus, submit, label */
|
|
form {
|
|
--bg-light: #efefef;
|
|
--bg-dark: #707070;
|
|
--clr: #58BC82;
|
|
--clr-alpha: #9c9c9c60;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.form .input-span {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: .5rem;
|
|
}
|
|
|
|
form input[type="email"],
|
|
form input[type="password"] {
|
|
border-radius: 0.5rem;
|
|
padding: 1rem 0.75rem;
|
|
width: 100%;
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
background-color: var(--clr-alpha);
|
|
outline: 2px solid var(--bg-dark);
|
|
}
|
|
|
|
form input[type="email"]:focus,
|
|
form input[type="password"]:focus {
|
|
outline: 2px solid var(--clr);
|
|
}
|
|
|
|
.label {
|
|
align-self: flex-start;
|
|
color: var(--clr);
|
|
font-weight: 600;
|
|
}
|
|
|
|
form .submit {
|
|
padding: 1rem 0.75rem;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
border-radius: 3rem;
|
|
background-color: var(--bg-dark);
|
|
color: var(--bg-light);
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 300ms;
|
|
font-weight: 600;
|
|
font-size: .9rem;
|
|
}
|
|
|
|
form .submit:hover {
|
|
background-color: var(--clr);
|
|
color: var(--bg-dark);
|
|
}
|
|
|
|
.span {
|
|
text-decoration: none;
|
|
color: var(--bg-dark);
|
|
}
|
|
|
|
.span a {
|
|
color: var(--clr);
|
|
}
|
|
</style>
|