Proper markup
This commit is contained in:
parent
9b95d70760
commit
bc003532c4
|
@ -31,7 +31,7 @@ module.exports = function(grunt) {
|
||||||
src: [
|
src: [
|
||||||
'**',
|
'**',
|
||||||
'!package.json',
|
'!package.json',
|
||||||
'!Readme.md'
|
'!README.md'
|
||||||
],
|
],
|
||||||
dest: 'temp/pres/shower/'
|
dest: 'temp/pres/shower/'
|
||||||
},{
|
},{
|
||||||
|
@ -40,7 +40,7 @@ module.exports = function(grunt) {
|
||||||
src: [
|
src: [
|
||||||
'**',
|
'**',
|
||||||
'!package.json',
|
'!package.json',
|
||||||
'!Readme.md'
|
'!README.md'
|
||||||
],
|
],
|
||||||
dest: 'temp/pres/shower/themes/ribbon/'
|
dest: 'temp/pres/shower/themes/ribbon/'
|
||||||
},{
|
},{
|
||||||
|
|
52
index.html
52
index.html
|
@ -12,10 +12,10 @@
|
||||||
<h1>Shower Presentation Engine</h1>
|
<h1>Shower Presentation Engine</h1>
|
||||||
<p>Yours Truly, Famous Inc.</p>
|
<p>Yours Truly, Famous Inc.</p>
|
||||||
</header>
|
</header>
|
||||||
<section class="slide cover" id="Cover"><div>
|
<section class="slide" id="Cover">
|
||||||
<h2>Shower Presentation Engine</h2>
|
<h2>Shower Presentation Engine</h2>
|
||||||
<p>Brought to you by <a href="http://pepelsbey.net">Vadim Makeev</a></p>
|
<p>Brought to you by <a href="http://pepelsbey.net">Vadim Makeev</a></p>
|
||||||
<img src="pictures/cover.jpg" alt="">
|
<img src="pictures/cover.jpg" alt="" class="cover">
|
||||||
<!--
|
<!--
|
||||||
To apply styles to the certain slides
|
To apply styles to the certain slides
|
||||||
set slide ID to get needed elements
|
set slide ID to get needed elements
|
||||||
|
@ -38,8 +38,8 @@
|
||||||
color:#FFF;
|
color:#FFF;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</div></section>
|
</section>
|
||||||
<section class="slide"><div>
|
<section class="slide">
|
||||||
<h2>Shower Key Features</h2>
|
<h2>Shower Key Features</h2>
|
||||||
<ol>
|
<ol>
|
||||||
<li>Built on HTML, CSS and vanilla JavaScript</li>
|
<li>Built on HTML, CSS and vanilla JavaScript</li>
|
||||||
|
@ -49,12 +49,12 @@
|
||||||
<li>Printable to PDF</li>
|
<li>Printable to PDF</li>
|
||||||
</ol>
|
</ol>
|
||||||
<p class="note">Shower ['ʃəuə] noun. A person or thing that shows.</p>
|
<p class="note">Shower ['ʃəuə] noun. A person or thing that shows.</p>
|
||||||
</div></section>
|
</section>
|
||||||
<section class="slide"><div>
|
<section class="slide">
|
||||||
<h2>Plain Text on Your Slides</h2>
|
<h2>Plain Text on Your Slides</h2>
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur <a href="#4">adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <em>quis nostrud</em> exercitation ullamco laboris <strong>nisi ut aliquip</strong> ex ea commodo consequat. Duis aute irure <i>dolor</i> in reprehenderit in voluptate velit esse cillum <b>dolore</b> eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <code><culpa></code> qui officia deserunt mollit anim id est laborum.</p>
|
<p>Lorem ipsum dolor sit amet, consectetur <a href="#4">adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <em>quis nostrud</em> exercitation ullamco laboris <strong>nisi ut aliquip</strong> ex ea commodo consequat. Duis aute irure <i>dolor</i> in reprehenderit in voluptate velit esse cillum <b>dolore</b> eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <code><culpa></code> qui officia deserunt mollit anim id est laborum.</p>
|
||||||
</div></section>
|
</section>
|
||||||
<section class="slide"><div>
|
<section class="slide">
|
||||||
<h2>All Kind of Lists</h2>
|
<h2>All Kind of Lists</h2>
|
||||||
<ol>
|
<ol>
|
||||||
<li>Simple lists are marked with bullets</li>
|
<li>Simple lists are marked with bullets</li>
|
||||||
|
@ -68,8 +68,8 @@
|
||||||
</li>
|
</li>
|
||||||
<li>Look, seven rows exactly!</li>
|
<li>Look, seven rows exactly!</li>
|
||||||
</ol>
|
</ol>
|
||||||
</div></section>
|
</section>
|
||||||
<section class="slide"><div>
|
<section class="slide">
|
||||||
<h2>Serious Citations</h2>
|
<h2>Serious Citations</h2>
|
||||||
<figure>
|
<figure>
|
||||||
<blockquote>
|
<blockquote>
|
||||||
|
@ -77,8 +77,8 @@
|
||||||
</blockquote>
|
</blockquote>
|
||||||
<figcaption>Marcus Tullius Cicero</figcaption>
|
<figcaption>Marcus Tullius Cicero</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
</div></section>
|
</section>
|
||||||
<section class="slide"><div>
|
<section class="slide">
|
||||||
<h2>Code Samples</h2>
|
<h2>Code Samples</h2>
|
||||||
<pre>
|
<pre>
|
||||||
<code><!DOCTYPE html></code>
|
<code><!DOCTYPE html></code>
|
||||||
|
@ -89,8 +89,8 @@
|
||||||
<code> <link rel="stylesheet" href="screen.css"></code>
|
<code> <link rel="stylesheet" href="screen.css"></code>
|
||||||
<code><mark></head></mark></code>
|
<code><mark></head></mark></code>
|
||||||
</pre>
|
</pre>
|
||||||
</div></section>
|
</section>
|
||||||
<section class="slide"><div>
|
<section class="slide">
|
||||||
<h2>Even Tables</h2>
|
<h2>Even Tables</h2>
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -125,20 +125,20 @@
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
<p>It’s good to have information organized.</p>
|
<p>It’s good to have information organized.</p>
|
||||||
</div></section>
|
</section>
|
||||||
<section class="slide cover" id="Picture"><div>
|
<section class="slide" id="Picture">
|
||||||
<h2>Pictures</h2>
|
<h2>Pictures</h2>
|
||||||
<img src="pictures/picture.jpg" alt="">
|
<img src="pictures/picture.jpg" alt="" class="cover">
|
||||||
<style>
|
<style>
|
||||||
#Picture h2 {
|
#Picture h2 {
|
||||||
color:#FFF;
|
color:#FFF;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</div></section>
|
</section>
|
||||||
<section class="slide shout"><div>
|
<section class="slide">
|
||||||
<h2>You can even shout this way</h2>
|
<h2 class="shout">You can even shout this way</h2>
|
||||||
</div></section>
|
</section>
|
||||||
<section class="slide"><div>
|
<section class="slide">
|
||||||
<h2>Inner Navigation</h2>
|
<h2>Inner Navigation</h2>
|
||||||
<ol>
|
<ol>
|
||||||
<li>Lets you reveal list items one by one</li>
|
<li>Lets you reveal list items one by one</li>
|
||||||
|
@ -147,9 +147,9 @@
|
||||||
<li class="next">But it will work only once</li>
|
<li class="next">But it will work only once</li>
|
||||||
<li class="next">Nobody wants to see the same joke twice</li>
|
<li class="next">Nobody wants to see the same joke twice</li>
|
||||||
</ol>
|
</ol>
|
||||||
</div></section>
|
</section>
|
||||||
<section class="slide shout" id="SeeMore"><div>
|
<section class="slide" id="SeeMore">
|
||||||
<h2><img src="pictures/logo.svg" alt=""> <a href="https://github.com/shower/shower">See more on GitHub</a></h2>
|
<h2 class="shout"><img src="pictures/logo.svg" alt=""> <a href="https://github.com/shower/shower">See more on GitHub</a></h2>
|
||||||
<style>
|
<style>
|
||||||
#Picture h2 {
|
#Picture h2 {
|
||||||
color:#FFF;
|
color:#FFF;
|
||||||
|
@ -162,7 +162,7 @@
|
||||||
height:0.72em;
|
height:0.72em;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</div></section>
|
</section>
|
||||||
<p class="badge"><a href="https://github.com/shower/shower">Fork me on Github</a></p>
|
<p class="badge"><a href="https://github.com/shower/shower">Fork me on Github</a></p>
|
||||||
<!--
|
<!--
|
||||||
To hide progress bar from entire presentation
|
To hide progress bar from entire presentation
|
||||||
|
|
Loading…
Reference in New Issue