diff --git a/presentation/image.png b/presentation/image.png
new file mode 100644
index 0000000..4df6bfa
Binary files /dev/null and b/presentation/image.png differ
diff --git a/presentation/index.html b/presentation/index.html
new file mode 100644
index 0000000..d9b4965
--- /dev/null
+++ b/presentation/index.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <meta name="author" content="netmoose">
+
+    <title>Presentation on JQuery and Bootstrap</title>
+
+    <!-- Bootstrap core CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+
+    <!-- Custom styles for this template -->
+    <link href="sticky-footer.css" rel="stylesheet">
+
+    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
+	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+	<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
+	<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
+	<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.3.js"></script>
+  </head>
+
+  <body>
+
+    <!-- Begin page content -->
+    <div class="container">
+      <div class="page-header">
+        <h1>Пример презентации</h1>
+      </div>
+              <div id="presentation">
+            <div>
+                <strong>1</strong> 
+				<p><img src="image.png" class="image-left"></p>
+				<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit, orci consectetur posuere efficitur, risus dolor vulputate 
+				nibh, ac venenatis mauris quam id elit. In non dapibus lectus, in placerat diam. Aenean finibus volutpat nibh, quis maximus augue bibendum 
+				eget. Cras euismod risus vitae risus consectetur, ac consectetur augue gravida. Etiam condimentum nulla sem, in venenatis quam consequat nec. 
+				Nam sed nulla felis. Duis in feugiat felis. Curabitur eget varius purus. In malesuada accumsan felis eu vehicula. Donec convallis mauris vel 
+				odio efficitur vestibulum.<p>
+            </div>
+            <div>
+                <strong>2</strong> 
+				<p><img src="image.png" class="image-left"></p>
+				<p class="lead">Sed non egestas tellus, a aliquet ex. Donec id velit in purus vehicula auctor id vel nulla. Cras molestie urna ac pellentesque rutrum. In 
+				at convallis dui, et sollicitudin lacus. Aenean purus quam, faucibus vel est at, efficitur euismod lacus. Ut consectetur maximus ligula, sed 
+				pellentesque lacus pretium ut. Suspendisse pellentesque ut tellus vitae facilisis. Cras auctor elit in dui tempus dictum.  </p>
+            </div>
+            <div>
+                <strong>3</strong> 
+				<p><img src="image.png" class="image-left"></p>
+				<p class="lead">Praesent et risus lorem. Nullam massa eros, maximus et ipsum suscipit, mattis cursus metus. Vestibulum dapibus enim imperdiet dui ornare 
+			    pharetra. Aenean pulvinar eros metus, semper maximus diam tincidunt in. Suspendisse fermentum mi at augue feugiat blandit imperdiet at quam. 
+				Pellentesque libero ligula, vulputate vitae sapien eu, dapibus tempor nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices 
+				posuere cubilia Curae; Sed pharetra dolor a elementum feugiat. Aliquam erat volutpat. Morbi volutpat cursus dapibus. Sed luctus nisi purus, 
+				id rutrum dui dignissim sit amet.</p>
+            </div>
+            <div>
+                <strong>4</strong> 
+				<p><img src="image.png" class="image-left"></p>
+				<p class="lead">Praesent est ipsum, lobortis sed sapien vel, pellentesque vestibulum nunc. Fusce rutrum ligula risus, eu maximus lacus fermentum nec. Cum 
+				sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis tincidunt in nunc sed feugiat. Sed non ex sed justo 
+				eleifend pulvinar non vel odio. Nunc ultricies ipsum in velit mattis euismod. Donec aliquet efficitur molestie. Nam a nulla consectetur, 
+				malesuada neque vel, mattis nisl. Suspendisse nibh ante, mattis non varius vel, sodales non ligula. Sed consequat eget neque vitae 
+				ullamcorper. Proin lobortis iaculis magna, sit amet dictum augue dignissim id. Vestibulum vestibulum massa ut leo aliquet, tempor varius quam 
+				ultricies. Sed molestie felis ac justo blandit, id pretium purus suscipit.</p>
+            </div>
+			<div>
+                <strong>5</strong> 
+				<p><img src="image.png" class="image-left"></p>
+				<p class="lead">Donec porta semper fringilla. Etiam ac orci tempor, euismod risus ac, posuere felis. Suspendisse congue, dui sed tempor hendrerit, diam orci 
+				malesuada dolor, ut placerat nisl neque quis odio. Vivamus gravida accumsan augue at semper. In hac habitasse platea dictumst. Mauris auctor 
+				dui a enim vulputate elementum. Morbi enim massa, ullamcorper maximus neque non, facilisis commodo turpis. Mauris ornare euismod rhoncus. 
+				Vivamus tincidunt tincidunt orci, non ultrices felis fermentum et. Praesent porttitor nunc a purus fermentum, congue faucibus dui laoreet. 
+				Vivamus efficitur sollicitudin lacus, ac ultricies orci eleifend eget. Nullam at odio et turpis accumsan sollicitudin. Etiam auctor sodales 
+				diam, at efficitur massa hendrerit vel.</p>
+            </div>
+        </div>
+    </div>
+
+    <footer class="footer">
+      <div class="container">
+        <p class="text-muted"><center><a id="prev" href="#">Предыдущий слайд</a> | <a id="prespause" href="#">Пауза</a> | <a id="next" href="#">Следующий слайд</a></center></p>
+      </div>
+    </footer>
+
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
+	<script type="text/javascript">
+		var run = 1;
+		console.log('run = '+run);
+
+		$.fn.cycle.defaults.timeout = 6000;
+		$('#presentation').cycle({ 
+			fx:    'scrollLeft,scrollDown,scrollRight,scrollUp', 
+			delay: -1000,
+			next:   '#next', 
+			prev:   '#prev'
+		});	
+		$('#prespause').click(function () {
+			console.log('pause');
+			if(run == 1) {
+				run = 0;
+				console.log('run = '+ run);
+				$('#presentation').cycle('pause');
+				$('#prespause').text('Запуск');
+			}
+			else {
+				run = 1;
+				console.log('run = '+run);
+				$('#presentation').cycle('resume');
+				$('#prespause').text('Пауза');
+			}
+			return false;
+		});
+	</script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/presentation/sticky-footer.css b/presentation/sticky-footer.css
new file mode 100644
index 0000000..739da86
--- /dev/null
+++ b/presentation/sticky-footer.css
@@ -0,0 +1,36 @@
+/* Sticky footer styles
+-------------------------------------------------- */
+html {
+  position: relative;
+  min-height: 100%;
+}
+body {
+  /* Margin bottom by footer height */
+  margin-bottom: 60px;
+}
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  /* Set the fixed height of the footer here */
+  height: 60px;
+  background-color: #f5f5f5;
+}
+
+
+/* Custom page CSS
+-------------------------------------------------- */
+/* Not required for template or sticky footer method. */
+
+.container {
+  width: auto;
+  max-width: 1024px;
+  padding: 0 15px;
+}
+.container .text-muted {
+  margin: 20px 0;
+}
+.image-left {
+  float:left;
+  margin: 7px 7px 7px 0;
+}
\ No newline at end of file
