Подробное описание и демонстрация работы блока «Формы» для сайта под номером №18 для библиотеки Bootstrap. Html и CSS код для реализации блока forms на сайте как на изображении.
<div class="form-bg"> <div class="container"> <div class="row"> <div class="col-md-6"> <form class="form-horizontal"> <div class="heading">Sign In</div> <div class="form-group"> <input required="" name="login[username]" type="email" class="form-control" placeholder="Username" id="exampleInputEmail1"> <span></span> </div> <div class="form-group"> <input required="" name="login[password]" type="password" class="form-control" placeholder="Password"> <span></span> <div class="show-hide"> <span class="show"></span> </div> </div> <div class="form-group"> <div class="main-checkbox"> <input value="None" id="checkbox1" name="check" type="checkbox"> <label for="checkbox1"></label> </div> <span class="text">Remember me</span> <a href="#" class="btn btn-default forgot-pass">lost your password</a> </div> <div class="form-group"> <a href="#" class="btn btn-default facebook">login with fb</a> <button type="submit" class="btn btn-default">Go!</button> </div> </form> </div> </div> </div> </div>
.form-bg{ background: #dad8d8; } .form-horizontal{ background: #fff; padding-top: 40px; border-radius: 12px 12px 0 0; border-top: 3px solid #2392fe; } .form-horizontal .heading{ font-size: 24px; font-weight: bold; color: #4f4f4f; text-transform: uppercase; text-align: center; margin-bottom: 25px; } .form-horizontal .form-group{ margin: 0 50px 30px 50px; position: relative; } .form-horizontal .form-group:nth-last-child(2){ margin-bottom: 40px; } .form-horizontal .form-group:last-child{ margin: 0; } .form-horizontal .form-control{ height: 45px; background: #f1f1f1; border: none; border-radius: 0; box-shadow: none; padding: 0 20px; font-size: 14px; font-weight: bold; color: #5c636c; position: relative; transition: all 0.3s ease 0s; } .form-horizontal .form-control[type=password]{ padding: 0 45px 0 20px; } .form-horizontal .form-control:focus{ box-shadow: none; outline: 0 none; } .form-horizontal .form-control+span:before{ content: ""; width: 2px; height: 0; background: #2392fe; position: absolute; top: 0; left: 0; transition: all 0.4s ease 0s; } .form-horizontal .form-control:focus+span:before{ height: 100%; } .form-horizontal .show-hide{ position: absolute; top: 50%; right: 20px; transform: translateY(-50%); } .form-horizontal .show-hide span{ width: 12px; height: 12px; line-height: 12px; background: #2392fe; border-radius: 50%; float: right; cursor: pointer; } .form-horizontal .show-hide span:before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: #000; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .form-horizontal .show-hide span.show:after{ content: ""; width: 2px; height: 35px; background: #777d85; position: absolute; top: -11px; left: 5px; opacity: 1; transform: rotate(30deg); } .form-horizontal .show-hide span:after{ opacity: 0; } .form-horizontal .main-checkbox{ width: 20px; height: 20px; border-radius: 50%; border: 1px solid #2392fe; background: #2392fe; float: left; margin: 5px 0 0 0; position: relative; } .form-horizontal .main-checkbox label{ width: 20px; height: 20px; position: absolute; top: 0; left: 0; cursor: pointer; } .form-horizontal .main-checkbox label:after{ content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; margin: auto; position: absolute; top: -2px; left: 0; bottom: 0; right: 0; opacity: 0; } .form-horizontal .main-checkbox input[type=checkbox]{ visibility: hidden; } .form-horizontal .main-checkbox input[type=checkbox]:checked + label:after{ opacity: 1; } .form-horizontal .text{ float: left; font-size: 13px; font-weight: bold; color: #5c636c; margin-left: 7px; line-height: 20px; padding-top: 5px; text-transform: uppercase; } .form-horizontal .btn{ width: 50%; background: #2392fe; padding: 12px 20px; float: left; border: none; border-radius: 0; font-size: 20px; font-weight: bold; color: #fff; text-transform: uppercase; } .form-horizontal .btn:focus{ background: #2392fe; color: #fff; outline: none; box-shadow: none; } .form-horizontal .btn.facebook, .form-horizontal .btn.facebook:focus{ background: #29416f; } .form-horizontal .forgot-pass{ width: auto; float: right; background: transparent; font-size: 13px; font-weight: bold; color: #5c636c; line-height: 20px; text-transform: uppercase; text-decoration: underline; padding: 5px 0 0 0; margin-top: 0; box-shadow: none; transition: all 0.3s ease 0s; } .form-horizontal .forgot-pass:hover, .form-horizontal .forgot-pass:focus{ background: transparent; text-decoration: none; } @media only screen and (max-width: 479px){ .form-horizontal .form-group{ margin: 0 20px 30px; } .form-horizontal .form-group:nth-last-child(2){ text-align: center; margin-bottom: 30px; } .form-horizontal .main-checkbox, .form-horizontal .text{ float: none; display: inline; } .form-horizontal .btn{ width: 100%; } .form-horizontal .forgot-pass{ width: 100%; float: none; padding: 0; margin-top: 7px; } }
$(document).ready(function(){ $(function(){ $('.show-hide').show(); $('.show-hide span').addClass('show'); $('.show-hide span').click(function(){ if( $(this).hasClass('show') ) { $('input[name="login[password]"]').attr('type','text'); $(this).removeClass('show'); } else { $('input[name="login[password]"]').attr('type','password'); $(this).addClass('show'); } }); $('form button[type="submit"]').on('click', function(){ $('.show-hide span').text('Show').addClass('show'); $('.show-hide').parent().find('input[name="login[password]"]').attr('type','password'); }); }); }); License Terms