Skip to content

Instantly share code, notes, and snippets.

@rknightuk
Created December 7, 2013 11:41
Show Gist options
  • Save rknightuk/7840159 to your computer and use it in GitHub Desktop.
Save rknightuk/7840159 to your computer and use it in GitHub Desktop.
HTML for testing style at the beginning of development
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<hr />
<h1>Paragraph, blockquote and code</h1>
<p>Our love isn&#8217;t any <a href="">different from yours</a>, except it&#8217;s hotter, because I&#8217;m involved. What kind of a father would I be if I said no? Bender! Ship! Stop bickering or I&#8217;m going to come back there and change your opinions manually! </p>
<figure>
<img src="http://placehold.it/150x150" alt="" />
<figcaption></figcaption></figure>
<p>It may <code>comfort</code> you to know that Fry&#8217;s death took only fifteen seconds, yet the pain was so intense, that it felt to him like fifteen years. And it goes without saying, it caused him to empty his bowels. Who&#8217;s brave enough to fly into something we all keep calling a death sphere? Bender, I didn&#8217;t know you liked cooking. That&#8217;s so cute. What are you hacking off? Is it my torso?! &#8216;It is!&#8217; My precious torso! </p>
<blockquote>
<p>Bender, quit destroying the universe! Ah, the &#8216;Breakfast Club&#8217; soundtrack! I can&#8217;t wait til I&#8217;m old enough to feel ways about stuff! Ow, my spirit! You&#8217;ll have all the Slurm you can drink when you&#8217;re partying with Slurms McKenzie! I videotape every customer that comes in here, so that I may blackmail them later. When will that be? </p>
</blockquote>
<pre><code>&lt;?php echo &quot;I never loved you. Are you crazy? I can't swallow that. Why would a robot need to drink?&quot;; ?&gt;
</code></pre>
<hr />
<h1>Lists</h1>
<h2>Ordered List</h2>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
<h2>Unordered List</h2>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
<hr />
<h1>Tables</h1>
<table>
<colgroup>
<col style="text-align:left;"/>
<col style="text-align:left;"/>
<col style="text-align:left;"/>
</colgroup>
<thead>
<tr>
<th style="text-align:left;">Header 1</th>
<th style="text-align:left;">Header 2</th>
<th style="text-align:left;">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left;">Cell 1</td>
<td style="text-align:left;">Cell 2</td>
<td style="text-align:left;">Cell 3</td>
</tr>
<tr>
<td style="text-align:left;">Cell 1</td>
<td style="text-align:left;">Cell 2</td>
<td style="text-align:left;">Cell 3</td>
</tr>
<tr>
<td style="text-align:left;">Cell 1</td>
<td style="text-align:left;">Cell 2</td>
<td style="text-align:left;">Cell 3</td>
</tr>
<tr>
<td style="text-align:left;">Cell 1</td>
<td style="text-align:left;">Cell 2</td>
<td style="text-align:left;">Cell 3</td>
</tr>
</tbody>
</table>
<hr />
<h1>Forms</h1>
<fieldset>
<legend>Legend</legend>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
<form>
<h2>Form Elements</h2>
<p>Can we have Bender Burgers again? Goodbye, friends. I never thought I'd die like this. But I always really hoped. No. We're on the top. Eeeee! Now say "nuclear wessels"!</p>
<p><label for="text_field">Text Field:</label><br />
<input type="text" id="text_field" /></p>
<p><label for="text_area">Text Area:</label><br />
<textarea id="text_area"></textarea></p>
<p><label for="select_element">Select Element:</label><br />
<select name="select_element">
<optgroup label="Option Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
<optgroup label="Option Group 2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
</select></p>
<p><label for="radio_buttons">Radio Buttons:</label><br />
<input type="radio" class="radio" name="radio_button" value="radio_1" /> Radio 1<br/>
<input type="radio" class="radio" name="radio_button" value="radio_2" /> Radio 2<br/>
<input type="radio" class="radio" name="radio_button" value="radio_3" /> Radio 3<br/>
</p>
<p><label for="checkboxes">Checkboxes:</label><br />
<input type="checkbox" class="checkbox" name="checkboxes" value="check_1" /> Radio 1<br/>
<input type="checkbox" class="checkbox" name="checkboxes" value="check_2" /> Radio 2<br/>
<input type="checkbox" class="checkbox" name="checkboxes" value="check_3" /> Radio 3<br/>
</p>
<p><label for="password">Password:</label><br />
<input type="password" class="password" name="password" />
</p>
<p><label for="file">File Input:</label><br />
<input type="file" class="file" name="file" />
</p>
<p><input class="button" type="reset" value="Clear" /> <input class="button" type="submit" value="Submit" />
</p>
</form>
</fieldset>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment