137 lines
5.1 KiB
HTML
137 lines
5.1 KiB
HTML
|
<!DOCTYPE HTML>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<title>Ribbon theme for Shower</title>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=1274, user-scalable=no">
|
|||
|
|
<link rel="stylesheet" href="styles/screen.css">
|
|||
|
|
<link rel="stylesheet" href="styles/print.css" media="print">
|
|||
|
|
</head>
|
|||
|
|
<body class="list debug">
|
|||
|
|
<header class="caption">
|
|||
|
|
<h1>Presentation Title</h1>
|
|||
|
|
<p><a href="">Author Name</a></p>
|
|||
|
|
</header>
|
|||
|
|
<section class="slide"><div>
|
|||
|
|
<h2>Header</h2>
|
|||
|
|
<p>Typewriter etsy messenger bag <a href="">fingerstache</a>, aesthetic vinyl semiotics twee <strong>DIY</strong> forage chillwave. Thundercats ennui messenger bag, <em>squid</em> carles chillwave shoreditch pickled cliche <b>letterpress</b>. DIY beard locavore <i>occupy</i> salvia, whatever single-origin <code>coffee</code> fanny pack 3 wolf moon typewriter gastropub kale chips.</p>
|
|||
|
|
<p class="note">Secondary footnote.</p>
|
|||
|
|
</div></section>
|
|||
|
|
<section class="slide"><div>
|
|||
|
|
<h2>Lists in Enlish typography</h2>
|
|||
|
|
<ul>
|
|||
|
|
<li>Ennui keffiyeh thundercats</li>
|
|||
|
|
<li>Jean shorts biodiesel</li>
|
|||
|
|
<li>Terry richardson, swag blog
|
|||
|
|
<ol>
|
|||
|
|
<li>Locavore umami vegan helvetica</li>
|
|||
|
|
<li>Fingerstache kale chips</li>
|
|||
|
|
<li>Keytar sriracha gluten-free</li>
|
|||
|
|
</ol>
|
|||
|
|
</li>
|
|||
|
|
<li>Before they sold out master</li>
|
|||
|
|
</ul>
|
|||
|
|
</div></section>
|
|||
|
|
<section class="slide" lang="ru"><div>
|
|||
|
|
<h2>Lists in Russian typography</h2>
|
|||
|
|
<ul>
|
|||
|
|
<li>Ennui keffiyeh thundercats</li>
|
|||
|
|
<li>Jean shorts biodiesel</li>
|
|||
|
|
<li>Terry richardson, swag blog
|
|||
|
|
<ol>
|
|||
|
|
<li>Locavore umami vegan helvetica</li>
|
|||
|
|
<li>Fingerstache kale chips</li>
|
|||
|
|
<li>Keytar sriracha gluten-free</li>
|
|||
|
|
</ol>
|
|||
|
|
</li>
|
|||
|
|
<li>Before they sold out master</li>
|
|||
|
|
</ul>
|
|||
|
|
</div></section>
|
|||
|
|
<section class="slide"><div>
|
|||
|
|
<h2>Quote</h2>
|
|||
|
|
<figure>
|
|||
|
|
<blockquote>
|
|||
|
|
<p>Typewriter etsy messenger bag fingerstache, aesthetic vinyl semiotics twee DIY forage chillwave. Thundercats ennui messenger bag, squid carles chillwave shoreditch pickled cliche letterpress. DIY beard locavore occupy salvia, whatever single-origin coffee fanny pack 3 wolf moon typewriter gastropub kale chips.</p>
|
|||
|
|
</blockquote>
|
|||
|
|
<figcaption>Author Name</figcaption>
|
|||
|
|
</figure>
|
|||
|
|
</div></section>
|
|||
|
|
<section class="slide"><div>
|
|||
|
|
<h2>Code listing</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 listing</h2>
|
|||
|
|
<pre><code><html lang="en">
|
|||
|
|
<mark><head></mark> <mark class="comment"><!--Comment--></mark>
|
|||
|
|
<title>Shower</title>
|
|||
|
|
<meta charset="<mark class="important">UTF-8</mark>">
|
|||
|
|
<link rel="stylesheet" href="s/screen.css">
|
|||
|
|
<script src="j/jquery.js"></script>
|
|||
|
|
<mark></head></mark></code></pre>
|
|||
|
|
</div></section>
|
|||
|
|
<section class="slide shout"><div>
|
|||
|
|
<h2>Shout</h2>
|
|||
|
|
</div></section>
|
|||
|
|
<section class="slide cover"><div>
|
|||
|
|
<img src="pictures/exact.png" alt="">
|
|||
|
|
</div></section>
|
|||
|
|
<section class="slide cover w"><div>
|
|||
|
|
<img src="pictures/wide.png" alt="">
|
|||
|
|
</div></section>
|
|||
|
|
<section class="slide cover h"><div>
|
|||
|
|
<img src="pictures/tall.png" alt="">
|
|||
|
|
</div></section>
|
|||
|
|
<section class="slide cover h"><div>
|
|||
|
|
<img src="pictures/wide.png" alt="">
|
|||
|
|
</div></section>
|
|||
|
|
<section class="slide cover w"><div>
|
|||
|
|
<img src="pictures/tall.png" alt="">
|
|||
|
|
</div></section>
|
|||
|
|
<section class="slide cover w h"><div>
|
|||
|
|
<img src="pictures/square.png" alt="">
|
|||
|
|
</div></section>
|
|||
|
|
<section class="slide shout"><div>
|
|||
|
|
<img src="pictures/square.png" alt="" class="place t l">
|
|||
|
|
<img src="pictures/square.png" alt="" class="place t">
|
|||
|
|
<img src="pictures/square.png" alt="" class="place t r">
|
|||
|
|
<img src="pictures/square.png" alt="" class="place l">
|
|||
|
|
<img src="pictures/square.png" alt="" class="place m">
|
|||
|
|
<img src="pictures/square.png" alt="" class="place r">
|
|||
|
|
<img src="pictures/square.png" alt="" class="place b l">
|
|||
|
|
<img src="pictures/square.png" alt="" class="place b">
|
|||
|
|
<img src="pictures/square.png" alt="" class="place b r">
|
|||
|
|
</div></section>
|
|||
|
|
<section class="slide" data-timing="00:03"><div>
|
|||
|
|
<h2>Timer</h2>
|
|||
|
|
<p>Three seconds to go.</p>
|
|||
|
|
</div></section>
|
|||
|
|
<section class="slide"><div>
|
|||
|
|
<h2>List navigation</h2>
|
|||
|
|
<ol>
|
|||
|
|
<li>Ennui keffiyeh thundercats</li>
|
|||
|
|
<li class="next">Jean shorts biodiesel</li>
|
|||
|
|
<li class="next">Terry richardson, swag blog</li>
|
|||
|
|
<li class="next">Locavore umami vegan helvetica</li>
|
|||
|
|
<li class="next">Fingerstache kale chips</li>
|
|||
|
|
<li class="next">Keytar sriracha gluten-free</li>
|
|||
|
|
<li class="next">Before they sold out master</li>
|
|||
|
|
</ol>
|
|||
|
|
</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 -->
|
|||
|
|
</body>
|
|||
|
|
</html>
|