Skip to content

Instantly share code, notes, and snippets.

@sguzik
Created April 23, 2012 18:41
Show Gist options
  • Save sguzik/2472968 to your computer and use it in GitHub Desktop.
Save sguzik/2472968 to your computer and use it in GitHub Desktop.
HTML wireframe for wordpress lesson
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Index page</title>
<meta name="description" content="">
<link rel="stylesheet" href="http://samguzik.com/wp_lesson/wp-content/themes/basicTheme/style.css">
<link rel="stylesheet" href="http://samguzik.com/wp_lesson/wp-content/themes/basicTheme/custom.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://samguzik.com/wp_lesson/wp-content/themes/basicTheme/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="span12" id="header">
<img src="http://placekitten.com/240/80" />
<h3>Just another WordPress site</h3>
</div>
</div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">My blog</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div>
<div class="row">
<div class="span8" id="main-content">
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This could be some kind of featured article carousel in the future. But be patient, we'll get there eventually.</p>
</div>
<h2>Moby Dick, by Herman Melville</h2>
<p>"Didn't I say de Roanoke country?" he cried sharply.</p>
<p>"No, you didn't, cook; but I'll tell you what I'm coming to, cook. You must go home and be born over again; you don't know how to cook a whale-steak yet."</p>
<p>"Bress my soul, if I cook noder one," he growled, angrily, turning round to depart.</p>
<a class="btn btn-primary" href="#">Read more</a>
<hr>
<h2>Moby Dick, by Herman Melville</h2>
<p>"Didn't I say de Roanoke country?" he cried sharply.</p>
<p>"No, you didn't, cook; but I'll tell you what I'm coming to, cook. You must go home and be born over again; you don't know how to cook a whale-steak yet."</p>
<p>"Bress my soul, if I cook noder one," he growled, angrily, turning round to depart.</p>
<a class="btn btn-primary" href="#">Read more</a>
<hr>
<h2>Moby Dick, by Herman Melville</h2>
<p>"Didn't I say de Roanoke country?" he cried sharply.</p>
<p>"No, you didn't, cook; but I'll tell you what I'm coming to, cook. You must go home and be born over again; you don't know how to cook a whale-steak yet."</p>
<p>"Bress my soul, if I cook noder one," he growled, angrily, turning round to depart.</p>
<a class="btn btn-primary" href="#">Read more</a>
<hr>
</div>
<div class="span4" id="sidebar">
<div class="well">
<p>Sidebar things</p>
</div>
<div class="well">
<p>More sidebar things</p>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</div>
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</div>
<div class="span4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</div>
</div>
<hr>
<footer>
<p>© Company 2012</p>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment