قالب فوتر متجاوب html&css

قالب فوتر متجاوب مع جميع الشاشات، بتقنية html وcss. اقدم لكم هذا الفوتر المجاني، يمكنك استخدامه في تصاميمك او موقعك الشخصي. متجاوب وبسيط وسهل التعديل. القالب بالاصلي باللغة الفارسية ومعروض من قبل مبرمج فارسي مجانا، فقط قمت بتعريبه ونقله لكم مع حفوظ حقوقه.

معاينة القالب

اكواد القالب

ضع الاكواد التالية في المكان المخص للـ Html حيث مكان ظهور القالب:

<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="https://up.iinkor.com/ik/168122312621260.png" 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="https://iinkor.com" class="f-light text-dark">شركة انكور التطويرية</a>
                <a href="http://mihanmedia.ir"  class="f-light text-dark">میهن مدیا</a>
            </div><!--.col-->
        </div><!--.row-->
    </div>
</section>

ضع الاكواد التالية في المكان المخصص للتنسيق اكواد Css:

.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);
}