130 lines
4.6 KiB
HTML
Executable File
130 lines
4.6 KiB
HTML
Executable File
<!DOCTYPE HTML>
|
||
<html lang="en">
|
||
<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/screen.css">
|
||
<link rel="stylesheet" href="themes/ribbon/styles/print.css" media="print">
|
||
<!--
|
||
To apply styles to the certain slides
|
||
set slide ID to get needed elements
|
||
-->
|
||
<style>
|
||
#Cover h2 {
|
||
margin:65px 0 0;
|
||
color:#FFF;
|
||
text-align:center;
|
||
font-size:70px;
|
||
}
|
||
#Picture h2 {
|
||
color:#FFF;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="list">
|
||
<header class="caption">
|
||
<h1>Shower Presentation Template</h1>
|
||
<p><a href="http://pepelsbey.net/">Vadim Makeev</a>, <a href="http://opera.com">Opera Software</a></p>
|
||
</header>
|
||
<section class="slide cover" id="Cover"><div>
|
||
<h2>Shower Presentation Template</h2>
|
||
<img src="pictures/cover.jpg" alt="">
|
||
</div></section>
|
||
<section class="slide" data-timing="00:05"><div>
|
||
<h2>Slide with timer</h2>
|
||
<p>It will change right in five seconds</p>
|
||
</div></section>
|
||
<section class="slide"><div>
|
||
<h2>Heading</h2>
|
||
<p>In your slides text you can use <a href="http://google.com/">links</a> and various inline elements for <em>emotional</em> and <strong>strong</strong> emphasis or just for <i>italic</i> or <b>bold</b> decoration. <code><code></code> is used for inline code samples.</p>
|
||
</div></section>
|
||
<section class="slide"><div>
|
||
<h2>Two rows.<br> Mighty heading</h2>
|
||
<p>You can use two lines header but it would reduce space on a slide. The “Ribbon” theme is designed for seven lines of code after one-line header by default.</p>
|
||
<p class="note">This paragraph could be used as a footnote</p>
|
||
</div></section>
|
||
<section class="slide"><div>
|
||
<h2>Various lists</h2>
|
||
<ul>
|
||
<li>Simple lists are marked with bullets.</li>
|
||
<li>Ordered lists begin with a number.</li>
|
||
<li>You can even nest lists one inside another.
|
||
<ol>
|
||
<li>Or mix their types.</li>
|
||
<li>But do not go too far.</li>
|
||
<li>Otherwise audience will be bored.</li>
|
||
</ol>
|
||
</li>
|
||
<li>Look, seven rows exactly!</li>
|
||
</ul>
|
||
</div></section>
|
||
<section class="slide"><div>
|
||
<h2>Serious citation</h2>
|
||
<figure>
|
||
<blockquote>
|
||
<p>You can wrap one or more paragraphs into citation, which will make text italic and add a nice quote on the left. Giving the citation source would make it even more serious.</p>
|
||
</blockquote>
|
||
<figcaption>Vadim Makeev</figcaption>
|
||
</figure>
|
||
</div></section>
|
||
<section class="slide"><div>
|
||
<h2>When you have a lot of code</h2>
|
||
<pre>
|
||
<code><html lang="en"></code>
|
||
<code><mark><head></mark> <mark class="comment"><!--Comment--></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>
|
||
</div></section>
|
||
<section class="slide"><div>
|
||
<h2>Code in separate blocks</h2>
|
||
<pre>
|
||
<code><mark><html</mark> lang="en"></code>
|
||
</pre>
|
||
<p class="note">Now you can add a note for each block</p>
|
||
<pre>
|
||
<code><mark><meta</mark> charset="<mark>UTF-8</mark>"></code>
|
||
</pre>
|
||
<p class="note">And explain what is interesting about it</p>
|
||
</div></section>
|
||
<section class="slide shout"><div>
|
||
<h2>You can shout<br> this way</h2>
|
||
</div></section>
|
||
<section class="slide cover" id="Picture"><div>
|
||
<h2>And place any picture</h2>
|
||
<img src="pictures/picture.jpg" alt="">
|
||
</div></section>
|
||
<section class="slide"><div>
|
||
<h2>Inner navigation</h2>
|
||
<ol>
|
||
<li>Lets you change objects one by one</li>
|
||
<li class="next">For example, show list items</li>
|
||
<li class="next">Or switch pictures</li>
|
||
<li class="next">And much more</li>
|
||
<li class="next">But it will work only once</li>
|
||
</ol>
|
||
</div></section>
|
||
<section class="slide"><div>
|
||
<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>
|
||
</div></section>
|
||
<!--
|
||
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–2012 Vadim Makeev — pepelsbey.net -->
|
||
<!-- Photos by John Carey — fiftyfootshadows.net -->
|
||
</body>
|
||
</html> |