<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ----------> <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">Plansite</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="http://plansite.ir"><span>طراحی سایت ارزان</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%); } }