-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
290 lines (281 loc) · 20.9 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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Роман Кривопалов">
<meta name="keywords" content="HTML, CSS, большой театр">
<meta name="description" content="Сайт портфолио веб-разработчика. Проект посвящённый Большому театру">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Большой театр</title>
<link rel="stylesheet" href="./page/index.css">
</head>
<body class="page">
<header class="header">
<div class="sidepanel">
<div class="sidepanel__close">
<img src="images/header-sidepanel-close.svg" alt=" Закрыть боковое меню." class="sidepanel__close-icon">
</div>
<h2 class="sidepanel__title">контактная информация</h2>
<span class="sidepanel__divider"></span>
<nav class="header__nav header__nav_place_sidepanel">
<a href="#" class="header__link">главная</a>
<a href="#" class="header__link">о театре</a>
<a href="#" class="header__link">наши постановки</a>
<a href="#" class="header__link">партнеры театра</a>
<a href="#" class="header__link">контакты</a>
</nav>
<ul class="sidepanel__social">
<li class="sidepanel__social-item">
<a href="#" class="sidepanel__social-link">
<svg
viewBox="0 0 45 45"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
class="sidepanel__social-icon">
<g clip-path="url(#clip0_25_669)">
<path d="M30.9375 0H14.0625C6.29719 0 0 6.29719 0 14.0625V30.9375C0 38.7028 6.29719 45 14.0625 45H30.9375C38.7028 45 45 38.7028 45 30.9375V14.0625C45 6.29719 38.7028 0 30.9375 0ZM40.7812 30.9375C40.7812 36.3656 36.3656 40.7812 30.9375 40.7812H14.0625C8.63438 40.7812 4.21875 36.3656 4.21875 30.9375V14.0625C4.21875 8.63438 8.63438 4.21875 14.0625 4.21875H30.9375C36.3656 4.21875 40.7812 8.63438 40.7812 14.0625V30.9375Z"/>
<path d="M22.5 11.25C16.2872 11.25 11.25 16.2872 11.25 22.5C11.25 28.7128 16.2872 33.75 22.5 33.75C28.7128 33.75 33.75 28.7128 33.75 22.5C33.75 16.2872 28.7128 11.25 22.5 11.25ZM22.5 29.5312C18.6244 29.5312 15.4688 26.3756 15.4688 22.5C15.4688 18.6216 18.6244 15.4688 22.5 15.4688C26.3756 15.4688 29.5312 18.6216 29.5312 22.5C29.5312 26.3756 26.3756 29.5312 22.5 29.5312Z"/>
<path d="M34.5901 11.9058C35.418 11.9058 36.0892 11.2347 36.0892 10.4067C36.0892 9.57884 35.418 8.90768 34.5901 8.90768C33.7622 8.90768 33.0911 9.57884 33.0911 10.4067C33.0911 11.2347 33.7622 11.9058 34.5901 11.9058Z"/>
</g>
<defs>
<clipPath id="clip0_25_669">
<rect width="45" height="45"/>
</clipPath>
</defs>
</svg>
</a>
</li>
<li class="sidepanel__social-item">
<a href="#" class="sidepanel__social-link">
<svg viewBox="0 0 27 45" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="sidepanel__social-icon">
<path d="M25.6747 0.009363L19.4385 0C12.4323 0 7.90463 4.34677 7.90463 11.0746V16.1807H1.63439C1.09257 16.1807 0.653809 16.5917 0.653809 17.0987V24.4969C0.653809 25.0039 1.09307 25.4145 1.63439 25.4145H7.90463V44.0824C7.90463 44.5894 8.34339 45 8.88522 45H17.0661C17.6079 45 18.0467 44.589 18.0467 44.0824V25.4145H25.378C25.9199 25.4145 26.3586 25.0039 26.3586 24.4969L26.3616 17.0987C26.3616 16.8553 26.2581 16.6221 26.0745 16.4499C25.8909 16.2776 25.6407 16.1807 25.3806 16.1807H18.0467V11.8522C18.0467 9.7717 18.5765 8.71555 21.4727 8.71555L25.6737 8.71415C26.215 8.71415 26.6538 8.30311 26.6538 7.79657V0.926937C26.6538 0.420867 26.2155 0.0102993 25.6747 0.009363Z"/>
</svg>
</a>
</li>
<li class="sidepanel__social-item">
<a href="#" class="sidepanel__social-link">
<svg viewBox="0 0 45 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="sidepanel__social-icon">
<path d="M44.7613 21.6746C44.7069 21.5649 44.6561 21.4738 44.6089 21.4009C43.8281 20.0864 42.3361 18.473 40.1338 16.5602L40.0873 16.5164L40.064 16.495L40.0404 16.4729H40.0168C39.0173 15.5823 38.3843 14.9834 38.1192 14.6768C37.6343 14.0927 37.5256 13.5015 37.7907 12.9024C37.9779 12.4498 38.6814 11.494 39.8994 10.0337C40.54 9.25974 41.0474 8.63946 41.4221 8.17214C44.1245 4.81373 45.2962 2.66767 44.9367 1.7331L44.7971 1.5147C44.7033 1.38322 44.4612 1.26294 44.0712 1.15324C43.6802 1.04378 43.1806 1.02567 42.5712 1.09863L35.8237 1.1422C35.7144 1.10599 35.5583 1.10936 35.355 1.15324C35.1518 1.19712 35.0503 1.21914 35.0503 1.21914L34.9328 1.27399L34.8396 1.33988C34.7615 1.38345 34.6756 1.46009 34.5818 1.56963C34.4885 1.67879 34.4104 1.8069 34.348 1.95288C33.6134 3.71961 32.7782 5.36222 31.8408 6.88063C31.2628 7.78605 30.732 8.57073 30.2473 9.23512C29.7632 9.89928 29.3571 10.3886 29.0293 10.7023C28.701 11.0163 28.4048 11.2678 28.1387 11.4578C27.8731 11.6479 27.6703 11.7282 27.5299 11.6988C27.3892 11.6695 27.2567 11.6403 27.1312 11.6112C26.9126 11.4797 26.7369 11.3009 26.6043 11.0746C26.4712 10.8483 26.3816 10.5634 26.3348 10.2203C26.2881 9.87696 26.2606 9.58162 26.2527 9.33331C26.2454 9.0853 26.2488 8.7345 26.2646 8.28191C26.2808 7.82909 26.2881 7.5227 26.2881 7.36207C26.2881 6.80714 26.2997 6.20489 26.3229 5.55514C26.3466 4.9054 26.3657 4.3906 26.3817 4.01134C26.3976 3.63169 26.405 3.23004 26.405 2.80659C26.405 2.38315 26.3774 2.05107 26.3229 1.81004C26.2691 1.56932 26.1865 1.33566 26.0776 1.10913C25.968 0.882837 25.8077 0.707783 25.5973 0.583511C25.3864 0.459393 25.1243 0.360896 24.8124 0.287714C23.9845 0.112583 22.9302 0.0178448 21.6491 0.00311629C18.744 -0.0260339 16.8773 0.149327 16.0495 0.528969C15.7215 0.689372 15.4246 0.908534 15.1593 1.18577C14.878 1.50711 14.8388 1.68247 15.0418 1.71132C15.9791 1.84257 16.6427 2.15654 17.0332 2.65294L17.174 2.91598C17.2835 3.10577 17.3928 3.44176 17.5021 3.9235C17.6114 4.40525 17.6819 4.93816 17.7129 5.52193C17.7908 6.58798 17.7908 7.50053 17.7129 8.25966C17.6347 9.0191 17.5608 9.61031 17.4903 10.0338C17.4198 10.4572 17.3145 10.8003 17.174 11.0631C17.0332 11.3259 16.9396 11.4865 16.8927 11.5448C16.8458 11.6031 16.8067 11.6399 16.7757 11.6543C16.5727 11.727 16.3616 11.764 16.143 11.764C15.9242 11.764 15.6588 11.6617 15.3464 11.4572C15.0342 11.2527 14.7101 10.9718 14.3742 10.614C14.0384 10.2561 13.6596 9.75606 13.2377 9.11369C12.8161 8.47131 12.3787 7.7121 11.9257 6.83606L11.5509 6.20074C11.3167 5.79203 10.9966 5.1969 10.5905 4.41591C10.1841 3.63461 9.82491 2.87885 9.51266 2.1488C9.38784 1.84218 9.20033 1.60875 8.95045 1.44812L8.83318 1.38222C8.75522 1.32392 8.63007 1.26202 8.4584 1.19605C8.28648 1.13015 8.10709 1.0829 7.91949 1.05382L1.49978 1.0974C0.843772 1.0974 0.398662 1.23632 0.16429 1.51378L0.0704921 1.64504C0.0236341 1.71814 0 1.8349 0 1.99561C0 2.15624 0.046858 2.35338 0.140656 2.58682C1.07782 4.64574 2.09696 6.6314 3.19808 8.54411C4.2992 10.4568 5.25605 11.9976 6.06807 13.1649C6.88024 14.3332 7.7081 15.4357 8.55162 16.4721C9.39515 17.5089 9.9535 18.1732 10.2267 18.4651C10.5002 18.7576 10.715 18.9762 10.8712 19.1222L11.4571 19.6477C11.8319 19.9982 12.3824 20.418 13.1087 20.907C13.8352 21.3963 14.6395 21.8781 15.5221 22.353C16.4047 22.8271 17.4316 23.2141 18.6032 23.5133C19.7746 23.8129 20.9148 23.9331 22.0239 23.8751H24.7184C25.2648 23.831 25.6788 23.6703 25.9602 23.3931L26.0534 23.2833C26.1161 23.1962 26.1748 23.0608 26.229 22.8786C26.2838 22.6961 26.311 22.4951 26.311 22.2764C26.295 21.6486 26.3462 21.0829 26.463 20.5792C26.5798 20.0757 26.7129 19.696 26.8618 19.4404C27.0105 19.1849 27.1784 18.9693 27.3653 18.7946C27.5526 18.6195 27.686 18.5134 27.7643 18.4769C27.8421 18.4401 27.9042 18.4152 27.9511 18.4002C28.3259 18.2835 28.7671 18.3965 29.2752 18.74C29.783 19.0831 30.2592 19.5068 30.7046 20.0103C31.1498 20.5143 31.6847 21.0797 32.3093 21.7075C32.9344 22.3354 33.481 22.8022 33.9494 23.1093L34.4178 23.3721C34.7306 23.5475 35.1367 23.7081 35.6367 23.8541C36.1357 24 36.5729 24.0365 36.9484 23.9635L42.9461 23.8761C43.5393 23.8761 44.0009 23.7843 44.3284 23.6021C44.6565 23.4196 44.8514 23.2185 44.9142 22.9998C44.9769 22.7809 44.9803 22.5325 44.9261 22.2548C44.8706 21.9778 44.8158 21.7841 44.7613 21.6746Z"/>
</svg>
</a>
</li>
<li class="sidepanel__social-item">
<a href="#" class="sidepanel__social-link">
<svg viewBox="0 0 45 31" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="sidepanel__social-icon">
<path d="M35.6541 0H9.34592C4.18431 0 0 4.07352 0 9.09846V21.9015C0 26.9265 4.18431 31 9.34592 31H35.6541C40.8157 31 45 26.9265 45 21.9015V9.09846C45 4.07352 40.8157 0 35.6541 0ZM29.3335 16.1229L17.0283 21.8363C16.7004 21.9886 16.3217 21.7559 16.3217 21.4023V9.61827C16.3217 9.25963 16.7104 9.02719 17.039 9.18931L29.3441 15.2599C29.71 15.4403 29.7036 15.9511 29.3335 16.1229Z"/>
</svg>
</a>
</li>
</ul>
</div>
<div class="headline">
<div class="headline__hamburger">
<img src="images/headline-hamburger.svg" alt=" Открыть боковое меню." class="headline__hamburger-icon">
</div>
<nav class="header__nav header__nav_place_headline">
<a href="#" class="header__link">главная</a>
<a href="#" class="header__link">о театре</a>
<a href="#" class="header__link">наши постановки</a>
<a href="#" class="header__link">партнеры театра</a>
<a href="#" class="header__link">контакты</a>
</nav>
<a href="tel:84951234567" class="headline__tel">+7 495 123-45-67</a>
</div>
<div class="header__content">
<h1 class="header__title">большой театр</h1>
<p class="header__descr">
Большо́й теа́тр — петербургский театр, существовавший в 1784—1886 годах, с 1886 года — Петербургская консерватория. Первое постоянное в Санкт-Петербурге, крупнейшее в России и одно из крупнейших театральных зданий в Европе XVIII.
</p>
<div class="header__link-btn">
<a href="#" class="button">афиша</a>
</div>
<div class="slider">
<div class="slider__wrapper">
<ul class="slider__items">
<li class="slider__item">
<a href="#" class="slider__item-link">
<img src="images/slider-la-skala.jpeg" alt=" Афиша Ла Скала 16 января. Шедевры русской и итальянской оперы." class="slider__img">
</a>
<div class="slider__overlay">
<img src="images/slider-la-skala.jpeg" alt="" class="slider__bg">
</div>
</li>
<li class="slider__item">
<a href="#" class="slider__item-link">
<img src="images/slider-shelkunchik.jpg" alt=" Афиша Щелкунчик. Девушка балерина на сцене." class="slider__img">
</a>
<div class="slider__overlay">
<img src="images/slider-shelkunchik.jpg" alt="" class="slider__bg">
</div>
</li>
<li class="slider__item">
<a href="#" class="slider__item-link">
<img src="images/slider-giselle.jpg" alt=" Афиша Жизель. Балет большого театра. Девушка балерина на сцене" class="slider__img">
</a>
<div class="slider__overlay">
<img src="images/slider-giselle.jpg" alt="" class="slider__bg">
</div>
</li>
</ul>
</div>
<div class="slider__btns">
<button id="btn-prev" class="slider__btn">пред</button>
<button id="btn-next" class="slider__btn">след</button>
</div>
</div>
</div>
</header>
<main class="content">
<section class="about">
<h2 class="section-title"><span class="section-title__span-accent">о</span> театре</h2>
<div class="about__wrapper">
<div class="about__text">
<h3 class="about__title">самый лучший театр спб</h3>
<p class="about__descr">
Как свидетельствуют архивные документы, первое каменное здание Большого театра начали возводить в 1775 году по проекту Антонио Ринальди. В дальнейшем, после того как Ринальди упал с лесов и не мог лично наблюдать за ходом работ, Екатерина II поручила немецкому театральному декоратору и архитектору Людвигу Филиппу Тишбейну создать новый проект театра, который и был воплощён архитекторами Ф. В. фон Бауром и М. А. Деденёвым. Открытие его состоялось в 1783 году, хотя, основываясь на других свидетельствах, годом открытия можно считать 1784 год.
</p>
</div>
<div class="about__numbers">
<h3 class="about__title">немного о цифрах</h3>
<ul class="about__items">
<li>
<img src="images/icons/icon-about-chair.svg" alt=" Иконка кресла в театре." class="about__item-img">
<p class="about__item-text"><span class="about__span-accent">1600</span> посадочных мест</p>
</li>
<li>
<img src="images/icons/icon-about-theater.svg" alt=" Иконка изображающая большой театр" class="about__item-img">
<p class="about__item-text"><span class="about__span-accent">350</span> лет истории</p>
</li>
</ul>
</div>
<img src="images/aboute-theatre.jpg" alt=" Фонтан, вечер, на заднем фоне Большой театр." class="about__img">
</div>
</section>
<section class="projects">
<div class="projects__sticky-wrapper">
<h2 class="section-title"><span class="section-title__span-accent">наши</span> постановки</h2>
<div class="projects__hidden-wrapper">
<ul class="projects__inner">
<li class="project">
<a href="#" class="project__link"></a>
<h3 class="project__title">оскар 2020</h3>
<h4 class="project__date">сентябрь 2020</h4>
<img src="images/projects/projects-01.jpeg" alt="" class="project__img">
</li>
<li class="project">
<a href="#" class="project__link"></a>
<h3 class="project__title">ла скала</h3>
<h4 class="project__date">август 2020</h4>
<img src="images/projects/projects-02.jpeg" alt="" class="project__img">
</li>
<li class="project">
<a href="#" class="project__link"></a>
<h3 class="project__title">золотой грамофон</h3>
<h4 class="project__date">июль 2020</h4>
<img src="images/projects/projects-03.jpeg" alt="" class="project__img">
</li>
<li class="project">
<a href="#" class="project__link"></a>
<h3 class="project__title">щелкунчик</h3>
<h4 class="project__date">май 2020</h4>
<img src="images/projects/projects-04.jpeg" alt="" class="project__img">
</li>
<li class="project">
<a href="#" class="project__link"></a>
<h3 class="project__title">жизель</h3>
<h4 class="project__date">декабрь 2019</h4>
<img src="images/projects/projects-05.jpeg" alt="" class="project__img">
</li>
</ul>
</div>
</div>
</section>
<section class="rating">
<div class="rating__wrapper">
<ul class="rating__years">
<li>2018</li>
<li>2019</li>
<li>2020</li>
</ul>
<div class="rating__column">
<div class="rating__stars"></div>
<p class="rating__descr">Лучший театр по мнению театральных критиков Парижа</p>
</div>
</div>
</section>
<section class="partners">
<h2 class="section-title"><span class="section-title__span-accent">партнеры</span> театра</h2>
<div class="partners__wrapper">
<ul class="partners__inner">
<li class="partners__item">
<img src="images/partners-01.png" alt=" Партнёра театра, логотип Газпрома." class="partners__img">
</li>
<li class="partners__item">
<img src="images/partners-01.png" alt=" Партнёра театра, логотип Газпрома." class="partners__img">
</li>
<li class="partners__item">
<img src="images/partners-01.png" alt=" Партнёра театра, логотип Газпрома." class="partners__img">
</li>
<li class="partners__item">
<img src="images/partners-01.png" alt=" Партнёра театра, логотип Газпрома." class="partners__img">
</li>
<li class="partners__item">
<img src="images/partners-01.png" alt=" Партнёра театра, логотип Газпрома." class="partners__img">
</li>
<li class="partners__item">
<img src="images/partners-01.png" alt=" Партнёра театра, логотип Газпрома." class="partners__img">
</li>
<li class="partners__item">
<img src="images/partners-01.png" alt=" Партнёра театра, логотип Газпрома." class="partners__img">
</li>
<li class="partners__item">
<img src="images/partners-01.png" alt=" Партнёра театра, логотип Газпрома." class="partners__img">
</li>
</ul>
</div>
</section>
<section class="contacts">
<h2 class="section-title"><span class="section-title__span-accent">стать</span> меценатом</h2>
<div class="contacts__wrapper">
<div class="contacts__form">
<input type="text" placeholder="Имя" class="contacts__input">
<input type="text" placeholder="Компания" class="contacts__input">
<input type="text" placeholder="Телефон" class="contacts__input">
<input type="text" placeholder="E-mail" class="contacts__input">
<textarea name="input-message" id="input-message" cols="30" rows="10" placeholder="Сообщение" class="contacts__input contacts__input_type_textarea"></textarea>
<button class="button button_place_contacts">отправить</button>
<p class="contacts__personal-data">
* Ваши данные не будут переданы третьим лицам, 100% вероятность. Конфиденциальность мы гарантируем, и защищаем персональные данные согласно законку ФЗ-52.
</p>
</div>
<div class="contacts__info">
<ul class="contacts__list">
<li class="contacts__item">
<a href="tel:+78121234555" class="contacts__link">+7 (812) 123-45-55</a>
</li>
<li class="contacts__item">
<a href="tel:+78121234566" class="contacts__link">+7 (812) 123-45-66</a>
</li>
</ul>
<ul class="contacts__list">
<li class="contacts__item">
<a href="mailto:info@theater.ru" class="contacts__link">info@theater.ru</a>
</li>
<li class="contacts__item">г. санкт-петербург, невский 140</li>
</ul>
</div>
</div>
</section>
<footer class="footer">
<div class="footer__divider"></div>
<div class="footer__wrapper">
<p class="footer__item">© Все права защищены. Большой театр</p>
<p class="footer__item">2022 <a target="_blank" href="https://github.com/romankrivopalov" class="footer__link">Роман Кривопалов</a></p>
</div>
</footer>
</main>
<script src="js/script.js"></script>
</body>
</html>