143 lines
4.9 KiB
HTML
Executable File
143 lines
4.9 KiB
HTML
Executable File
<!DOCTYPE HTML>
|
||
<html lang="en-US">
|
||
<head>
|
||
<title>Shower</title>
|
||
<meta charset="UTF-8">
|
||
<link rel="stylesheet" title="screen" href="styles/screen.css">
|
||
<link rel="stylesheet" title="projection" disabled href="styles/projection.css">
|
||
<style>
|
||
#Cover H1 {
|
||
color:#FFF;
|
||
text-shadow:0 3px 10px #000;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="shower">
|
||
<section class="slide cover back" id="Cover">
|
||
<article>
|
||
<h1>Shower Presentation Template</h1>
|
||
</article>
|
||
<img src="pictures/cover.jpg" alt="">
|
||
</section>
|
||
<section class="slide" id="Header">
|
||
<article>
|
||
<h2>Heading</h2>
|
||
<p>This <code><tool></code> is provided <strong>without</strong> warranty, guarantee, or much in the way of explanation. Note that use of <a href="#TwoLinesHeader">this tool</a> may or may not crash your browser, lock up <em>your</em> machine, erase your hard drive, or e-mail those naughty pictures you hid in the Utilities folder to your mother.</p>
|
||
</article>
|
||
</section>
|
||
<section class="slide" id="TwoLinesHeader">
|
||
<article>
|
||
<h2>Two rows.<br>Mighty heading</h2>
|
||
<p>This <code><tool></code> is provided <strong>without</strong> warranty, guarantee, or much in the way of explanation. Note that use of <a href="#SevenItemsList">this tool</a> may or may not crash your browser, lock up <em>your</em> machine, erase your hard drive…</p>
|
||
<p class="note"><a href="examples/index.htm" target="_blank">This link will be opened in the new tab</a></p>
|
||
</article>
|
||
</section>
|
||
<section class="slide" id="SevenItemsList">
|
||
<article>
|
||
<h2>Seven Items List</h2>
|
||
<ul>
|
||
<li>This tool is provided</li>
|
||
<li>Without warranty, guarantee</li>
|
||
<li>Or much in the way of explanation</li>
|
||
<li>Note that use of this tool</li>
|
||
<li>May or may not crash your browser</li>
|
||
<li>Lock up your machine</li>
|
||
<li>Erase your hard drive…</li>
|
||
</ul>
|
||
</article>
|
||
</section>
|
||
<section class="slide" id="NumberedList">
|
||
<article>
|
||
<h2>Numbered List</h2>
|
||
<ol>
|
||
<li>This tool is provided</li>
|
||
<li>Without warranty, guarantee</li>
|
||
<li>Or much in the way of explanation</li>
|
||
<li>Note that use of this tool</li>
|
||
<li>May or may not crash your browser</li>
|
||
<li>Lock up your machine</li>
|
||
<li>Erase your hard drive…</li>
|
||
</ol>
|
||
</article>
|
||
</section>
|
||
<section class="slide" id="SevenRowsCode">
|
||
<article>
|
||
<h2>Seven Rows Code</h2>
|
||
<pre>
|
||
<code><html lang="en-US"></code>
|
||
<code><em><head></em></code>
|
||
<code> <title>Shower</title></code>
|
||
<code> <meta charset="<strong>UTF-8</strong>"></code>
|
||
<code> <link rel="stylesheet" href="s/screen.css"></code>
|
||
<code> <script src="j/jquery.js"></script></code>
|
||
<code><em></head></em></code>
|
||
</pre>
|
||
</article>
|
||
</section>
|
||
<section class="slide" id="CodeAndNote">
|
||
<article>
|
||
<h2>Code And Its Note</h2>
|
||
<pre>
|
||
<code><html lang="en-US"></code>
|
||
<code><em><head></em></code>
|
||
<code> <title>Shower</title></code>
|
||
<code> <meta charset="<strong>UTF-8</strong>"></code>
|
||
<code><em></head></em></code>
|
||
</pre>
|
||
<p class="note">May or may not crash your browser</p>
|
||
</article>
|
||
</section>
|
||
<section class="slide" id="CodeAndTwoNotes">
|
||
<article>
|
||
<h2>Code And Two Notes</h2>
|
||
<pre>
|
||
<code><em><html</em> lang="en-US"></code>
|
||
</pre>
|
||
<p class="note">May or may not crash your browser</p>
|
||
<pre>
|
||
<code><em><meta</em> charset="<strong>UTF-8</strong>"></code>
|
||
</pre>
|
||
<p class="note">Lock up your machine</p>
|
||
</article>
|
||
</section>
|
||
<section class="slide" id="Quote">
|
||
<article>
|
||
<h2>Block Quote</h2>
|
||
<blockquote cite="Anonymous">
|
||
<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>
|
||
</article>
|
||
</section>
|
||
<section class="slide back" id="Image">
|
||
<article>
|
||
<h2>Picture</h2>
|
||
</article>
|
||
<img src="pictures/image.jpg" alt="">
|
||
</section>
|
||
<section class="slide shout" id="JustAshout">
|
||
<article>
|
||
<h2>Shout!</h2>
|
||
</article>
|
||
</section>
|
||
<section class="slide shout" id="ShoutDemo">
|
||
<article>
|
||
<h2><a href="examples/index.htm" target="_blank">Demo</a></h2>
|
||
</article>
|
||
</section>
|
||
<section class="slide last" id="ThankYou">
|
||
<article>
|
||
<h2>Shower Presentation Template</h2>
|
||
<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:pepelsbey@gmail.com">pepelsbey@gmail.com</a></li>
|
||
</ul>
|
||
<p>Shower: <a href="http://github.com/pepelsbey/shower">github.com/pepelsbey/shower</a></p>
|
||
</article>
|
||
</section>
|
||
</div>
|
||
<script src="scripts/script.js"></script>
|
||
</body>
|
||
</html> |