"Email Signature"
Bootstrap 4.1.1 Snippet by Siddharth Panchal

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!------------------ Card Effect Style : Demo - 1 --------------->
<div class="container">
<h3 class="text-center">Card Effect Style : Demo - 1</h3>
<div class="row my-5 justify-content-center">
<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-signature1">
<div class="signature-content">
<div class="signature-details">
<h2 class="title">Jhon Doe</h2>
<span class="post">Web Developer / CEO</span>
</div>
<ul class="inner-content">
<li><span class="fa fa-map-marker fa-lg text-white"></span> #2021, Lorem Ipsum</li>
<li><span class="fa fa-mobile fa-lg text-white"></span> 0987654321</li>
<li><span class="fa fa-envelope text-white"></span> mail@example.com</li>
<li><span class="fa fa-globe text-white"></span> yourwebsite.com</li>
</ul>
</div>
<div class="signature-img">
<img src="https://www.w3schools.com/bootstrap/img_avatar4.png" alt="">
</div>
<ul class="icon">
<li><a href=""><i class="fa fa-facebook-f"></i></a></li>
<li><a href=""><i class="fa fa-twitter"></i></a></li>
<li><a href=""><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
h3{margin: 2em 0em;}
.my-5{margin:7em 0em !important;}
/*********************** Demo - 1 *******************/
.email-signature1{background:#fff;font-family:Lato,sans-serif;padding:25px;box-shadow:0 0 10px rgba(0,0,0,.4);position:relative;z-index:1}
.email-signature1:before{content:"";background:linear-gradient(to right,#f01c4e ,#69177d);width:47%;height:100%;position:absolute;top:0;right:0;z-index:-1}
.email-signature1 .signature-content{color:#fff;background:#001f38;width:65%;padding:20px}
.email-signature1 .signature-details{text-align:center;margin:0 0 10px;display:inline-block}
.email-signature1 .title{font-size:24px;font-weight:600;text-transform:uppercase;margin:0}
.email-signature1 .post{font-size:14px}
.email-signature1 .inner-content{padding:0 40px 0 0;margin:0;list-style:none}
.email-signature1 .inner-content li{color:#fff;font-size:15px;line-height:35px;display:block}
.email-signature1 .inner-content li span{color:#001f38;background:linear-gradient(to right,#f01c4e ,#69177d);text-align:center;line-height:25px;width:25px;height:25px;margin-right:6px;border-radius:5px}
.email-signature1 .signature-img{background:#fff;width:160px;height:160px;padding:7px;overflow:hidden;transform:translateY(-50%);position:absolute;top:50%;right:13%;z-index:1}
.email-signature1 .signature-img img{width:100%;height:auto}
.email-signature1 .icon{padding:0;margin:0;list-style:none;transform:translateY(-50%);position:absolute;top:50%;right:20px}
.email-signature1 .icon li a{color:#f01c4e;background:#fff;font-size:18px;text-align:center;line-height:30px;width:30px;height:30px;margin:15px 0;border-radius:50%;display:block;transition:all .3s ease 0s}
.email-signature1 .icon li a:hover{color:#fff;background:#f01c4e;text-decoration:none;box-shadow:0 0 10px #fff}
@media screen and (max-width:767px){.email-signature1 .signature-img{right:17%}
}
@media screen and (max-width:576px){.email-signature1{padding:17px}
.email-signature1:before{width:100%;height:50%;top:auto;bottom:0}
.email-signature1 .signature-content{text-align:center;width:100%;padding:20px 10px 50px}
.email-signature1 .inner-content{padding:0}
.email-signature1 .inner-content li{line-height:40px}
.email-signature1 .signature-img{margin:0 auto;transform:translateY(0);position:relative;right:0;top:-35px}
.email-signature1 .icon{text-align:center;transform:translateY(0) translatex(50%);top:auto;bottom:10px;right:50%}
.email-signature1 .icon li{display:inline-block}
.email-signature1 .icon li a{margin:0 5px 0}
}
/*********************** Demo - 2 *******************/
.demo{background-color:#4a5069}
.email-signature2{background:#fff;font-family:Karla,sans-serif;padding:30px 35px 30px 30px;box-shadow:0 0 10px rgba(0,0,0,.4);position:relative;z-index:1}
.email-signature2:before{content:"";background:linear-gradient(to right,#da4453,#89216b);width:100%;height:19%;position:absolute;bottom:0;left:0;z-index:-1}
.email-signature2 .signature-details{color:#89216b;width:50%;margin-bottom:20px;display:inline-block}
.email-signature2 .title{font-size:24px;font-weight:700;text-transform:uppercase;margin:0}
.email-signature2 .post{font-size:15px;text-transform:capitalize}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard Pro Angular
Responsive Email Template
Email interface like Gmail

Questions / Comments: