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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
| <!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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="">
<link rel="shortcut icon" href="boxer.ico">
<title>Ученики</title>
<!-- Стиль Bootstrap -->
<link href="bootstrap.css" rel="stylesheet">
<!-- Стиль страницы -->
<link href="style.css" rel="stylesheet">
<!-- Стиль адаптации дизайна -->
<link href="responsive.css" rel="stylesheet">
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Gem style -->
<!-- Skin CSS file (styling of UI - buttons, caption, etc.)
In the folder of skin CSS file there are also:
- .png and .svg icons sprite,
- preloader.gif (for browsers that do not support CSS animations) -->
<link rel='stylesheet prefetch' href='css/photoswipe.css'>
<link rel='stylesheet prefetch' href='css/default-skin.css'>
<link rel="stylesheet" href="css/stylephoto.css">
</head>
<body>
<main>
<div class="container">
<!-- Верхний блок-->
<div class="navbar-default" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<!-- Меню -->
<div id="menu" class"col-lg-12 col-md-12 col-sm-12">
<ul>
<li id="medal1"><a href="#"><div>О тренере</div></a></li>
<li id="medal2"><a href="#"><div>Ученики</div></a></li>
<li id="medal3"><a href="#"><div>Зал</div></a></li>
<li id="medal4"><a href="#"><div>Медиа</div></a></li>
</ul>
</div>
<!-- /Меню -->
</div>
<section id="cd-team" class="cd-section">
<div class="cd-container">
<ul>
<li>
<a href="#0" data-type="member-1">
<figure>
<img src="https://www.cyberforum.ru/images/team-member-1.jpg" alt="Team member 1">
<div class="cd-img-overlay"><span>View Bio</span></div>
</figure>
<div class="cd-member-info">
John Smith <span>CEO</span>
</div> <!-- cd-member-info -->
</a>
</li>
<li>
<a href="#0" data-type="member-2">
<figure>
<img src="https://www.cyberforum.ru/images/team-member-1.jpg" alt="Team member 1">
<div class="cd-img-overlay"><span>View Bio</span></div>
</figure>
<div class="cd-member-info">
Cristina Cameron <span>Marketing</span>
</div> <!-- cd-member-info -->
</a>
</li>
<li>
<a href="#0" data-type="member-3">
<figure>
<img src="https://www.cyberforum.ru/images/team-member-1.jpg" alt="Team member 1">
<div class="cd-img-overlay"><span>View Bio</span></div>
</figure>
<div class="cd-member-info">
Samuel Noel <span>Web Design</span>
</div> <!-- cd-member-info -->
</a>
</li>
</ul>
</div> <!-- cd-container -->
</section> <!-- cd-team -->
<div class="cd-overlay"></div>
</div>
<!-- /Основной блок -->
</main>
<div class="cd-member-bio member-1">
<div class="cd-member-bio-pict">
<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="foto/1.jpg" itemprop="contentUrl" data-size="2592x1728">
<img src="https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_m.jpg" itemprop="thumbnail" alt="Image description" />
</a>
<figcaption itemprop="caption description">Image caption 2.1</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="foto/2.jpg" itemprop="contentUrl" data-size="2592x1728">
<img src="https://farm7.staticflickr.com/6175/6176698785_7dee72237e_m.jpg" itemprop="thumbnail" alt="Image description" />
</a>
<figcaption itemprop="caption description">Image caption 2.2</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="foto/3.jpg" itemprop="contentUrl" data-size="2592x1728">
<img src="https://farm6.staticflickr.com/5023/5578283926_822e5e5791_m.jpg" itemprop="thumbnail" alt="Image description" />
</a>
<figcaption itemprop="caption description">Image caption 2.3</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="foto/4.jpg" itemprop="contentUrl" data-size="2592x1728">
<img src="foto/4_2.jpg" itemprop="thumbnail" alt="Image description" />
</a>
<figcaption itemprop="caption description">Image caption 2.3</figcaption>
</figure>
</div>
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- Background of PhotoSwipe.
It's a separate element, as animating opacity is faster than rgba(). -->
<div class="pswp__bg"></div>
<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">
<!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
<!-- don't modify these 3 pswp__item elements, data is added later on. -->
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
<!-- element will get class pswp__preloader--active when preloader is running -->
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
</button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
</div> <!-- cd-member-bio-pict -->
<div class="cd-bio-content">
1) dsds<br />
2) dsd<br />
3) ds<br />
</div> <!-- cd-bio-content -->
</div> <!-- cd-member-bio -->
<div class="cd-member-bio member-2">
<div class="cd-member-bio-pict">
<img src="https://www.cyberforum.ru/images/member-bio-img-2.jpg" alt="Member Bio image">
</div> <!-- cd-member-bio-pict -->
<div class="cd-bio-content">
<h1>Meet Cristina Cameron</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, amet, voluptatibus et omnis dolore illo saepe voluptatem qui quibusdam sunt corporis ut iure repellendus delectus voluptate explicabo temporibus quos eaque?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, explicabo, doloribus, esse rem officia quas facilis eius alias similique ducimus amet quam odio perspiciatis dolorem ipsam! Ab, dolores, adipisci, explicabo pariatur illum deleniti quam iusto placeat nisi aliquam praesentium mollitia eligendi a! Sequi, voluptatibus sed quos possimus harum rem tempore fugiat? Corporis, officia, assumenda, asperiores blanditiis quidem aliquam fugiat vel excepturi velit provident aut omnis quos aliquid tempora eaque. Nemo, eveniet, sint maxime eum maiores totam est inventore numquam voluptatem hic nam blanditiis placeat illum nesciunt voluptatum eos cum quos magni voluptates ipsam. Perspiciatis alias ducimus libero. Quo provident omnis fugiat ut repellendus optio cum quaerat odio et ipsa. Molestias, atque repellat non maxime amet corporis magni libero quam numquam error beatae at asperiores et a porro nostrum ab necessitatibus esse aliquid iure repellendus obcaecati unde quo eius eum dolores quasi consectetur culpa velit optio! Sequi, dolor, minima, veniam doloribus in ullam cupiditate iste animi ipsum esse eaque similique illo temporibus magni et earum amet sint deleniti est reiciendis. Maxime, quis, animi, ad quasi adipisci suscipit alias iste reprehenderit ea placeat nulla commodi nobis magnam provident veniam earum odit eveniet possimus aut voluptatum dolorum culpa necessitatibus facere totam quisquam. Ipsam.</p>
</div> <!-- cd-bio-content -->
</div> <!-- cd-member-bio -->
<div class="cd-member-bio member-3">
<div class="cd-member-bio-pict">
<img src="https://www.cyberforum.ru/images/member-bio-img-3.jpg" alt="Member Bio image">
</div> <!-- cd-member-bio-pict -->
<div class="cd-bio-content">
<h1>Meet Samuel Noel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, amet, voluptatibus et omnis dolore illo saepe voluptatem qui quibusdam sunt corporis ut iure repellendus delectus voluptate explicabo temporibus quos eaque?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, explicabo, doloribus, esse rem officia quas facilis eius alias similique ducimus amet quam odio perspiciatis dolorem ipsam! Ab, dolores, adipisci, explicabo pariatur illum deleniti quam iusto placeat nisi aliquam praesentium mollitia eligendi a! Sequi, voluptatibus sed quos possimus harum rem tempore fugiat? Corporis, officia, assumenda, asperiores blanditiis quidem aliquam fugiat vel excepturi velit provident aut omnis quos aliquid tempora eaque. Nemo, eveniet, sint maxime eum maiores totam est inventore numquam voluptatem hic nam blanditiis placeat illum nesciunt voluptatum eos cum quos magni voluptates ipsam. Perspiciatis alias ducimus libero. Quo provident omnis fugiat ut repellendus optio cum quaerat odio et ipsa. Molestias, atque repellat non maxime amet corporis magni libero quam numquam error beatae at asperiores et a porro nostrum ab necessitatibus esse aliquid iure repellendus obcaecati unde quo eius eum dolores quasi consectetur culpa velit optio! Sequi, dolor, minima, veniam doloribus in ullam cupiditate iste animi ipsum esse eaque similique illo temporibus magni et earum amet sint deleniti est reiciendis. Maxime, quis, animi, ad quasi adipisci suscipit alias iste reprehenderit ea placeat nulla commodi nobis magnam provident veniam earum odit eveniet possimus aut voluptatum dolorum culpa necessitatibus facere totam quisquam. Ipsam.</p>
</div> <!-- cd-bio-content -->
</div> <!-- cd-member-bio -->
<a href="#0" class="cd-member-bio-close">Close</a> <!-- close the author bio section -->
<!-- /Основной блок -->
<script src="js/index.js"></script>
<!-- Core JS file <--></-->
<script src="js/photoswipe.min.js"></script>
<!-- UI JS file -->
<script src="js/photoswipe-ui-default.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/respond.min"></script>
<script src="js/animate-bg.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>
<script src="js/main.js"></script> <!-- Gem jQuery -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
</body>
</html> |