Подробное описание и демонстрация работы блока «Формы» для сайта под номером №3 для библиотеки Bootstrap. Html и CSS код для реализации блока forms на сайте как на изображении.
<div class="form-bg"> <div class="container"> <div class="row"> <div class="col-md-offset-2 col-md-8"> <form class="form-horizontal"> <div class="header">Registration</div> <div class="form-content"> <div class="form-group"> <div class="col-sm-6"> <input class="form-control" id="exampleInputName2" placeholder="username" type="text"> <label class="control-label" for="exampleInputName2"><i class="fa fa-user"></i></label> </div> <div class="col-sm-6"> <input class="form-control" id="exampleInputName2" placeholder="email" type="email"> <label class="control-label" for="exampleInputName2"><i class="fa fa-envelope-o"></i></label> </div> </div> <div class="form-group"> <div class="col-sm-6"> <input class="form-control" id="exampleInputName2" placeholder="password" type="password"> <label class="control-label" for="exampleInputName2"><i class="fa fa-lock"></i></label> </div> <div class="col-sm-6"> <input class="form-control" id="exampleInputName2" placeholder="confirm password" type="password"> <label class="control-label" for="exampleInputName2"><i class="fa fa-unlock"></i></label> </div> </div> <div class="form-group"> <div class="col-sm-6"> <input class="form-control name" id="exampleInputName2" placeholder="first-name" type="text"> </div> <div class="col-sm-6"> <input class="form-control name" id="exampleInputName2" placeholder="last-name" type="text"> </div> </div> <div class="form-group"> <div class="col-sm-12"> <select class="form-control"> <option value="none" selected="">select gender...</option> <option value="male">male</option> <option value="female">female</option> <option value="other">other</option> </select> </div> </div> <div class="form-group"> <div class="col-sm-2 col-xs-3 captcha"> <label class="captcha">19 + 3 = </label> </div> <div class="col-sm-10 col-xs-9 captcha-text"> <input class="form-control name" placeholder="solve the captcha" type="text"> </div> </div> </div> <div class="footer clearfix"> <button type="submit" class="btn btn-default">Register</button> </div> </form> </div> </div> </div> </div>
.form-bg{ background: linear-gradient(to right,#7cacdc,#e0e5eb); } form{ font-family: 'Roboto', sans-serif; } .form-horizontal .header{ background: #b5953f; padding: 30px 25px; font-size: 30px; color: #fff; text-transform: uppercase; border-radius: 3px 3px 0 0; } .form-horizontal .form-content{ padding: 25px; background: #f9fafd; } .form-horizontal .form-control{ padding: 10px 50px 10px 15px; height: 50px; font-size: 18px; color: #000; border: 2px solid #acacac; margin-bottom: 15px; } .form-horizontal .form-control:hover{ border-color: #c9af67; } .form-horizontal .form-control:focus{ border-color: #b5953f; box-shadow: none; } .form-horizontal .control-label{ width: 42px; height: 40px; font-size: 17px; color: #acacac; border-left: 1px solid #acacac; position: absolute; top: 5px; right: 20px; text-align: center; } .form-horizontal .captcha{ padding-right: 0; } .form-horizontal .captcha label{ background: #e0e0e0; display: block; height: 50px; font-size: 16px; color: #acacac; line-height: 45px; text-align: center; border-radius: 3px 0 0 3px; } .form-horizontal .captcha-text{ padding-left: 0; } .form-horizontal .captcha-text input{ border-radius: 0 3px 3px 0; } .form-horizontal .footer{ background: #e8eaf6; border-top: 1px solid #b5953f; padding: 10px 25px; } .form-horizontal .footer .btn{ background: #b5953f; font-size: 18px; color: #fff; float: right; margin: 10px 0; clear: both; padding: 10px 25px; transition: all 0.5s ease 0s; } .form-horizontal .name{ padding: 10px 15px; } @media only screen and (max-width:767px){ .form-horizontal .control-label i{ line-height: 40px; } .form-horizontal .captcha label{ font-size: 13px; } }