Skip to content

Commit

Permalink
Example content
Browse files Browse the repository at this point in the history
  • Loading branch information
@sjockers
sjockers committed Sep 12, 2012
1 parent 570122c commit 0bc5253
Show file tree
Hide file tree
Showing 2 changed files with 187 additions and 169 deletions.
356 changes: 187 additions & 169 deletions presentations/example/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,187 +3,205 @@
<html lang="en">

<head>
<title>Shower Presentation Template</title>
<title>OpenTechSchool</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=1274, user-scalable=no">
<link rel="stylesheet" href="../../theme/style.css">
<script type="text/javascript" src="//use.typekit.net/ayv2sls.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>

<body class="list">

<header class="caption">
<h1>OpenTechSchool</h1>
<p>Introduction</p>
</header>

<div class="slide cover" id="Cover"><div>
<section>
<header>
<h2>OpenTechSchool</h2>
<p>Introduction</p>
</header>
</section>
</div></div>
<nav class="meta">
<div class="container">
<a class="logo" href="http://opentechschool.org">OpenTechSchool</a>
</div>
</nav>

<header class="caption">
<h1>This is an Example</h1>
<p>A demonstration how this template is supposed to be used.</p>
</header>

<section class="slides">

<div class="slide cover shout" id="Cover"><div>
<section>
<header>
<h2>OpenTechSchool</h2>
<p class="tagline">opentechschool.org</p>
</header>
</section>
</div></div>

<div class="slide" id="Header"><div>
<section>
<header>
<h2>Header</h2>
</header>
<p>This <code>&lt;tool&gt;</code> is provided <strong>without</strong> warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash <em>your</em> browser.</p>
<p><a href="examples/index.htm" target="_blank">This link will be opened in the new tab</a></p>
</section>
</div></div>

<div class="slide" id="TwoLinesHeader"><div>
<section>
<header>
<h2>Two rows.<br>Mighty heading</h2>
</header>
<p>This <code>&lt;tool&gt;</code> is provided <strong>without</strong> warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash <em>your</em> browser.</p>
</section>
</div></div>

<div class="slide" id="UnorderedList"><div>
<section>
<header>
<h2>Unordered List</h2>
</header>
<ul>
<li>This tool is provided</li>
<li>Without warranty, guarantee</li>
<li>Or much in the way of explanation
<ol>
<li>Note that use of this tool</li>
<li>May or may not crash your browser</li>
<li>Lock up your machine</li>
</ol>
</li>
</ul>
</section>
</div></div>

<div class="slide" id="OrderedList"><div>
<section>
<header>
<h2>Ordered List</h2>
</header>
<ol>
<li>Note that use of this tool</li>
<li>Erase your hard drive.</li>
<li>May or may not crash your browser
<ul>
<li>This tool is provided</li>
<li>Or much in the way of explanation</li>
<li>Without warranty, guarantee</li>
</ul>
</li>
</ol>
</section>
</div></div>

<div class="slide" id="Header"><div>
<section>
<header>
<h2>Header</h2>
</header>
<p>This <code>&lt;tool&gt;</code> is provided <strong>without</strong> warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash <em>your</em> browser.</p>
<p><a href="examples/index.htm" target="_blank">This link will be opened in the new tab</a></p>
</section>
</div></div>
<div class="slide" id="InTheMiddle"><div>
<section>
<header>
<h2>In the Middle</h2>
</header>
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 512 512" class="middle">
<path fill="#0174A7" d="m315 259l18-18 179 179v-36l-161-161 18-18 143 143v-36l-125-125 18-18 107 107v-225c0-28-23-51-51-51h-410c-28 0-51 23-51 51v410c0 28 23 51 51 51h191c17-25 14-59-8-81l-63-63-63-63c-55-55-55-145-0-199 55-55 144-55 199 0l9 7h109l-163 163v-107l-9-9c-25-25-66-25-91-0-25 25-25 66 0 91l63 63 63 63c37 37 49 89 37 135h136c28 0 51-23 51-51v-5l-197-197z"/>
</svg>
</section>
</div></div>

<div class="slide" id="TwoLinesHeader"><div>
<section>
<header>
<h2>Two rows.<br>Mighty heading</h2>
</header>
<p>This <code>&lt;tool&gt;</code> is provided <strong>without</strong> warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash <em>your</em> browser.</p>
</section>
</div></div>
<div class="slide cover" id="FitToHeight"><div>
<section>
<header>
<h2>Fit to height</h2>
</header>
<img src="pictures/picture.jpg" alt="">
</section>
</div></div>

<div class="slide" id="UnorderedList"><div>
<section>
<header>
<h2>Unordered List</h2>
</header>
<ul>
<li>This tool is provided</li>
<li>Without warranty, guarantee</li>
<li>Or much in the way of explanation
<ol>
<li>Note that use of this tool</li>
<li>May or may not crash your browser</li>
<li>Lock up your machine</li>
</ol>
</li>
<li>Erase your hard drive.</li>
</ul>
</section>
</div></div>
<div class="slide" id="OrderedList"><div>
<section>
<header>
<h2>Ordered List</h2>
</header>
<ol>
<li>Note that use of this tool</li>
<li>Erase your hard drive.</li>
<li>May or may not crash your browser
<ul>
<li>This tool is provided</li>
<li>Or much in the way of explanation</li>
<li>Without warranty, guarantee</li>
</ul>
</li>
<li>Lock up your machine</li>
</ol>
</section>
</div></div>
<div class="slide" id="InTheMiddle"><div>
<section>
<header>
<h2>In the Middle</h2>
</header>
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 512 512" class="middle">
<path fill="#0174A7" d="m315 259l18-18 179 179v-36l-161-161 18-18 143 143v-36l-125-125 18-18 107 107v-225c0-28-23-51-51-51h-410c-28 0-51 23-51 51v410c0 28 23 51 51 51h191c17-25 14-59-8-81l-63-63-63-63c-55-55-55-145-0-199 55-55 144-55 199 0l9 7h109l-163 163v-107l-9-9c-25-25-66-25-91-0-25 25-25 66 0 91l63 63 63 63c37 37 49 89 37 135h136c28 0 51-23 51-51v-5l-197-197z"/>
</svg>
</section>
</div></div>
<div class="slide cover" id="FitToHeight"><div>
<section>
<header>
<h2>Fit to height</h2>
</header>
<img src="pictures/picture.jpg" alt="">
</section>
</div></div>
<div class="slide cover w" id="FitToWidth"><div>
<section>
<header>
<h2>Fit to width</h2>
</header>
<img src="pictures/picture.jpg" alt="">
</section>
</div></div>
<div class="slide" id="CodeSample"><div>
<section>
<header>
<h2>Code Sample</h2>
</header>
<pre>
<code>&lt;html lang="en-US"&gt;</code>
<code><mark>&lt;head&gt;</mark></code>
<code> &lt;title&gt;Shower&lt;/title&gt;</code>
<code> &lt;meta charset="<mark class="important">UTF-8</mark>"&gt;</code>
<code> &lt;link rel="stylesheet" href="s/screen.css"&gt;</code>
<code> &lt;script src="j/jquery.js"&gt;&lt;/script&gt;</code>
<code><mark>&lt;/head&gt;</mark></code>
</pre>
</section>
</div></div>
<div class="slide" id="CodeNotes"><div>
<section>
<header>
<h2>Code Notes</h2>
</header>
<pre>
<code><mark>&lt;html</mark> lang="en-US"&gt;</code>
</pre>
<p class="note">May or may not crash your browser</p>
<pre>
<code><mark>&lt;meta</mark> charset="<mark>UTF-8</mark>"&gt;</code>
</pre>
<p class="note">Lock up your machine</p>
</section>
</div></div>
<div class="slide shout" id="Shout"><div>
<section>
<header>
<h2>Warning<br>Message</h2>
</header>
</section>
</div></div>
<div class="slide shout" id="Demo"><div>
<section>
<header>
<h2><a href="examples/index.htm" target="_blank">Demo</a></h2>
</header>
</section>
</div></div>
<div class="slide" id="BlockQuote"><div>
<section>
<header>
<h2>Block Quote</h2>
</header>
<blockquote>
<p>This tool is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser, lock up your machine, erase your hard drive.</p>
</blockquote>
</section>
</div></div>
<div class="slide cover w" id="FitToWidth"><div>
<section>
<header>
<h2>Fit to width</h2>
</header>
<img src="pictures/picture.jpg" alt="">
</section>
</div></div>

<div class="slide" id="CodeSample"><div>
<section>
<header>
<h2>Code Sample</h2>
</header>
<pre>
<code>&lt;html lang="en-US"&gt;</code>
<code><mark>&lt;head&gt;</mark></code>
<code> &lt;title&gt;Shower&lt;/title&gt;</code>
<code> &lt;meta charset="<mark class="important">UTF-8</mark>"&gt;</code>
<code> &lt;link rel="stylesheet" href="s/screen.css"&gt;</code>
<code><mark>&lt;/head&gt;</mark></code>
</pre>
</section>
</div></div>

<div class="slide" id="CodeNotes"><div>
<section>
<header>
<h2>Code Notes</h2>
</header>
<pre>
<code><mark>&lt;html</mark> lang="en-US"&gt;</code>
</pre>
<p class="note">May or may not crash your browser</p>
<pre>
<code><mark>&lt;meta</mark> charset="<mark>UTF-8</mark>"&gt;</code>
</pre>
</section>
</div></div>

<div class="slide cover shout" id="Shout"><div>
<section>
<header>
<h2>Shout!</h2>
<p class="tagline">This is the Tagline!</p>
</header>
</section>
</div></div>

<div class="slide cover shout-louder" id="ShoutLouder"><div>
<section>
<header>
<h2>Shout<br/>Louder!</h2>
</header>
</section>
</div></div>

<div class="slide" id="BlockQuote"><div>
<section>
<header>
<h2>Block Quote</h2>
</header>
<blockquote>
<p>This tool is provided without warranty, guarantee, or much in the way of explanation.</p>
<p>Note that use of this tool may or may not crash your browser, lock up your machine, erase your hard drive.</p>
</blockquote>
</section>
</div></div>

<div class="slide" id="ThankYou"><div>
<section>
<header>
<h2>Shower Presentation Template</h2>
</header>
<p>Vadim Makeev, Opera Software</p>
<ul>
<li><a href="http://pepelsbey.net">pepelsbey.net</a></li>
<li><a href="http://twitter.com/pepelsbey">twitter.com/pepelsbey</a></li>
<li><a href="mailto:[email protected]">[email protected]</a></li>
</ul>
<p>Shower: <a href="http://github.com/pepelsbey/shower">github.com/pepelsbey/shower</a></p>
</section>
</div></div>
<div class="slide" id="ThankYou"><div>
<section>
<header>
<h2>OpenTechSchool</h2>
</header>
<ul>
<li><a href="http://twitter.com/opentechschool">http://twitter.com/opentechschool</a></li>
<li><a href="http://opentechschool.org">opentechschool.org</a></li>
<li><a href="http://blog.opentechschool.org">blog.opentechschool.org</a></li>
</ul>
<p>Fork this presentation on <a href="https://github.com/OpenTechSchool/slides">Github</a>!</p>
</section>
</div></div>

<!--
To hide progress bar from entire presentation
just remove “progress” element.
-->
<div class="progress"><div></div></div>
<!--
To hide progress bar from entire presentation
just remove “progress” element.
-->
<div class="progress"><div></div></div>

</section>

<script src="../../lib/shower/scripts/script.js"></script>
</body>
Expand Down
Binary file added presentations/example/pictures/picture.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 0bc5253

Please sign in to comment.