210 lines
7.5 KiB
HTML
Executable File
210 lines
7.5 KiB
HTML
Executable File
<!DOCTYPE HTML>
|
||
<html lang="ru-RU">
|
||
<head>
|
||
<title>Шаблон презентаций Shower</title>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1274, user-scalable=no">
|
||
<link rel="stylesheet" href="themes/ribbon/styles/style.css">
|
||
<!--
|
||
Для оформления отдельный слайдов, используйте
|
||
ID слайда для доступа к необходимым элементам
|
||
-->
|
||
<style>
|
||
#Cover h2 {
|
||
color:#FFF;
|
||
text-align:center;
|
||
font-size:70px;
|
||
}
|
||
#FitToWidth h2,
|
||
#FitToHeight h2 {
|
||
color:#FFF;
|
||
text-align:center;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="list">
|
||
<header class="caption">
|
||
<h1>Шаблон презентаций Shower</h1>
|
||
<p>Вадим Макеев, Opera Software</p>
|
||
</header>
|
||
<div class="slide cover" 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>Очередь <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>
|
||
<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>
|
||
</section>
|
||
</div></div>
|
||
<div class="slide cover" id="FitToHeight"><div>
|
||
<section>
|
||
<header>
|
||
<h2>Вписана по высоте</h2>
|
||
</header>
|
||
<img src="pictures/picture.jpg" alt="">
|
||
</section>
|
||
</div></div>
|
||
<div class="slide cover w" id="FitToWidth"><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="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>Опасносте<br>сообщение</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>
|
||
<p>Очередь заведено создаете те про, джоэл должен написано вы всю. Получаете отказаться программистов миф мы, не пишете размере количества нее, по две.</p>
|
||
</blockquote>
|
||
</section>
|
||
</div></div>
|
||
<div class="slide" id="InnerNavigation"><div>
|
||
<section>
|
||
<header>
|
||
<h2>Внутренняя навигация</h2>
|
||
</header>
|
||
<ol class="inner">
|
||
<li class="active">Очередь заведено создаете</li>
|
||
<li>Те про, джоэл должен написано вы всю</li>
|
||
<li>Получаете отказаться программистов</li>
|
||
<li>Ещё то этой вреде внешних.</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–2012 Vadim Makeev — pepelsbey.net -->
|
||
<!-- Photos by John Carey — fiftyfootshadows.net -->
|
||
</body>
|
||
</html> |