Подробное описание и демонстрация работы блока «Подпись для электронного письма» для сайта под номером №16 для библиотеки Bootstrap. Html и CSS код для реализации блока forms на сайте как на изображении.
html разметка и css стили для реализации блока «Подпись для электронного письма»<div class="demo"> <div class="container"> <div class="row"> <div class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-offset-1 col-sm-10"> <div class="email-signature"> <div class="signature-content"> <div class="signature-details"> <h2 class="title">Steve Thomas</h2> <span class="post">Web Developer</span> </div> <ul class="inner-content"> <li><span class="fa fa-map-marker-alt"></span> #2021, Lorem Ipsum</li> <li><span class="fa fa-mobile-alt"></span> 0987654321</li> <li><span class="fa fa-envelope"></span> mail@example.com</li> <li><span class="fa fa-globe"></span> yourwebsite.com</li> </ul> </div> <div class="signature-img"> <img src="images/img-1.jpg" alt=""> </div> <ul class="icon"> <li><a href=""><i class="fab fa-facebook-f"></i></a></li> <li><a href=""><i class="fab fa-twitter"></i></a></li> <li><a href=""><i class="fab fa-google-plus-g"></i></a></li> </ul> </div> </div> </div> </div> </div>
.email-signature{ background: #fff; font-family: 'Lato', sans-serif; padding: 25px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); position: relative; z-index: 1; } .email-signature:before{ content: ""; background: linear-gradient(to right,#f01c4e ,#69177d); width: 47%; height: 100%; position: absolute; top: 0; right: 0; z-index: -1; } .email-signature .signature-content{ color: #fff; background: #001f38; width: 65%; padding: 20px; } .email-signature .signature-details{ text-align: center; margin: 0 0 10px; display: inline-block; } .email-signature .title{ font-size: 24px; font-weight: 600; text-transform:uppercase; margin: 0; } .email-signature .post{ font-size: 14px; } .email-signature .inner-content{ padding: 0 40px 0 0; margin: 0; list-style: none; } .email-signature .inner-content li{ color: #fff; font-size: 15px; line-height: 35px; display: block; } .email-signature .inner-content li span{ color: #001f38; background: linear-gradient(to right,#f01c4e ,#69177d); text-align: center; line-height: 25px; width: 25px; height: 25px; margin-right: 6px; border-radius: 5px; } .email-signature .signature-img{ background: #fff; width: 160px; height: 160px; padding: 7px; overflow: hidden; transform: translateY(-50%); position: absolute; top: 50%; right: 13%; z-index: 1; } .email-signature .signature-img img{ width: 100%; height: auto; } .email-signature .icon{ padding: 0; margin: 0; list-style: none; transform :translateY(-50%); position: absolute; top: 50%; right: 20px; } .email-signature .icon li a{ color: #f01c4e; background: #fff; font-size: 18px; text-align: center; line-height: 30px; width: 30px; height: 30px; margin: 15px 0; border-radius: 50%; display: block; transition: all 0.3s ease 0s; } .email-signature .icon li a:hover{ color: #fff; background: #f01c4e; text-decoration: none; box-shadow: 0 0 10px #fff; } @media screen and (max-width:767px){ .email-signature .signature-img{ right: 17%; } } @media screen and (max-width:576px){ .email-signature{ padding: 17px; } .email-signature:before{ width:100%; height: 50%; top: auto; bottom: 0; } .email-signature .signature-content{ text-align: center; width: 100%; padding: 20px 10px 50px; } .email-signature .inner-content { padding: 0; } .email-signature .inner-content li{ line-height: 40px; } .email-signature .signature-img{ margin: 0 auto; transform: translateY(0); position: relative; right: 0; top: -35px; } .email-signature .icon{ text-align: center; transform: translateY(0) translatex(50%); top: auto; bottom: 10px; right: 50%; } .email-signature .icon li{ display: inline-block; } .email-signature .icon li a{ margin: 0 5px 0; } }