Подробное описание и демонстрация работы блока «Подпись для электронного письма» для сайта под номером №2 для библиотеки Bootstrap. Html и CSS код для реализации блока forms на сайте как на изображении.
Steve Thomas
Web Designer
- Email: mail@example.com
- Address: #2021 Lorem Ipsum
- Mobile: (123) 456-7890
.demo{ background: #dddcda; } .email-signature{ background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.5); padding: 60px 10px 60px 370px; position: relative; overflow: hidden; } .email-signature:before, .email-signature:after{ content: ''; height: 60%; width: 120%; border-radius: 50%; background: linear-gradient(to right,#454CCA,#7A02FD); transform: translateX(-50%) ; position: absolute; left: 50%; top: -35%; } .email-signature:after{top: 76%;} .email-signature .signature-icon{ color: #454CCA; background: #fff; font-size: 70px; text-align: center; line-height: 150px; width: 150px; height: 150px; border-radius: 50%; box-shadow: 0 0 15px rgba(0,0,0,0.8); transform: translateX(-50%) translateY(-50%); position: absolute; top: 50%; left: 50%; z-index: 1; } .email-signature .signature-detail{ text-align: left; width: 170px; transform: translateY(-50%); position: absolute; top: 50%; left: 15px; } .email-signature .title{ font-size: 22px; font-weight: 600; margin: 0 0 5px; } .email-signature .post{ font-size: 16px; font-style: italic; margin: 0; } .email-signature .signature-content{ padding: 0; margin: 0; list-style: none; text-align: left; display: block; } .email-signature .signature-content li{ color: #949494; font-size: 13px; margin-bottom: 5px; } @media only screen and (max-width:1200px){ .email-signature { padding: 60px 10px 60px 425px; } } @media only screen and (max-width:990px){ .email-signature { padding: 60px 10px 60px 405px; } } @media only screen and (max-width:767px){ .email-signature { padding: 180px 20px 70px; } .email-signature:before{ top: -45%; } .email-signature:after{ top: 85%; } .email-signature .signature-icon{ top: 4%; transform: translateX(-50%) translateY(0); } .email-signature .signature-detail{ text-align: center; margin: 0 auto 10px; display: block; transform: translateY(0); position: relative; top: 0; left: 0; } .email-signature .signature-content{ text-align: center; float: none; } }
<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> <div class="signature-detail"> <h2 class="title">Steve Thomas</h2> <h3 class="post">Web Designer</h3> </div> <ul class="signature-content"> <li>Email: mail@example.com</li> <li>Address: #2021 Lorem Ipsum</li> <li>Mobile: (123) 456-7890</li> </ul> </div> </div> </div> </div> </div>