-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
350 lines (335 loc) · 19.6 KB
/
index.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
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
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./pages/index.css" />
<title>Лендинг для фестиваля “Любимовка”</title>
</head>
<body class="page">
<header class="header">
<img src="./images/Group.svg" alt="logo" class="header__logo" />
<div class="header__container">
<nav class="header__nav">
<ul class="header__items header__items-navigation">
<li class="header__item">
<a href="#" class="header__link">Афиша</a>
</li>
<li class="header__item">
<a href="#" class="header__link">Библиотека</a>
</li>
<li class="header__item">
<a href="#" class="header__link">Проекты</a>
</li>
<li class="header__item">
<a href="#" class="header__link">История</a>
</li>
<li class="header__item">
<a href="#" class="header__link">Блог</a>
</li>
<li class="header__item">
<a href="#" class="header__link">Новости</a>
</li>
<li class="header__item">
<a href="#" class="header__link">О фестивале</a>
</li>
<li class="header__item">
<a href="#" class="header__link">Контакты</a>
</li>
</ul>
<ul class="header__items header__items-social">
<li class="header__social-item">
<a href="#" class="header__link">fb</a>
</li>
<li class="header__social-item">
<a href="#" class="header__link">inst</a>
</li>
<li class="header__social-item">
<a href="#" class="header__link">ytube</a>
</li>
<li class="header__social-item">
<a href="#" class="header__link">tlgrm</a>
</li>
<li class="header__social-item">
<a href="#" class="header__link">vk</a>
</li>
</ul>
<a href="#" class="header__link header__support-link"> <img src="./images/plus.svg" alt="support" class="header__support-image" /> ПОДДЕРЖАТЬ</a>
</nav>
</div>
<button class="header__mobile">
<span class="header__menu"></span>
</button>
</header>
<main class="main">
<button type="button" class="link-button projects-button">
Проекты
<img src="./images/arrow-left.svg" alt="вернуться к проектам" class="button-arrow_left" />
</button>
<section class="play">
<div class="about-play">
<h1 class="about-play__title">С_училища</h1>
<p class="about-play__subtitle">Пьеса о демоническом обаянии студентки ПТУ и ее роковой роли в жизни преподавателя философии.</p>
<p class="about-play__time">12 мая 20:00</p>
<button class="order-btn">
билеты
<a href="#">
<img src="./images/arrow-right.svg" alt="Переход по ссылке" class="order-btn__image" />
</a>
</button>
</div>
<img src="./images/about-play-img.jpg" alt="Обложка пьесы" class="play__image" />
</section>
<article class="play__description">
Семён Серзин сделал читку этой пьесы в рамках основной программы Любимовки-2017, Варочный Цех предоставил грант на постановку, а Московский драматический театр имени А.С.
Пушкина принял спектакль в репертуар.
</article>
<article class="secondPlay" aria-label="Пьеса Длань Господня">
<section class="secondPlay__info" aria-label="Информация о пьесе Длань Господня">
<p class="secondPlay__time">1 ч. 15 мин. | 18+</p>
<ul class="secondPlay__people">
<li class="secondPlay__person">
<h3 class="secondPlay__person_type_title">Драматург</h3>
<p class="secondPlay__person_type_name">Роберт Аскинс</p>
</li>
<li class="secondPlay__person">
<h3 class="secondPlay__person_type_title">Перевод</h3>
<p class="secondPlay__person_type_name">Оксана Алёшина</p>
</li>
<li class="secondPlay__person">
<h3 class="secondPlay__person_type_title">Адаптация текста</h3>
<p class="secondPlay__person_type_name">Валерий Печейкин</p>
</li>
<li class="secondPlay__person">
<h3 class="secondPlay__person_type_title">Режиссёр</h3>
<p class="secondPlay__person_type_name">Юрий Муравицкий</p>
</li>
<li class="secondPlay__person">
<h3 class="secondPlay__person_type_title">Актёры</h3>
<p class="secondPlay__person_type_name">Фёдор Кокорев, Коля Ноекёльн, Ксения Чекина, Александр Пронькин, Владимир Морозов, Светлана Маршанкина</p>
</li>
</ul>
</section>
<section class="secondPlay__description">
<div class="secondPlay__video-wrapper">
<iframe class="secondPlay__video" src="https://www.youtube.com/embed/juq_3oRQ6yc?start=50?s=6000" frameborder="0" allowfullscreen></iframe>
</div>
<ul class="secondPlay__description-items">
<li class="secondPlay__description-item">
<p class="secondPlay__description-title">
Пьеса «Длань Господня» (Hand to God) — лауреат американской театральной премии OBIE (Off-Broadway Theater Awards), номинант ежегодно присуждаемой премии TONY
(Theatre Of New York), театрального аналога «Оскара», и номинант на Британскую премию Лоуренса Оливье в качестве «Лучшей Новой Комедии». Она была поставлена в
бродвейских театрах и в лондонском Вест-Энде.
</p>
</li>
<li class="secondPlay__description-item">
<p class="secondPlay__description-title">
Этот спектакль – результат коллаборации фестиваля драматургии «Любимовка», который запустил проект по выпуску собственных спектаклей «Любимовка.Продакшн», Театра
18+ и Театра.doc. Исполнители – выпускники актерской лаборатории Юрия Муравицкого Московской Школы Нового Кино.
</p>
</li>
<li class="secondPlay__description-item">
<p class="secondPlay__description-title">
Режиссёр спектакля Юрий Муравицкий – лауреат Национальной театральной премии «Золотая маска», лауреат премий Herald Angel Award и Total Theatre Award в номинации
Innovation, Experimentation & Playing with Form на Edinburgh Festival Fringe: «В этой пьесе меня задевает её смелость и свобода. И то, что она написана смешно. Мне
сейчас интересны комедии. В январе я выпустил «Lё Тартюф. Комедия» в театре на Таганке — тоже комедию и тоже в известном смысле антиклерикальную. У меня есть
стойкое ощущение что всему, что сейчас происходит в нашей стране и в мире, мы можем противопоставить только смех. Иногда горький смех, иногда злой. Сейчас в воздухе
столько ненависти, что нам всем полезно больше смеяться. И над собой в том числе. «Длань Господня» — это чёрная комедия. Помимо прочего, она показывает к чему
приводит навязывание и насильственное насаждение религии».
</p>
</li>
<li class="secondPlay__description-item">
<p class="secondPlay__description-title">
Пьеса была успешно представлена в России в формате читки в 2016 году рамках лаборатории LARK+Любимовка на сцене Центра им. Мейерхольда.
</p>
</li>
</ul>
</section>
</article>
<section class="readings">
<div class="readings__container">
<div class="readings__play">С_училища</div>
<div class="readings__watch">
<p class="readings__watch-text">смотреть читку</p>
<a class="readings__watch-link" href="#"> </a>
</div>
<div class="readings__download">
<p class="readings__download-text">скачать пьесу</p>
<a class="readings__download-link" href="#"> </a>
</div>
<div class="readings__name-container">
<span class="readings__name">Андрей Иванов</span>
</div>
<p class="readings__city-year">Санкт-Петербург 2020</p>
</div>
</section>
<section class="photos">
<h4 class="photos__description">Заголовок блока с фотографиями</h4>
<div class="photos__grid">
<img src="./images/Rectangle 193 (1).jpg" alt="Solnechnaya-liniya-Kraeva" class="photos__item" />
<img src="./images/Rectangle 194 (1).jpg" alt="image" class="photos__item" />
<img src="./images/Rectangle 158 (1).jpg" alt="pexels-cottonbro" class="photos__item" />
<img src="./images/Rectangle 160 (1).jpg" alt="rehearsal" class="photos__item" />
<img src="./images/Rectangle 196 (1).jpg" alt="theater performance" class="photos__item" />
<img src="./images/Rectangle 197 (1).jpg" alt="script reading" class="photos__item" />
<img src="./images/Rectangle 195 (1).jpg" alt="orchestra" class="photos__item" />
<img src="./images/Rectangle 198 (1).jpg" alt="lady" class="photos__item" />
</div>
</section>
<section class="reviews">
<div class="swiper slider">
<h2 class="slider__title">Отзывы зрителей</h2>
<div class="slider__points"></div>
<div class="slider__buttons">
<div class="slider__button slider__button_type_left">←</div>
<div class="slider__button slider__button_type_right">→</div>
</div>
<div class="slider__background"></div>
<!-- Additional required wrapper -->
<div class="swiper-wrapper slider__items">
<!-- Slides -->
<div class="swiper-slide">
<div class="review">
<p class="review__text">
Что-то похожее на эффект от мультфильмов типа «Сауз Парк» или про коня Боджэка возникает — я думаю, и пьеса написана с этой интонацией американских взрослых
мультсериалов. И как хорошо все это с куклой-носочком. Так все чисто сделано!
</p>
<span class="review__author">Наталья Зайцева</span>
</div>
</div>
<div class="swiper-slide">
<div class="review">
<p class="review__text">Для самой этой истории формат читки работает отличным ироническим отстранением</p>
<span class="review__author">Дина Годер</span>
</div>
</div>
<div class="swiper-slide">
<div class="review">
<p class="review__text">
Мне данный формат дал возможность самой выбирать, как двигается персонаж, что на нем надето, какую машину он водит, и что за плакат висит в подвале церкви. Это
было приятно, ведь я как будто сама поучаствовала в спектакле
</p>
<span class="review__author">Дарья Морозова</span>
</div>
</div>
<div class="swiper-slide">
<div class="review">
<p class="review__text">
Что-то похожее на эффект от мультфильмов типа «Сауз Парк» или про коня Боджэка возникает — я думаю, и пьеса написана с этой интонацией американских взрослых
мультсериалов. И как хорошо все это с куклой-носочком. Так все чисто сделано!
</p>
<span class="review__author">Наталья Зайцева</span>
</div>
</div>
</div>
</div>
</section>
<section class="largePhoto">
<img class="largePhoto__img" src="./images/Rectangle 203 (1).jpg" alt="Фотография двух актёров" />
</section>
<section class="share">
<div class="share__wrapper">
<p class="share__title">Рассказать</p>
<ul class="share__links">
<li class="share__link-container">
<a class="share__link" href="#" target="_blank">
<svg class="share__link-arrow">
<path
d="M21 12.4766L20.2752 13.2014L14.4766 19L13.7737 18.2971L19.0944 12.9765L-3.63036e-07 12.9765L-3.10999e-07 11.9765L19.0502 11.9765L13.7986 6.72483L14.5234 6L20.2971 11.7737L21 12.4766Z"
fill="#242424"
/>
</svg>
<span class="share__link-text">fb</span>
</a>
</li>
<li class="share__link-container">
<a class="share__link" href="#" target="_blank">
<svg class="share__link-arrow">
<path
d="M21 12.4766L20.2752 13.2014L14.4766 19L13.7737 18.2971L19.0944 12.9765L-3.63036e-07 12.9765L-3.10999e-07 11.9765L19.0502 11.9765L13.7986 6.72483L14.5234 6L20.2971 11.7737L21 12.4766Z"
fill="#242424"
/>
</svg>
<span class="share__link-text">vk</span>
</a>
</li>
<li class="share__link-container">
<a class="share__link" href="#" target="_blank">
<svg class="share__link-arrow">
<path
d="M21 12.4766L20.2752 13.2014L14.4766 19L13.7737 18.2971L19.0944 12.9765L-3.63036e-07 12.9765L-3.10999e-07 11.9765L19.0502 11.9765L13.7986 6.72483L14.5234 6L20.2971 11.7737L21 12.4766Z"
fill="#242424"
/>
</svg>
<span class="share__link-text">twtr</span>
</a>
</li>
</ul>
<p class="share__title">о спектакле в соцсетях</p>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__block1">
<a href="#" class="footer__logo-lubimovka"></a>
<div class="footer__div-gen-path">
<h2 class="footer__gen-path">Генеральные партнёры</h2>
<!-- переделай в спаны -->
<ul class="footer__list-gen-path">
<li class="footer__el-gen-path"></li>
<li class="footer__el-gen-path"></li>
<li class="footer__el-gen-path"></li>
<li class="footer__el-gen-path"></li>
</ul>
</div>
</div>
<div class="footer__block2">
<div class="footer__block2-1">
<h2 class="footer__title-block2-1">Площадка «8/3»</h2>
<p class="footer__subtitle-block2-1">Москва, ул. Казакова, 8, стр. 3 Метро «Курская»</p>
</div>
<div class="footer__pre-block2-2">
<div class="footer__block2-2">
<ul class="footer__list-block2-2">
<li><a href="#" class="footer__el-block2-2">Любимовка</a></li>
<li><a href="#" class="footer__el-block2-2">Афиша</a></li>
<li><a href="#" class="footer__el-block2-2">Библиотека</a></li>
<li><a href="#" class="footer__el-block2-2">Блог</a></li>
<li><a href="#" class="footer__el-block2-2">Новости</a></li>
</ul>
</div>
<div class="footer__block2-3">
<ul class="footer__list-block2-3">
<li><a href="#" class="footer__el-block2-3">О фестивале</a></li>
<li><a href="#" class="footer__el-block2-3">Организаторы</a></li>
<li><a href="#" class="footer__el-block2-3">История</a></li>
<li><a href="#" class="footer__el-block2-3">Контакты</a></li>
<li><a href="#" class="footer__el-block2-3">Для прессы</a></li>
</ul>
</div>
<div class="footer__block2-4">
<ul class="footer__list-block2-4">
<li><a href="#" class="footer__el-block2-4">Все проекты</a></li>
<li><a href="#" class="footer__el-block2-4">Любимовка.Ещё</a></li>
<li><a href="#" class="footer__el-block2-4">Спектакли</a></li>
<li><a href="#" class="footer__el-block2-4">Сборник Любимовка.Пьесы</a></li>
<li><a href="#" class="footer__el-block2-4">Lark+Любимовка</a></li>
<li><a href="#" class="footer__el-block2-4">Практика постдраматурга</a></li>
<li><a href="#" class="footer__el-block2-4">Эхо Любимовки</a></li>
</ul>
</div>
</div>
</div>
<div class="footer__block4">
<ul class="footer__list-gen-path">
<li class="footer__el-gen-path"></li>
<li class="footer__el-gen-path"></li>
<li class="footer__el-gen-path"></li>
<li class="footer__el-gen-path"></li>
</ul>
</div>
</footer>
<script defer src="./scripts/index.js" type="module"></script>
<script src="./scripts/readings.js"></script>
</body>
</html>