Orange footer
Standardised Orange footer
Usage
Footer can be divided in three parts using .o-footer-top, .o-footer-body and .o-footer-bottom classes.
Each footer part must use a .container-fluid or .container depending on page layout.
Use .nav for lists. Use .flex-column for column layout. Use appropriate .col-* classes to fit all screen resolutions.
According to the brand, Orange footer has black background and white text color.
<footer class="o-footer" role="contentinfo">
<h2 class="sr-only">Site map & informations</h2>
<div class="o-footer-top">
<div class="container">
<div class="row mb-0">
<ul class="nav align-items-center">
<li class="nav-item"><span class="nav-link">Follow us:</span></li>
<li class="nav-item"><a class="nav-link btn btn-social btn-twitter" href="#"><span class="sr-only">Twitter</span></a></li>
<li class="nav-item"><a class="nav-link btn btn-social btn-facebook" href="#"><span class="sr-only">Facebook</span></a></li>
<li class="nav-item"><a class="nav-link btn btn-social btn-instagram" href="#"><span class="sr-only">Instagram</span></a></li>
<li class="nav-item"> <a class="nav-link btn btn-social btn-whatsapp" href="#"><span class="sr-only">Whatsapp</span></a></li>
<li class="nav-item"><a class="nav-link btn btn-social btn-linkedin" href="#"><span class="sr-only">Linkedin</span></a></li>
<li class="nav-item"><a class="nav-link btn btn-social btn-youtube" href="#"><span class="sr-only">YouTube</span></a></li>
<li class="nav-item"><a class="nav-link btn btn-social btn-snapchat" href="#"><span class="sr-only">Snapchat</span></a></li>
<li class="nav-item"><a class="nav-link btn btn-social btn-pinterest" href="#"><span class="sr-only">Pinterest</span></a></li>
<li class="nav-item"><a class="nav-link btn btn-social btn-mail" href="#"><span class="sr-only">Mail</span></a></li>
</ul>
</div>
</div>
</div>
<div class="o-footer-body">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<h3>Discover</h3>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#">Unde omnis istea</a></li>
<li class="nav-item"><a class="nav-link" href="#">Natus error sit</a></li>
<li class="nav-item"><a class="nav-link" href="#">Voluptatem</a></li>
<li class="nav-item"><a class="nav-link" href="#">Totam rem aperiam</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-6">
<h3>Shop</h3>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#">Natus error sit</a></li>
<li class="nav-item"><a class="nav-link" href="#">Unde omnis istea</a></li>
<li class="nav-item"><a class="nav-link" href="#">Voluptatem</a></li>
<li class="nav-item"><a class="nav-link" href="#">Doloremque</a></li>
<li class="nav-item"><a class="nav-link" href="#">Totam rem aperiam</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-6">
<h3>Services</h3>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#">Doloremque</a></li>
<li class="nav-item"><a class="nav-link" href="#">Totam rem aperiam</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-6">
<h3>Support</h3>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#">Doloremque</a></li>
<li class="nav-item"><a class="nav-link" href="#">Unde omnis istea</a></li>
<li class="nav-item"><a class="nav-link" href="#">Voluptatem</a></li>
<li class="nav-item"><a class="nav-link" href="#">Totam rem aperiam</a></li>
</ul>
</div>
</div>
<div class="row mb-0">
<ul class="nav">
<li class="nav-item"><a class="nav-link" href="#">Contact us</a></li>
<li class="nav-item"><a class="nav-link" href="#">Locate a store</a></li>
<li class="nav-item"><a class="nav-link" href="#">Coverage map</a></li>
<li class="nav-item"><a class="nav-link" href="#">Business</a></li>
<li class="nav-item"><a class="nav-link" href="#">Child protection</a></li>
</ul>
</div>
</div>
</div>
<div class="o-footer-bottom">
<div class="container">
<div class="row mb-0">
<ul class="nav">
<li class="nav-item"><span class="nav-link">© Orange 2018-2019</span></li>
<li class="nav-item"><a class="nav-link" href="#">Jobs</a></li>
<li class="nav-item"><a class="nav-link" href="#">Advertise</a></li>
<li class="nav-item"><a class="nav-link" href="#">Terms & Conditions</a></li>
<li class="nav-item"><a class="nav-link" href="#">Privacy</a></li>
<li class="nav-item"><a class="nav-link" href="#">Cookies</a></li>
<li class="nav-item"><a class="nav-link" href="#">Access for all</a></li>
<li class="nav-item"><a class="nav-link" href="#">Safety online</a></li>
</ul>
</div>
</div>
</div>
</footer>