Подпись в электронном письме — стиль 5

Подробное описание и демонстрация работы блока «Подпись для электронного письма» для сайта под номером №5 для библиотеки Bootstrap. Html и CSS код для реализации блока forms на сайте как на изображении.

<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-details">
                        <div class="signature-icon">
                            <i class="fas fa-user-tie"></i>
                        </div>
                        <h3 class="title">Kristina Roy</h3>
                        <span class="post">Web Designer</span>
                        <ul class="icon">
                            <li><a href="" class="fab fa-facebook-f"></a></li>
                            <li><a href="" class="fab fa-google-plus-g"></a></li>
                            <li><a href="" class="fab fa-twitter"></a></li>
                        </ul>
                    </div>
                    <ul class="signature-content">
                        <li><span>A</span>#2021 Lorem Ipsum</li>
                        <li><span>M</span> +0987654321</li>
                        <li><span>T</span> (123) 456-7890</li>
                        <li><span>E</span> mail@example.com</li>
                        <li><a href=""><span>www.yourwebsite.com</span></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

.demo{ background: #DDDCDA; }
.email-signature{
    font-family: 'Poppins', sans-serif;
    background: #fff;
    position: relative;
}
.email-signature .signature-details{
    color:#fff;
    background:#124680;
    text-align: center;
    text-transform: uppercase;
    width: 50%;
    padding:20px;
    display: inline-block;
}
.email-signature .signature-icon{
    color: #124680;
    background: #EFEFEF;
    font-size: 60px;
    text-align: center;
    line-height: 100px;
    width: 100px;
    height: 100px;
    margin:0 auto 20px;
    border-radius:50%;
}
.email-signature .title{
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0;
}
.email-signature .post{
    display: block;
    font-size: 17px;
    letter-spacing: 1px;
    margin: 0 0 15px;
}
.email-signature .icon{
    font-size: 16px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.email-signature .icon li{
    display: inline-block;
    margin: 0 5px;
}
.email-signature .icon li a{
    color:#124680;
    background-color: #fff;
    text-align: center;
    line-height:28px;
    height: 28px;
    width: 28px;
    border-radius: 50%;
    transition: all 0.3s ease 0s;
}
.email-signature .icon li a:hover{
    color: #fff;
    background-color: #124680;
    box-shadow: 0 0 0 2px #fff;
}
.email-signature .signature-content{
    width: 170px;
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    right: 25%;
    top: 50%;
    transform: translateY(-50%) translateX(50%);
}
.email-signature .signature-content li{
    color: #476670;
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 12px;
}
.email-signature .signature-content li span{
    color:#124680;
    font-weight: 600;
    margin-right: 7px;
    display: inline-block;
}
.email-signature .signature-content li:last-child{ margin: 0; }
.email-signature .signature-content li a span{ margin: 0; }
@media screen and (max-width:479px) {
    .email-signature .signature-details{
        width: 100%;
        padding: 20px;
    }
    .email-signature .title{ font-size: 20px; }
    .email-signature .signature-content{
        text-align: center;
        width; auto;
        padding: 20px;
        position: relative;
        top: auto;
        bottom: 0;
        right: 50%;
        transform:translateY(0) translateX(50%);
    }
}