license details added; Russian localization
This commit is contained in:
parent
a69fdf5654
commit
86a89c8110
|
@ -1,7 +1,7 @@
|
||||||
# Shower
|
# Shower
|
||||||
Сross-browser presentation template.
|
Сross-browser presentation template.
|
||||||
|
|
||||||
* Open [pepelsbey.github.com/shower](http://pepelsbey.github.com/shower/)
|
* Open [pepelsbey.github.com/shower/index.en.htm](http://pepelsbey.github.com/shower/index.en.htm)
|
||||||
* Press any slide to enter presentation mode
|
* Press any slide to enter presentation mode
|
||||||
* Press arrow keys to navigate
|
* Press arrow keys to navigate
|
||||||
* Press `Esc` to exit presentation mode
|
* Press `Esc` to exit presentation mode
|
||||||
|
|
|
@ -149,6 +149,23 @@
|
||||||
<header>
|
<header>
|
||||||
<h2>Inner Navigation</h2>
|
<h2>Inner Navigation</h2>
|
||||||
</header>
|
</header>
|
||||||
|
<!--
|
||||||
|
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.
|
||||||
|
-->
|
||||||
<ol class="inner">
|
<ol class="inner">
|
||||||
<li class="active">This tool is provided</li>
|
<li class="active">This tool is provided</li>
|
||||||
<li>Without warranty, guarantee</li>
|
<li>Without warranty, guarantee</li>
|
||||||
|
@ -171,7 +188,12 @@
|
||||||
<p>Shower: <a href="http://github.com/pepelsbey/shower">github.com/pepelsbey/shower</a></p>
|
<p>Shower: <a href="http://github.com/pepelsbey/shower">github.com/pepelsbey/shower</a></p>
|
||||||
</section>
|
</section>
|
||||||
</div></div>
|
</div></div>
|
||||||
|
<!--
|
||||||
|
To hide progress bar from entire presentation
|
||||||
|
just remove “progress” element.
|
||||||
|
-->
|
||||||
<div class="progress"><div></div></div>
|
<div class="progress"><div></div></div>
|
||||||
<script src="scripts/script.js"></script>
|
<script src="scripts/script.js"></script>
|
||||||
|
<!-- Copyright © 2010–2011 Vadim Makeev, http://pepelsbey.net/ -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -0,0 +1,201 @@
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html lang="ru-RU">
|
||||||
|
<head>
|
||||||
|
<title>Shower</title>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=1234, user-scalable=no">
|
||||||
|
<link rel="stylesheet" href="themes/ribbon/styles/style.css">
|
||||||
|
<style>
|
||||||
|
#Cover H2 {
|
||||||
|
color:#FFF;
|
||||||
|
text-align:center;
|
||||||
|
font-size:70px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="list">
|
||||||
|
<header class="caption">
|
||||||
|
<h1>Шаблон презентации Shower</h1>
|
||||||
|
<p>Вадим Макеев, Opera Software</p>
|
||||||
|
</header>
|
||||||
|
<div class="slide bg" id="Cover"><div>
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>Шаблон презентации Shower</h2>
|
||||||
|
</header>
|
||||||
|
<img src="pictures/cover.jpg" alt="">
|
||||||
|
</section>
|
||||||
|
</div></div>
|
||||||
|
<div class="slide" id="Header"><div>
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>Заголовок</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 this tool 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>
|
||||||
|
</section>
|
||||||
|
</div></div>
|
||||||
|
<div class="slide" id="TwoLinesHeader"><div>
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>Две строки.<br>Мощный заголовок</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 this tool may or may not crash <em>your</em> browser…</p>
|
||||||
|
</section>
|
||||||
|
</div></div>
|
||||||
|
<div class="slide" id="UnorderedList"><div>
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>Неупорядоченный список</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>
|
||||||
|
</section>
|
||||||
|
</div></div>
|
||||||
|
<div class="slide" id="OrderedList"><div>
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>Упорядоченный список</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>
|
||||||
|
</section>
|
||||||
|
</div></div>
|
||||||
|
<div class="slide bg" id="Picture"><div>
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>Картинка</h2>
|
||||||
|
</header>
|
||||||
|
<img src="pictures/picture.jpg" alt="">
|
||||||
|
</section>
|
||||||
|
</div></div>
|
||||||
|
<div class="slide" id="CodeSample"><div>
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>Пример кода</h2>
|
||||||
|
</header>
|
||||||
|
<pre>
|
||||||
|
<code><html lang="en-US"></code>
|
||||||
|
<code><mark><head></mark></code>
|
||||||
|
<code> <title>Shower</title></code>
|
||||||
|
<code> <meta charset="<mark class="important">UTF-8</mark>"></code>
|
||||||
|
<code> <link rel="stylesheet" href="s/screen.css"></code>
|
||||||
|
<code> <script src="j/jquery.js"></script></code>
|
||||||
|
<code><mark></head></mark></code>
|
||||||
|
</pre>
|
||||||
|
</section>
|
||||||
|
</div></div>
|
||||||
|
<div class="slide" id="CodeNotes"><div>
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>Заметки к коду</h2>
|
||||||
|
</header>
|
||||||
|
<pre>
|
||||||
|
<code><mark><html</mark> lang="en-US"></code>
|
||||||
|
</pre>
|
||||||
|
<p class="note">May or may not crash your browser</p>
|
||||||
|
<pre>
|
||||||
|
<code><mark><meta</mark> charset="<mark>UTF-8</mark>"></code>
|
||||||
|
</pre>
|
||||||
|
<p class="note">Lock up your machine</p>
|
||||||
|
</section>
|
||||||
|
</div></div>
|
||||||
|
<div class="slide shout" id="Shout"><div>
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>Крик!</h2>
|
||||||
|
</header>
|
||||||
|
</section>
|
||||||
|
</div></div>
|
||||||
|
<div class="slide shout" id="Demo"><div>
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2><a href="examples/index.htm" target="_blank">Демо</a></h2>
|
||||||
|
</header>
|
||||||
|
</section>
|
||||||
|
</div></div>
|
||||||
|
<div class="slide" id="BlockQuote"><div>
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>Цитата</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>
|
||||||
|
<div class="slide" id="InnerNavigation"><div>
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>Внутренняя навигация</h2>
|
||||||
|
</header>
|
||||||
|
<!--
|
||||||
|
Добавьте класс «inner» к любому родительскому
|
||||||
|
элементу для того, чтобы обозначить блок
|
||||||
|
внутренней навигации. Нажатие кнопки «следующий»
|
||||||
|
добавит класс «active» каждому последующему
|
||||||
|
ребёнку, начиная с первого.
|
||||||
|
|
||||||
|
Конкретное поведение зависит от стилей
|
||||||
|
текущей темы: элемент в активном состоянии
|
||||||
|
может быть показан, будучи предварительно спрятан,
|
||||||
|
либо вы можете выделить его, к примеру, цветом
|
||||||
|
или полужирным начертанием.
|
||||||
|
|
||||||
|
Для того, чтобы начать слайд с первого активного
|
||||||
|
элемента, добавьте класс «active» вручную.
|
||||||
|
|
||||||
|
После активации последнего элемента, нажатие
|
||||||
|
кнопки «следующий» переключит следующий слайд.
|
||||||
|
-->
|
||||||
|
<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>
|
||||||
|
<div class="slide" id="ThankYou"><div>
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>Шаблон презентации Shower</h2>
|
||||||
|
</header>
|
||||||
|
<p>Вадим Макеев, Opera Software</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>
|
||||||
|
</section>
|
||||||
|
</div></div>
|
||||||
|
<!--
|
||||||
|
Для того, чтобы убрать индикатор прогресса
|
||||||
|
из презентации, просто удалите элемент «progress».
|
||||||
|
-->
|
||||||
|
<div class="progress"><div></div></div>
|
||||||
|
<script src="scripts/script.js"></script>
|
||||||
|
<!-- Copyright © 2010–2011 Вадим Макеев, http://pepelsbey.net/ -->
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -1,3 +1,9 @@
|
||||||
|
/*
|
||||||
|
Ribbon theme for Shower presentation template: http://github.com/pepelsbey/shower
|
||||||
|
Copyright © 2010–2011 Vadim Makeev, http://pepelsbey.net/
|
||||||
|
Licensed under MIT license: https://github.com/pepelsbey/shower/wiki/License
|
||||||
|
*/
|
||||||
|
|
||||||
@import url(fonts.css);
|
@import url(fonts.css);
|
||||||
@import url(reset.css);
|
@import url(reset.css);
|
||||||
|
|
||||||
|
@ -326,7 +332,7 @@ BODY {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Inner Navigation */
|
/* Inner Navigation */
|
||||||
.inner > * {
|
.full .inner > * {
|
||||||
opacity:0;
|
opacity:0;
|
||||||
-webkit-transition:opacity 0.5s linear;
|
-webkit-transition:opacity 0.5s linear;
|
||||||
-moz-transition:opacity 0.5s linear;
|
-moz-transition:opacity 0.5s linear;
|
||||||
|
@ -334,7 +340,7 @@ BODY {
|
||||||
-o-transition:opacity 0.5s linear;
|
-o-transition:opacity 0.5s linear;
|
||||||
transition:opacity 0.5s linear;
|
transition:opacity 0.5s linear;
|
||||||
}
|
}
|
||||||
.inner > .active {
|
.full .inner > .active {
|
||||||
opacity:1;
|
opacity:1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue