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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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.

            
              <html>
	<head>
		<meta charset="utf-8">
		<title>Login to Celyes</title>
	</head>
	<body class="login-body">
		<div class="row">
			<div class="input-cart col s12 m10 push-m1 z-depth-2 grey lighten-5">
				<div class="col s12 m5 login">
					<h4 class="center">Log in</h4>
					<br>
					<form action="check.php" method="post" autocomplete="off">
						<div class="row">
							<div class="input-field">
								<input type="text" id="user" name="username" class="validate" required="required">
								<label for="user">Username</label>
							</div>	
						</div>
						<div class="row">
							<div class="input-field">
								<input type="password" id="pass" name="password" class="validate" required="required">
								<label for="pass">Password</label>
							</div>	
						</div>
						<div class="row">
							<div class="switch col s6">
								<label>
									<input type="checkbox">
									<span class="lever"></span>
									Remember Me
								</label>
							</div>
							<div class="col s6">
								<button type="submit" name="login" class="btn waves-effect waves-light blue right">Log in</button>
							</div>
						</div>
					</form>
				</div>
				<!-- Signup form -->
				<div class="col s12 m7 signup">
				<div class="signupForm">
					<h4 class="center">Sign up</h4>
					<br>
					<form action="regCheck.php" name="signup" method="post" autocomplete="off">
						<div class="row">
							<div class="input-field col s12 m6">
								<input type="text" id="name-picked" name="namepicked" class="validate" required="required">
								<label for="name-picked">Pick a Username</label>
							</div>
							<div class="input-field col s12 m6">
								<input type="password" id="pass-picked" name="passpicked" class="validate" required="required">
								<label for="pass-picked">Password</label>
							</div>	
						</div>
						<div class="row">
							<div class="input-field email">
								<div class="col s12">
									<input type="text" id="email" name="email" class="validate" required="required">
									<label for="email">Your E-Mail</label>
								</div>
							</div>	
						</div>
					</form>
					<div class="row">
						<button type="submit" name="btn-signup" class="btn blue right waves-effect waves-light">Sign Up</button>
					</div>
					</div>
					<div class="signup-toggle center" >
						<h4 class="center">Have No Account ? <a href="#!">Sign Up</a></h4>
					</div>
				</div>
				<div class="col s12">
					<br>
          <div class="legal center">
					</div>
					<div class="legal center">
					<div class="col s12 m7 right">
						<p class="grey-text policy center">By signing up, you agree on our <a href="#!">Privacy Policy</a> and  <a href="#!">Terms of Use</a> including <a href="#!">Cookie Use</a>.</p>
					</div>
					<div class="col s12 m5">
						<p class="center grey-text" style="font-size: 14px;">Coding : <a href="http://fb.com/celyes17" class="main-title red-text">Celyes</a></p>
					</div>
					</div>

				</div>
			</div>
		</div>
		<div class="fixed-action-btn toolbar">
			<a class="btn-floating btn-large amber black-text">
				Login
			</a>
			<ul>
				<li><a class="indigo center" href="#!">Login with FB</a></li>
				<li><a class="blue center" href="#!">Login with Twitter</a></li>
				<li><a class="red center" href="#!">Login with Google +</a></li>
			</ul>
		</div>
	</body>
</html>
            
          
!
            
              
.input-field label{color:#999;}
.input-field input[type=text]:focus + label,.input-field input[type=password]:focus + label{color:#000;}
.input-field input[type=text]:focus ,.input-field input[type=password]:focus {border-bottom:1px solid #000;box-shadow:0 1px 0 0 #000;}
.input-field input[type=text].valid,.input-field input[type=password].valid{border-bottom:1px solid #2196F3;box-shadow:0 1px 0 0 #2196F3;}
.input-field input[type=text].invalid,.input-field input[type=password].invalid{border-bottom:1px solid #F44336;box-shadow:0 1px 0 0 #F44336;}
.input-field .prefix.active{color:#000;}
/* Input : switch */
.switch{margin-top:7px;}
.switch label .lever{margin:0 7px;}
.switch label input[type="checkbox"]:checked + .lever{background-color:#ADD0EB;}
.switch label input[type="checkbox"]:checked + .lever::after{background-color: #4FB0FD ;}
.login-body{background-image:url(https://s23.postimg.org/ydf6369q3/9da350ebfeb5a8897639492866340ec9.jpg);background-size:cover;background-position: center;background-attachment:fixed;}
.input-cart{min-height:400px;border-top:3px solid #2196F3;margin-top:80px;margin-bottom:100px;}
.login{margin-top:25px;border-right:1px solid #ddd;}
.policy{visibility: hidden;}
.signupForm{display: none;}
.signup{margin-top:25px;}
.signup-toggle{cursor:pointer;margin-top:140px;}
.login h4, .signup h4{font-weight:200;}
.legal{border-top:1px solid #ddd;}
.email label{margin-left:11px;}
.policy{font-size:13px;}
.main-title{font-family:pacifico;}
            
          
!
            
              
jQuery(document).ready(function($){
	$(".dropdown-button").dropdown();
	$('.modal').modal();
	$(".signup-toggle").click(function(){
		$(this).hide();
		$(".signupForm").show(300);
		$(".policy").css("visibility","visible");
	});
});


            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console