Footer Responsive avec Bootstrap4

<!DOCTYPE html>
<html>
<head>
  <title>FOOTER RESPONSIVE AVEC BOOTSTRAP4 | par NGLESSON</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="keyword" content="NGLESSON">
  <meta name="author" content="Mezgani said">
  <meta name="copyright" content="NGLESSON">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header class="container">
    <div class="row">
        <div class="col-12">

        </div>
    </div>
</header>
<section class="container">
    <div class="row">
        <div class="col-12">
            
        </div>
    </div>
</section>
<footer class="footer-area footer--light">
<div class="footer-big">
    <!-- start .container -->
    <div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-12">
        <div class="footer-widget">
            <div class="widget-about">
            <img src="http://placehold.it/250x80" alt="" class="img-fluid">
            <p>Illud tamen clausos vehementer angebat quod captis navigiis, quae frumenta vehebant per flumen</p>
            <ul class="contact-details">
                <li>
                <span class="icon-earphones"></span> Call Us:
                <a href="tel:344-755-111"><i class="fa fa-phone"></i> 000-000-000</a>
                </li>
                <li>
                <span class="icon-envelope-open"></span>
                <a href="mailto:mezgani.said@gmail.com"><i class="fa fa-envelope"></i> mezgani.said@gmail.com</a>
                </li>
            </ul>
            </div>
        </div>
        <!-- Ends: .footer-widget -->
        </div>
        <!-- end /.col-md-4 -->
        <div class="col-md-3 col-sm-4">
        <div class="footer-widget">
            <div class="footer-menu footer-menu--1">
            <h4 class="footer-widget-title">Popular Category</h4>
            <ul>
                <li>
                <a href="#">Wordpress</a>
                </li>
                <li>
                <a href="#">Plugins</a>
                </li>
                <li>
                <a href="#">Joomla Template</a>
                </li>
                <li>
                <a href="#">Admin Template</a>
                </li>
                <li>
                <a href="#">HTML Template</a>
                </li>
            </ul>
            </div>
            <!-- end /.footer-menu -->
        </div>
        <!-- Ends: .footer-widget -->
        </div>
        <!-- end /.col-md-3 -->
        <div class="col-md-3 col-sm-4">
        <div class="footer-widget">
            <div class="footer-menu">
            <h4 class="footer-widget-title">Our Company</h4>
            <ul>
                <li>
                <a href="#">About Us</a>
                </li>
                <li>
                <a href="#">How It Works</a>
                </li>
                <li>
                <a href="#">Affiliates</a>
                </li>
                <li>
                <a href="#">Testimonials</a>
                </li>
                <li>
                <a href="#">Contact Us</a>
                </li>
                <li>
                <a href="#">Plan &amp; Pricing</a>
                </li>
                <li>
                <a href="#">Blog</a>
                </li>
            </ul>
            </div>
            <!-- end /.footer-menu -->
        </div>
        <!-- Ends: .footer-widget -->
        </div>
        <!-- end /.col-lg-3 -->
        <div class="col-md-3 col-sm-4">
        <div class="footer-widget">
            <div class="footer-menu no-padding">
            <h4 class="footer-widget-title">Help Support</h4>
            <ul>
                <li>
                <a href="#">Support Forum</a>
                </li>
                <li>
                <a href="#">Terms &amp; Conditions</a>
                </li>
                <li>
                <a href="#">Support Policy</a>
                </li>
                <li>
                <a href="#">Refund Policy</a>
                </li>
                <li>
                <a href="#">FAQs</a>
                </li>
                <li>
                <a href="#">Buyers Faq</a>
                </li>
                <li>
                <a href="#">Sellers Faq</a>
                </li>
            </ul>
            </div>
            <!-- end /.footer-menu -->
        </div>
        <!-- Ends: .footer-widget -->
        </div>
        <!-- Ends: .col-lg-3 -->
    </div>
    <!-- end /.row -->
    </div>
    <!-- end /.container -->
</div>
<!-- end /.footer-big -->
<div class="mini-footer">
    <div class="container">
    <div class="row">
        <div class="col-md-12">
        <div class="copyright-text">
            <p>© 2017
            <a href="#">NGLESSON</a>. All rights reserved. Created by
            <a href="#">MEZGANISAID</a>
            </p>
        </div>

        <div class="go_top">
            <span class="fa fa-arrow-up"></span>
        </div>
        </div>
    </div>
    </div>
</div>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>

body {
  position:relative;
  font-weight:400;
  font-size:15px;
  background:#CCC ;
}
header, section{width: 100%;height: 200px;}
ul {
 padding:0;
 margin:0
}
li {
 list-style:none
}
a:focus,a:hover {
 text-decoration:none;
 -webkit-transition:.3s ease;
 -o-transition:.3s ease;
 transition:.3s ease
}
a:focus {
 outline:0
}
img {
 max-width:100%
}
p {
 font-size:16px;
 line-height:30px;
 color:#898b96;
 font-weight:300
}
h4 {
 font-family:Rubik,sans-serif;
 margin:0;
 font-weight:400;
 padding:0;
 color:#363940
}
a {
 color:#5867dd
}
.no-padding {
 padding:0!important
}
.go_top {
 line-height:40px;
 cursor:pointer;
 width:40px;
 background:#5867dd;
 color:#fff;
 position:fixed;
 -webkit-box-shadow:0 4px 4px rgba(0,0,0,.1);
 box-shadow:0 4px 4px rgba(0,0,0,.1);
 -webkit-border-radius:50%;
 border-radius:50%;
 right:-webkit-calc((100% - 1140px)/ 2);
 right:calc((100% - 1140px)/ 2);
 z-index:111;
 bottom:80px;
 text-align:center
}
.go_top span {
 display:inline-block
}
.footer-big {
 padding:105px 0 65px 0
}
.footer-big .footer-widget {
 margin-bottom:40px
}
.footer--light {
 background:#e7e8ed
}
.footer-big .footer-menu ul li a,.footer-big p,.footer-big ul li {
 color:#898b96
}
.footer-menu {
 padding-left:48px
}
.footer-menu ul li a {
 font-size:15px;
 line-height:32px;
 -webkit-transition:.3s;
 -o-transition:.3s;
 transition:.3s
}
.footer-menu ul li a:hover {
 color:#5867dd
}
.footer-menu--1 {
 width:100%
}
.footer-widget-title {
 line-height:42px;
 margin-bottom:10px;
 font-size:18px
}
.mini-footer {
 background:#192027;
 text-align:center;
 padding:32px 0
}
.mini-footer p {
 margin:0;
 line-height:26px;
 font-size:15px;
 color:#999
}
.mini-footer p a {
 color:#5867dd
}
.mini-footer p a:hover {
 color:#34bfa3
}
.widget-about img {
 display:block;
 margin-bottom:30px
}
.widget-about p {
 font-weight:400
}
.widget-about .contact-details {
 margin:30px 0 0 0
}
.widget-about .contact-details li {
 margin-bottom:10px
}
.widget-about .contact-details li:last-child {
 margin-bottom:0
}
.widget-about .contact-details li span {
 padding-right:12px
}
.widget-about .contact-details li a {
 color:#5867dd
}
@media (max-width:991px) {
 .footer-menu {
  padding-left:0
 }
}

                                    
toggle switch style01

toggle switch style01

page scroll progress bar

page scroll progress bar

Transitions Animations SVG Style01

Transitions Animations SVG Style01

Titre section avec une anmation style01

Titre section avec une anmation style01

Image hover 07

Image hover 07

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Compteur avec b4

Compteur avec b4

Chercher un mot sur la liste

Chercher un mot sur la liste

Changer le style du scroll bar in html

Changer le style du scroll bar in html

Carousel Bootstrap3

Carousel Bootstrap3

Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table

3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery