|
<html> |
|
<head> |
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> |
|
<style> |
|
.main-content { |
|
background-color: #ffffcc; |
|
margin-top: 1px; |
|
margin-bottom: 1px; |
|
} |
|
.inner-content { |
|
background-color: pink; |
|
} |
|
.row { |
|
background-color: gray; |
|
} |
|
.content-area, |
|
.content-area .row { |
|
background-color: white; |
|
} |
|
.main-content .row { |
|
background-color: #ffffcc; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
|
|
<header class="row"> |
|
<p>Site Name (this is the header)</p> |
|
</header> |
|
<section class="content-area row"> |
|
|
|
<div class="container"> |
|
<div class="row"> |
|
<div class="sidebar col-md-3"> |
|
<p>Sidebar with main navitation</p> |
|
<a href="#main-content">Skip to main content</a> (skips to main content) |
|
<ul> |
|
<li><a href="/">nav item</a></li> |
|
<li><a href="/">nav item</a></li> |
|
<li><a href="/">nav item</a></li> |
|
<li><a href="/">nav item</a></li> |
|
<li><a href="/">nav item</a></li> |
|
<li><a href="/">nav item</a></li> |
|
<li><a href="/">nav item</a></li> |
|
<li><a href="/">nav item</a></li> |
|
<li><a href="/">nav item</a></li> |
|
</ul> |
|
</div> |
|
<main class="main-content col-md-9" id="main-content"> |
|
<h1>This is the main content area</h1> |
|
|
|
<div class="row"> |
|
<div class="jump-menu col-md-4"> |
|
<p>Jump-navigation area</p> |
|
<a href="#main-content">Skip navigation links</a> (skips to juicy content) |
|
<ul> |
|
<li><a href="/">jump menu items</a></li> |
|
<li><a href="/">jump menu items</a></li> |
|
<li><a href="/">jump menu items</a></li> |
|
<li><a href="/">jump menu items</a></li> |
|
<li><a href="/">jump menu items</a></li> |
|
<li><a href="/">jump menu items</a></li> |
|
<li><a href="/">jump menu items</a></li> |
|
<li><a href="/">jump menu items</a></li> |
|
<li><a href="/">jump menu items</a></li> |
|
</ul> |
|
</div> |
|
<div class="inner-content col-md-8" id="inner-content"> |
|
<h2>This is the juicy content area</h2> |
|
<p>This is where the important stuff goes</p> |
|
<p>This is where the important stuff goes</p> |
|
<p>This is where the important stuff goes</p> |
|
<p>This is where the important stuff goes</p> |
|
<p>This is where the important stuff goes</p> |
|
</div> |
|
</div> <!-- row --> |
|
</main> |
|
|
|
</div> <!-- row --> |
|
</div> <!-- container --> |
|
|
|
</section> <!-- row --> |
|
<footer class="row"> |
|
<p>this is hte footer</p> |
|
</footer> |
|
|
|
</div><!-- container --> |
|
<body> |
|
</html> |
