LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
body{
			background: #e5e5e5;
		}
		#wrapper{
			margin: 100px auto;
			height: 90px;
			width: 299px;
			background: url('https://dl.dropbox.com/s/dfttxitcmf86nfx/bg.png');
			border: 1px solid #133f62;
			border-radius: 5px;
			box-shadow: inset 0px 1px 0px rgba(255,255,255,0.3),
						inset 0px -25px 75px rgba(0,0,0,0.4),
						0px 1px 0px #133f62,
						0px 4px 5px rgba(0,0,0,0.5);
			text-align: center;
		}
		
		#text{
			position: relative;
			top: 5px;
			height: 15px;
			width: 275px;
			border: 1px solid #133f62;
			border-radius: 5px;
			box-shadow: 0px 1px 0px rgba(255,255,255,0.3),
						inset 0px 1px 3px rgba(0,0,0,0.5);
			margin-bottom: 5px;
			font-size: 15pt;
			padding: 10px 5px;
		}
	
		
		#text:focus{
			outline: none;
		}
		
		.pass{
			float: left;
			margin-left: 6px;
			border-right: none !important;
			width: 200px !important;
			border-bottom-right-radius: 0px !important;
			border-top-right-radius: 0px !important;
		}
		
		#login{
			position: relative;
			top: 5px;
			right: 6px;
			/*padding: 10px 20px;*/
			padding-top: 10px;
			padding-bottom: 10px;
			padding-left: 21px;
			padding-right: 20px;
			background: #119e00;
			float: right;
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
			border: 1px solid rgba(0,0,0,0.5);
			text-decoration: none;
			font-family: lucida grande;
			font-size: 9pt;
			box-shadow: inset 0px 1px 0px rgba(255,255,255,0.3),
						0px 1px 0px rgba(255,255,255,0.3);
			color: black;
			text-shadow: 0px 1px 0px rgba(255,255,255,0.4);
		}
		
		#login:active{
			border: 1px solid rgba(0,0,0,0.8);
			background: #0b6500;
			box-shadow: inset 0px 1px 3px rgba(0,0,0,0.2),
						0px 1px 0px rgba(255,255,255,0.3);
		}
		
		.animate {
			-webkit-animation-duration: 1.5s;
				-moz-animation-duration: 1.5s;
				-ms-animation-duration: 1.5s;
				-o-animation-duration: 1.5s;
				animation-duration: 1.5s;
			-webkit-animation-timing-function: ease-in-out;
				-moz-animation-timing-function: ease-in-out;
				-ms-animation-timing-function: ease-in-out;
				-o-animation-timing-function: ease-in-out;
				animation-timing-function: ease-in-out;
		}

		.dropIn {
			-webkit-animation-name: dropIn;
				-moz-animation-name: dropIn;
				-ms-animation-name: dropIn;
				-o-animation-name: dropIn;
				animation-name: dropIn;
		}

		@-webkit-keyframes dropIn {
			0% {
				-webkit-transform: translateY(-1000px);
			}
			25% {
				-webkit-transform: translateY(-1000px);
			}
			50% {
				-webkit-transform: translateY(-200px);
			}
			75% {
				-webkit-transform: translateY(15px);
			}
			85% {
				-webkit-transform: translateY(5px);
			}
			90% {
				-webkit-transform: translateY(2px);
			}
			100% {
				-webkit-transform: translateY(0);
			}
		}
		@-moz-keyframes dropIn {
			0% {
				-moz-transform: translateY(-1000px);
			}
			25% {
				-moz-transform: translateY(-1000px);
			}
			50% {
				-moz-transform: translateY(-200px);
			}
			75% {
				-moz-transform: translateY(15px);
			}
			85% {
				-moz-transform: translateY(5px);
			}
			90% {
				-moz-transform: translateY(2px);
			}
			100% {
				-moz-transform: translateY(0);
			}
		}
		@-ms-keyframes dropIn {
			0% {
				-ms-transform: translateY(-1000px);
			}
			25% {
				-ms-transform: translateY(-1000px);
			}
			50% {
				-ms-transform: translateY(-200px);
			}
			75% {
				-ms-transform: translateY(15px);
			}
			85% {
				-ms-transform: translateY(5px);
			}
			90% {
				-ms-transform: translateY(2px);
			}
			100% {
				-ms-transform: translateY(0);
			}
		}
		@-o-keyframes dropIn {
			0% {
				-o-transform: translateY(-1000px);
			}
			25% {
				-o-transform: translateY(-1000px);
			}
			50% {
				-o-transform: translateY(-200px);
			}
			75% {
				-o-transform: translateY(15px);
			}
			85% {
				-o-transform: translateY(5px);
			}
			90% {
				-o-transform: translateY(2px);
			}
			100% {
				-o-transform: translateY(0);
			}
		}
		@keyframes dropIn {
			0% {
				transform: translateY(-1000px);
			}
			25% {
				transform: translateY(-1000px);
			}
			50% {
				transform: translateY(-200px);
			}
			75% {
				transform: translateY(15px);
			}
			85% {
				transform: translateY(5px);
			}
			90% {
				transform: translateY(2px);
			}
			100% {
				transform: translateY(0);
			}
		}
JS
// login mockup Copyright 2013 Mackenzie Bobbitt. 

// contact @macbobbitt_
Host Instantly Drag and Drop Website Builder

 

Term
Wed, 11/29/2017 - 11:21

Related Codes

Pen ID
Pen ID
Pen ID