2010-10-30 04:16:19 +04:00
<!DOCTYPE HTML>
< html lang = "en-US" >
< head >
< title > Shower< / title >
< meta charset = "UTF-8" >
2011-07-12 15:08:29 +04:00
< link rel = "stylesheet" href = "styles/style.css" >
< 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-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-12 15:08:29 +04:00
< body class = "multiple" >
< header class = "slide-caption" >
< h1 > Shower Presentation Template< / h1 >
< p > Vadim < / p >
< / header >
< div class = "slide-frame" >
< section class = "slide bg" id = "Cover" >
< 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-12 15:08:29 +04:00
< / div >
< div class = "slide-frame" >
2010-10-30 04:16:19 +04:00
< section class = "slide" id = "Header" >
2011-07-12 15:08:29 +04:00
< header >
< h2 > Header< / h2 >
< / header >
< p > This < code > < tool> < / code > is provided < strong > without< / strong > warranty, guarantee, or much in the way of explanation. Note that use of < a href = "#TwoLinesHeader" > this tool< / a > may or may not crash < em > your< / em > browser…< / p >
< 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-12 15:08:29 +04:00
< / div >
< div class = "slide-frame" >
2010-10-30 04:16:19 +04:00
< section class = "slide" id = "TwoLinesHeader" >
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 >
< p > This < code > < tool> < / code > is provided < strong > without< / strong > warranty, guarantee, or much in the way of explanation. Note that use of < a href = "#SevenItemsList" > this tool< / a > may or may not crash < em > your< / em > browser…< / p >
2010-10-30 04:16:19 +04:00
< / section >
2011-07-12 15:08:29 +04:00
< / div >
< div class = "slide-frame" >
< section class = "slide" id = "UnorderedList" >
< 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-12 15:08:29 +04:00
< / div >
< div class = "slide-frame" >
< section class = "slide" id = "OrderedList" >
< 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-12 15:08:29 +04:00
< / div >
< div class = "slide-frame" >
< section class = "slide bg progress-off" id = "Picture" >
< header >
< h2 > Picture< / h2 >
< / header >
< img src = "pictures/picture.jpg" alt = "" >
2010-10-30 04:16:19 +04:00
< / section >
2011-07-12 15:08:29 +04:00
< / div >
< div class = "slide-frame" >
< section class = "slide" id = "CodeSample" >
< header >
< h2 > Code Sample< / h2 >
< / header >
< pre >
< code > < html lang="en-US"> < / code >
< code > < em > < head> < / em > < / code >
< code > < title> Shower< /title> < / code >
2011-07-12 15:18:02 +04:00
< code > < meta charset="< strong > UTF-8< / strong > "> < / code >
< code > < link rel="stylesheet" href="s/screen.css"> < / code >
< code > < script src="j/jquery.js"> < /script> < / code >
2011-07-12 15:08:29 +04:00
< code > < em > < /head> < / em > < / code >
< / pre >
2010-10-30 04:16:19 +04:00
< / section >
2011-07-12 15:08:29 +04:00
< / div >
< div class = "slide-frame" >
< section class = "slide" id = "CodeNotes" >
< header >
< h2 > Code Notes< / h2 >
< / header >
< pre >
< code > < em > < html< / em > lang="en-US"> < / code >
< / pre >
< p class = "note" > May or may not crash your browser< / p >
< pre >
2011-07-12 15:18:02 +04:00
< code > < em > < meta< / em > charset="< strong > UTF-8< / strong > "> < / 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-12 15:08:29 +04:00
< / div >
< div class = "slide-frame" >
< section class = "slide shout" id = "Shout" >
< 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-12 15:08:29 +04:00
< / div >
< div class = "slide-frame" >
< section class = "slide shout" id = "Demo" >
< 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-12 15:08:29 +04:00
< / div >
< div class = "slide-frame" >
< section class = "slide" id = "BlockQuote" >
< 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 >
< / div >
< div class = "slide-frame" >
< section class = "slide" id = "ThankYou" >
< 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 >
< / div >
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 >
2010-10-30 04:16:19 +04:00
< / body >
< / html >
