Skip to content

Commit

Permalink
feat(essentials): up with footers N°2 & 6
Browse files Browse the repository at this point in the history
  • Loading branch information
@ffoodd
ffoodd committed Jul 11, 2019
1 parent 9803e2d commit 7dddb42
Showing 1 changed file with 145 additions and 0 deletions.
145 changes: 145 additions & 0 deletions site/docs/4.3/essentials/footer/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,151 @@ <h2>About Orange</h2>
</div>
</div>
</footer>

<div class="container">
<h3 class="mt-5" id="web-ftr-std-002">
Footer with follow us bar, navigation, service links and auxilliary navigation
<a href="#web-ftr-std-002" class="pl-1 font-weight-normal text-muted h6">
<span aria-hidden="true" class="icon-Link"></span>
<span class="sr-only">Anchor link to Footer with follow us bar, navigation, service links and auxilliary navigation</span>
</a>
</h3>
</div>
<footer class="o-footer" role="contentinfo">
<h1 class="sr-only">Footer — social links, site map & informations</h1>
<div class="o-footer-top">
<div class="container my-3">
<ul class="nav">
<li class="nav-item mr-2"><span class="nav-link">Follow us</span></li>
<li class="nav-item ml-2"><a class="btn btn-xlg btn-fbk-inverse" href="#" aria-label="Facebook"></a></li>
<li class="nav-item ml-2"><a class="btn btn-xlg btn-tw-inverse" href="#" aria-label="Twitter"></a></li>
<li class="nav-item ml-2"><a class="btn btn-xlg btn-gplus-inverse" href="#" aria-label="Google Plus"></a></li>
<li class="nav-item ml-2"><a class="btn btn-xlg btn-lin-inverse" href="#" aria-label="Linkedin"></a></li>
<li class="nav-item ml-2"><a class="btn btn-xlg btn-mail-inverse" href="#" aria-label="Mail"></a></li>
</ul>
</div>
</div>
<div class="o-footer-body">
<div class="container my-2">
<div class="row">
<div class="col-md-3 col-sm-6">
<h2>Shop</h2>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#">Phones</a></li>
<li class="nav-item"><a class="nav-link" href="#">Tablets</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pay monthly</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pay as you go</a></li>
<li class="nav-item"><a class="nav-link" href="#">Home broadband</a></li>
<li class="nav-item"><a class="nav-link" href="#">Mobile broadband</a></li>
<li class="nav-item"><a class="nav-link" href="#">Accessories</a></li>
<li class="nav-item"><a class="nav-link" href="#">Business shop</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-6">
<h2>Services</h2>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#">Calling</a></li>
<li class="nav-item"><a class="nav-link" href="#">Messaging</a></li>
<li class="nav-item"><a class="nav-link" href="#">Mobile email</a></li>
<li class="nav-item"><a class="nav-link" href="#">Orange TV</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contacts</a></li>
<li class="nav-item"><a class="nav-link" href="#">Mobile data services</a></li>
<li class="nav-item"><a class="nav-link" href="#">Roaming</a></li>
<li class="nav-item"><a class="nav-link" href="#">Orange money</a></li>
<li class="nav-item"><a class="nav-link" href="#">Insurance</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-6">
<h2>Support</h2>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#">Mobile help</a></li>
<li class="nav-item"><a class="nav-link" href="#">Broadband help</a></li>
<li class="nav-item"><a class="nav-link" href="#">Mobile data help</a></li>
<li class="nav-item"><a class="nav-link" href="#">Business help</a></li>
<li class="nav-item"><a class="nav-link" href="#">Top up your phone</a></li>
<li class="nav-item"><a class="nav-link" href="#">Track your usage</a></li>
<li class="nav-item"><a class="nav-link" href="#">Community</a></li>
</ul>
</div>
<div class="col-md-3 col-sm-6">
<h2>About Orange</h2>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#">About us</a></li>
<li class="nav-item"><a class="nav-link" href="#">Business</a></li>
<li class="nav-item"><a class="nav-link" href="#">Jobs</a></li>
<li class="nav-item"><a class="nav-link" href="#">Press</a></li>
<li class="nav-item"><a class="nav-link" href="#">Financials</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
</ul>
</div>
</div>
<ul class="nav mt-5 d-none d-lg-flex">
<li class="nav-item">
<a class="nav-link small d-inline-flex align-items-center" href="#">
<span class="icon-store-locator display-5 pr-1 font-weight-normal" aria-hidden="true"></span>
Store locator
</a>
</li>
<li class="nav-item ml-4">
<a class="nav-link small d-inline-flex align-items-center" href="#">
<span class="icon-antenna display-5 pr-1 font-weight-normal" aria-hidden="true"></span>
Coverage checker
</a>
</li>
<li class="nav-item ml-4">
<a class="nav-link small d-inline-flex align-items-center" href="#">
<span class="icon-control-centre display-5 pr-1 font-weight-normal" aria-hidden="true"></span>
Contact us
</a>
</li>
<li class="nav-item ml-4">
<a class="nav-link small d-inline-flex align-items-center" href="#">
<span class="icon-child-protection display-5 pr-1 font-weight-normal" aria-hidden="true"></span>
Child protection
</a>
</li>
</ul>
</div>
</div>
<div class="o-footer-bottom">
<div class="container">
<ul class="nav">
<li class="nav-item"><span class="nav-link">© Orange 2019</span></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="#">Accessibility statement</a></li>
<li class="nav-item"><a class="nav-link" href="#">Cookie Policy</a></li>
</ul>
</div>
</div>
</footer>



<div class="container">
<h3 class="mt-5" id="web-ftr-std-006">
Footer with auxilliary navigation
<a href="#web-ftr-std-006" class="pl-1 font-weight-normal text-muted h6">
<span aria-hidden="true" class="icon-Link"></span>
<span class="sr-only">Anchor link to Footer with auxilliary navigation</span>
</a>
</h3>
</div>
<footer class="o-footer" role="contentinfo">
<h1 class="sr-only">Footer — informations</h1>
<div class="o-footer-bottom">
<div class="container">
<ul class="nav">
<li class="nav-item"><span class="nav-link">© Orange 2019</span></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="#">Accessibility statement</a></li>
<li class="nav-item"><a class="nav-link" href="#">Cookie Policy</a></li>
</ul>
</div>
</div>
</footer>
</main>
</body>
</html>

0 comments on commit 7dddb42

Please sign in to comment.