Source Code for Responsive Example 1
<!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>
