<!doctype html> <html> <head> <meta charset="UTF-8"> <title>My Responsive Web Site</title> <base href="https://dequeuniversity.com/"> <style> body { margin:0; padding:0; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; } #container { width:1000px; margin:auto; } #logo img { padding:4px; } nav { background-color:#325EB2; text-align:center; } nav ul { margin:0; padding:0; list-style:none; display:inline; } nav li { margin:0; padding:0; list-style:none; display:inline; } nav a { color:#fff; text-decoration:none; display:inline-block; margin:0; padding:4px 8px; font-weight:bold; } nav a:hover,nav a:focus, nav a:active { background-color:#213091; } img.floatleft { float:left; margin:0 5px 5px 0; } main { padding:10px 30px; float:left; width:700px; padding:0 10px 10px 0; box-sizing:border-box; } #topics-list { float:right; width:300px; box-sizing:border-box; padding:0 0 10px; } footer { clear:both; margin:20px 0 50px 0; text-align:center; background-color:#eee; padding:3px; } nav li.tablet,nav li.phone { display:none; } @media (max-width: 1000px) { nav li.desktop,nav li.phone { display:none; } nav li.tablet { display:inline; } #container { width:100%; } img.floatleft { display:block; padding:5px; } main,#topics-list { float:none; width:auto; padding:0 10px; } img { max-width:100%; height:auto; } } @media (max-width: 700px) { nav li.desktop, nav li.tablet { display:none; } nav li.phone { display:block; } nav li { text-align:left; } nav a { width:100%; display:block; font-size:18px; } img.floatleft { margin:auto; float:none; } } </style> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="container"> <div id="logo"> <img src="/assets/images/logos/dqu_wordmark.png" width="500" height="67" alt="Deque University"></div> <nav> <ul> <!-- navigation links for only the desktop view (hidden in tablet and phone view) --> <li class="desktop"><a href="#">Learn about Accessibility</a></li> <li class="desktop"><a href="#"> Testing Tools</a></li> <li class="desktop"><a href="#">Discussion Forum & Mailing List</a></li> <li class="desktop"><a href="#">Blog</a></li> <li class="desktop"><a href="#">User Guides</a></li> <!-- navigation links for only the tablet view (hidden in desktop and phone view) --> <li class="tablet"><a href="#">Learn </a></li> <li class="tablet"><a href="#">Tools</a></li> <li class="tablet"><a href="#">Discussion</a></li> <li class="tablet"><a href="#">Blog</a></li> <li class="tablet"><a href="#">Guides</a></li> <!-- navigation links for only the phone view (hidden in desktop and tablet view)--> <li class="phone"><a href="#">Learn about Accessibility</a></li> <li class="phone"><a href="#"> Testing Tools</a></li> <li class="phone"><a href="#">Discussion Forum & Mailing List</a></li> <li class="phone"><a href="#">Blog</a></li> <li class="phone"><a href="#">User Guides</a></li> </ul> </nav> <main> <h1>This is an Example of a Responsive Design</h1> <p><img class="floatleft" src="/assets/images/accessibility_fundamentals/books-600.jpg" width="371" height="278" alt="A stack of old books, with the top book open and the pages fanned out"> This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. </p> <h2>This is a subheading level 2</h2> <p>I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. </p> <h3>This is a sub heading level 3</h3> <p>This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. </p> <h3>This is another subheading level 3</h3> <p>This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. </p> <h2>This is another subheading level 2</h2> <p>This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. This is the content for this page. This is a lot of text just to fill the space. I will repeat it over and over again because that will fill up the space with more words, which is what I want to do. </p> </main> <div id="topics-list"> <h2>Accessibility Topics</h2> <ul> <li>Types of disabilities <ul> <li>Blindness</li> <li>Deafblindness</li> <li>Colorblindness</li> <li>Low vision</li> <li>Deafness</li> <li>Dexterity/Motor</li> <li>Cognitive</li> <li>Seizure</li> </ul> </li> <li>Assistive technologies <ul> <li>Screen readers</li> <li>Screen magnifiers</li> <li>Alternative pointing devices</li> </ul> </li> <li>Laws and regulations <ul> <li>Americans with Disabilities Act (ADA)</li> <li>Section 508</li> <li>Air Carrier Access Act (ACAA)</li> <li>(CVAA)</li> </ul> </li> <li>Guidelines <ul> <li>Web Content Accessibility Guidelines (WCAG)</li> </ul> </li> <li>Certification <ul> <li>IAAP Certified Associate in Accessibility</li> <li>IAAP Certified Professional in Web Accessibility</li> </ul> </li> </ul> </div> <footer> <p>Copyright 2015 Deque Systems. All rights reserved. <a href="#">Terms of use</a>. </p> </div> </body> </html>