Proper markup

This commit is contained in:
Vadim Makeev 2015-12-13 18:05:41 +03:00
parent 9b95d70760
commit bc003532c4
2 changed files with 28 additions and 28 deletions

View File

@ -31,7 +31,7 @@ module.exports = function(grunt) {
src: [
'**',
'!package.json',
'!Readme.md'
'!README.md'
],
dest: 'temp/pres/shower/'
},{
@ -40,7 +40,7 @@ module.exports = function(grunt) {
src: [
'**',
'!package.json',
'!Readme.md'
'!README.md'
],
dest: 'temp/pres/shower/themes/ribbon/'
},{

View File

@ -12,10 +12,10 @@
<h1>Shower Presentation Engine</h1>
<p>Yours Truly, Famous Inc.</p>
</header>
<section class="slide cover" id="Cover"><div>
<section class="slide" id="Cover">
<h2>Shower Presentation Engine</h2>
<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
set slide ID to get needed elements
@ -38,8 +38,8 @@
color:#FFF;
}
</style>
</div></section>
<section class="slide"><div>
</section>
<section class="slide">
<h2>Shower Key Features</h2>
<ol>
<li>Built on HTML, CSS and vanilla JavaScript</li>
@ -49,12 +49,12 @@
<li>Printable to PDF</li>
</ol>
<p class="note">Shower ['ʃəuə] noun. A person or thing that shows.</p>
</div></section>
<section class="slide"><div>
</section>
<section class="slide">
<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>&lt;culpa&gt;</code> qui officia deserunt mollit anim id est laborum.</p>
</div></section>
<section class="slide"><div>
</section>
<section class="slide">
<h2>All Kind of Lists</h2>
<ol>
<li>Simple lists are marked with bullets</li>
@ -68,8 +68,8 @@
</li>
<li>Look, seven rows exactly!</li>
</ol>
</div></section>
<section class="slide"><div>
</section>
<section class="slide">
<h2>Serious Citations</h2>
<figure>
<blockquote>
@ -77,8 +77,8 @@
</blockquote>
<figcaption>Marcus Tullius Cicero</figcaption>
</figure>
</div></section>
<section class="slide"><div>
</section>
<section class="slide">
<h2>Code Samples</h2>
<pre>
<code>&lt;!DOCTYPE html&gt;</code>
@ -89,8 +89,8 @@
<code> &lt;link rel="stylesheet" href="screen.css"&gt;</code>
<code><mark>&lt;/head&gt;</mark></code>
</pre>
</div></section>
<section class="slide"><div>
</section>
<section class="slide">
<h2>Even Tables</h2>
<table>
<tr>
@ -125,20 +125,20 @@
</tr>
</table>
<p>Its good to have information organized.</p>
</div></section>
<section class="slide cover" id="Picture"><div>
</section>
<section class="slide" id="Picture">
<h2>Pictures</h2>
<img src="pictures/picture.jpg" alt="">
<img src="pictures/picture.jpg" alt="" class="cover">
<style>
#Picture h2 {
color:#FFF;
}
</style>
</div></section>
<section class="slide shout"><div>
<h2>You can even shout this way</h2>
</div></section>
<section class="slide"><div>
</section>
<section class="slide">
<h2 class="shout">You can even shout this way</h2>
</section>
<section class="slide">
<h2>Inner Navigation</h2>
<ol>
<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">Nobody wants to see the same joke twice</li>
</ol>
</div></section>
<section class="slide shout" id="SeeMore"><div>
<h2><img src="pictures/logo.svg" alt=""> <a href="https://github.com/shower/shower">See more on GitHub</a></h2>
</section>
<section class="slide" id="SeeMore">
<h2 class="shout"><img src="pictures/logo.svg" alt=""> <a href="https://github.com/shower/shower">See more on GitHub</a></h2>
<style>
#Picture h2 {
color:#FFF;
@ -162,7 +162,7 @@
height:0.72em;
}
</style>
</div></section>
</section>
<p class="badge"><a href="https://github.com/shower/shower">Fork me on Github</a></p>
<!--
To hide progress bar from entire presentation