Подробное описание и демонстрация работы блока «Подпись для электронного письма» для сайта под номером №20 для библиотеки 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 ">
<div class="email-signature">
<div class="signature-details">
<div class="signature-img">
<img src="images/img-1.jpg" alt="">
</div>
<h2 class="title">Miranda Roy</h2>
<span class="post">web designer</span>
</div>
<ul class="signature-content">
<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> www.yourwebsite.com</li>
<li><span class="fa fa-map-marker-alt"></span> #2021, Lorem Ipsum</li>
</ul>
<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>
<li><a href=""><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
.demo{ background: #e7e7e7; }
.email-signature{
background: #fff;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
box-shadow: 10px 10px 0 -2px rgba(0, 0, 0, 0.2);
position: relative;
}
.email-signature:after{
content: '';
display: block;
clear: both;
}
.email-signature .signature-details{
width: 50%;
padding: 12px 20px 0;
float: left;
display: inline-block;
}
.email-signature .signature-img{
width: 120px;
height: 120px;
margin: 0 auto 10px;
border-radius: 50%;
border-top: 5px solid #B2CC10;
border-right: 5px solid #00b894;
border-bottom: 5px solid #B2CC10;
border-left: 5px solid #00b894;
overflow: hidden;
}
.email-signature .signature-img img{
width: 100%;
height: auto;
}
.email-signature .title{
color: #00b894;
font-size: 25px;
font-weight: 500;
line-height: 25px;
margin: 0;
}
.email-signature .post{
color: #B2CC10;
font-size: 15px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}
.email-signature .signature-content{
background: #B2CD10;
vertical-align: top;
width: 43%;
padding: 18px 0;
margin: 0;
float: left;
display: inline-block;
list-style: none;
}
.email-signature .signature-content li{
color: #000;
font-size: 15px;
line-height: 40px;
padding: 0 25px;
position: relative;
}
.email-signature .signature-content li span{
color: #fff;
background: #AC0E69;
width: 40px;
height: 40px;
line-height: 40px;
transform: translateY(-50%);
position: absolute;
left: -20px;
top: 50%;
}
.email-signature .signature-content li:nth-child(even) span{ background: #801855; }
.email-signature .icon{
padding: 0;
margin: 0;
list-style: none;
position: absolute;
top: 20px;
right: 20px;
}
.email-signature .icon li a{
color: #fff;
background: #13999A;
line-height: 40px;
width: 40px;
height: 40px;
box-shadow: 0 -5px 5px -5px #666 inset;
display: block;
}
.email-signature .icon li a:hover{ background:#0B7D7A; }
@media screen and (max-width:576px){
.email-signature{ padding: 0 0 40px 0; }
.email-signature .signature-details{
width: 100%;
padding: 20px 20px 15px;
float: none;
}
.email-signature .title{ font-size: 20px; }
.email-signature .signature-content{
width: 100%;
padding: 20px 0;
float: none;
}
.email-signature .signature-content li{ padding: 40px 0 0 0; }
.email-signature .signature-content li span{
transform: translateX(-50%) translateY(0);
left: 50%;
top: 0;
}
.email-signature .icon{
top: auto;
bottom: 15px;
left: 0;
right: 0;
margin: 0 auto;
}
.email-signature .icon li{
display: inline-block;
margin-left: -4px;
}
}