Подробное описание и демонстрация работы блока «Формы» для сайта под номером №8 для библиотеки Bootstrap. Html и CSS код для реализации блока forms на сайте как на изображении.
<div class="form-bg"> <div class="container"> <div class="row"> <div class="col-md-offset-3 col-md-6"> <form class="form-horizontal"> <div class="header">Registration</div> <div class="form-content"> <h4 class="heading">Your Details</h4> <div class="form-group"> <div class="col-sm-6"> <label class="control-label" for="exampleInputName2"><i class="fa fa-user"></i></label> <input class="form-control" id="exampleInputName2" placeholder="Username" type="text"> </div> <div class="col-sm-6"> <label class="control-label" for="exampleInputName2"><i class="fa fa-envelope-o"></i></label> <input class="form-control" id="exampleInputName2" placeholder="Email" type="email"> </div> </div> <div class="form-group"> <div class="col-sm-12"> <label class="control-label" for="exampleInputName2"><i class="fa fa-lock"></i></label> <input class="form-control" id="exampleInputName2" placeholder="Phone" type="text"> </div> </div> <h4 class="heading">Registration Details</h4> <div class="form-group"> <div class="col-sm-6"> <label class="control-label" for="exampleInputName2"><i class="fa fa-user"></i></label> <input class="form-control" id="exampleInputName2" placeholder="Adults" type="number"> </div> <div class="col-sm-6"> <label class="control-label" for="exampleInputName2"><i class="fa fa-user"></i></label> <input class="form-control" id="exampleInputName2" placeholder="Children" type="number"> </div> </div> <div class="form-group"> <div class="col-sm-6"> <label class="control-label" for="exampleInputName2"><i class="fa fa-calendar"></i></label> <input class="form-control" id="exampleInputName2" placeholder="Check-in date (dd/mm/yy)" type="text"> </div> <div class="col-sm-6"> <label class="control-label" for="exampleInputName2"><i class="fa fa-calendar"></i></label> <input class="form-control" id="exampleInputName2" placeholder="Check-out date (dd/mm/yy)" type="text"> </div> </div> <div class="form-group"> <div class="col-sm-12"> <label class="control-label" for="exampleInputName2"><i class="fa fa-calendar"></i></label> <textarea class="form-control" placeholder="Additional Message"></textarea> </div> </div> <div class="clearfix"> <button type="submit" class="btn btn-default"> Register</button> </div> </div> </form> </div> </div> </div> </div>
.form-bg{ background: #e4e6e6; } form{ font-family: 'Roboto', sans-serif; } .form-horizontal .header{ background: #3f9cb5; padding: 30px 25px; font-size: 30px; color: #fff; text-align: center; text-transform: uppercase; border-radius: 3px 3px 0 0; } .form-horizontal .heading{ font-size: 16px; color: #3f9cb5; margin: 10px 0 20px 0; text-transform: capitalize; } .form-horizontal .form-content{ padding: 25px; background: #fff; } .form-horizontal .form-control{ padding: 12px 16px 12px 39px; height: 50px; font-size: 14px; color: #2b2a2a; border: none; border-bottom: 2px solid #ccc; border-radius: 0; box-shadow: none; margin-bottom: 15px; } .form-horizontal .form-control:focus{ border-color: #3f9cb5; box-shadow: none; } .form-horizontal .control-label{ font-size: 17px; color: #ccc; position: absolute; top: 5px; left: 27px; text-align: center; } .form-horizontal textarea.form-control{ resize: vertical; height: 130px; } .form-horizontal .btn{ font-size: 18px; color: #4e4e4e; float: right; margin: 10px 0; border: 2px solid #ccc; border-radius: 0; padding: 10px 25px; transition: all 0.5s ease 0s; } .form-horizontal .btn:hover{ background: #fff; border-color: #3f9cb5; }