Skip to content

Instantly share code, notes, and snippets.

@AskinNet

AskinNet/index.html

Created October 28, 2022 12:05
Show Gist options
  • Save AskinNet/5e7449e1aa1f72426dbc91ff0d220fe1 to your computer and use it in GitHub Desktop.
Save AskinNet/5e7449e1aa1f72426dbc91ff0d220fe1 to your computer and use it in GitHub Desktop.
Download ZIP
Stylish and Dark Login Form
Raw
index.html
<div id='center'>
<div id='login-row'>
<div class='icon-user' id='login-icon'></div>
<div id='login'>Login</div>
</div>
<div id='password-row'>
<div class='icon-lock' id='password-icon'></div>
<div id='password'>Password</div>
</div>
<div id='login-button'>Log in</div>
<div id='forget'>Forgot password?</div>
</div>
Raw
style.stylus
body {
font-family: 'Merriweather Sans', sans-serif;
background: #313944;
position: absolute;
font-weight: lighter;
color: #FFF;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
#center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
#login-row {
width: 300px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
background: #464D56;
}
#login-icon {
text-align: center;
width: 50px;
height: 34px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -25px;
background: #38424F;
}
#login {
position: absolute;
left: 50%;
top: 50%;
margin-left: -90px;
margin-top: -10px;
}
#password-row {
width: 300px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -98px;
background: #464D56;
}
#password-icon {
text-align: center;
width: 50px;
height: 34px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -25px;
background: #38424F;
}
.icon-user, .icon-lock {
padding-top: 16px;
font-size: 16px;
}
#password {
position: absolute;
left: 50%;
top: 50%;
margin-left: -90px;
margin-top: -10px;
}
#login-button {
color: #FFF;
text-align: center;
padding-top: 10px;
width: 300px;
height: 30px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -35px;
background: #F0793F;
box-shadow: 0px 0px 2px 2px #363840;
}
#login-button:hover {
background: #EA5912;
cursor: pointer;
}
#forget {
text-align: center;
color: #464D56;
padding-top: 30px;
width: 300px;
height: 30px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment