HTML
<div class="body" onload="appearOn()">
<div class="container">
<div id="signup" class="row">
<div class="col-xs-6 col-md-6 col-lg-6" style="padding-left: 0px; padding-right: 0px;">
<div id="signup-img"></div>
</div>
<div id="signup-side" class="col-xs-6 col-md-6 col-lg-6">
<form id="form" name="form" action="#">
<input type="text" placeholder="Enter Email" name="email" required>
<input type="password" placeholder="Enter Password" name="psw" required>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
</form>
<div>
<button id="log-in" type="submit" name="submit" onclick="reload()">Sign Up</button>
<span class="sign-up"> <small>Need an account ?</small>
<button id="sign-up" type="button">Log In</button>
</span>
</div>
</div>
</div>
</div>
</div>
SCSS
//test
// div{
// border: 1px solid red;
// }
$input: #F2F1EF;
$input-focus: #FE5031;
//general
div.body{
//position: absolute;
height: 100vh;
width: 100%;
background: #FF512F; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #DD2476, #FF512F); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #DD2476, #FF512F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
padding-top: 4em;
}
#signup{
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
background-color: #fff;
width: 100%;
//border-radius: 10px;
overflow: hidden;
transition: all 2s ease;
}
#signup-img{
background: url("https://cdn.magdeleine.co/wp-content/uploads/2014/06/5891044235_9ac099f370_o.jpg");
width: 100%;
height: 400px;
background-size: cover;
}
#signup-side{
padding-top: 4em;
padding-bottom: 2em;
background-color: #fff;
height: 400px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
padding-left: 2.5em;
input{
border: none;
border-bottom: 1.3px solid $input;
width: 85%;
margin-bottom: 3em;
padding: 5px 10px;
transition: all 1s ease;
color: grey;
&:focus{
outline: none;
border-bottom: 1px solid $input-focus;
}
}
#log-in{
background: #FE5031;
border: none;
padding: 10px 20px;
margin-right: 1em;
color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
&:focus{
outline: none;
}
}
span.sign-up{
color: #D2D7D3;
}
#sign-up{
background: none;
border: none;
border-bottom: 0.5px dotted #D2D7D3;
color: #AEA8D3;
transition: 1s;
&:hover{
color: $input;
}
&:focus{
outline: none;
}
}
}
JAVASCRIPT
var mainElem = document.getElementById("signup");
mainElem.style.position = 'relative';
function appearOn(){
mainElem.style.top = -1000 + 'px';
setTimeout(
function(){
mainElem.style.top = 0 + 'px';
}, 500);
}
appearOn();
