179 lines
5.2 KiB
HTML
Executable File
179 lines
5.2 KiB
HTML
Executable File
<!DOCTYPE HTML>
|
||
<html lang="en-US">
|
||
<head>
|
||
<title>Shower Presentation Template</title>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1274, user-scalable=no">
|
||
<link rel="stylesheet" href="themes/ribbon/styles/style.css">
|
||
<style>
|
||
#Cover H2 {
|
||
color:#FFF;
|
||
text-align:center;
|
||
font-size:70px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="list">
|
||
<header class="caption">
|
||
<h1>Shower Presentation Template</h1>
|
||
<p>Vadim Makeev, Opera Software</p>
|
||
</header>
|
||
<div class="slide bg" id="Cover"><div>
|
||
<section>
|
||
<header>
|
||
<h2>Shower Presentation Template</h2>
|
||
</header>
|
||
<img src="pictures/cover.jpg" alt="">
|
||
<!-- © John Carey, http://fiftyfootshadows.net/ -->
|
||
</section>
|
||
</div></div>
|
||
<div class="slide" id="Header"><div>
|
||
<section>
|
||
<header>
|
||
<h2>Header</h2>
|
||
</header>
|
||
<p>This <code><tool></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><tool></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>
|
||
<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>
|
||
<object data="pictures/shower.svg" type="image/svg+xml" width="256" height="256" class="middle"></object>
|
||
</section>
|
||
</div></div>
|
||
<div class="slide bg" id="Picture"><div>
|
||
<section>
|
||
<header>
|
||
<h2>Picture</h2>
|
||
</header>
|
||
<img src="pictures/picture.jpg" alt="">
|
||
<!-- © Patrick H. Lauke, http://www.flickr.com/photos/redux/ -->
|
||
</section>
|
||
</div></div>
|
||
<div class="slide" id="CodeSample"><div>
|
||
<section>
|
||
<header>
|
||
<h2>Code Sample</h2>
|
||
</header>
|
||
<pre>
|
||
<code><html lang="en-US"></code>
|
||
<code><mark><head></mark></code>
|
||
<code> <title>Shower</title></code>
|
||
<code> <meta charset="<mark class="important">UTF-8</mark>"></code>
|
||
<code> <link rel="stylesheet" href="s/screen.css"></code>
|
||
<code> <script src="j/jquery.js"></script></code>
|
||
<code><mark></head></mark></code>
|
||
</pre>
|
||
</section>
|
||
</div></div>
|
||
<div class="slide" id="CodeNotes"><div>
|
||
<section>
|
||
<header>
|
||
<h2>Code Notes</h2>
|
||
</header>
|
||
<pre>
|
||
<code><mark><html</mark> lang="en-US"></code>
|
||
</pre>
|
||
<p class="note">May or may not crash your browser</p>
|
||
<pre>
|
||
<code><mark><meta</mark> charset="<mark>UTF-8</mark>"></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 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>
|
||
</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:pepelsbey@gmail.com">pepelsbey@gmail.com</a></li>
|
||
</ul>
|
||
<p>Shower: <a href="http://github.com/pepelsbey/shower">github.com/pepelsbey/shower</a></p>
|
||
</section>
|
||
</div></div>
|
||
<!--
|
||
To hide progress bar from entire presentation
|
||
just remove “progress” element.
|
||
-->
|
||
<div class="progress"><div></div></div>
|
||
<script src="scripts/script.js"></script>
|
||
<!-- Copyright © 2010–2011 Vadim Makeev, http://pepelsbey.net/ -->
|
||
</body>
|
||
</html> |