LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
*,
*:before,
*:after{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	height: 100vh;
	font-family: 'Open Sans', sans-serif;
	background: rebeccapurple;
}

.wrapper{
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
}

.login_form,
.login_form *{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.login_form{
	width: 60vw;
}

.login_form.is_closed .left_side{
	-webkit-transform: translateX(50%);
	        transform: translateX(50%);
}

.login_form.is_closed .right_side{
	-webkit-transform: translateX(-50.1%);
	        transform: translateX(-50.1%);
}

.left_side{
	width: 50%;
	height: 500px;
	background-image: url("https://cdn.pixabay.com/photo/2017/08/05/13/15/people-2583509_960_720.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right;
	position: relative;
	padding: 8% 5%;
	z-index: 2;
	-webkit-transform: translateX(0);
	        transform: translateX(0);
	-webkit-transition: all .35s;
	transition: all .35s;
}

.left_side:after{
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #1616CB;
	-webkit-filter: opacity(.6);
	        filter: opacity(.6);
}

.content{
	position: relative;
	z-index: 1;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	color: #fff;
}

.content h1{
	font-size: 90px;
	line-height: .9;
	margin-bottom: 20px;
}

h1 + p{
	margin-bottom: 40px;
}

.content p{
	font-size: 14px;
}

.login{
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}

.login p{
	margin-bottom: 15px;
}

.social_login a{
	width: 80px;
	height: 40px;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	text-decoration: none;
	color: #fff;
	border-radius: 40px;
	position: relative;
	overflow: hidden;
	box-shadow: 10px 10px 6px rgba(0,0,0,.3);
	-webkit-transition: all .35s;
	transition: all .35s;
}

.social_login a.google{
	background-color: #ea4335;
}

.social_login a.google span{
	color: #ea4335;
}

.social_login a.fb{
	background-color: #3b5998;
}

.social_login a.fb span{
	color: #3b5998;
}

.social_login a.tw{
	background-color: #1da1f2;
}

.social_login a.tw span{
	color: #1da1f2;
}

.social_login a:nth-child(2){
	margin: 0 10px;
}

.social_login a span{
	font-size: 14px;
	position: absolute;
	background: #fff;
	top: 0;
	left: 0;
	width: 150px;
	height: 100%;
	border-radius: 40px;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-transform: translateX(100%);
	        transform: translateX(100%);
	-webkit-transition: all .35s;
	transition: all .35s;
}

.social_login a:hover{
	width: 150px;
}

.social_login a:hover span{
	-webkit-transform: translateX(0);
	        transform: translateX(0);
}

.right_side{
	padding: 8% 5%;
	width: 50%;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	position: relative;
	background: #fff;
	-webkit-transform: translateX(0);
	        transform: translateX(0);
	-webkit-transition: all .35s;
	transition: all .35s;
}

.close{
	position: absolute;
	top: 15px;
	right: 5px;
	width: 20px;
	height: 30px;
}

.close:before,
.close:after{
	position: absolute;
	content: "";
	width: 100%;
	height: 2px;
	background: #ccc;
	top: 0;
}

.close:before{
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
}

.close:after{
	-webkit-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}

.heading{
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}

.heading h3{
	margin-bottom: 10px;
}

.heading p{
	display: block;
	font-size: 12px;
	color: #999;
	margin-bottom: 30px;
}

.heading p *{
	display: inline-block;
}

.heading p a{
	text-decoration: none;
	color: #1616CB;
}

.right_side form{
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}

form [type="text"],
form [type="password"]{
	width: 100%;
	padding: 8px 5px;
	border: 0;
	border-bottom: 1px solid #999;
	margin-bottom: 15px;
	outline: 0;
}

.password{
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	margin-bottom: 30px;
}

.cbox [type="checkbox"]{
	-moz-appearance: none;
	     appearance: none;
	-webkit-appearance: none;
	width: 30px;
	height: 17px;
	background: #ccc;
	border-radius: 17px;
	box-shadow: 2px 2px 2px rgba(0,0,0,.3);
	overflow: hidden;
	position: relative;
	outline: 0;
	cursor: pointer;
	margin-right: 10px;
	-webkit-transition: all .35s;
	transition: all .35s;
}

.cbox [type="checkbox"]:after{
	position: absolute;
	content: "";
	-webkit-transition: all .35s;
	transition: all .35s;
	box-shadow: 1px 1px 2px rgba(0,0,0,.2);
}

.cbox [type="checkbox"]:after{
	width: 13px;
	height: 13px;
	background: #fff;
	border-radius: 50%;
	top: 2px;
	left: 2px;
}

.cbox [type="checkbox"]:checked{
	background: #1da1f2;
}

.cbox [type="checkbox"]:checked:after{
	left: calc(100% - 15px);
}

.cbox label,
.password a{
	font-size: 13px;
	color: #aaa;
	text-decoration: none;
	cursor: pointer;
}

form button{
	width: 100px;
	height: 40px;
	border-radius: 40px;
	border: 0;
	background: #84d14f;
	-ms-flex-item-align: end;
	    align-self: flex-end;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	box-shadow: 15px 15px 5px rgba(132, 209, 79, .3);
	color: #fff;
	cursor: pointer;
}
JS
const loginForm = document.querySelector(".login_form");
const login = loginForm.querySelectorAll(".social_login a");
const close = loginForm.querySelector(".close");

function openForm(){
    loginForm.classList.remove("is_closed");
}

function closeForm(){
    loginForm.classList.add("is_closed");
}

login.forEach(loginItem => loginItem.addEventListener("click", openForm));

close.addEventListener("click", closeForm);
Host Instantly Drag and Drop Website Builder

 

Description

Login form made in split screen using html, css and little bit of javascript.
Term
Wed, 11/29/2017 - 11:23

Related Codes

Pen ID
Pen ID
Pen ID