Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
executable file 650 lines (402 sloc) 16 KB
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Responsable Grid System</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="assets/images/favicon.ico">
<link rel="apple-touch-icon" href="assets/images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/images/apple-touch-icon-114x114.png">
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/css/style.css">
<script src="assets/js/script-ck.js"></script>
</head>
<body>
<!--[if lt IE 7]><p class="chromeframe">Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
<header id="worlds_birth">
<div>
<hgroup>
<h1>Responsable</h1>
</hgroup>
<nav>
<ul>
<li><a href="#type">Type</a></li>
<li><a href="#tables">Tables</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#grid">Grid</a></li>
</ul>
</nav>
</div>
</header>
<div id="content">
<div>
<section>
<a name="type"></a>
<h1>Heading 1</h1>
<p>Here, it must needs be said, that accidents like this have in more than one case occurred to ships in violent storms. The magnetic energy, as developed in the mariner's needle, is, as all know, essentially one with the electricity beheld in heaven; hence it is not to be much marvelled at, that such things should be. Instances where the lightning has actually struck the vessel, so as to smite down some of the spars and rigging, the effect upon the needle has at times been still more fatal; all its loadstone virtue being annihilated, so that the before magnetic steel was of no more use than an old wife's knitting needle. But in either case, the needle never again, of itself, recovers the original virtue thus marred or lost; and if the binnacle compasses be affected, the same fate reaches all the others that may be in the ship; even were the lowermost one inserted into the kelson.</p>
<figure class="responsive" data-media="http://placehold.it/300x96" data-media440="http://placehold.it/440x172" data-media600="http://placehold.it/632x240" title="A Half Brained Idea">
<noscript>
<img src="http://placehold.it/632x240">
</noscript>
<figcaption>Check out the responsive images</figcaption>
</figure>
<p><pre>Deliberately standing before the binnacle, and eyeing the transpointed compasses, the old man, with the sharp of his extended hand, now took the precise bearing of the sun, and satisfied that the needles were exactly inverted, shouted out his orders for the ship's course to be changed accordingly. The yards were hard up; and once more the Pequod thrust her undaunted bows into the opposing wind, for the supposed fair one had only been juggling her.</pre></p>
<h2>Subtitle &mdash; h2</h2>
<p>I drew rein on a little level promontory overlooking the trail below and to my left, and saw the party of pursuing savages disappearing around the point of a neighboring peak.</p>
<h3>Subtitle &mdash; h3</h3>
<p>I knew the Indians would soon discover that they were on the wrong trail and that the search for me would be renewed in the right direction as soon as they located my tracks.</p>
<h4>Subtitle &mdash; h4</h4>
<p>I had gone but a short distance further when what seemed to be an excellent trail opened up around the face of a high cliff. The trail was level and quite broad and led upward and in the general direction I wished to go. The cliff arose for several hundred feet on my right, and on my left was an equal and nearly perpendicular drop to the bottom of a rocky ravine.</p>
<h5>Subtitle &mdash; h5</h5>
<p>I had followed this trail for perhaps a hundred yards when a sharp turn to the right brought me to the mouth of a large cave. The opening was about four feet in height and three to four feet wide, and at this opening the trail ended.</p>
<h6>Subtitle &mdash; h6</h6>
<p>It was now morning, and, with the customary lack of dawn which is a startling characteristic of Arizona, it had become daylight almost without warning.</p>
<ul>
<li>List item 01</li>
<li>List item 02</li>
<li>List item 03</li>
</ul>
<p>Dismounting, I laid Powell upon the ground, but the most painstaking examination failed to reveal the faintest spark of life. I forced water from my canteen between his dead lips, bathed his face and rubbed his hands, working over him continuously for the better part of an hour in the face of the fact that I knew him to be dead.</p>
<blockquote cite="http://abandon.ie">
<p>I was very fond of Powell; he was thoroughly a man in every respect; a polished southern gentleman; a staunch and true friend; and it was with a feeling of the deepest grief that I finally gave up my crude endeavors at resuscitation.</p>
</blockquote>
<p>Leaving Powell's body where it lay on the ledge I crept into the cave to reconnoiter. I found a large chamber, possibly a hundred feet in diameter and thirty or forty feet in height; a smooth and well-worn floor, and many other evidences that the cave had, at some remote period, been inhabited. The back of the cave was so lost in dense shadow that I could not distinguish whether there were openings into other apartments or not.</p>
<hr />
<p>As I was continuing my examination I commenced to feel a pleasant drowsiness creeping over me which I attributed to the fatigue of my long and strenuous ride, and the reaction from the excitement of the fight and the pursuit. I felt comparatively safe in my present location as I knew that one man could defend the trail to the cave against an army.</p>
<a name="tables"></a>
<h2>Tables</h2>
<table>
<caption>Tables have a little bit of default styling</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
<td>Footer 4</td>
</tr>
</tfoot>
</table>
<a name="forms"></a>
<h2>Forms</h2>
<p>Forms have a little bit of default styling too</p>
<form action="/" method="get">
<fieldset>
<legend>Form Elements</legend>
<ul>
<li>
<label for="name">Name:</label>
<input type="text" id="name" name="name" value="" maxlength="100" placeholder="First name, last name..">
</li>
<li>
<label>Lunchy:</label>
<label class="inline" for="pasta"><input type="radio" id="pasta" name="lunch" value="pasta"> Pasta</label>
<label class="inline" for="fish"><input type="radio" id="fish" name="lunch" value="fish"> Fish</label>
</li>
<li>
<label>Drinks:</label>
<label class="inline" for="beer"><input type="checkbox" id="beer" name="drinks" value="beer"> Beer</label>
<label class="inline" for="wine"><input type="checkbox" id="wine" name="drinks" value="wine"> Wine</label>
</li>
<li>
<label for="city">Preferred City:</label>
<select id="city" name="city">
<option value ="option">option</option>
<option value ="option">option</option>
<option value ="option">option</option>
<option value ="option">option</option>
</select>
</li>
<li>
<label for="form_url">Url:</label>
<input name="form_url" id="form_url" type="url" list="url_list" placeholder="http://">
<datalist id="url_list">
<option value="http://www.google.com" label="Google">
<option value="http://www.nettuts.com" label="NetTuts">
</datalist>
</li>
<li>
<label for="form_range">Range:</label>
<input name="form_range" id="form_range" type="range" min="1" max="10" step=".5" value="5" >
</li>
<li>
<label for="form_number">Number:</label>
<input name="form_number" id="form_number" type="number" min="1" max="10" >
</li>
<li>
<label for="form_date">Date:</label>
<input name="form_date" id="form_date" type="date">
</li>
<li>
<label for="form_month">Month:</label>
<input name="form_month" id="form_month" type="month">
</li>
<li>
<label for="form_week">Week:</label>
<input name="form_week" id="form_week" type="week">
</li>
<li>
<label for="form_time">Time:</label>
<input name="form_time" id="form_time" type="time">
</li>
<li>
<label for="form_datetime_local">Local Time:</label>
<input name="form_datetime_local" id="form_datetime_local" type="datetime-local">
</li>
<li>
<label for="email">Email:</label>
<input name="form_email" id="form_email" type="email" list="email_list" multiple>
<datalist id="url_list">
<option value="jane.doe@test.com" label="Jane Doe">
<option value="john.doe@test.com" label="John Doe">
</datalist>
</li>
<li>
<label for="form_telephone">Phone:</label>
<input name="form_telephone" id="form_telephone" type="telephone">
</li>
<li>
<label for="form_color">Color:</label>
<input name="form_color" id="form_color" type="color">
</li>
<li>
<label>Progress &amp; Meter</label>
<progress id="p" max=100>0% </progress>
<meter min=0 max=20 value=12 optimum=10>12cm </meter>
</li>
<li>
<label for="comments">Comments:</label>
<textarea id="comments" rows="3" cols="20" name="comments" placeholder="Blah, blah, blah.."></textarea>
</li>
<li>
<input type="submit" value="Submit">
<input type="button" value="Cancel">
</li>
</ul>
</fieldset>
</form>
</section>
<aside>
<h2>List Types</h2>
<div id="lists">
<div>
<h3>Ordered list</h3>
<ol>
<li>List item</li>
<li>List item</li>
<li>List item
<ol>
<li>List item level 2</li>
<li>List item level 2
<ol>
<li>List item level 3</li>
<li>List item level 3</li>
</ol>
</li>
</ol>
</li>
</ol>
</div>
<div>
<h3>Unordered list</h3>
<ul>
<li>List item 01</li>
<li>List item 02</li>
<li>List item 03
<ul>
<li>List item level 2</li>
<li>List item level 2
<ul>
<li>List item level 3</li>
<li>List item level 3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div>
<h3>Definition List</h3>
<dl>
<dt>Definition list title</dt>
<dd>Definition list data</dd>
<dt>Definition list title</dt>
<dd>Definition list data</dd>
<dt>Definition list title</dt>
<dd>Definition list data</dd>
</dl>
</div>
</div>
<div>
<h2>Other markup code</h2>
<div>
<p>
<a href="">hyperlink</a><br>
<abbr title="title">abbreviation</abbr><br>
<acronym>acronym (A)</acronym><br>
<b>offset text typically styled in bold</b><br>
<cite>cited title of a work</cite><br>
<code>code fragment</code><br>
<del>deleted text</del><br>
<dfn title="title">defining instance</dfn><br>
<em>emphatic stress</em><br>
<i>offset text typically styled in italic</i><br>
<ins>inserted text</ins><br>
</p>
</div>
<div>
<p>
<kbd>user input</kbd><br>
<mark>marked (highlighted) text</mark><br>
<samp>sample output</samp><br>
<small>small print</small><br>
<strong>strong importance</strong><br>
<sup>superscript</sup> <sub>subscript</sub><br>
<var>variable or placeholder text</var>
</p>
<address>contact information</address>
<pre>preformatted text</pre>
</div>
</div>
</aside>
<div>
<div>
<a name="grid"></a>
<h2>Grid Sample</h2>
</div>
<section id="thirds">
<div></div>
<div></div>
<div></div>
</section>
<section id="quarters">
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<section id="sixths">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<section id="twelfths">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<section id="one">
<div></div>
<div></div>
</section>
<section id="two">
<div></div>
<div></div>
</section>
<section id="three">
<div></div>
<div></div>
</section>
<section id="four">
<div></div>
<div></div>
</section>
<section id="five">
<div></div>
<div></div>
</section>
<section id="six">
<div></div>
<div></div>
</section>
<section id="seven">
<div></div>
<div></div>
</section>
<section id="eight">
<div></div>
<div></div>
</section>
<section id="nine">
<div></div>
<div></div>
</section>
<section id="ten">
<div></div>
<div></div>
</section>
<section id="eleven">
<div></div>
<div></div>
</section>
</div>
</div>
</div>
<footer id="worlds_end">
</footer>
</body>
</html>