Inspired by Virgil Pana
A Pen by Marco Biedermann on CodePen.
<body class="align"> | |
<div class="site__container"> | |
<div class="grid__container"> | |
<form action="" method="post" class="form form--login"> | |
<div class="form__field"> | |
<label class="fontawesome-user" for="login__username"><span class="hidden">Username</span></label> | |
<input id="login__username" type="text" class="form__input" placeholder="Username" required> | |
</div> | |
<div class="form__field"> | |
<label class="fontawesome-lock" for="login__password"><span class="hidden">Password</span></label> | |
<input id="login__password" type="password" class="form__input" placeholder="Password" required> | |
</div> | |
<div class="form__field"> | |
<input type="submit" value="Sign In"> | |
</div> | |
</form> | |
<p class="text--center">Not a member? <a href="#">Sign up now</a> <span class="fontawesome-arrow-right"></span></p> | |
</div> | |
</div> | |
</body> |
Inspired by Virgil Pana
A Pen by Marco Biedermann on CodePen.
// Fonts | |
@import url(http://weloveiconfonts.com/api/?family=fontawesome); | |
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); | |
// Vendor | |
[class*="fontawesome-"]:before { | |
font-family: 'FontAwesome', sans-serif; | |
} | |
// Variables | |
$base__bgcolor: #2c3338; | |
$base__color: #606468; | |
$base__font-family-fallback: sans-serif; | |
$base__font-family: 'Open Sans'; | |
$base__font-size: .875rem; | |
$base__font-weight: 400; | |
$base__line-height: 1.5; | |
$form--login__border-radus: .25rem; | |
$form--login__color: #606468; | |
$form--login__label__bgcolor: #363b41; | |
$form--login__input__bgcolor: #3b4148; | |
$form--login__input__bgcolor--hover: #434A52; | |
$form--login__submit__bgcolor: #ea4c88; | |
$form--login__submit__bgcolor--hover: #d44179; | |
$form--login__submit__color: #eee; | |
$grid__container__max-width: 20rem; | |
$grid__container__width: 90%; | |
$link__color: #eee; | |
// Base | |
* { | |
box-sizing: border-box; | |
} | |
html { | |
height: 100%; | |
} | |
body { | |
background-color: $base__bgcolor; | |
color: $base__color; | |
font: $base__font-weight #{$base__font-size}/#{$base__line-height} $base__font-family, $base__font-family-fallback; | |
margin: 0; | |
min-height: 100%; | |
} | |
a { | |
color: $link__color; | |
outline: 0; | |
text-decoration: none; | |
&:focus, | |
&:hover { | |
text-decoration: underline; | |
} | |
} | |
input { | |
border: 0; | |
color: inherit; | |
font: inherit; | |
margin: 0; | |
outline: 0; | |
padding: 0; | |
transition: background-color .3s; | |
} | |
// Layout | |
.site { | |
&__container { | |
flex: 1; | |
padding: 3rem 0; | |
} | |
} | |
// Forms | |
.form { | |
input { | |
&[type="password"], | |
&[type="text"], | |
&[type="submit"] { | |
width: 100%; | |
} | |
} | |
&--login { | |
color: $form--login__color; | |
label, | |
input[type="text"], | |
input[type="password"], | |
input[type="submit"] { | |
border-radius: $form--login__border-radus; | |
padding: 1rem; | |
} | |
label { | |
background-color: $form--login__label__bgcolor; | |
border-bottom-right-radius: 0; | |
border-top-right-radius: 0; | |
padding-left: 1.25rem; | |
padding-right: 1.25rem; | |
} | |
input { | |
&[type="text"], | |
&[type="password"] { | |
background-color: $form--login__input__bgcolor; | |
border-bottom-left-radius: 0; | |
border-top-left-radius: 0; | |
&:focus, | |
&:hover { | |
background-color: $form--login__input__bgcolor--hover; | |
} | |
} | |
&[type="submit"] { | |
background-color: $form--login__submit__bgcolor; | |
color: $form--login__submit__color; | |
font-weight: bold; | |
text-transform: uppercase; | |
&:focus, | |
&:hover { | |
background-color: $form--login__submit__bgcolor--hover; | |
} | |
} | |
} | |
} | |
&__field { | |
display: flex; | |
margin-bottom: 1rem; | |
} | |
&__input { | |
flex: 1; | |
} | |
} | |
// Utilities | |
.align { | |
align-items: center; | |
display: flex; | |
flex-direction: row; | |
} | |
.hidden { | |
border: 0; | |
clip: rect(0 0 0 0); | |
height: 1px; | |
margin: -1px; | |
overflow: hidden; | |
padding: 0; | |
position: absolute; | |
width: 1px; | |
} | |
.text { | |
&--center { | |
text-align: center; | |
} | |
} | |
// Grid | |
.grid { | |
&__container { | |
margin: 0 auto; | |
max-width: $grid__container__max-width; | |
width: $grid__container__width; | |
} | |
} |