Proper markup
This commit is contained in:
Vadim Makeev
parent
9b95d70760
commit
bc003532c4
|
|
@ -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/'
|
||||
},{
|
||||
|
|
|
|||
52
index.html
52
index.html
|
|
@ -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><culpa></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><!DOCTYPE html></code>
|
||||
|
|
@ -89,8 +89,8 @@
|
|||
<code> <link rel="stylesheet" href="screen.css"></code>
|
||||
<code><mark></head></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>It’s 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
|
||||
|
|
|
|||
Loading…
Reference in New Issue