bmstu-mt-wp/index.html

130 lines
4.6 KiB
HTML
Executable File
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Shower Presentation Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=1274, user-scalable=no">
<link rel="stylesheet" href="themes/ribbon/styles/screen.css">
<link rel="stylesheet" href="themes/ribbon/styles/print.css" media="print">
<!--
To apply styles to the certain slides
set slide ID to get needed elements
-->
<style>
#Cover h2 {
margin:65px 0 0;
color:#FFF;
text-align:center;
font-size:70px;
}
#Picture h2 {
color:#FFF;
}
</style>
</head>
<body class="list">
<header class="caption">
<h1>Shower Presentation Template</h1>
<p><a href="http://pepelsbey.net/">Vadim Makeev</a>, <a href="http://opera.com">Opera Software</a></p>
</header>
<section class="slide cover" id="Cover"><div>
<h2>Shower Presentation Template</h2>
<img src="pictures/cover.jpg" alt="">
</div></section>
<section class="slide" data-timing="00:05"><div>
<h2>Slide with timer</h2>
<p>It will change right in five seconds</p>
</div></section>
<section class="slide"><div>
<h2>Heading</h2>
<p>In your slides text you can use <a href="http://google.com/">links</a> and various inline elements for <em>emotional</em> and <strong>strong</strong> emphasis or just for <i>italic</i> or <b>bold</b> decoration. <code>&lt;code&gt;</code> is used for inline code samples.</p>
</div></section>
<section class="slide"><div>
<h2>Two rows.<br> Mighty heading</h2>
<p>You can use two lines header but it would reduce space on a slide. The “Ribbon” theme is designed for seven lines of code after one-line header by default.</p>
<p class="note">This paragraph could be used as a footnote</p>
</div></section>
<section class="slide"><div>
<h2>Various lists</h2>
<ul>
<li>Simple lists are marked with bullets.</li>
<li>Ordered lists begin with a number.</li>
<li>You can even nest lists one inside another.
<ol>
<li>Or mix their types.</li>
<li>But do not go too far.</li>
<li>Otherwise audience will be bored.</li>
</ol>
</li>
<li>Look, seven rows exactly!</li>
</ul>
</div></section>
<section class="slide"><div>
<h2>Serious citation</h2>
<figure>
<blockquote>
<p>You can wrap one or more paragraphs into citation, which will make text italic and add a nice quote on the left. Giving the citation source would make it even more serious.</p>
</blockquote>
<figcaption>Vadim Makeev</figcaption>
</figure>
</div></section>
<section class="slide"><div>
<h2>When you have a lot of code</h2>
<pre>
<code>&lt;html lang="en"&gt;</code>
<code><mark>&lt;head&gt;</mark> <mark class="comment">&lt;!--Comment--&gt;</mark></code>
<code> &lt;title&gt;Shower&lt;/title&gt;</code>
<code> &lt;meta charset="<mark class="important">UTF-8</mark>"&gt;</code>
<code> &lt;link rel="stylesheet" href="s/screen.css"&gt;</code>
<code> &lt;script src="j/jquery.js"&gt;&lt;/script&gt;</code>
<code><mark>&lt;/head&gt;</mark></code>
</pre>
</div></section>
<section class="slide"><div>
<h2>Code in separate blocks</h2>
<pre>
<code><mark>&lt;html</mark> lang="en"&gt;</code>
</pre>
<p class="note">Now you can add a note for each block</p>
<pre>
<code><mark>&lt;meta</mark> charset="<mark>UTF-8</mark>"&gt;</code>
</pre>
<p class="note">And explain what is interesting about it</p>
</div></section>
<section class="slide shout"><div>
<h2>You can shout<br> this way</h2>
</div></section>
<section class="slide cover" id="Picture"><div>
<h2>And place any picture</h2>
<img src="pictures/picture.jpg" alt="">
</div></section>
<section class="slide"><div>
<h2>Inner navigation</h2>
<ol>
<li>Lets you change objects one by one</li>
<li class="next">For example, show list items</li>
<li class="next">Or switch pictures</li>
<li class="next">And much more</li>
<li class="next">But it will work only once</li>
</ol>
</div></section>
<section class="slide"><div>
<h2>Shower Presentation Template</h2>
<p>Vadim Makeev, 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>
</div></section>
<!--
To hide progress bar from entire presentation
just remove “progress” element.
-->
<div class="progress"><div></div></div>
<script src="scripts/script.js"></script>
<!-- Copyright © 20102012 Vadim Makeev — pepelsbey.net -->
<!-- Photos by John Carey — fiftyfootshadows.net -->
</body>
</html>