"logIn and signUp form"
Bootstrap 3.2.0 Snippet by akoSalman

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head>login and signUp form</head> <body id="top"> <div class="container-flued" > <div class=" col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-2 col-xs-4 col-xs-offset-2 noPadding"> <ul class="list-group" style="width:50% ;float:right"> <li class="active list-group-item-choice list-group-item " > <a class="swichChoices " href="#signIn">signIn</a> </li> <li class="list-group-item-choice list-group-item "> <a class="swichChoices" href="#signIn">signUp</a> </li> </ul> </div> <div class=" col-lg-4 col-md-4 col-sm-4 col-xs-4 noPadding"> <div class="row"> <form action="" method="post" id="loginform"> <div class="form-group"> <label for="username" class="sr-only">User Name</label> <input type="text" class="form-control input-lg input-block" id="username" name="username" placeholder="username"> </div> <div class="form-group"> <label for="password" class="sr-only"> Password</label> <input type="password" class="form-control input-lg input-block" id="password" name="password" placeholder="password"> </div> <div class="form-group"> <button type="submit" class="btn btn-primary btn-lg btn-block" id="submitform" >enter </button> </div> </form> </div> <div class="row"> <form action="" method="post" id="signUpForm"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div class="form-group"> <label for="firstName" class="sr-only">First Name</label> <input type="text" class="form-control input-lg" id="firstName" name="firstName" placeholder="firstName"> </div> </div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div class="form-group"> <label for="lastName" class="sr-only">Last Name</label> <input type="text" class="form-control input-lg" id="lastName" name="lastName" placeholder="lastName"> </div> </div> </div> <div class="form-group"> <label class="sr-only" for="user">userName</label> <input type="text" class="form-control input-lg" id="user" name="user" placeholder="userName"> </div> <div class="form-group"> <label for="gender" class="sr-only">Gender</label> <select class="form-control input-lg input-block" id="gender" name="gender" size="1"> <option value="1">male</option> <option value="2">female</option> </select> </div> <div class="form-group"> <label for="password" class="sr-only">Password</label> <input type="password" class="form-control input-lg input-block" id="pass" name="pass" placeholder="password"> </div> <div class="form-group"> <label for="password" class="sr-only">Reenter Password</label> <input type="password" class="form-control input-lg input-block" id="reEnteredPass" name="rePass" placeholder="reenter password"> </div> <div class="form-group"> <button type="submit" class="btn btn-success btn-lg btn-block" id="submitSignUpForm" name="submitSignUpFormButton" >submit </button> </div> </form> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 "> </div> </body> </html>
#loginform , #signUpForm{ background-color: rgba(231, 232, 232, 0.73); border: 3px none; width:100%; box-shadow: #333 9px 9px 30px 3px inset; margin-top:0px; margin-bottom: 0px; padding: 20px 0; } #signUpForm{ display:none; } body { /*background-image:url(../img/wall.jpg); body { width: 100%; height: 100%; margin: 0px; padding: 0px; }*/ background-color: #0d6565; } .list-group-item-choice{ background-color:#4CAF50; background-color:#a0b3b0; border-top: 1px solid #ddd; border-bottom:1px solid #ddd; border-right:0px solid #ddd; margin:auto; padding:10px 50px; } .active { background: #1ab188; color: #ffffff; width:100%; padding: 30px 52px; } .list-group-item-choice:hover{ background: #179b77; color: #ffffff; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); } .swichChoices:link ,.swichChoices:visited , .swichChoices:hover , .swichChoices:active { text-decoration: none; } a:focus, a:hover { color: #ffffff; text-decoration: none; } .swichChoices{ color: #ffffff; text-decoration: none; border-radius: 7px; } .row{margin:0;} .noPadding{padding-right:0px; padding-left:0px; padding-top:20px;} #firstName , #lastName { font-family: 'Exo', sans-serif; font-size: 16px; width:100%; font-weight: 400; margin:auto; } #signUpForm > div.row{ padding:0 43px; } .header{ width:100%; padding-top:20px; } div input[type=password] , input[type=text] { font-family: 'Exo', sans-serif; font-size: 16px; width:80%; font-weight: 400; margin:auto; } #gender { font-family: 'Exo', sans-serif; font-size: 16px; margin:auto; width:80%; font-weight: 400; } div button[type="submit"] { font-family: 'Exo', sans-serif; margin:auto; width:80%; font-size: 16px; font-weight: 400; }
$(document).ready(function(){ $('.swichChoices').on('click', function (e) { e.preventDefault(); $(this).parent().addClass('active'); $(this).parent().siblings().removeClass('active'); var target =$('.active > a').text(); if(target=="signIn"){ $("#signUpForm").slideUp(function(){$('#loginform').slideDown();}); } else if(target=="signUp") { $('#loginform').slideUp(function(){$('#signUpForm').slideDown();}); } }); });

Related: See More


Questions / Comments: