"Login and Sign Up form"
Bootstrap 3.2.0 Snippet by wilsonfriday

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!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"> <title>Login and SignUp form</title> </head> <body> <div class="container"> <div class="col-md-6 col-md-offset-3"> <div class="form form-body"> <div class="header-form"> <div class="login-h active-login" id="login-h"> <span>Login</span> </div> <div class="signup-h" id="signup-h"> <span>Sign Up</span> </div> </div> <div class="login-panel" id="login-panel"> <h2>Login here</h2> <form action="login.php" method="post"> <div class="form-group"> <label for="pnum">Phone Number</label> <input type="text" name="pnum" id="pnum" class="form-control" placeholder="000 0000 000"> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" name="password" id="password" class="form-control" placeholder="******"> </div> <div class="form-group"> <button type="submit" name="login" id="login-btn" class="btn-primary-outline-login">Login</button> </div> </form> </div> <div class="signup-panel" id="signup-panel"> <h2>Sign Up here</h2> <form action="signup.php" method="post"> <div class="form-group"> <label for="name">Name</label> <input type="text" name="name" id="name" class="form-control" placeholder="Your Name"> </div> <div class="form-group"> <label for="pnum">Phone Number</label> <input type="text" name="pnum" id="pnum" class="form-control" placeholder="000 0000 000"> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" name="password" id="password" class="form-control" placeholder="******"> </div> <div class="form-group"> <input type="checkbox" name="password" id="password"/> <label>By clicking this, you accept our terms and conditions.</label> </div> <div class="form-group"> <button type="submit" name="login" id="login-btn" class="btn-primary-outline-signup">Sign Up</button> </div> </form> </div> </div> </div> </div> <script> let login = document.getElementById('login-h'); let signup = document.getElementById('signup-h'); let loginPanel = document.getElementById('login-panel'); let signupPanel = document.getElementById('signup-panel'); signup.addEventListener('click', openSignupPage); login.addEventListener('click', openLoginPage); function openSignupPage(){ login.classList.remove('active-login'); loginPanel.style.display = "none"; signup.classList.add('active-signup'); signupPanel.style.display = "block"; //alert('hi'); } function openLoginPage(){ signup.classList.remove('active-signup'); signupPanel.style.display = "none"; login.classList.add('active-login'); loginPanel.style.display = "block"; } </script> <script src="js/bootstrap.min.js"></script> <script src="js/jquery-3.2.1.min.js"></script> <script src="fontawesome/js/all.min.js"></script> <script src="js/main.js"></script> </body> </html>
body{ padding: 0; margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .form-body{ border: 1px solid #000; padding: 0; height: 100%; margin-top: 30px; border-radius: 5px; padding-bottom: 100px; } .header-form{ height: 50px; width: 100%; background-color: rgb(245, 244, 244); border-top-left-radius: 5px; border-top-right-radius: 5px; display: inline-flex; } .login-h{ width: 50%; text-align: center; color: rgb(104, 103, 103); cursor: pointer; } .login-h span{ font-size: 2.1em; line-height: 1.4; } .login-h:hover{ background-color: rgb(38, 71, 102); color: #fff; border-top-left-radius: 5px; } .signup-h{ width: 50%; text-align: center; color: rgb(104, 103, 103); cursor: pointer; } .signup-h span{ font-size: 2.1em; line-height: 1.4; } .signup-h:hover{ background-color: rgb(50, 98, 143); color: #fff; border-top-right-radius: 5px; } .active-login{ background-color: rgb(38, 71, 102); color: #fff; border-top-left-radius: 5px; box-shadow: 1px 2px 5px 2px rgba(38, 71, 102, .3); transition-delay: 600ms ease-in-out; } .active-signup{ background-color: rgb(50, 98, 143); color: #fff; border-top-right-radius: 5px; box-shadow: 2px 4px 10px 1px rgb(50, 98, 143, .3); } .login-panel{ padding: 10px 15px; } .login-panel h2{ color: rgb(38, 71, 102); } .login-panel label{ color: rgb(38, 71, 102); font-size: 1.0em; margin-top: 15px; } .login-panel .form-control{ height: 50px; padding: auto; border: 1px solid rgb(38, 71, 102); } .login-panel input{ color: rgb(38, 71, 102); font-size: 1.4em; } .login-panel input::placeholder{ color: rgb(38, 71, 102); } .btn-primary-outline-login{ color: rgb(38, 71, 102); background-color: transparent; border: 1px solid rgb(38, 71, 102); padding: 10px 20px; margin-top: 30px; float: right; width: 50%; border-radius: 5px; font-size: 1.4em; } .btn-primary-outline-login:hover{ color: #fff; background-color: rgb(38, 71, 102); border: none; } .btn-primary-outline-signup{ color: rgb(38, 71, 102); background-color: transparent; border: 1px solid rgb(50, 98, 143); padding: 10px 20px; margin-top: 30px; float: right; width: 50%; border-radius: 5px; font-size: 1.4em; } .btn-primary-outline-signup:hover{ color: #fff; background-color: rgb(50, 98, 143); border: none; } .signup-panel{ padding: 10px 15px; display: none; } .signup-panel h2{ color: rgb(50, 98, 143); } .signup-panel label{ color: rgb(50, 98, 143); font-size: 1.0em; margin-top: 15px; } .signup-panel .form-control{ height: 50px; padding: auto; border: 1px solid rgb(50, 98, 143); } .signup-panel input{ color: rgb(50, 98, 143); font-size: 1.4em; } .signup-panel input::placeholder{ color: rgb(50, 98, 143); }

Related: See More


Questions / Comments: