2010-10-30 04:16:19 +04:00
<!DOCTYPE HTML>
< html lang = "en-US" >
< head >
2011-08-07 18:02:55 +04:00
< title > Shower Presentation Template< / title >
2010-10-30 04:16:19 +04:00
< meta charset = "UTF-8" >
2011-08-01 03:34:52 +04:00
< meta name = "viewport" content = "width=1274, user-scalable=no" >
2011-07-12 15:08:29 +04:00
< link rel = "stylesheet" href = "themes/ribbon/styles/style.css" >
2012-02-23 17:18:56 +04:00
<!--
To apply styles to the certain slides
use slide ID to get needed elements
-->
2010-10-31 17:56:41 +03:00
< style >
2012-02-28 17:20:18 +04:00
#Cover h2 {
2010-11-14 11:09:17 +03:00
color:#FFF;
2011-07-16 19:10:12 +04:00
text-align:center;
2011-07-12 15:08:29 +04:00
font-size:70px;
2010-11-14 11:09:17 +03:00
}
2012-02-28 17:20:18 +04:00
#FitToWidth h2,
#FitToHeight h2 {
color:#FFF;
text-align:center;
}
2010-10-31 17:56:41 +03:00
< / style >
2010-10-30 04:16:19 +04:00
< / head >
2011-07-15 04:53:20 +04:00
< body class = "list" >
< header class = "caption" >
2011-07-12 15:08:29 +04:00
< h1 > Shower Presentation Template< / h1 >
< p > Vadim < / p >
< / header >
2012-03-01 12:47:33 +04:00
< div class = "slide cover" data-timing = "00:05" id = "Cover" > < div >
2011-07-15 04:53:20 +04:00
< section >
2011-07-12 15:08:29 +04:00
< header >
< h2 > Shower Presentation < / h2 >
< / header >
2010-10-31 17:56:41 +03:00
< img src = "pictures/cover.jpg" alt = "" >
2010-10-30 04:16:19 +04:00
< / section >
2011-07-16 19:07:52 +04:00
< / div > < / div >
2012-03-01 12:41:23 +04:00
< div class = "slide" data-timing = "00:05" > < div >
2011-07-15 04:53:20 +04:00
< section >
2011-07-12 15:08:29 +04:00
< header >
< h2 > Header< / h2 >
< / header >
2011-07-25 12:21:49 +04:00
< p > This < code > < tool> < / code > is provided < strong > without< / strong > warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash < em > your< / em > browser.< / p >
2011-07-12 15:08:29 +04:00
< p > < a href = "examples/index.htm" target = "_blank" > This link will be opened in the new tab< / a > < / p >
2010-10-30 04:16:19 +04:00
< / section >
2011-07-16 19:07:52 +04:00
< / div > < / div >
2012-03-01 12:47:33 +04:00
< div class = "slide" > < div >
2011-07-15 04:53:20 +04:00
< section >
2011-07-12 15:08:29 +04:00
< header >
2010-10-30 04:16:19 +04:00
< h2 > Two rows.< br > Mighty heading< / h2 >
2011-07-12 15:08:29 +04:00
< / header >
2011-07-25 12:21:49 +04:00
< p > This < code > < tool> < / code > is provided < strong > without< / strong > warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash < em > your< / em > browser.< / p >
2010-10-30 04:16:19 +04:00
< / section >
2011-07-16 19:07:52 +04:00
< / div > < / div >
2012-03-01 12:47:33 +04:00
< div class = "slide" > < div >
2011-07-15 04:53:20 +04:00
< section >
2011-07-12 15:08:29 +04:00
< header >
< h2 > Unordered List< / h2 >
< / header >
< ul >
< li > This tool is provided< / li >
< li > Without warranty, guarantee< / li >
< li > Or much in the way of explanation
2011-07-25 12:21:49 +04:00
< ol >
2011-07-12 15:08:29 +04:00
< li > Note that use of this tool< / li >
< li > May or may not crash your browser< / li >
< li > Lock up your machine< / li >
2011-07-25 12:21:49 +04:00
< / ol >
2011-07-12 15:08:29 +04:00
< / li >
2011-07-25 12:21:49 +04:00
< li > Erase your hard drive.< / li >
2011-07-12 15:08:29 +04:00
< / ul >
2010-10-30 04:16:19 +04:00
< / section >
2011-07-16 19:07:52 +04:00
< / div > < / div >
2012-03-01 12:47:33 +04:00
< div class = "slide" > < div >
2011-07-15 04:53:20 +04:00
< section >
2011-07-12 15:08:29 +04:00
< header >
< h2 > Ordered List< / h2 >
< / header >
< ol >
2011-07-25 12:21:49 +04:00
< li > Note that use of this tool< / li >
< li > Erase your hard drive.< / li >
< li > May or may not crash your browser
< ul >
< li > This tool is provided< / li >
< li > Or much in the way of explanation< / li >
< li > Without warranty, guarantee< / li >
< / ul >
2011-07-12 15:08:29 +04:00
< / li >
2011-07-25 12:21:49 +04:00
< li > Lock up your machine< / li >
2011-07-12 15:08:29 +04:00
< / ol >
2010-10-30 04:16:19 +04:00
< / section >
2011-07-16 19:07:52 +04:00
< / div > < / div >
2012-03-01 12:47:33 +04:00
< div class = "slide" > < div >
2011-08-01 01:42:17 +04:00
< section >
< header >
< h2 > In the Middle< / h2 >
< / header >
2012-02-27 13:37:24 +04:00
< svg xmlns = "http://www.w3.org/2000/svg" width = "256" height = "256" viewBox = "0 0 512 512" class = "middle" >
< path fill = "#0174A7" d = "m315 259l18-18 179 179v-36l-161-161 18-18 143 143v-36l-125-125 18-18 107 107v-225c0-28-23-51-51-51h-410c-28 0-51 23-51 51v410c0 28 23 51 51 51h191c17-25 14-59-8-81l-63-63-63-63c-55-55-55-145-0-199 55-55 144-55 199 0l9 7h109l-163 163v-107l-9-9c-25-25-66-25-91-0-25 25-25 66 0 91l63 63 63 63c37 37 49 89 37 135h136c28 0 51-23 51-51v-5l-197-197z" / >
< / svg >
2011-08-01 01:42:17 +04:00
< / section >
< / div > < / div >
2012-02-28 17:20:18 +04:00
< div class = "slide cover" id = "FitToHeight" > < div >
< section >
< header >
< h2 > Fit to height< / h2 >
< / header >
< img src = "pictures/picture.jpg" alt = "" >
< / section >
< / div > < / div >
< div class = "slide cover w" id = "FitToWidth" > < div >
2011-07-15 04:53:20 +04:00
< section >
2011-07-12 15:08:29 +04:00
< header >
2012-02-28 17:20:18 +04:00
< h2 > Fit to width< / h2 >
2011-07-12 15:08:29 +04:00
< / header >
< img src = "pictures/picture.jpg" alt = "" >
2010-10-30 04:16:19 +04:00
< / section >
2011-07-16 19:07:52 +04:00
< / div > < / div >
2012-03-01 12:47:33 +04:00
< div class = "slide" > < div >
2011-07-15 04:53:20 +04:00
< section >
2011-07-12 15:08:29 +04:00
< header >
< h2 > Code Sample< / h2 >
< / header >
< pre >
< code > < html lang="en-US"> < / code >
2011-07-17 13:44:47 +04:00
< code > < mark > < head> < / mark > < / code >
2011-07-12 15:08:29 +04:00
< code > < title> Shower< /title> < / code >
2011-07-17 13:44:47 +04:00
< code > < meta charset="< mark class = "important" > UTF-8< / mark > "> < / code >
2011-07-12 15:18:02 +04:00
< code > < link rel="stylesheet" href="s/screen.css"> < / code >
< code > < script src="j/jquery.js"> < /script> < / code >
2011-07-17 13:44:47 +04:00
< code > < mark > < /head> < / mark > < / code >
2011-07-12 15:08:29 +04:00
< / pre >
2010-10-30 04:16:19 +04:00
< / section >
2011-07-16 19:07:52 +04:00
< / div > < / div >
2012-03-01 12:47:33 +04:00
< div class = "slide" > < div >
2011-07-15 04:53:20 +04:00
< section >
2011-07-12 15:08:29 +04:00
< header >
< h2 > Code Notes< / h2 >
< / header >
< pre >
2011-07-17 13:44:47 +04:00
< code > < mark > < html< / mark > lang="en-US"> < / code >
2011-07-12 15:08:29 +04:00
< / pre >
< p class = "note" > May or may not crash your browser< / p >
< pre >
2011-07-17 13:44:47 +04:00
< code > < mark > < meta< / mark > charset="< mark > UTF-8< / mark > "> < / code >
2011-07-12 15:08:29 +04:00
< / pre >
< p class = "note" > Lock up your machine< / p >
2010-10-30 04:16:19 +04:00
< / section >
2011-07-16 19:07:52 +04:00
< / div > < / div >
2012-03-01 12:47:33 +04:00
< div class = "slide shout" > < div >
2011-07-15 04:53:20 +04:00
< section >
2011-07-12 15:08:29 +04:00
< header >
2011-08-01 01:42:17 +04:00
< h2 > Warning< br > Message< / h2 >
2011-07-12 15:08:29 +04:00
< / header >
2010-10-30 04:16:19 +04:00
< / section >
2011-07-16 19:07:52 +04:00
< / div > < / div >
2012-03-01 12:47:33 +04:00
< div class = "slide shout" > < div >
2011-07-15 04:53:20 +04:00
< section >
2011-07-12 15:08:29 +04:00
< header >
2010-11-03 14:50:46 +03:00
< h2 > < a href = "examples/index.htm" target = "_blank" > Demo< / a > < / h2 >
2011-07-12 15:08:29 +04:00
< / header >
2010-10-30 04:16:19 +04:00
< / section >
2011-07-16 19:07:52 +04:00
< / div > < / div >
2012-03-01 12:47:33 +04:00
< div class = "slide" > < div >
2011-07-15 04:53:20 +04:00
< section >
2011-07-12 15:08:29 +04:00
< header >
< h2 > Block Quote< / h2 >
< / header >
2012-02-28 17:21:30 +04:00
< blockquote >
2011-07-25 12:21:49 +04:00
< p > This tool is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser, lock up your machine, erase your hard drive.< / p >
2011-07-12 15:08:29 +04:00
< / blockquote >
< / section >
2011-07-16 19:07:52 +04:00
< / div > < / div >
2012-03-01 12:47:33 +04:00
< div class = "slide" > < div >
2012-01-08 13:57:48 +04:00
< section >
< header >
< h2 > Inner Navigation< / h2 >
< / header >
2012-03-01 09:05:43 +04:00
< ol >
< li > This tool is provided< / li >
< li class = "next" > Without warranty, guarantee< / li >
< li class = "next" > Or much in the way of explanation
< li class = "next" > Erase your hard drive.< / li >
2012-01-08 13:57:48 +04:00
< / ol >
< / section >
< / div > < / div >
2012-03-01 12:47:33 +04:00
< div class = "slide" > < div >
2011-07-15 04:53:20 +04:00
< section >
2011-07-12 15:08:29 +04:00
< header >
2010-11-01 16:33:02 +03:00
< h2 > Shower Presentation Template< / h2 >
2011-07-12 15:08:29 +04:00
< / header >
< p > Vadim Makeev, Opera < / p >
< ul >
< li > < a href = "http://pepelsbey.net" > pepelsbey.net< / a > < / li >
< li > < a href = "http://twitter.com/pepelsbey" > twitter.com/pepelsbey< / a > < / li >
< li > < a href = "mailto:pepelsbey@gmail.com" > pepelsbey@gmail.com< / a > < / li >
< / ul >
< p > Shower: < a href = "http://github.com/pepelsbey/shower" > github.com/pepelsbey/shower< / a > < / p >
2010-10-30 04:16:19 +04:00
< / section >
2011-07-16 19:07:52 +04:00
< / div > < / div >
2011-07-24 14:52:46 +04:00
<!--
To hide progress bar from entire presentation
just remove “progress” element.
-->
2011-07-12 15:08:29 +04:00
< div class = "progress" > < div > < / div > < / div >
2010-11-01 15:42:41 +03:00
< script src = "scripts/script.js" > < / script >
2012-02-28 17:20:18 +04:00
<!-- Copyright © 2010– -->
<!-- Photos by John Carey — fiftyfootshadows.net -->
2010-10-30 04:16:19 +04:00
< / body >
2012-03-01 12:47:33 +04:00
< / html >
