2010-10-30 04:16:19 +04:00
<!DOCTYPE HTML>
< html lang = "en-US" >
< head >
< title > Shower< / title >
< meta charset = "UTF-8" >
2011-07-18 12:03:31 +04:00
< meta name = "viewport" content = "width=1234, user-scalable=no" >
2011-07-12 15:08:29 +04:00
< link rel = "stylesheet" href = "themes/ribbon/styles/style.css" >
2010-10-31 17:56:41 +03:00
< style >
2011-07-12 15:08:29 +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
}
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 >
2011-07-16 19:07:52 +04:00
< div class = "slide bg" 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 >
< div class = "slide" id = "Header" > < 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-18 12:03:31 +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 >
< div class = "slide" id = "TwoLinesHeader" > < 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-18 12:03:31 +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 >
< div class = "slide" id = "UnorderedList" > < 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
< ul >
< li > Note that use of this tool< / li >
< li > May or may not crash your browser< / li >
< li > Lock up your machine< / li >
< / ul >
< / li >
< li > Erase your hard drive…< / li >
< / ul >
2010-10-30 04:16:19 +04:00
< / section >
2011-07-16 19:07:52 +04:00
< / div > < / div >
< div class = "slide" id = "OrderedList" > < 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 >
< li > This tool is provided< / li >
< li > Without warranty, guarantee< / li >
< li > Or much in the way of explanation
< ol >
< li > Note that use of this tool< / li >
< li > May or may not crash your browser< / li >
< li > Lock up your machine< / li >
< / ol >
< / li >
< li > Erase your hard drive…< / li >
< / ol >
2010-10-30 04:16:19 +04:00
< / section >
2011-07-16 19:07:52 +04:00
< / div > < / div >
2011-07-20 03:25:00 +04:00
< div class = "slide bg" id = "Picture" > < div >
2011-07-15 04:53:20 +04:00
< section >
2011-07-12 15:08:29 +04:00
< header >
< h2 > Picture< / h2 >
< / 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 >
< div class = "slide" id = "CodeSample" > < 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 >
< div class = "slide" id = "CodeNotes" > < 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 >
< div class = "slide shout" id = "Shout" > < 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 > Shout!< / 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 >
< div class = "slide shout" id = "Demo" > < 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 >
< div class = "slide" id = "BlockQuote" > < div >
2011-07-15 04:53:20 +04:00
< section >
2011-07-12 15:08:29 +04:00
< header >
< h2 > Block Quote< / h2 >
< / header >
< blockquote cite = "Anonymous" >
< 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 >
< / blockquote >
< / section >
2011-07-16 19:07:52 +04:00
< / div > < / div >
2011-07-23 08:28:57 +04:00
< div class = "slide" id = "InnerNavigation" > < div >
< section >
< header >
< h2 > Inner Navigation< / h2 >
< / header >
2011-07-24 14:52:46 +04:00
<!--
Add class “inner” to any parent element
to start inner navigation section. Pressing
next button will add class “active” to every
next sibling child starting from the first one.
Actual behavior depends on styles of the current
theme: on active state you could show previously
hidden items or emphasize it for example by
color or font-weight:bold.
To start slide with the first active alement
add class “active” manually.
After activation of the last child pressing next
button will turn next slide.
-->
2011-07-23 08:28:57 +04:00
< ol class = "inner" >
< li class = "active" > This tool is provided< / li >
< li > Without warranty, guarantee< / li >
< li > Or much in the way of explanation
< li > Erase your hard drive…< / li >
< / ol >
< / section >
< / div > < / div >
2011-07-16 19:07:52 +04:00
< div class = "slide" id = "ThankYou" > < 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 >
2011-07-24 14:52:46 +04:00
<!-- Copyright © 2010– -->
2010-10-30 04:16:19 +04:00
< / body >
< / html >
