<!DOCTYPE html>
<html>
<head>
<title>Ubuntu Presentation</title>
<meta charset='utf-8'>
<script src='http://bholtsclaw.github.com/html5slides/javascripts/slides.js'></script>
</head>
<style>
/* Any Custom styles here, or just use in-line styles if thats what you want. */
</style>
<body style='display: none'>
<section class='slides layout-regular template-ubuntu'>
<!-- Your slides (<article>s) go here. Delete or comment out the
slides below. -->
<article class='biglogo'>
</article>
<article>
<h1>
Title Goes Here Up
<br>
To Two Lines
</h1>
<p>
Brandon Holtsclaw
<br>
June 8, 2012
</p>
</article>
<article>
<p>
This is a slide with just text. This is a slide with just text.
This is a slide with just text. This is a slide with just text.
This is a slide with just text. This is a slide with just text.
</p>
<p>
There is more text just underneath.
</p>
</article>
<article>
<h3>
Simple slide with header and text
</h3>
<p>
This is a slide with just text. This is a slide with just text.
This is a slide with just text. This is a slide with just text.
This is a slide with just text. This is a slide with just text.
</p>
<p>
There is more text just underneath with a
<code>code sample: 5px</code>.
</p>
</article>
<article class='smaller'>
<h3>
Simple slide with header and text (small font)
</h3>
<p>
This is a slide with just text. This is a slide with just text.
This is a slide with just text. This is a slide with just text.
This is a slide with just text. This is a slide with just text.
</p>
<p>
There is more text just underneath with a
<code>code sample: 5px</code>.
</p>
</article>
<article>
<h3>
Slide with bullet points and a longer title, just because we
can make it longer
</h3>
<ul>
<li>
Use this template to create your presentation
</li>
<li>
Use the provided color palette, box and arrow graphics, and
chart styles
</li>
<li>
Instructions are provided to assist you in using this
presentation template effectively
</li>
</ul>
</article>
<article>
<h3>
Slide with bullet points that builds
</h3>
<ul class="build">
<li>
This is an example of a list
</li>
<li>
The list items fade in
</li>
<li>
Last one!
</li>
</ul>
<div class="build">
<p>Any element with child nodes can build.</p>
<p>It doesn't have to be a list.</p>
</div>
</article>
<article class='smaller'>
<h3>
Slide with bullet points (small font)
</h3>
<ul>
<li>
Use this template to create your presentation
<li>
Use the provided color palette, box and arrow graphics, and
chart styles
<li>
Instructions are provided to assist you in using this
presentation template effectively
<li>
All while keeping a consistent look and feel!
</ul>
</article>
<article>
<h3>
Slide with a table
</h3>
<table>
<tr>
<th>
Name
<th>
Occupation
<tr>
<td>
Jono Bacon
<td>
Head of the Horsemen
<td>
Jorge Castro
<td>
Some dude that keeps asking where `whiprush` is ...
</table>
</article>
<article class='smaller'>
<h3>
Slide with a table (smaller text)
</h3>
<table>
<tr>
<th>
Name
<th>
Occupation
<tr>
<td>
Jono Bacon
<td>
Head of the Horsemen
<tr>
<td>
Jorge Castro
<td>
Some dude that keeps asking where `whiprush` is ...
</table>
</article>
<article>
<h3>
Styles
</h3>
<ul>
<li>
<span class='red'>class="red"</span>
<li>
<span class='blue'>class="blue"</span>
<li>
<span class='green'>class="green"</span>
<li>
<span class='yellow'>class="yellow"</span>
<li>
<span class='black'>class="black"</span>
<li>
<span class='white'>class="white"</span>
<li>
<b>bold</b> and <i>italic</i>
</ul>
</article>
<article>
<h2>
<!-- Segue slide -->
</h2>
</article>
<article>
<h3>
Slide with an image
</h3>
<p>
<img style='height: 500px' src='images/example-graph.png'>
</p>
<div class='source'>
Source: Mike Hall
</div>
</article>
<article>
<h3>
Slide with an image (centered)
</h3>
<p>
<img class='centered' style='height: 500px' src='images/example-graph.png'>
</p>
<div class='source'>
Source: Jono Bacon
</div>
</article>
<article class='fill'>
<h3>
Image filling the slide (with optional header)
</h3>
<p>
<img src='images/example-cat.jpg'>
</p>
<div class='source white'>
Source: Jorge Castro
</div>
</article>
<article>
<h3>
This slide has some code
</h3>
<section>
<pre>
<script type='text/javascript'>
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ' + String(world));
}
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: 'umber' }
</style>
</pre>
</section>
</article>
<article class='smaller'>
<h3>
This slide has some code (small font)
</h3>
<section>
<pre>
<script type='text/javascript'>
// Say hello world until the user starts questioning
// the meaningfulness of their existence.
function helloWorld(world) {
for (var i = 42; --i >= 0;) {
alert('Hello ' + String(world));
}
}
</script>
<style>
p { color: pink }
b { color: blue }
u { color: 'umber' }
</style>
</pre>
</section>
</article>
<article>
<q>
The best way to predict the future is to invent it.
</q>
<div class='author'>
Alan Kay
</div>
</article>
<article>
<h3>External JS Widgets ? Sure</h3>
<p class='centered'>
<div id="showdown-widget-1"><a href="http://developer.ubuntu.com/">
<img src="http://bholtsclaw.github.com/img/nojs.png" style="border: 0;"></a></div>
<script src="http://bholtsclaw.github.com/showdown/1/loader.js" type="text/javascript">
</script>
</p>
<div class="source">
Find this widget at <a href="http://bholtsclaw.github.com/showdown/">http://bholtsclaw.github.com/showdown/</a>
</div>
</ul>
</article>
<article class='nobackground'>
<h3>
A slide with an embed + title
</h3>
<iframe src='http://www.jujucharms.com/docs/index.html'></iframe>
</article>
<article class='nobackground'>
<iframe src='http://www.jujucharms.com/docs/index.html'></iframe>
</article>
<article class='fill'>
<h3>
Full-slide embed with (optional) slide title on top
</h3>
<iframe src='http://www.jujucharms.com/docs/index.html'></iframe>
</article>
<article>
<h3>
Thank you!
</h3>
<ul>
<li>
<h3>Copy and Paste this Single file to make your own slides ...then load from any browser, localy or uploaded to your own server.</h3>
<ul>
<li><a href="https://raw.github.com/bholtsclaw/html5slides/gh-pages/templates/ubuntu/index.html">templates/ubuntu/index.html</a></li>
</ul>
<h3>Find Me on the web at <a href='http://www.brandonholtsclaw.com'>brandonholtsclaw.com</a>!</h3>
<h3><small>( Freelance Developer and Cloud Engineering Consultant )</h3>
</ul>
</article>
</section>
</body>
</html>