ivan-igorevich
/
bmstu-mt-wp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Gruntfile.js
View File

@ -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
View File

@ -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>&lt;culpa&gt;</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>&lt;culpa&gt;</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>&lt;!DOCTYPE html&gt;</code> <code>&lt;!DOCTYPE html&gt;</code>
@ -89,8 +89,8 @@
<code> &lt;link rel="stylesheet" href="screen.css"&gt;</code> <code> &lt;link rel="stylesheet" href="screen.css"&gt;</code>
<code><mark>&lt;/head&gt;</mark></code> <code><mark>&lt;/head&gt;</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