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

Users who have contributed to this file

88 lines (85 sloc) 5.28 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>
<a href="#main" class="skip">Skip to main content</a>
<div class="header">
<div class="contain header__layout">
<img class="header__logo" src="http://fillmurray.com/250/250" alt="Business Logo">
<div 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>
</div>
</div>
</div>
<div class="main contain">
<div 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>
</div>
<div class="sidebar">
<h2>Sidebar</h2>
<div 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>
</div>
<div 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>
</div>
</div>
</div>
<div class="search">
<div class="contain">
<h2>Search our posts</h2>
<input type="search">
<input type="button" value="Search">
</div>
</div>
<div class="footer">
<div class="contain">
<div class="address">
Business Name<br>
123 Main Street<br>
Greenville, SC 29607
</div>
<p>&copy; 2017 Business Name</p>
</div>
</div>
</body>
</html>