Подробное описание и демонстрация работы блока «Формы» для сайта под номером №2 для библиотеки Bootstrap. Html и CSS код для реализации блока Forms на сайте как на изображении.
.form-bg{ background:#ebeae2; } form{ margin: 10px 0; font-family: 'Roboto', sans-serif; } form .header{ padding: 30px; background: #4a4a4a; border-radius: 10px 10px 0 0; font-size: 27px; color: #b8eae6; text-align: center; text-transform: uppercase; } form .form-group{ padding: 30px 30px 25px; background: #fd795b; box-shadow: 0 0 3px #bcb4b4; margin: 0; position: relative; } form .form-control{ height: 70px; font-size: 22px; text-transform: capitalize; background: #fff3f0; border-radius: 0; } form .btn{ width: 100%; background: #fd795b; margin-top: 20px; border: none; border-top: 1px solid #fbb9a2; border-bottom: 1px solid #e77055; font-size: 17px; font-weight: bold; color: #fff; text-transform: uppercase; transition: all 0.2s ease 0s; } form .btn:hover{ background: #fff; color: #fd795b; } form .btn:focus{ outline: none; } form .footer{ padding: 0 15px; background: #4a4a4a; border-radius: 0 0 10px 10px; font-size: 27px; color: #b8eae6; text-align: center; text-transform: uppercase; } form .social-links{ padding: 0; margin: 0; list-style: none; display: inline-block; } form .social-links li{ display: inline-block; } form .social-links li a{ display: block; color: #b8eae6; padding: 20px 30px; } form ul li a:hover{ text-decoration: none; background: #6b6a6a; } @media screen and (max-width: 360px){ form .social-links li a{ padding: 20px; } }
<div class="form-bg"> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <form> <div class="header">sign in</div> <div class="form-group"> <input class="form-control" placeholder="Name" type="text"> <input class="form-control" placeholder="Password" type="text"> <button type="submit" class="btn btn-default btn-lg">sign in</button> </div> <div class="footer">sign in with <ul class="social-links"> <li><a class="fab fa-google-plus" href="#"></a></li> <li><a class="fab fa-twitter" href="#"></a></li> <li><a class="fab fa-facebook" href="#"></a></li> </ul> </div> </form> </div> </div> </div> </div>