cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>Login form</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width">
</head>
<body>
	<div class="iphone-wrap">
		<div class="login-wrap">
			<div class="login-form-wrap">
				<div class="card-holder-wrap">
					<div class="hole"></div>
					<div class="l-stroke"></div>
					<div class="r-stroke"></div>
					<div class="ring-large-wrap"></div>
					<div class="ring-small-wrap"></div>
				</div>
				<form action="#" class="login-form">
					<h1 class="freeb"><img src="https://i.imgur.com/U4E6o3x.png" alt="freebies gallery"></h1>
					<div class="input-wrap">
						<label for="" class="user-id"><input type="text" name="userId" placeholder="Enter your User ID"></label> 
						<hr class="form-hr">
						<label for="" class="password"><input type="password" name="password" placeholder="Enter Your Password"></label> 
					</div>
					<div class="remember">
						<span>Remember me</span>
						<div class="switch">
						    <input type="checkbox" id="switch" class="switch-check">
						    <label for="switch" class="switch-label">				   
					    	<span class="switch-slider switch-slider-on"></span>
        					<span class="switch-slider switch-slider-off"></span></label>

						</div>
					</div>
					<input type="submit" class="button" value="Login">
					<a href="#" class="forgot">Forgot Password?</a>
				</form>
			</div>
		</div>
	</div>
</body>
</html>
            
          
!
            
              @import "compass/css3";

*, *:after, *:before {
  -webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
}

input::-webkit-input-placeholder {
    color: #666;
}
input:-moz-placeholder {
    color: #666;
}
input:-ms-input-placeholder {
    color: #666;
}

body {
	font-family: Helvetica,sans-serif;
	font-size: 22px;
}

$ringBoxShadow: (0 0 3px 1px rgba(0, 0, 0, 0.5),0 0 4px 0px rgba(255, 255, 255, 0.5) inset,0 0 4px 0px rgba(255, 255, 255, 0.5));
$logFormBoxShadow: 0 0 3px 1px rgba(0, 0, 0, 0.5),0 0 4px 0px rgba(255, 255, 255, 0.5) inset,0 0 4px 0px rgba(255, 255, 255, 0.5),0 0 65px 25px rgba(255, 255, 255, 0.14);

@mixin glass-wrap($width, $height, $boxShadow) {
	width: $width;
	height: $height;
	background: rgba(54, 54, 54, 0.7);
	border: 1px solid #767676 {
		radius: 15px;
	}
	box-shadow: $boxShadow;	
}

@mixin hole-in-ring($sizeOne, $sizeTwo, $border,$margin-top) {
	&:before {
			width: $sizeOne;
			height: $sizeOne;
			border-radius: 50%;
			content: '';
			display: block;
			margin: 15px auto 0 auto;
			background: #cdcdcd;
			background: -moz-linear-gradient(top,  #cdcdcd 1%, #cbcbcb 18%, #5c5c5c 43%, #424242 53%, #5c5c5c 70%, #bcbcbc 93%, #d6d6d6 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#cdcdcd), color-stop(18%,#cbcbcb), color-stop(43%,#5c5c5c), color-stop(53%,#424242), color-stop(70%,#5c5c5c), color-stop(93%,#bcbcbc), color-stop(100%,#d6d6d6));
			background: -webkit-linear-gradient(top,  #cdcdcd 1%,#cbcbcb 18%,#5c5c5c 43%,#424242 53%,#5c5c5c 70%,#bcbcbc 93%,#d6d6d6 100%);
			background: -o-linear-gradient(top,  #cdcdcd 1%,#cbcbcb 18%,#5c5c5c 43%,#424242 53%,#5c5c5c 70%,#bcbcbc 93%,#d6d6d6 100%);
			background: -ms-linear-gradient(top,  #cdcdcd 1%,#cbcbcb 18%,#5c5c5c 43%,#424242 53%,#5c5c5c 70%,#bcbcbc 93%,#d6d6d6 100%);
			background: linear-gradient(to bottom,  #cdcdcd 1%,#cbcbcb 18%,#5c5c5c 43%,#424242 53%,#5c5c5c 70%,#bcbcbc 93%,#d6d6d6 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdcdcd', endColorstr='#d6d6d6',GradientType=0 );
		}
		
		&:after {
			width: $sizeTwo;
			height: $sizeTwo;
			border: $border solid #fff;
			background:#000;
			content: '';
			display: block;
			border-radius: 50%;
			margin: $margin-top auto 0 auto;
		}
}

@mixin inputs($padding) {
	display: block;
	width: 350px;
	border-radius: 15px 15px 0 0;
	margin: 7px 5px 0 7px;
	padding: $padding;
	color: #666;
	outline: none;
	border: none;
}

.iphone-wrap {
	background: url(https://i.imgur.com/G2YfjuW.jpg);
	width: 820px;
	height: 1642px;
	padding: 369px 200px 200px 109px;
}

.login-wrap {
	width: 640px;
	height: 927px;
	position: relative;
	padding: 194px 0 0 56px;
	overflow: hidden;
}
      
.login-form-wrap {
	@include glass-wrap($width: 528px, $height: 702px, $boxShadow: $logFormBoxShadow);
}

.card-holder-wrap {
	margin: 25px auto 40px auto;
	width: 145px;
	position: relative;
}
	.hole {
		background: #000;
		height: 20px;
		border-radius: 10px;
		box-shadow: 0 1px 3px 1px rgba(255, 255, 255, 0.56);
	}
	.ring-large-wrap {
		margin: -170px auto 0 auto;
		z-index: 2;
		position: relative;
		@include glass-wrap($width: 118px, $height: 165px, $boxShadow: $ringBoxShadow);
		@include hole-in-ring($sizeOne:60px,$sizeTwo:50px, $border:7px,$margin-top:-55px);
	}

	.ring-small-wrap {
		margin:-72px auto 0 auto;
		z-index: 3;
		position: relative;
		@include glass-wrap($width: 118px, $height: 72px, $boxShadow: $ringBoxShadow);
		@include hole-in-ring($sizeOne:42px,$sizeTwo:34px,$border:5px,$margin-top:-38px);
	}

	.l-stroke {
		position: absolute;
		top: -223px;
		left: 40px;
		width: 34px;
		z-index: 1;
		height: 108px;
		background: url(https://i.imgur.com/HECNjze.png);
	}

	.r-stroke {
		position: absolute;
		top: -223px;
		left: 66px;
		width: 34px;
		z-index: 3;
		height: 108px;
		background: url(https://i.imgur.com/d8qMj72.png);

	}

.login-form {
	background: #fff;
	width: 446px;
	height: 580px;
	margin:0 auto;
	border-radius: 15px;
	box-shadow: 0 0 25px 5px rgba(255, 255, 255, 0.55);
	padding: 55px 20px 0 20px;
	text-align: center;
	background: url(https://i.imgur.com/hzzCvwa.png) no-repeat;
}
	.freeb {
		margin:0 auto 40px auto;
		width: 253px;
		height: 65px;
		display: block;
	}

	.input-wrap {
		border: 1px solid #dbdbdb;
		height: 142px;
		border-radius: 15px;
		box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.13) inset;
		background: #fff;
	}
		.user-id {
			background: url(https://i.imgur.com/OSo6WLs.png) no-repeat right;
			width: 385px;
			display: block;
			& input {
					$pad: 18px 25px 8px 15px;
					@include inputs ($padding: $pad);
				}
		}
		.form-hr {
			border:none;
			border-top: 1px solid #dbdbdb;
		}
		.password {
			background: url(https://i.imgur.com/PhJdR34.png) no-repeat right;
			width: 385px;
			display: block;
			& input {
				$pad: 12px 25px 9px 15px;
				@include inputs ($padding: $pad);
			}
		}

	.remember {
		border: 1px solid #dbdbdb;
			background: #fff;
		height: 60px;
		border-radius: 15px;
		box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.13) inset;
		margin: 20px 0 30px 0;
		padding: 15px 0 9px 20px;
		color: #666;
		text-align: left;
		& span {
			vertical-align: top;
		}
	}
	    .switch,
		.switch-label,
		.switch-slider {
			width:108px;
			height:31px;
			}
		.switch {
			position:relative;
			display:inline-block;
			margin-left: 110px;
			
			}
			.switch-check {
				position:absolute;
				visibility:hidden;
			}
			.switch-label,
			.switch-slider {
				position:absolute;
				top:0;
			}
			.switch-label {
				left:0;
				cursor: pointer;
			}
			.switch-slider {
				border-radius:3px;
		        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.21),
		        	 		0 18px 0 rgba(0, 0, 0, 0.03) inset,
		        	 		0 1px 1px rgba(0, 0, 0, 0.03) inset;
    	 		-webkit-transition:width 0.2s linear;
				-moz-transition:width 0.2s linear;
				-o-transition:width 0.2s linear;
				transition:width 0.2s linear;
			}
			.switch-slider-on {
				left:0;
				background: url(https://i.imgur.com/JcZNuXn.png) no-repeat left;
			}
			.switch-slider-off {
				right:0;
				background: url(https://i.imgur.com/9DfUgx3.png) no-repeat right;
			}
				.switch-slider-off:after {
					position: absolute;
					top: 0;
					left: 0;
					width: 46px;
					border-radius: 3px;
					height: 31px;
					content: '';
					box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 1px 0 0 rgba(0, 0, 0, 0.4);
					background: #c8c6c6;
					background: -moz-linear-gradient(top,  #c8c6c6 0%, #efebeb 100%);
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c8c6c6), color-stop(100%,#efebeb));
					background: -webkit-linear-gradient(top,  #c8c6c6 0%,#efebeb 100%);
					background: -o-linear-gradient(top,  #c8c6c6 0%,#efebeb 100%);
					background: -ms-linear-gradient(top,  #c8c6c6 0%,#efebeb 100%);
					background: linear-gradient(to bottom,  #c8c6c6 0%,#efebeb 100%);
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8c6c6', endColorstr='#efebeb',GradientType=0 );

			}
			.switch-label:active .switch-slider-off:after {
				background:#D5D5D5;
				background:-webkit-linear-gradient(#C8C8C8, #E4E4E4);
				background:-moz-linear-gradient(#C8C8C8, #E4E4E4);
				background:-o-linear-gradient(#C8C8C8, #E4E4E4);
				background:linear-gradient(#C8C8C8, #E4E4E4);
			}
			.switch-check:checked + .switch-label .switch-slider-on {
				width:108px;
			}
			.switch-check:checked + .switch-label .switch-slider-off {
				width:45px;
			}

	.button {
		width: 406px;
		height: 62px;
		background: #6b8bad;
		border-radius: 15px;
		border:none;
		color:#fff;
		text-shadow: 0 1px 2px black;
		font-size: 26px;
		font-weight: bold;
		margin-bottom: 40px;
		background: -moz-linear-gradient(top,  #6b8bad 0%, #39577f 48%, #254b72 52%, #102d4c 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6b8bad), color-stop(48%,#39577f), color-stop(52%,#254b72), color-stop(100%,#102d4c));
		background: -webkit-linear-gradient(top,  #6b8bad 0%,#39577f 48%,#254b72 52%,#102d4c 100%);
		background: -o-linear-gradient(top,  #6b8bad 0%,#39577f 48%,#254b72 52%,#102d4c 100%);
		background: -ms-linear-gradient(top,  #6b8bad 0%,#39577f 48%,#254b72 52%,#102d4c 100%);
		background: linear-gradient(to bottom,  #6b8bad 0%,#39577f 48%,#254b72 52%,#102d4c 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b8bad', endColorstr='#102d4c',GradientType=0 );

		&:hover {
			background: #7290b0;
			background: -moz-linear-gradient(top,  #7290b0 0%, #3d5e89 48%, #29537d 52%, #133559 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7290b0), color-stop(48%,#3d5e89), color-stop(52%,#29537d), color-stop(100%,#133559));
			background: -webkit-linear-gradient(top,  #7290b0 0%,#3d5e89 48%,#29537d 52%,#133559 100%);
			background: -o-linear-gradient(top,  #7290b0 0%,#3d5e89 48%,#29537d 52%,#133559 100%);
			background: -ms-linear-gradient(top,  #7290b0 0%,#3d5e89 48%,#29537d 52%,#133559 100%);
			background: linear-gradient(to bottom,  #7290b0 0%,#3d5e89 48%,#29537d 52%,#133559 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7290b0', endColorstr='#133559',GradientType=0 );
		}
		&:active {
			background: #6385a9;
			background: -moz-linear-gradient(top,  #6385a9 0%, #375479 48%, #24496e 52%, #0f2b49 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6385a9), color-stop(48%,#375479), color-stop(52%,#24496e), color-stop(100%,#0f2b49));
			background: -webkit-linear-gradient(top,  #6385a9 0%,#375479 48%,#24496e 52%,#0f2b49 100%);
			background: -o-linear-gradient(top,  #6385a9 0%,#375479 48%,#24496e 52%,#0f2b49 100%);
			background: -ms-linear-gradient(top,  #6385a9 0%,#375479 48%,#24496e 52%,#0f2b49 100%);
			background: linear-gradient(to bottom,  #6385a9 0%,#375479 48%,#24496e 52%,#0f2b49 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6385a9', endColorstr='#0f2b49',GradientType=0 );
			padding: 1px 0 0 0;
		}
	}

	.forgot {
		color: #1e4168;
		font-size: 19px;
		text-decoration: none;
		padding-bottom: 0px;
		border-bottom: 1px solid #1e4168;
	}
            
          
!
999px
Loading ..................

Console