Williamson
web developer
- (123)456-7890
- www.yourwebsite.com
- example1@example.com
.email-signature{
background: #fff;
font-family: 'Lato', sans-serif;
font-size: 0;
padding: 15px 0;
border-top: 25px solid #6DCEF6;
border-bottom: 25px solid #6DCEF6;
box-shadow: 0 30px 30px -20px rgba(0, 0, 0, 0.3);
}
.email-signature .signature-details{
width: 50%;
text-align: center;
padding: 0 15px 0 30px;
display: inline-block;
position: relative;
}
.email-signature .signature-details:before{
content: "";
background: repeating-linear-gradient(#B8DEF5, #B8DEF5 5px, #fff 5px, #fff 10px);
width: 30px;
position: absolute;
top: -15px;
bottom: -15px;
left: 0;
}
.email-signature .signature-icon{
background-color: #00A7FB;
height: 110px;
width: 110px;
padding: 5px;
margin: 0 auto 15px;
}
.email-signature .signature-icon img{
height: auto;
width: 100%;
border-radius: 20px;
}
.email-signature .title{
color: #00A7FB;
font-size: 20px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0;
}
.email-signature .post{
color: #6DCEF6;
font-size: 16px;
font-weight: 600;
text-transform: capitalize;
letter-spacing: 1px;
display: block;
}
.email-signature .signature-content{
width: 50%;
padding: 0 0 0 30px;
margin: 0;
list-style: none;
display: inline-block;
vertical-align: top;
position: relative;
}
.email-signature .signature-content:before{
content: "";
background: repeating-linear-gradient(#6DCEF6, #6DCEF6 5px, #00A7FB 5px, #00A7FB 10px);
width: 30px;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.email-signature .signature-content li{
color: #fff;
background:#00A7FB;
font-size: 14px;
padding: 15px 10px 16px 10px;
}
.email-signature .signature-content li:nth-child(even){ background: #6DCEF6; }
.email-signature .signature-content li i{
font-size: 12px;
text-align: center;
line-height: 24px;
width: 25px;
height: 25px;
margin-right: 5px;
border: 1px solid #fff;
border-radius: 50%;
display: inline-block;
}
@media screen and (max-width:576px){
.email-signature{
padding: 0;
border: none;
}
.email-signature .signature-details,
.email-signature .signature-content{
width: 100%;
text-align: center;
}
.email-signature .signature-details{
padding: 45px 0 0;
margin: 0 0 15px;
}
.email-signature .signature-details:before{
width: 100%;
height: 30px;
top: 0;
bottom: auto;
}
.email-signature .signature-content{ padding: 30px 0 0; }
.email-signature .signature-content:before{
width: 100%;
height: 30px;
}
}