Permalink
Find file Copy path
ea9bb94 Jul 31, 2017
1 contributor

Users who have contributed to this file

87 lines (84 sloc) 5.27 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Designing Layouts for Screen Readers</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header class="header">
<div class="contain header__layout">
<img class="header__logo" src="http://fillmurray.com/250/250" alt="Business Logo">
<nav class="main-navigation">
<ul class="main-navigation__list">
<li class="main-navigation__list"><a class="main-navigation__link" href="index.html">Home</a></li>
<li class="main-navigation__list"><a class="main-navigation__link" href="skip-link.html">Skip Link Page</a></li>
<li class="main-navigation__list"><a class="main-navigation__link" href="aria-roles.html">Aria Roles</a></li>
<li class="main-navigation__list"><a class="main-navigation__link" href="aria-labels.html">ARIA Labels</a></li>
</ul>
</nav>
</div>
</header>
<div class="main contain">
<main class="content" id="main">
<h1>Main Content</h1>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Secondary Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
<li>List Item #4</li>
<li>List Item #5</li>
</ul>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Secondary Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Conclusion</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
<aside class="sidebar">
<h2>Sidebar</h2>
<section class="related-posts">
<h3>Related Posts</h3>
<ul>
<li><a href="#">Related Post #1</a></li>
<li><a href="#">Related Post #2</a></li>
<li><a href="#">Related Post #3</a></li>
<li><a href="#">Related Post #4</a></li>
<li><a href="#">Related Post #5</a></li>
</ul>
</section>
<section class="share-links">
<h3>Share Links</h3>
<ul>
<li><a href="#">Share to Facebook</a></li>
<li><a href="#">Share to Instagram</a></li>
<li><a href="#">Share to Twitter</a></li>
</ul>
</section>
</aside>
</div>
<section class="search">
<div class="contain">
<h2>Search our posts</h2>
<input type="search">
<input type="button" value="Search">
</div>
</section>
<footer class="footer">
<div class="contain">
<address class="address">
Business Name<br>
123 Main Street<br>
Greenville, SC 29607
</address>
<p>&copy; 2017 Business Name</p>
</div>
</footer>
</body>
</html>