148 lines
4.9 KiB
HTML
Executable File
148 lines
4.9 KiB
HTML
Executable File
<!DOCTYPE HTML>
|
||
<html lang="en-US">
|
||
<head>
|
||
<title>Shower</title>
|
||
<meta charset="UTF-8">
|
||
<base target="_top">
|
||
<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;
|
||
}
|
||
#Image H2 {
|
||
text-shadow:0 3px 10px #000;
|
||
color:#FFF;
|
||
}
|
||
</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 <em>your</em> browser…</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="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 <em>your</em> browser…</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> |