"hosam footer"
Bootstrap 4.1.1 Snippet by Sherif-khaled

<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 href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous"> <section class="container-fluid sec-footer"> <div class="container"> <div class="row"> <div class="col"> <div class="card desc-box"> <div class="card-body"> <div class="card-title">أسم الجزء</div> <div class="card-text"> الوصف </div> </div> </div><!--.card--> </div><!--.col--> <div class="col"> <div class="card desc-box"> <div class="card-body"> <div class="card-title">تواصل معنا</div> <div class="card-text"> <div class="row"> <div class="col"> <i class="fab fa-whatsapp"></i> <span>01113277756-01126118435-01141243486</span> </div><!--.col--> </div><!--.row--> <div class="row"> <div class="col"> <i class="fas fa-map-marker ml-3"></i> <span>القاهره, مصر</span> </div><!--.col--> </div><!--.row--> <div class="row"> <div class="col"> <i class="fas fa-envelope-open ml-3"></i> <span>snipermedia96@gmail.com</span> </div><!--.col--> </div><!--.row--> </div><!--.card-text--> </div> </div><!--.card--> </div><!--.col--> <div class="col text-center"> <img src="https://cdn.mypanel.link/3u7gc2/kq20i85kzk7keifk.png" alt="سنايبر ميديا" class="mb-3"> <br class="clearfix"> <a href="https://youtube.com/channel/UCfj9W1hI8XdD3mnOz5eIRtA" class="snip1472"><i class="fab fa-youtube"></i></a> <a href="https://www.facebook.com/sniper2020media" class="snip1472"><i class="fab fa-facebook"></i></a> </div><!--.col--> </div><!--.row--> </div> </section> <section class="container-fluid sec-sub-footer"> <div class="container"> <div class="row"> <div class="col"> <span>جميع الحقوق محفوظه لموقع سنايبر ميديا.</span> </div><!--.col--> <div class="col text-left"> <a href="http://mihanmedia.ir" class="f-light text-dark">copyright©</a> <a href="http://mihanmedia.ir" class="f-light text-dark">2020</a> </div><!--.col--> </div><!--.row--> </div> </section>
.sec-footer{ background: #433d7b; direction: rtl; text-align: right; color: #fff; padding-top: 2.5rem; padding-bottom: 2rem; } .sec-footer .desc-box{ background: transparent; border: 0; } .sec-footer .desc-box .card-title::after{ content: ' '; background: #ffffff; display: block; width: 95%; height: 0.2rem; margin-top:0.3rem; } .sec-footer .desc-box .card-text{ font-family:iranyekan_light; text-align: justify; } .sec-sub-footer{ background: #f2f2f4; direction: rtl; text-align: right; color: #000; padding-top: 1.5rem; padding-bottom: 1.5rem; font-size:0.8rem; } .sec-sub-footer a{ font-size:0.8rem; } /*------------------*/ .snip1472 { position: relative; font-size: 20px; color: #e6e6e6; width: 45px; margin: 4px; height: 45px; line-height: 45px; display: inline-block; text-align: center; -webkit-perspective: 50em; perspective: 50em; text-decoration: none; -webkit-box-sizing: border-box; box-sizing: border-box; } .snip1472:after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 2px solid #e6e6e6; content: ''; z-index: -1; border-radius: 50%; } .snip1472:before { color: #fff; } .snip1472:before, .snip1472:after { -webkit-transition: all 0.45s ease-in-out; transition: all 0.45s ease-in-out; } .snip1472:hover, .snip1472:active, .snip1472.hover { color: #c0392b; } .snip1472:hover:after, .snip1472:active:after, .snip1472.hover:after { border-color: #c0392b transparent #c0392b transparent; -webkit-transform: rotate(360deg); transform: rotate(360deg); }

Related: See More


Questions / Comments: