Skip to content

Instantly share code, notes, and snippets.

@kcjonson

kcjonson/Responsive HTML Demo

Last active December 19, 2015 20:09
Show Gist options
  • Save kcjonson/6011849 to your computer and use it in GitHub Desktop.
Save kcjonson/6011849 to your computer and use it in GitHub Desktop.
Download ZIP
Core HTML for Responsive Development Demonstration
Raw
Responsive HTML Demo
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Responsive CSS demo" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Responsive Layout demo</title>
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="siteheader">
<h1>Nullam</h1>
<nav class="access"><a href="#menu">&equiv;<span class="hidden">Menu</span></a></nav>
</header>
<div class="container clearfix">
<div class='content'>
<h2>Sed lobortis dapibus tempus</h2>
<section class="intro clearfix">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet purus a erat adipiscing auctor quis et massa. Sed lobortis dapibus tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut quam risus, non malesuada felis. Maecenas dolor arcu, eleifend sit amet condimentum eu, facilisis vel dolor. Fusce euismod ligula non odio lobortis id posuere tortor iaculis. Donec vel dolor vitae tellus varius consectetur at nec urna. Ut dapibus vulputate ullamcorper.</p>
</section>
<section class='form'>
<div class="field">
<label for="firstName">First Name</label>
<input class="input" id="firstName" type="text" />
</div>
<div class="field">
<label for="lastName">Last Name</label>
<input class="input" id='lastName' type="text" />
</div>
<div class="field">
<label for="email">Email</label>
<input class="input" id='email' type="email" />
</div>
<div class="field">
<label for="notes">Notes</label>
<textarea class="input" id='notes'></textarea>
</div>
</section>
</div>
<aside class="more">
<ul>
<li>Pellentesque</li>
<li>Nulla rhoncus</li>
<li>Morbi faucibus</li>
<li>Donec quam metus</li>
<li>Etiam placerat</li>
</ul>
</aside>
<nav id="menu">
<a href="#menu">Scelerisque</a>
<a href="#item">Accumsan</a>
<a href="#">Gravida</a>
<a class="hidden toplink" href="#">&uarr; Top</a>
</nav>
</div>
<footer>
<p>&copy; 2013 Nullam</p>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment