Steve Thomas
web designer
- (123)456-7890
- example1@example.com
- Full address here,Town
.email-signature{
background: #263846;
font-family: 'Poppins', sans-serif;
padding: 20px 60px 20px 200px;
box-shadow: -6px 6px 8px rgba(0, 0, 0, 0.1);
position: relative;
}
.email-signature:before,
.email-signature:after{
content: "";
background: linear-gradient(to right bottom, #ada996, #f9f9f9);
width: 180px;
height: 100%;
position: absolute;
top: 0;
left: 0;
clip-path: polygon(0 0, 80% 0, 100% 15%, 100% 85%, 76% 100%, 0 100%);
}
.email-signature:after{
background: linear-gradient(to bottom right, #fdb44e, #e28504);
width: 50px;
left: auto;
right: 0;
clip-path: none;
}
.email-signature .signature-icon{
background: linear-gradient(to bottom right, #fdb44e, #e28504);
width: 120px;
height: 120px;
padding: 3px;
transform: translateY(-50%) rotate(45deg);
position: absolute;
left: 30px;
top: 50%;
}
.email-signature .signature-icon img{
width: 100%;
height: auto;
transform: rotate(-45deg);
}
.email-signature .signature-details{
padding: 10px 0 10px 45px;
position: relative;
}
.email-signature .signature-details .user-icon{
color: #fff;
background-color: #fdb44e;
font-size: 18px;
text-align: center;
line-height: 50px;
width: 35px;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.email-signature .title{
color: #fff;
font-size: 22px;
font-weight: 300;
text-transform: capitalize;
margin: 0;
}
.email-signature .title span{
color: #fdb44e;
font-weight: 600;
}
.email-signature .post{
color: #fff;
font-size: 14px;
font-weight: 300;
text-transform: capitalize;
}
.email-signature .signature-content{
padding: 0 0 1px;
margin: 0;
list-style: none;
position: relative;
}
.email-signature .signature-content:before{
content: '';
background: linear-gradient( #fdb44e, #e28504);
height: 100%;
width: 35px;
position: absolute;
left: 0;
top: 0;
}
.email-signature .signature-content li{
color: #fff;
font-size: 13px;
font-weight: 300;
line-height: 20px;
padding: 0 0 0 45px;
margin: 0 0 10px;
position: relative;
}
.email-signature .signature-content li i{
color: #fff;
font-size: 14px;
text-align: center;
width: 35px;
transform: translateY(-50%);
position: absolute;
left: 0;
top: 50%;
}
.email-signature .social-links{
padding: 0;
margin: 0;
list-style: none;
transform: translateY(-50%);
position: absolute;
top: 50%;
right: 7px;
z-index: 1;
}
.email-signature .social-links li a{
color: #fff;
font-size: 18px;
text-align: center;
line-height: 35px;
width: 35px;
height: 35px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
display: block;
transition: all 0.3s ease 0s;
}
.email-signature .social-links li a:hover{ text-shadow: 2px 2px 1px rgba(0, 0, 0,0.4); }
@media screen and (max-width:767px){
.email-signature{
text-align: center;
padding: 220px 0 50px 0;
}
.email-signature:before{
width: 100%;
height: 200px;
clip-path: polygon(0 0, 100% 0, 100% 70%, 80% 100%, 20% 100%, 0 70%);
}
.email-signature:after{
width: 100%;
height: 50px;
top: auto;
bottom: 0;
}
.email-signature .signature-icon{
top: 40px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
}
.email-signature .signature-details{
padding: 0;
text-align: center;
margin: 0 0 10px;
}
.email-signature .signature-details .user-icon{ display: none; }
.email-signature .signature-content{
text-align: left;
padding-top: 10px;
margin: 0 0 15px;
display: inline-block;
}
.email-signature .social-links{
width: 100%;
transform: translateX(50%);
top: auto;
bottom: 8px;
right: 50%;
}
.email-signature .social-links li{ display: inline-block; }
}