Skip to content

Commit

Permalink
feat(essentials): first footer component on destkop
Browse files Browse the repository at this point in the history
  • Loading branch information
@ffoodd
ffoodd committed Jul 11, 2019
1 parent fa69dac commit 9803e2d
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 0 deletions.
2 changes: 2 additions & 0 deletions site/_data/essentials.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,5 @@
description: "Panel display sample"
- name: "Global headers"
description: "Header variants including multiple navbars"
- name: "Footer"
description: "Footer variants including multiple navbars"
123 changes: 123 additions & 0 deletions site/docs/4.3/essentials/footer/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Module 005 — Footers — sample page</title>
<link rel="stylesheet" href="../../dist/css/orangeHelvetica.css">
<link rel="stylesheet" href="../../dist/css/orangeIcons.css">
<link rel="stylesheet" href="../../dist/css/boosted.css">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
}
</style>
</head>
<body>
<header class="d-flex mb-3 p-3 border-bottom">
<a href="../" class="btn btn-secondary o-link-arrow back" title="go back to examples">Back</a>
<h1 class="ml-3 mb-0">Module 005 — Footers</h1>
</header>

<main class="mb-5">
<div class="container">
<h2 id="footers">Orange footers</h2>
</div>

<div class="container">
<h3 class="mt-5" id="web-ftr-std-001">
Footer with follow us bar, navigation and auxilliary navigation
<a href="#web-ftr-std-001" 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 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 mt-2 mb-3">
<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>
</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>
</main>
</body>
</html>

0 comments on commit 9803e2d

Please sign in to comment.