Basic Page
Base page layout with Navigation and Footer
<header>
<a class="sr-only sr-only-focusable" href="#mainContent">Skip navigation to main content</a>
<nav class="navbar navbar-expand-lg atp-navbar" aria-label="Main">
<div class="container">
<div class="row no-gutters w-100 mb-lg-2">
<div class="col d-flex align-items-center">
<button class="navbar-toggler mr-2 px-1" type="button" data-toggle="collapse" data-target="#atpNavbarContent" aria-controls="atpNavbarContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="lmp-icon icon-lg" aria-hidden="true">menu</i>
</button>
<a class="navbar-brand d-none d-lg-inline-block" href="#">
Aviation Training Portal
</a>
<div class="navbar-title d-lg-none">
[Active Navigation Indicator]
</div>
</div>
<div class="col-auto">
<ul class="navbar-nav navbar-icon-nav justify-content-end">
<li class="nav-item d-none d-sm-block">
<a class="nav-link" href="#">
<i class="lmp-icon icon-lg" aria-hidden="true">help_outline</i>
<span class="sr-only">Help Center</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="lmp-icon icon-lg" aria-hidden="true">apps</i>
<span class="sr-only">Applications Menu</span>
</a>
<div class="dropdown-menu dropdown-menu-right atp-nav-dropdown" aria-labelledby="navbarDropdown">
<h6 class="dropdown-header">Portal</h6>
<a class="dropdown-item" href="#">MyBoeingFleet</a>
<div class="dropdown-divider"></div>
<h6 class="dropdown-header">Applications</h6>
<a class="dropdown-item" href="#">Application 1</a>
<a class="dropdown-item" href="#">Application 2</a>
<a class="dropdown-item" href="#">Application 3</a>
<a class="dropdown-item" href="#">More Applications</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="accountMenuDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="lmp-icon icon-lg" aria-hidden="true">account_circle</i>
<span class="sr-only">Account Menu</span>
</a>
<div class="dropdown-menu dropdown-menu-right atp-nav-dropdown pb-0" aria-labelledby="accountMenuDropdown">
<div class="h5 font-weight-bold mb-1 px-4">FirstName LastName</div>
<div class="dropdown-small-text">firstname.lastname@company.com</div>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">MBF Account Details</a>
<a href="#" class="dropdown-item dropdown-btn mt-4">Log Out</a>
</div>
</li>
</ul>
</div>
</div>
<div class="collapse navbar-collapse" id="atpNavbarContent">
<div class="row d-lg-none pt-lg-1">
<div class="col py-3 pl-4">
<img src="../../../../assets/images/boeing-logo.svg" width="145" height="34" alt="Boeing" loading="lazy" style="width: 150px; display: block; height: auto;">
</div>
<div class="col-auto py-3 pr-2">
<button class="navbar-toggler text-dark" type="button" data-toggle="collapse" data-target="#atpNavbarContent" aria-controls="atpNavbarContent" aria-expanded="false" aria-label="Close navigation">
<i class="lmp-icon icon-lg" aria-hidden="true">close</i>
</button>
</div>
<div class="col-12 border-top border-bottom py-1 px-3">
<a class="navbar-brand-mobile" href="#">Aviation Training Portal</a>
</div>
</div>
<div class="row no-gutters">
<div class="col-12">
<ul class="navbar-nav navbar-link-nav">
<li class="nav-item">
<a class="nav-link" href="#">Products & Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Materials</a>
</li>
<li class="nav-item d-sm-none border-top mt-1 pt-2">
<a href="#" class="nav-link d-flex align-items-center">
<i class="lmp-icon mr-2" aria-hidden="true">help_outline</i> Help Center
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</header>
<main id="mainContent" class="bg-gray-lt">
<div class="atp-header">
<div class="container">
<div class="row">
<div class="col d-flex align-items-start order-1 order-md-0">
<h1 class="order-1">
H1 Main Heading
<span>Subheading Text</span>
</h1>
<a href="#" class="btn lmp-link atp-header-back-link order-0">
<i class="lmp-icon icon-md" aria-hidden="true">arrow_back</i>
<span class="sr-only">Navigate to previous page</span>
</a>
</div>
</div>
</div>
</div>
<div class="container lmp-page-content">
<div class="row">
<div class="col-xl-9">
<h2>H2 Secondary Heading</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing, elit. Deleniti neque sapiente cumque. Odio, molestias explicabo doloribus magnam delectus earum incidunt laboriosam cum sequi ex magni molestiae, fugiat corrupti labore repellendus.</p>
<p>Deleniti cumque rerum explicabo ducimus impedit laboriosam, ex aperiam sapiente recusandae, voluptatum maxime adipisci repudiandae accusantium, tempore sint praesentium omnis, ut rem consequuntur fuga? Officia vitae laborum maiores laudantium atque.</p>
<h3>H3 Laudantium neque libero iusto sit</h3>
<p>Rerum, quos. Facilis saepe excepturi praesentium. Facere, animi placeat. Eligendi, exercitationem dolores, sed soluta excepturi distinctio mollitia est consequuntur, ducimus tempore consequatur cupiditate optio minus necessitatibus at alias, porro omnis.</p>
<p>Libero at omnis nemo, esse deleniti cum odit sed consectetur voluptates quasi quo suscipit, doloribus dolores dolore. Temporibus, dolorem nobis inventore accusantium fugiat unde optio, laudantium neque libero iusto sit.</p>
<h4>H4 Deleniti neque sapiente cumque</h4>
<ul>
<li>Sequi numquam harum, expedita sint architecto doloremque quas quam perferendis ipsa eveniet.</li>
<li>Alias, aliquam sit, libero debitis blanditiis magnam nisi dolore ratione! Hic, eos!</li>
<li>Voluptatibus optio quia perspiciatis veritatis rem, facilis. Vitae delectus itaque, consequuntur sapiente.</li>
<li>Architecto ex doloribus nulla quaerat sit quas fugiat quis temporibus consequatur, non.</li>
</ul>
</div>
</div>
</div>
</main>
<footer class="atp-foooter">
<div class="container">
<div class="row">
<div class="col-lg-7">
<nav class="atp-footer-links" aria-label="Footer">
<a href="#">MBF Home</a>
<a href="#">Contact Us</a>
<a href="#">Terms of Use</a>
<a href="#">Boeing Privacy & Cookie Statement</a>
</nav>
</div>
<div class="col-lg-5 text-center text-lg-right">
Copyright © 2020 Boeing. All right reserved.
</div>
</div>
</div>
</footer>