Skip to content

Instantly share code, notes, and snippets.

@fightingtheboss

fightingtheboss/index.html

Last active August 29, 2015 14:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fightingtheboss/18ce877a84c1145b98a5 to your computer and use it in GitHub Desktop.
Save fightingtheboss/18ce877a84c1145b98a5 to your computer and use it in GitHub Desktop.
Download ZIP
A starter HTML document for creating your first responsive design
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>McFly Hoverboards</title>
<meta name="viewport" content="">
<style>
/* Add your styles here */
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
margin: 0;
padding: 0;
}
/* Add your media queries here */
</style>
</head>
<body>
<header class="site-branding">
<img class="site-logo" src="http://placehold.it/160x50/990000/ffffff&amp;text=McFly" alt="McFly Hoverboards">
<h1 class="site-title">McFly Hoverboards</h1>
</header>
<nav class="site-menu">
<ul class="menu">
<li><a href="#">Boards</a></li>
<li><a href="#">Jackets</a></li>
<li><a href="#">Shoes</a></li>
<li><a href="#">POWER</a></li>
<li><a href="#">Hover Accessories</a></li>
</ul>
</nav>
<main>
<section class="content">
<h2 class="intro">
Hoverboards don't work on water...unless you have POWER!
</h2>
<ul class="product-listing">
<li class="product">
<img src="http://placehold.it/1440x720" alt="" class="product-image">
<div class="product-meta">
<h2 class="product-title">Product 1</h2>
<p class="product-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, alias quisquam hic est autem ut rerum iusto sed culpa! Autem, non, ad similique deleniti impedit corrupti id obcaecati ut nobis.
</p>
<a class="product-link" href="#">See Details</a>
</div>
</li>
<li class="product">
<img src="http://placehold.it/1440x720" alt="" class="product-image">
<div class="product-meta">
<h2 class="product-title">Product 2</h2>
<p class="product-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, alias quisquam hic est autem ut rerum iusto sed culpa! Autem, non, ad similique deleniti impedit corrupti id obcaecati ut nobis.
</p>
<a class="product-link" href="#">See Details</a>
</div>
</li>
<li class="product">
<img src="http://placehold.it/1440x720" alt="" class="product-image">
<div class="product-meta">
<h2 class="product-title">Product 3</h2>
<p class="product-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, alias quisquam hic est autem ut rerum iusto sed culpa! Autem, non, ad similique deleniti impedit corrupti id obcaecati ut nobis.
</p>
<a class="product-link" href="#">See Details</a>
</div>
</li>
<li class="product">
<img src="http://placehold.it/1440x720" alt="" class="product-image">
<div class="product-meta">
<h2 class="product-title">Product 4</h2>
<p class="product-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, alias quisquam hic est autem ut rerum iusto sed culpa! Autem, non, ad similique deleniti impedit corrupti id obcaecati ut nobis.
</p>
<a class="product-link" href="#">See Details</a>
</div>
</li>
<li class="product">
<img src="http://placehold.it/1440x720" alt="" class="product-image">
<div class="product-meta">
<h2 class="product-title">Product 5</h2>
<p class="product-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, alias quisquam hic est autem ut rerum iusto sed culpa! Autem, non, ad similique deleniti impedit corrupti id obcaecati ut nobis.
</p>
<a class="product-link" href="#">See Details</a>
</div>
</li>
<li class="product">
<img src="http://placehold.it/1440x720" alt="" class="product-image">
<div class="product-meta">
<h2 class="product-title">Product 6</h2>
<p class="product-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, alias quisquam hic est autem ut rerum iusto sed culpa! Autem, non, ad similique deleniti impedit corrupti id obcaecati ut nobis.
</p>
<a class="product-link" href="#">See Details</a>
</div>
</li>
</ul>
</section>
</main>
<footer>
<nav class="footer-menu">
<ul class="menu">
<li><a href="#">Boards</a></li>
<li><a href="#">Jackets</a></li>
<li><a href="#">Shoes</a></li>
<li><a href="#">POWER</a></li>
<li><a href="#">Hover Accessories</a></li>
</ul>
</nav>
<div class="footer-nameplate">
<address>
McFly Hoverboards<br />
114 John F. Kennedy Dr.<br />
Hill Valley, CA<br />
</address>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment