<main>

  <section class='login'>
    <div class='login--wrap clearfix'>
      <div class="row clearfix">
        <div class="col col-6 login--l">
          <div class="title"><span class='text'>Login</span></div>
          <div class='login--body'>
            <label>
              <div class='label'>Email address</div>
              <input type='text' placeholder='john@doe.com' required />
            </label>
            <label>
              <div class='label'>Password</div>
              <input type='password' placeholder='*********' required />
            </label>
            <div class='sbmt'>
              <button class='sbmt--btn'>Login</button>
            </div>
          </div>

          <button class='or'>OR</button>
        </div>
        <div class="col col-6 login--s">
          <div class="title"><span class='text'>Signup</span></div>
          <div class='login--body'>
            <label>
              <div class='label'>Username</div>
              <input type='text' placeholder='starkiller97' required />
            </label>
            <label>
              <div class='label'>Email address</div>
              <input type='text' placeholder='john@doe.com' required />
            </label>
            <label>
              <div class='label'>Password</div>
              <input type='password' placeholder='*********' required />
            </label>
            <label>
              <div class='label'>Confirm password</div>
              <input type='password' placeholder='*********' required />
            </label>
            <div class='sbmt'>
              <button class='sbmt--btn'>Signup</button>
            </div>
          </div>
        </div>
      </div>
      <div class='login--alt row clearfix'>
        <div class='title'><span class='text'>Login via...</span></div>
        <div class='btn-set'>
          <button class='api google'>Google</button>
          <button class='api facebook'>Facebook</button>
        </div>
      </div>
    </div>
  </section>

</main>
$th_light:#E1F5C4;
$th_red:#E84A5F;
$th_lred:#FF847C;
$th_dark:#2a363b;
$th_blue:#355C7D;

@import url(https://fonts.googleapis.com/css?family=Roboto:400,900);
$font:"Roboto",Helvetica,sans-serif;

html,body {
	margin:0;
	padding:0;
  background-color:#222;
}

:root {
	font-size:16px;
}

* {
	box-sizing:border-box;
	font-family:$font;
	font-size:1em;
	color:#888;
	font-weight:500;
}

button {
	outline:none;
	border:none;
	background-color:transparent;
	cursor:pointer;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

* html .clearfix {
	zoom: 1;
}
*:first-child+html .clearfix {
	zoom: 1;
}

.row {
	float:left;
	width:100%;

	.col {
		float:left;
	}

	.cor {
		float:right;
	}

	.col,.cor {
		width:100%;

		$w:100%/12;

		@for $i from 1 through 12 {
			&-#{$i} {
				width:$i * $w;
			}
		}
	}
}


@mixin strike($line,$bg) {
	text-align:center;
	position:relative;
	margin:30px auto;

	&::before {
		content:" ";
		position:absolute;
		top:50%;
		left:0;
		height:1px;
		width:100%;
		background-color:$line;
	}

	.text {
		position:relative;
		background-color:$bg;
		padding:3px 10px;
		display:inline-block;
		font-size:1.2em;
		font-weight:bold;
	}
}

@media all and (max-width: 800px) {
	.or {
		display:none;
	}
	
	.row {
		.col,.cor {
			width:100% !important;
		}
	}
}

.login {
	padding:10px;

	&--wrap {
		max-width:900px;
		min-width:200px;
		margin:50px auto;
		box-shadow:0 0 30px 10px rgba(0,0,0,.3);
	}

	&--l,&--s {
		height:630px;
		position:relative;
	}

	&--s {
		background-color:$th_dark;
		z-index:0;

		* {
			color:#fff;
		}

		.title {
			@include strike(#fff,$th_dark);

			.text {
				color:#fff;
			}
		}

		label input {
			color:#fff;
			border-bottom-color:#fff;
		}
	}

	&--alt {
		background-color:$th_red;

		.title {
			@include strike(#fff,$th_red);

			.text {
				color:#fff;
			}
		}
	}

	&--l {
		background-color:#fff;

		.title {
			@include strike($th_dark,#fff);

			.text {
				color:$th_dark;
			}
		}

		* {
			color:$th_dark;
		}
	}

	&--body {
		padding:0 20px;
	}
}

.sbmt {
	text-align:right;
	padding-right:20px;

	&--btn {
		padding:10px 15px;
		background-color:$th_blue;
		color:#fff;
		font-weight:bold;
		transition:all 0.2s ease-in-out;

		&:hover {
			background-color:$th_red;
		}
	}
}

.or {
	width:50px;
	height:50px;
	background-color:#fff;
	box-shadow:0 0 5px 1px rgba(0,0,0,.4);
	border-radius: 50%;
	position:absolute;
	bottom:0;
	left:100%;
	transform:translate(-50%,50%);
	z-index:3;
	cursor:default;
	font-weight:bold;
}

label {
	display:block;
	margin:20px auto;
	padding:10px;

	.label {
		padding:0 0 2px 10px;
	}

	input {
		display:block;
		width:100%;
		border:none;
		outline:none;
		border-bottom:1px solid #888;
		background-color:transparent;
		padding:8px 15px;
	}
}

.title {
	font-size:1.3em;
	padding:20px 0;
	text-align:center;
}

.btn-set {
	min-width:200px;
	max-width:500px;
	margin:20px auto;
}

.api {
	display:block;
	width:100%;
	padding:20px;
	background-color:#dd4b39;
	box-shadow:0 0 5px 1px rgba(0,0,0,.4);
	color:#fff;
	margin-bottom:8px;
	font-weight:bold;

	&.facebook {
		background-color:#3b5998;
	}
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.