HTML Login and Register Form

HTML Login and Register Form

index.html and css/style.css For your project:

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>Sign in | Sign up Form</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <h2>Sign in | Sign up Form</h2> <div class="container" id="container"> <div class="form-container sign-up-container"> <form action="#"> <h1>Create Account</h1> <div class="social-container"> <a href="#" class="social"><i class="fa fa-facebook"></i></a> <a href="#" class="social"><i class="fa fa-youtube-play"></i></a> <a href="#" class="social"><i class="fa fa-linkedin"></i></a> </div> <span>or use your email for registration</span> <input type="text" placeholder="Name" /> <input type="email" placeholder="Email" /> <input type="password" placeholder="Password" /> <button>Sign Up</button> </form> </div> <div class="form-container sign-in-container"> <form action="#"> <h1>Sign in</h1> <div class="social-container"> <a href="#" class="social"><i class="fa fa-facebook"></i></a> <a href="#" class="social"><i class="fa fa-youtube-play"></i></a> <a href="#" class="social"><i class="fa fa-linkedin"></i></a> </div> <span>or use your account</span> <input type="email" placeholder="Email" /> <input type="password" placeholder="Password" /> <a href="#">Forgot your password?</a> <button>Sign In</button> </form> </div> <div class="overlay-container"> <div class="overlay"> <div class="overlay-panel overlay-left"> <h1>Welcome Back!</h1> <p>To keep connected with us, please log in with your personal info</p> <button class="ghost" id="signIn">Sign In</button> </div> <div class="overlay-panel overlay-right"> <h1>Welcome!</h1> <p>Enter your personal details and start your journey with us</p> <button class="ghost" id="signUp">Sign Up</button> </div> </div> </div> </div> <footer> <p>Created with <i class="fa fa-heart"></i> by <a target="_blank" href="https://soengsouy.com">Soeng Souy</a></p> </footer> <script type="text/javascript" src="js/internal.js"></script> </body> </html>

css/style.css

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,800"); * { box-sizing: border-box; } body { background: #f6f5f7; display: flex; font-family: "Montserrat", sans-serif; background-image: url('../images/image_background.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; justify-content: center; align-items: center; flex-direction: column; height: 100vh; margin: -20px 0 50px; } h1, h2, p, span, a { color: white; } h1 { font-weight: bold; margin: 0; } h2 { text-align: center; } p { font-size: 14px; font-weight: 100; line-height: 20px; letter-spacing: 0.5px; margin: 20px 0 30px; } a { font-size: 14px; text-decoration: none; margin: 15px 0; } ::placeholder { color: white; } input:focus, textarea:focus, select:focus { box-shadow: none !important; border: 1px solid #1fb4d5 !important; border-bottom: 2px solid #0c4d73!important; outline: none; } button { border: none; outline: none; border-radius: 20px; color: #FFFFFF; font-size: 12px; font-weight: bold; padding: 12px 45px; letter-spacing: 1px; text-transform: uppercase; background: linear-gradient(to right, #41bfdd 0%, #187499 96%); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); transition: transform 80ms ease-in; } button:active { transform: scale(0.95); } button.ghost { background-color: transparent; border: 1px solid #FFFFFF; } form { background: linear-gradient(to right, #0c4d73, #1fb4d5); display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0 50px; height: 100%; text-align: center; } input { background-color: #00bcd4; color: white; border: none; padding: 12px 15px; margin: 8px 0; width: 100%; } .container { background: linear-gradient(to right, #0c4d73, #1fb4d5); border-radius: 10px; position: relative; overflow: hidden; width: 768px; max-width: 100%; min-height: 480px; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2); } .form-container { position: absolute; top: 0; height: 100%; transition: all 0.6s ease-in-out; } .sign-in-container { left: 0; width: 50%; z-index: 2; } .container.right-panel-active .sign-in-container { transform: translateX(100%); } .sign-up-container { left: 0; width: 50%; opacity: 0; z-index: 1; } .container.right-panel-active .sign-up-container { transform: translateX(100%); opacity: 1; z-index: 5; animation: show 0.6s; } @keyframes show { 0%, 49.99% { opacity: 0; z-index: 1; } 50%, 100% { opacity: 1; z-index: 5; } } .overlay-container { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transition: transform 0.6s ease-in-out; z-index: 100; } .container.right-panel-active .overlay-container { transform: translateX(-100%); } .overlay { background: linear-gradient(to right, #0c4d73, #1fb4d5); color: #FFFFFF; position: relative; left: -100%; height: 100%; width: 200%; transition: transform 0.6s ease-in-out; } .container.right-panel-active .overlay { transform: translateX(50%); } .social-container { margin: 20px 0; } .social-container a { border: 1px solid #DDDDDD; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; margin: 0 5px; height: 40px; width: 40px; } footer { background: linear-gradient(to right, #0c4d73, #1fb4d5); text-align: center; position: fixed; width: 100%; bottom: 0; }
Soeng Souy

Soeng Souy

Website that learns and reads, PHP, Framework Laravel, How to and download Admin template sample source code free.

Post a Comment

CAN FEEDBACK
close