shower-realize
Version:
Realize theme for Shower HTML presentation engine
318 lines (317 loc) • 12.6 kB
HTML
<html lang="en">
<head>
<title>Ribbon theme for Shower</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="styles/screen-16x10.css">
</head>
<body class="shower list">
<header class="caption">
<h1>Presentation Title</h1>
<p><a href="">Yours Truly</a>, Realize LTD.</p>
</header>
<section class="slide">
<h2>Slide Header</h2>
<p>Echo Park 8-bit sustainable umami deep v Kickstarter. DIY cliche typewriter brunch, Odd Future sriracha pickled aesthetic. Farm-to-table bespoke fingerstache, kale chips umami brunch letterpress.</p>
<p>Whatever authentic disrupt, you probably haven't heard of them direct trade mlkshk Etsy. Gluten-free roof party plaid four loko quinoa.</p>
<p class="note">Echo Park 8-bit sustainable umami deep v Kickstarter.</p>
</section>
<section class="slide">
<h2>Inline Elements</h2>
<p>Retro meh brunch <a href="">aesthetic</a> Cosby sweater Shoreditch. Banksy Tumblr <strong>sriracha</strong>, flexitarian pug chia master cleanse vinyl <em>wayfarers</em> fanny pack bespoke Helvetica <b>roof</b> party. Messenger bag retro cred <i>Portland</i> next level. Yr stumptown Schlitz Carles deep v small batch. Hella sustainable messenger bag, <mark>leggings</mark> skateboard literally<sup>1</sup> bicycle rights H<sub>2</sub>0 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical. Asymmetrical <code><paleo></code> you probably haven’t heard of.</p>
<footer class="footer">
<p>Retro meh brunch <a href="">aesthetic</a> Cosby sweater Shoreditch. Banksy Tumblr <strong>sriracha</strong>, flexitarian pug chia master cleanse vinyl <em>wayfarers</em> fanny pack bespoke Helvetica <b>roof</b> party. Messenger bag retro cred <i>Portland</i> next level. Yr stumptown Schlitz Carles deep v small batch. Hella sustainable messenger bag, <mark>leggings</mark> skateboard literally<sup>1</sup> bicycle rights H<sub>2</sub>0 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical. Asymmetrical <code><paleo></code> you probably haven’t heard of.</p>
</footer>
</section>
<section class="slide">
<h2>Quotes</h2>
<blockquote>
<p>Flannel bicycle rights locavore selfies skateboard. Authentic fanny pack paleo four loko bespoke. Artisan tattooed chia XOXO ennui, lomo disrupt 8-bit art party Tumblr scenester.</p>
</blockquote>
<figure>
<blockquote>
<p>Post-ironic fashion axe flexitarian, Tonx narwhal messenger bag Tumblr. Portland gentrify deep v kale chips literally.</p>
</blockquote>
<figcaption>Yours Truly</figcaption>
</figure>
</section>
<section class="slide">
<h2>Nested Lists</h2>
<ol>
<li>Literally viral vegan, ugh drinking vinegar photo booth</li>
<li>Wes Anderson chillwave Marfa pour-over Etsy banh mi</li>
<li>Ethnic polaroid lo-fi iPhone ennui
<ul>
<li>Yr wayfarers before they sold out Kickstarter asymmetrical</li>
<li>Irony flexitarian readymade quinoa, kogi bespoke meggings narwhal</li>
<li>Skateboard Etsy twee artisan Echo Park</li>
</ul>
</li>
<li>Tonx kitsch fingerstache readymade, retro single-origin coffee</li>
</ol>
</section>
<section class="slide">
<h2>Block Lists</h2>
<ul>
<li>Retro meh brunch aesthetic Cosby sweater Shoreditch. Banksy Tumblr sriracha, flexitarian pug chia master cleanse vinyl wayfarers fanny pack.</li>
<li>Messenger bag retro cred Portland next level. Yr stumptown Schlitz Carles deep v small batch. Hella sustainable messenger bag.</li>
<li>Leggings skateboard literally1 bicycle rights H20 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical. Asymmetrical paleo you probably haven’t heard of.</li>
</ul>
</section>
<section class="slide">
<h2>Latin and Cyrillic List Bullets</h2>
<ul lang="en">
<li>Occupy locavore blog, mustache you probably haven't heard of them</li>
<li>Skateboard pork belly aesthetic hoodie selfies brunch</li>
<li>Food truck gluten-free disrupt Portland</li>
</ul>
<ul lang="ru">
<li>Helvetica narwhal drinking vinegar chillwave, post-ironic ennui</li>
<li>Cray pug paleo retro, Echo Park narwhal Wes Anderson</li>
<li>Disrupt Williamsburg fixie, shabby chic bicycle rights hashtag kogi</li>
</ul>
</section>
<section class="slide">
<h2>Custom List Bullets</h2>
<ul>
<li value="+">Helvetica narwhal drinking vinegar chillwave, post-ironic ennui</li>
<li value="+">Cray pug paleo retro, Echo Park narwhal Wes Anderson</li>
<li value="+">Disrupt Williamsburg fixie, shabby chic bicycle rights hashtag kogi</li>
</ul>
<ol>
<li value="3">Occupy locavore blog, mustache you probably haven't heard of them</li>
<li value="2">Skateboard pork belly aesthetic hoodie selfies brunch</li>
<li value="1">Food truck gluten-free disrupt Portland</li>
</ol>
</section>
<section class="slide grid">
<h2>Two Columns</h2>
<p class="double">Echo Park 8-bit sustainable umami deep v Kickstarter. DIY cliche typewriter brunch, Odd Future sriracha pickled aesthetic. Farm-to-table bespoke fingerstache, kale chips umami brunch American Apparel letterpress. Whatever authentic disrupt, you probably haven't heard of them direct trade mlkshk Etsy. Gluten-free roof party plaid American Apparel four loko quinoa. Echo Park 8-bit sustainable.</p>
</section>
<section class="slide grid">
<h2>Three Columns</h2>
<p class="triple">Echo Park 8-bit sustainable umami deep v Kickstarter. DIY cliche typewriter brunch, Odd Future sriracha pickled aesthetic. Farm-to-table bespoke fingerstache, kale chips umami brunch American Apparel letterpress. Whatever authentic disrupt, you probably haven't heard of them direct trade mlkshk Etsy. Gluten-free roof party plaid American Apparel four loko quinoa. Echo Park 8-bit sustainable.</p>
</section>
<section class="slide">
<h2>Simple Table</h2>
<table>
<tr>
<th scope="col">Gentrify</th>
<th>Twee</th>
<th>Artisan</th>
<th>Banksy</th>
</tr>
<tr>
<th scope="row">Messenger</th>
<td>Mixtape</td>
<td>Small batch</td>
<td>Bicycle rights</td>
</tr>
<tr>
<th scope="row">Meggings</th>
<td>Freegan</td>
<td>Retro biodiesel</td>
<td>Slow-carb</td>
</tr>
<tr>
<th scope="row">Vegan</th>
<td>Occupy</td>
<td>Normcore</td>
<td>Put a bird on it</td>
</tr>
<tr>
<th scope="row">Next level</th>
<td>Selfies</td>
<td>Sustainable</td>
<td>Organic</td>
</tr>
<tr>
<th scope="row">Umami</th>
<td>Asymmetrical</td>
<td>Keytar</td>
<td>Craft beer</td>
</tr>
<tr>
<th scope="row">Biodiesel</th>
<td>Haven’t heard</td>
<td>Skateboard</td>
<td>Farm-to-table</td>
</tr>
</table>
</section>
<section class="slide">
<h2>Striped Table</h2>
<table class="striped">
<tr>
<th scope="col">Gentrify</th>
<th>Twee</th>
<th>Artisan</th>
<th>Banksy</th>
</tr>
<tr>
<th scope="row">Messenger</th>
<td>Mixtape</td>
<td>Small batch</td>
<td>Bicycle rights</td>
</tr>
<tr>
<th scope="row">Meggings</th>
<td>Freegan</td>
<td>Retro biodiesel</td>
<td>Slow-carb</td>
</tr>
<tr>
<th scope="row">Vegan</th>
<td>Occupy</td>
<td>Normcore</td>
<td>Put a bird on it</td>
</tr>
<tr>
<th scope="row">Next level</th>
<td>Selfies</td>
<td>Sustainable</td>
<td>Organic</td>
</tr>
<tr>
<th scope="row">Umami</th>
<td>Asymmetrical</td>
<td>Keytar</td>
<td>Craft beer</td>
</tr>
<tr>
<th scope="row">Biodiesel</th>
<td>Haven’t heard</td>
<td>Skateboard</td>
<td>Farm-to-table</td>
</tr>
</table>
</section>
<section class="slide">
<h2>Plain Code Listing</h2>
<pre><code><html lang="en">
<mark><head></mark> <span class="comment"><!--Comment--></span>
<title>Shower</title>
<meta charset="<mark class="important">UTF-8</mark>">
<link rel="stylesheet" href="screen.css">
<script src="script.js"></script>
<mark></head></mark></code></pre>
</section>
<section class="slide">
<h2>Numbered Code Listing</h2>
<pre>
<code><html lang="en"></code>
<code><mark><head></mark> <span class="comment"><!--Comment--></span></code>
<code> <title>Shower</title></code>
<code> <meta charset="<mark class="important">UTF-8</mark>"></code>
<code> <link rel="stylesheet" href="screen.css"></code>
<code> <script src="script.js"></script></code>
<code><mark></head></mark></code>
</pre>
</section>
<section class="slide">
<h2>Highlighted Code Lines</h2>
<pre>
<code><html lang="en"></code>
<code class="mark"><head> <span class="comment"><!--Comment--></span></code>
<code> <title>Shower</title></code>
<code> <meta charset="<mark class="important">UTF-8</mark>"></code>
<code> <link rel="stylesheet" href="screen.css"></code>
<code> <script src="script.js"></script></code>
<code class="mark"></head></code>
</pre>
</section>
<section class="slide">
<h2>Hidden Code Steps</h2>
<pre>
<code class="next"><html lang="en"></code>
<code class="next"><mark><head></mark> <span class="comment"><!--Comment--></span></code>
<code class="next"> <title>Shower</title></code>
<code class="next"> <meta charset="<mark class="important">UTF-8</mark>"></code>
<code class="next"> <link rel="stylesheet" href="screen.css"></code>
<code class="next"> <script src="script.js"></script></code>
<code class="next"><mark></head></mark></code>
</pre>
</section>
<section class="slide">
<h2>Highlighted Code Steps</h2>
<pre>
<code class="mark next"><html lang="en"></code>
<code><head> <span class="comment"><!--Comment--></span></code>
<code class="mark next"> <title>Shower</title></code>
<code> <meta charset="<mark class="important">UTF-8</mark>"></code>
<code class="mark next"> <link rel="stylesheet" href="screen.css"></code>
<code> <script src="script.js"></script></code>
<code class="mark next"></head></code>
</pre>
</section>
<section class="slide grid">
<h2>Grid Slide</h2>
</section>
<section class="slide white">
<h2>White Slide</h2>
</section>
<section class="slide black">
<h2>Black Slide</h2>
</section>
<section class="slide clear">
<h2>Clear Slide</h2>
</section>
<section class="slide">
<h2 class="shout">Shout</h2>
</section>
<section class="slide">
<h2 class="shout">Multiline<br>Shout</h2>
</section>
<section class="slide">
<h2 class="shout"><a href="">Linked Shout</a></h2>
</section>
<section class="slide">
<h2 class="shout grow">Growing Shout</h2>
</section>
<section class="slide">
<h2 class="shout shrink">Shrinking Shout</h2>
</section>
<section class="slide">
<figure>
<img class="cover" src="pictures/exact.png" alt="">
<figcaption class="white">Copyright © 2016 <a href="">Yours Truly</a>, Famous Inc.</figcaption>
</figure>
</section>
<section class="slide">
<img class="cover" src="pictures/tall.png" alt="">
</section>
<section class="slide">
<img class="cover" src="pictures/wide.png" alt="">
</section>
<section class="slide white">
<img class="place top left" src="pictures/square.png" alt="">
<img class="place top" src="pictures/square.png" alt="">
<img class="place top right" src="pictures/square.png" alt="">
<img class="place left" src="pictures/square.png" alt="">
<img class="place" src="pictures/square.png" alt="">
<img class="place right" src="pictures/square.png" alt="">
<img class="place bottom left" src="pictures/square.png" alt="">
<img class="place bottom" src="pictures/square.png" alt="">
<img class="place bottom right" src="pictures/square.png" alt="">
</section>
<section class="slide" data-timing="00:03">
<h2 class="shout">Timer</h2>
</section>
<section class="slide">
<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>
</ol>
<p class="next">Before they sold out master</p>
</section>
<div class="progress"></div>
<script src="node_modules/shower-core/shower.min.js"></script>
<!-- Copyright © 2016 Yours Truly, Famous Inc. -->
</body>
</html>