"footer"
Bootstrap 4.0.0 Snippet by mhk67_

<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="fas fa-phone ml-3"></i> <span>0921212121-32323232</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>info@dsdsdsds.ir</span> </div><!--.col--> </div><!--.row--> </div><!--.card-text--> </div> </div><!--.card--> </div><!--.col--> <div class="col text-center"> <img src="http://www.mihanmedia.ir/userfile/name.jpg" alt="مدرسه شهدای رهپویان" class="mb-3"> <br class="clearfix"> <a href="#" class="snip1472"><i class="fab fa-linkedin-in"></i></a> <a href="#" class="snip1472"><i class="fab fa-instagram"></i></a> <a href="#" class="snip1472"><i class="fab fa-telegram-plane"></i></a> <a href="#" class="snip1472"><i class="fab fa-google-plus-g"></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">طراحی و توسعه:</a> <a href="http://mihanmedia.ir" class="f-light text-dark">میهن مدیا</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: