<section class="container">
<article class="half">
<h1>Azure</h1>
<div class="tabs">
<span class="tab signin active"><a href="#signin">Sign in</a></span>
<span class="tab signup"><a href="#signup">Sign up</a></span>
</div>
<div class="content">
<div class="signin-cont cont">
<form action="#" method="post" enctype="multipart/form-data">
<input type="email" name="email" id="email" class="inpt" required="required" placeholder="Your email">
<label for="email">Your email</label>
<input type="password" name="password" id="password" class="inpt" required="required" placeholder="Your password">
<label for="password">Your password</label>
<input type="checkbox" id="remember" class="checkbox" checked>
<label for="remember">Remember me</label>
<div class="submit-wrap">
<input type="submit" value="Sign in" class="submit">
<a href="#" class="more">Forgot your password?</a>
</div>
</form>
</div>
<div class="signup-cont cont">
<form action="#" method="post" enctype="multipart/form-data">
<input type="name" name="name" id="name" class="inpt" required="required" placeholder="Your name">
<label for="name">Your name</label>
<input type="email" name="email" id="email" class="inpt" required="required" placeholder="Your email">
<label for="email">Your email</label>
<input type="password" name="password" id="password" class="inpt" required="required" placeholder="Your password">
<label for="password">Your password</label>
<div class="submit-wrap">
<input type="submit" value="Sign up" class="submit">
<a href="#" class="more">Terms and conditions</a>
</div>
</form>
</div>
</div>
</article>
<div class="half bg"></div>
</section>@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
$bg: #f8f8f8;
$white: #ffffff;
$blue: #263238;
$grey: #d9d9d9;
$plchldr: #999999;
* {@include box-sizing(border-box); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;}
@mixin placeholder {
&::-webkit-input-placeholder {@content;}
&:-moz-placeholder {@content;}
&::-moz-placeholder {@content;}
&:-ms-input-placeholder {@content;}
}
body {
font-family: 'Lato', sans-serif;
background-color: $bg;
.container {
position: relative;
overflow: hidden;
width: 700px;
height: 500px;
margin: 80px auto 0;
background-color: $white;
@include box-shadow(rgba(0,0,0,.1) 0px 10px 30px);
.half {
float: left;
width: 50%;
height: 100%;
padding: 58px 40px 0;
&.bg {
//background: url(https://i.imgur.com/J2JddJ4.jpg);
background-image:url("https://s7.postimg.org/boj7tcxhn/image.jpg");
background-size: 400px;
background-repeat: no-repeat;
}
}
h1 {
font-size: 18px;
font-weight: 700;
margin-bottom: 23px;
text-align: center;
text-indent: 6px;
letter-spacing: 7px;
text-transform: uppercase;
color: $blue;
}
.tabs {
width: 100%;
margin-bottom: 29px;
border-bottom: 1px solid $grey;
.tab {
display: inline-block;
margin-bottom: -1px;
padding: 20px 15px 10px;
cursor: pointer;
letter-spacing: 0;
border-bottom: 1px solid $grey;
@include user-select(none);
transition: all 0.1s ease-in-out;
a {
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
color: $grey;
transition: all 0.1s ease-in-out;
}
&.active,&:hover {
a {
color: $blue;
}
}
&.active {
border-bottom: 1px solid $blue;
}
}
}
.content {
form {
position: relative;
height: 287px;
}
label, input, .more {
&:first-of-type {
@include animation(slideIn 0.4s cubic-bezier(0.37, 0.82, 0.2, 1));
}
&:nth-of-type(2) {
@include animation(slideIn 0.5s cubic-bezier(0.37, 0.82, 0.2, 1));
}
&:nth-of-type(3) {
@include animation(slideIn 0.6s cubic-bezier(0.37, 0.82, 0.2, 1));
}
}
label {
font-size: 12px;
color: $blue;
@include user-select(none);
&:not([for='remember']) {
display: none;
}
}
input {
&.inpt {
font-size: 14px;
display: block;
width: 100%;
height: 42px;
margin-bottom: 12px;
padding: 16px 13px;
color: $plchldr;
border: 1px solid $grey;
background: transparent;
@include border-radius(2px);
@include placeholder {
font-size: 14px;
color: $plchldr;
font-family: 'Lato', sans-serif;
};
&:focus {
border-color: $plchldr;
}
}
&.submit {
font-size: 12px;
line-height: 42px;
display: block;
width: 100%;
height: 42px;
cursor: pointer;
vertical-align: middle;
letter-spacing: 2px;
text-transform: uppercase;
color: $blue;
border: 1px solid $blue;
background: transparent;
@include border-radius(2px);
&:hover {
background-color: $blue;
color: $white;
@include transition(all 0.2s);
}
}
&:focus {
outline: none;
}
}
.checkbox {
margin-top: 4px;
overflow: hidden;
clip: rect(0 0 0 0);
width: 0; height:0;
margin: 17px -1px; padding: 0;
border: 0;
opacity: 0;
visibility: hidden;
& + label {
vertical-align: middle;
display: inline-block;
width: 50%;
&:before {
content: "\A";
color: $plchldr;
font-family: Verdana;
font-weight: bold;
font-size: 8px;
line-height: 10px;
text-align: center;
display: inline-block;
vertical-align: middle;
position:relative;
@include border-radius(2px);
background: transparent;
border: 1px solid $grey;
width: 11px; height: 11px;
margin: -2px 8px 0 0;
}
}
&:checked + label {
&:before {
content: "✓";
}
}
}
.submit-wrap {
position: absolute;
bottom: 0;
width: 100%;
a {
font-size: 12px;
display: block;
margin-top: 20px;
text-align: center;
text-decoration: none;
color: $plchldr;
&:hover {
text-decoration: underline;
}
}
}
.signup-cont { display: none; }
}
}
}
@keyframes slideIn {
0% {
@include opacity(0);
margin-left: -320px;
}
100% {
@include opacity(1);
margin-left: 0px;
}
}
@-webkit-keyframes slideIn {
0% {
@include opacity(0);
margin-left: -320px;
}
100% {
@include opacity(1);
margin-left: 0px;
}
}
.credits {
display: block;
position: absolute;
right: 0;
bottom: 0;
color: $plchldr;
font-size: 14px;
margin: 0 10px 10px 0;
a {
@include opacity(0.8);
color: inherit;
font-weight: 700;
text-decoration: none;
}
}$('.tabs .tab').click(function(){
if ($(this).hasClass('signin')) {
$('.tabs .tab').removeClass('active');
$(this).addClass('active');
$('.cont').hide();
$('.signin-cont').show();
}
if ($(this).hasClass('signup')) {
$('.tabs .tab').removeClass('active');
$(this).addClass('active');
$('.cont').hide();
$('.signup-cont').show();
}
});
$('.container .bg').mousemove(function(e){
var amountMovedX = (e.pageX * -1 / 30);
var amountMovedY = (e.pageY * -1 / 9);
$(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px');
});
External CSS
This Pen doesn't use any external CSS resources.