213 lines
7.7 KiB
HTML
Executable File
213 lines
7.7 KiB
HTML
Executable File
<!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="">
|
||
<!-- © John Carey, http://fiftyfootshadows.net/ -->
|
||
</section>
|
||
</div></div>
|
||
<div class="slide" id="Header"><div>
|
||
<section>
|
||
<header>
|
||
<h2>Заголовок</h2>
|
||
</header>
|
||
<p>Очередь <code>заведено</code> создаете <strong>те про,</strong> джоэл должен написано вы всю. Получаете отказаться программистов миф мы, <em>не пишете размере</em> количества нее, по две.</p>
|
||
<p><a href="examples/index.htm" target="_blank">Эта ссылка откроется в новом окне</a></p>
|
||
</section>
|
||
</div></div>
|
||
<div class="slide" id="TwoLinesHeader"><div>
|
||
<section>
|
||
<header>
|
||
<h2>Две строки.<br>Мощный заголовок</h2>
|
||
</header>
|
||
<p>Очередь <code>заведено</code> создаете <strong>те про,</strong> джоэл должен написано вы всю. Получаете отказаться программистов миф мы, <em>не пишете размере</em> количества нее, по две.</p>
|
||
</section>
|
||
</div></div>
|
||
<div class="slide" id="UnorderedList"><div>
|
||
<section>
|
||
<header>
|
||
<h2>Неупорядоченный список</h2>
|
||
</header>
|
||
<ul>
|
||
<li>Очередь заведено создаете</li>
|
||
<li>Те про, джоэл должен написано вы всю</li>
|
||
<li>Получаете отказаться программистов
|
||
<ol>
|
||
<li>Миф мы, не пишете размере</li>
|
||
<li>Количества нее, по две</li>
|
||
<li>Заведено безостановочно</li>
|
||
</ol>
|
||
</li>
|
||
<li>Ещё то этой вреде внешних.</li>
|
||
</ul>
|
||
</section>
|
||
</div></div>
|
||
<div class="slide" id="OrderedList"><div>
|
||
<section>
|
||
<header>
|
||
<h2>Упорядоченный список</h2>
|
||
</header>
|
||
<ol>
|
||
<li>Миф мы, не пишете размере</li>
|
||
<li>Ещё то этой вреде внешних</li>
|
||
<li>Заведено безостановочно
|
||
<ul>
|
||
<li>Очередь заведено создаете</li>
|
||
<li>Те про, джоэл должен написано вы всю</li>
|
||
<li>Получаете отказаться программистов</li>
|
||
</ul>
|
||
</li>
|
||
<li>Количества нее, по две</li>
|
||
</ol>
|
||
</section>
|
||
</div></div>
|
||
<div class="slide" id="InTheMiddle"><div>
|
||
<section>
|
||
<header>
|
||
<h2>Посередине</h2>
|
||
</header>
|
||
<object data="pictures/semantics.svg" type="image/svg+xml" width="300" height="300" class="middle"></object>
|
||
</section>
|
||
</div></div>
|
||
<div class="slide bg" id="Picture"><div>
|
||
<section>
|
||
<header>
|
||
<h2>Картинка</h2>
|
||
</header>
|
||
<img src="pictures/picture.jpg" alt="">
|
||
<!-- © Patrick H. Lauke, http://www.flickr.com/photos/redux/ -->
|
||
</section>
|
||
</div></div>
|
||
<div class="slide" id="CodeSample"><div>
|
||
<section>
|
||
<header>
|
||
<h2>Пример кода</h2>
|
||
</header>
|
||
<pre>
|
||
<code><html lang="ru-RU"></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="ru-RU"></code>
|
||
</pre>
|
||
<p class="note">Получаете отказаться программистов</p>
|
||
<pre>
|
||
<code><mark><meta</mark> charset="<mark>UTF-8</mark>"></code>
|
||
</pre>
|
||
<p class="note">Заведено безостановочно</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="Аноним">
|
||
<p>Очередь заведено создаете те про, джоэл должен написано вы всю. Получаете отказаться программистов миф мы, не пишете размере количества нее, по две.</p>
|
||
</blockquote>
|
||
</section>
|
||
</div></div>
|
||
<!--
|
||
Эта возможность находится в разработке!
|
||
|
||
Добавьте класс «inner» к любому родительскому
|
||
элементу для того, чтобы обозначить блок
|
||
внутренней навигации. Нажатие кнопки «следующий»
|
||
добавит класс «active» каждому последующему
|
||
ребёнку, начиная с первого.
|
||
|
||
Конкретное поведение зависит от стилей
|
||
текущей темы: элемент в активном состоянии
|
||
может быть показан, будучи предварительно спрятан,
|
||
либо вы можете выделить его, к примеру, цветом
|
||
или полужирным начертанием.
|
||
|
||
Для того, чтобы начать слайд с первого активного
|
||
элемента, добавьте класс «active» вручную.
|
||
|
||
После активации последнего элемента, нажатие
|
||
кнопки «следующий» переключит следующий слайд.
|
||
|
||
<div class="slide" id="InnerNavigation"><div>
|
||
<section>
|
||
<header>
|
||
<h2>Внутренняя навигация</h2>
|
||
</header>
|
||
<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> |