-
Notifications
You must be signed in to change notification settings - Fork 0
/
open_lesson.html
146 lines (129 loc) · 5.31 KB
/
open_lesson.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>JS .open lesson</title>
<meta charset="utf-8">
<meta name="viewport" content="width=792, user-scalable=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="shower/themes/ribbon/styles/screen.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<!--
To apply styles to the certain slides
set slide ID to get needed elements
-->
<style>
#Cover h2 {
margin:30px 0 0;
color:#FFF;
text-align:center;
font-size:70px;
}
#Cover p {
margin:10px 0 0;
text-align:center;
color:#FFF;
font-style:italic;
font-size:20px;
}
#Cover p a {
color:#FFF;
}
#Picture h2 {
color:#FFF;
}
#SeeMore h2 {
font-size:100px
}
#SeeMore img {
width:0.72em;
height:0.72em;
}
/* Open lesson styles */
.slide h2, .slide p, .slide li {color:#7a7f9c}
</style>
</head>
<body class="list">
<header class="caption">
<h1>JS .introduction</h1>
<p>для Epic Skills</p>
</header>
<section class="slide cover" id="Cover"><div>
<h2 style="color:#061fa7; text-shadow:1px 1px 15px #fff; font-size: 3.5em"><b>Javascript</b></h2>
<p style="color:#062194; text-shadow:1px 1px 15px #fff; font-size: 1.1em; font-weight: bold; padding: 120px 10px 0 0">Море возможностей</p>
<img src="pictures/open_lesson/intro.jpg" alt="">
</div></section>
<section class="slide shout"><div>
<h2><strong>Использовать</strong><i class="next">,</i> <em>нельзя</em> <strong>игнорировать</strong></h2>
</div></section>
<section class="slide cover"><div>
<h2>великий Эйлер</h2>
<img src="pictures/open_lesson/browsers_js_usage.jpg">
</div></section>
<section class="slide cover"><div>
<h2 style="color:#fff">Самое удобные и частоиспользуемые методы собираются в <b style="color:#061fa7; text-shadow:1px 1px 15px #fff; font-size: 1.2em">библиотеках</b></h2>
<img src="pictures/open_lesson/full_of_opportunities.jpg">
</div></section>
<section class="slide cover"><div>
<h2 style="position: absolute; bottom: 40px; left:15px">Какую библиотеку выбрать?</h2>
<img src="pictures/open_lesson/what_to_choose.jpg">
</div></section>
<section class="slide"><div>
<h2>Проблема выбора?</h2>
<img src="pictures/open_lesson/js_frameworks.jpg" style="padding: 0 0 0 130px">
</div></section>
<section class="slide cover"><div>
<h2 style="color:#061fa7; text-shadow:1px 1px 15px #fff; font-size: 2.4em; position: absolute; bottom: 40px; left:115px">jQuery</h2>
<img src="pictures/open_lesson/found.jpg">
</div></section>
<section class="slide"><div>
<h2><em>jQuery</em>, потому что:</h2>
<ul>
<li class="next">размер библиотеки ~ <b>32kB</b></li>
<li class="next">удобная, понятная (поддержка тех же CSS3 селекторов )</li>
<li class="next">
надежная (кроссраузерные методы)
<img src="pictures/open_lesson/browsers.png">
</li>
</ul>
</div></section>
<section class="slide shout"><div>
<h2>кажется, это сложно</h2>
</div></section>
<section class="slide cover"><div>
<h2>Не беспокойтесь!</h2>
<img src="pictures/open_lesson/enzo.jpg">
</div></section>
<section class="slide cover"><div>
<h2 style="color:#a8b4d5">начинаем погружение?</h2>
<img src="pictures/open_lesson/deep_blue.jpg">
</div></section>
<section class="slide cover"><div>
<h2 style="color:#c3cff3">Пограмма курса:</h2>
<ul>
<li style="color:#c3cff3">Анимация и эффекты;</li>
<li style="color:#c3cff3">Путешествия по DOM;</li>
<li style="color:#c3cff3">События и их обработчики;</li>
<li style="color:#c3cff3">Переменные, функции, массивы, объекты и многое другое;</li>
<li style="color:#c3cff3">AJAX и работа с API;</li>
<li style="color:#c3cff3">Основы алгоритмизации;</li>
<li style="color:#c3cff3">Подключение и работа с плагинами.</li>
</ul>
<img src="pictures/open_lesson/plan.jpg">
</div></section>
<section class="slide cover"><div>
<h2 style="color:#27272f; position: absolute; top:40px; right:270px">Придешь на занятие?</h2>
<img src="pictures/open_lesson/roberto.jpg">
</div></section>
<section class="slide cover"><div>
<h2 style="color:#27272f; position: absolute; top:40px; right:270px">Спасибо за внимание!</h2>
<img src="pictures/open_lesson/thanks.jpg">
</div></section>
<!--
To hide progress bar from entire presentation
just remove “progress” element.
-->
<div class="progress"><div></div></div>
<script src="shower/shower.min.js"></script>
<!-- Copyright © 2013 Yours Truly, Famous Inc. -->
</body>
</html>