Last active
January 24, 2020 01:19
-
-
Save papa28x4/7cc5df97a576bab331e76c19ad17b8bf to your computer and use it in GitHub Desktop.
Registration form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<meta name="description" content="Venture Garden Group Network - join our ever-growing tech community of interns. Signing up is easy"> | |
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet"> | |
<link href="style.css" rel="stylesheet"> | |
<title>VGG Network Registration</title> | |
</head> | |
<body> | |
<h1 class="heading">VGG Intern Network</h1> | |
<section class="box"> | |
<form class="registration"> | |
<h2>Sign Up</h2> | |
<div class="inputBox"> | |
<input type="text" name="name" id="signup_name" required> | |
<label for="signup_name">Username</label> | |
</div> | |
<div class="inputBox"> | |
<input type="password" name="password" id="signup_password"required> | |
<label for="signup_password">Password</label> | |
</div> | |
<div class="inputBox"> | |
<input type="email" name="email" id="signup_email" required> | |
<label for="signup_email">Email</label> | |
</div> | |
<input type="submit" name="submit" value="Create"> | |
<p class="message">Already Registered?<a href="#" title="Click to Login">Login</a></p> | |
</form> | |
<form class="login"> | |
<h2>Sign In</h2> | |
<div class="inputBox"> | |
<input type="text" name="name" id="login_name" required> | |
<label for="login_name">Username</label> | |
</div> | |
<div class="inputBox"> | |
<input type="password" name="password" id="login_password" required> | |
<label for="login_password">Password</label> | |
</div> | |
<input type="submit" name="submit" value="Login"> | |
<p class="message">Not Registered?<a href="#" title="Click to Register">Register</a></p> | |
</form> | |
</section> | |
<!-- <script src="jquery-3.4.1.js"></script> --> | |
<script src="https://code.jquery.com/jquery-3.4.1.js"></script> | |
<script> | |
$(document).ready(function(){ | |
$('.message a').click(function(){ | |
$('form').animate({height:"toggle", opacity:"toggle"}, "slow"); | |
}) | |
}) | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
*{ | |
box-sizing: border-box; | |
} | |
body{ | |
margin: 0; | |
padding: 0; | |
font-family: 'Raleway', sans-serif; | |
background: url(background.jpg) no-repeat; | |
background-size: cover; | |
height:100vh; | |
} | |
.heading{ | |
color: #fff; | |
text-align: center; | |
margin-top: 60px; | |
font-size: 2.5em; | |
} | |
.box{ | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
max-width: 500px; | |
padding: 40px; | |
background: rgba(0,0,0,0.8); | |
box-shadow: 0 15px 25px rgba(0,0,0,0.5); | |
border-radius: 10px; | |
width: 90%; | |
} | |
.box h2{ | |
margin: 0 0 30px; | |
padding: 0; | |
color: #fff; | |
text-align: center; | |
} | |
.box .inputBox{ | |
position: relative; | |
} | |
.box .inputBox input{ | |
width: 100%; | |
padding: 10px 0; | |
font-size: 16px; | |
color: #fff; | |
letter-spacing: 1px; | |
margin-bottom: 30px; | |
border: none; | |
border-bottom: 1px solid #fff; | |
outline: none; | |
background: transparent; | |
transition: border-bottom 0.5s ease-in; | |
} | |
.box .inputBox label{ | |
position: absolute; | |
top: 0; | |
left: 0; | |
padding: 10px 0; | |
font-size: 16px; | |
color: #fff; | |
pointer-events: none; | |
transition: top 0.5s ease; | |
} | |
.box .inputBox input:focus{ | |
border-color: rgba(199,102,178, 1); | |
} | |
.box .inputBox input:focus ~ label, | |
.box .inputBox input:valid ~ label{ | |
top: -18px; | |
left: 0; | |
color: rgba(199,102,178, 1); | |
font-size: 12px; | |
} | |
.box input[type="submit"]{ | |
background: transparent; | |
border: none; | |
outline: none; | |
color: #fff; | |
background: rgba(199,102,178, 0.8); | |
padding: 10px 20px; | |
cursor: pointer; | |
border-radius: 5px; | |
transition: transform 0.3s linear; | |
} | |
.box input[type="submit"]:hover, | |
.box input[type="submit"]:active{ | |
background: rgba(199,102,178, 1); | |
transform: scaleX(1.1); | |
} | |
.box .message{ | |
margin: 15px 0 0; | |
color: #fff; | |
} | |
.box .message a{ | |
text-decoration: none; | |
color:rgba(199,102,178, 0.8); | |
padding-left: 5px; | |
} | |
.login{ | |
display: none; | |
} | |
@media(max-width: 560px){ | |
.heading{ | |
opacity: 0; | |
} | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment