Подробное описание и демонстрация работы блока «Подпись для электронного письма» для сайта под номером №4 для библиотеки 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-icon"> <i class="fas fa-user-tie"></i> </div> <ul class="signature-content"> <li><h3 class="title">Steve Thomas</h3></li> <li><span class="post">Web Designer</span></li> <li>Address: #2021 Lorem Ipsum</li> <li>Mobile: (123) 456-7890</li> <li>Email: mail@example.com</li> </ul> <ul class="icon"> <li><a href="" class="fab fa-facebook"></a></li> <li><a href="" class="fab fa-google-plus"></a></li> <li><a href="" class="fab fa-twitter"></a></li> </ul> </div> </div> </div> </div> </div>
.demo{ background: #DDDCDA; } .email-signature{ background: #E1F0F4; font-family: 'Poppins', sans-serif; padding: 20px 20px 20px 200px; border: 15px solid #fff; border-radius: 0 100px; box-shadow: 5px 5px 20px rgba(0,0,0,0.4); overflow: hidden; position: relative; z-index: 1; } .email-signature .signature-icon{ color: #fff; background: #00B6D6; font-size: 100px; line-height: 200px; text-align: center; width: 170px; height: 100%; position: absolute; top: 0; left: 0; } .email-signature .signature-icon:before, .email-signature .signature-icon:after{ content: ''; position: absolute; right: -1px; top: 0; width: 100%; height: 110%; background-color: #476670; opacity: 0.15; transform: rotate(-3deg); transform-origin: top right; z-index: -1; } .email-signature .signature-icon:after{ transform: rotate(-8deg); } .email-signature .signature-content{ margin: 0 0 15px; padding: 0; list-style: none; display: block; } .email-signature .signature-content li{ color: #476670; font-size: 15px; font-weight: 300; margin-bottom: 5px; } .email-signature .signature-content li:first-child{ margin: 0; } .email-signature .title{ color: #476670; font-size: 20px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin: 0; display: block; } .email-signature .post{ color: #476670; font-size: 17px; font-weight: 400; text-transform: uppercase; display: block; } .email-signature .icon{ font-size: 22px; padding: 0; margin: 0; list-style: none; } .email-signature .icon li{ display: inline-block; margin: 0 5px; } .email-signature .icon li a{ color: #fff; background-color: #00B6D6; padding: 5px; transition: all 0.3s ease 0s; } .email-signature .icon li a:hover{ background-color: #476670; } @media screen and (max-width:767px) { .email-signature { padding: 180px 0 15px 0; border-width: 10px; } .email-signature .signature-icon { width: 100%; height: 150px; line-height: 150px; } .email-signature .signature-icon:before, .email-signature .signature-icon:after{ height: 100%; transform: rotate(0); right: 0; top: auto; bottom: -8px } .email-signature .signature-icon:after{ bottom: -18px; } .email-signature .signature-content, .email-signature .icon{ text-align: center; } }