-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
292 lines (251 loc) · 13.2 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
<!doctype html>
<html lang="ru">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles/styles.css" />
<meta charset="UTF-8" />
</head>
<body>
<div class="body">
<header class="page-header">
<div class="page-header_container">
<a href="index.html" class="page-header_logo">
<svg class="page-header_logo-icon" width="202" height="147">
<use xlink:href="assets/icons/symbols.svg#logo"></use>
</svg>
</a>
<nav class="page-header_nav">
<a href="events.html" class="page-header_nav-link">Мероприятия</a>
<a href="#blog" class="page-header_nav-link">Блог</a>
<a href="#" class="page-header_nav-link">О нас</a>
<a href="#" class="page-header_nav-link">Контакты</a>
</nav>
<div class="page-header_right-block">
<a href="#" class="btn user-btn"> Войти </a>
</div>
</div>
</header>
</div>
<div class="page-main">
<h1 class="page-main_title">АРТ — ПРОСТРАНСТВО</h1>
<div class="page-main_lenni">
<span>LENNI</span>
</div>
<h1 class="page-main_subtitle">ДЛЯ ЛЮДЕЙ, ГОРЯЩИХ СЕРДЦЕМ И ДЕЛОМ
<br />МЕСТО ДЛЯ НАСТОЯЩЕГО
</h1>
</div>
<main class="main">
<section class="listing events_listing">
<h2 class="section-title">Мероприятия</h2>
<div class="events_list">
<!-- prettier-ignore -->
<article class="event-card listing_event-card">
<a href="#" class="event-card_link">
<picture class="event-card_picture">
<img src="assets/images/events/Nirvana.svg" alt="nirvana" class="event-card_img" />
</picture>
<h4 class="event-card_title">Собираемся и слушаем альбом Nirvana</h4>
<p class="event-card_description">Это третий альбом группы, выпущенный после смерти Курта Кобейна и первый, содержащий студийный материал.</p>
<time datetime="2022-12-07T18:00" class="event-card_time">07.12.2022 | начало 18.00</time>
</a>
</article>
<article class="event-card listing_event-card">
<a href="#" class="event-card_link">
<picture class="event-card_picture">
<img src="assets/images/events/HowStuffWorks.svg" alt="stuff" class="event-card_img" />
</picture>
<h4 class="event-card_title">Есть тема, нужно обсудить с HowStuffWorks</h4>
<p class="event-card_description">Один из самых популярных подкастов в мире. В нём авторы объясняют, как устроены разные вещи.</p>
<time datetime="2022-12-14T18:30" class="event-card_time">14.12.2022 | начало 18.30</time>
</a>
</article>
<article class="event-card listing_event-card">
<a href="#" class="event-card_link">
<picture class="event-card_picture">
<img src="assets/images/events/Sade.svg" alt="Sade" class="event-card_img" />
</picture>
<h4 class="event-card_title">Вечер | The Best of Sade</h4>
<p class="event-card_description">Музыка группы имеет эклектичный характер, сочетая в себе элементы музыки соул, джаза, ритм-блюза и фанка.</p>
<time datetime="2021-12-16T18:00" class="event-card_time">16.12.2021 | начало 18.00</time>
</a>
</article>
</div>
<div class="listing_arrow">
<a href="#" class="event-card_link link">
<span>Показать еще</span>
<svg class="listing_arrow_icon" width="92" height="62">
<use xlink:href="assets/icons/symbols.svg#arrow"></use>
</svg>
</a>
</div>
</section>
<div class="home">
<section class="listing home-listing">
<h2 id="blog" class="listing_title section-title">Блог</h2>
<div class="listing_article-list">
<!-- prettier-ignore -->
<article class="article-card article-card">
<a href="#" class="article-card_link">
<picture class="article-card_picture">
<img src="assets/images/blog/theatre.svg" alt="Theatre Photosession" class="article-card_img" />
</picture>
</a>
<div class="article-card_info">
<time datetime="2021-11-26T00:00" class="article-card_time">26.11.2022</time>
<a href="#" class="article-card_title-link">
<h4 class="article-card_title">Фотосессия в стенах Театра драмы</h4>
<div class="article-card_arrow arrow">
<svg class="arrow_icon" width="92" height="62">
<use xlink:href="assets/icons/symbols.svg#arrow">
<a href=""></a>
</use>
</svg>
</div>
</a>
<p class="article-card_description">Организовывая фотосессию для локального бренда одежды мы смогли воплотить все пожелания заказчика и у нас получилась отличная работа. Смотрите как это было...</p>
</div>
</article>
<article class="article-card article-card">
<a href="#" class="article-card_link">
<picture class="article-card_picture">
<img src="assets/images/blog/VR.svg" alt="VR exhibition" class="article-card_img" />
</picture>
</a>
<div class="article-card_info">
<time datetime="2021-12-05T00:00" class="article-card_time">05.11.2022</time>
<a href="#" class="article-card_title-link">
<h4 class="article-card_title">ФВыставка VR в Томске</h4>
<div class="article-card_arrow arrow">
<svg class="arrow_icon" width="92" height="62">
<use xlink:href="assets/icons/symbols.svg#arrow">
<a href=""></a>
</use>
</svg>
</div>
</a>
<p class="article-card_description">Клуб виртуальной реальности - это другие миры. яркие эмоции. новый опыт. ... Мы предоставляем нашим клиентам лучший игровой VR-опыт в Томске...</p>
</div>
</article>
<article class="article-card article-card">
<a href="#" class="article-card_link">
<picture class="article-card_picture">
<img src="assets/images/blog/radio.svg" alt="Rocking radio" class="article-card_img" />
</picture>
</a>
<div class="article-card_info">
<time datetime="2022-11-01T00:00" class="article-card_time">01.11.2022</time>
<a href="#" class="article-card_title-link">
<h4 class="article-card_title">Rocking radio в заброшенном ангаре</h4>
<div class="article-card_arrow arrow">
<svg class="arrow_icon" width="92" height="62">
<use xlink:href="assets/icons/symbols.svg#arrow">
<a href=""></a>
</use>
</svg>
</div>
</a>
<p class="article-card_description">15 электрогенераторов, километры проводов и пару тонн света. Все это для того, чтобы организовать лучшую вечеринку года для ребят из Новосибирска.</p>
</div>
</article>
</div>
<a href="#" class="listing_link link">Смотреть все</a>
</section>
</div>
</main>
<div class="pp" id="eventPP">
<div class="pp_wrapper">
<div class="pp_sticky">
<button class="pp_x-btn x-btn">
<svg class="x-btn_icon" width="18" height="18">
<use xlink:href="assets/icons/symbols.svg#x"></use>
</svg>
</button>
</div>
<div class="pp_container">
<h2 class="pp_title">Заполните форму
<br />и мы подберем площадку
</h2>
<form class="pp_form form">
<div class="field_grid">
<div class="radio">
<span class="field_title">Формат мероприятия:</span>
<label class="radio_item">
<input class="radio_input" type="radio" name="format" value="seminar" checked />
<span class="radio_mark"></span>
<span class="radio_label">Мастер-класс/семинар</span>
</label>
<label class="radio_item">
<input class="radio_input" type="radio" name="format" value="concert" />
<span class="radio_mark"></span>
<span class="radio_label">Концерт/выступление</span>
</label>
<label class="radio_item">
<input class="radio_input" type="radio" name="format" value="concert" />
<span class="radio_mark"></span>
<span class="radio_label">Выставка/показ</span>
</label>
<label class="radio_item">
<input class="radio_input" type="radio" name="format" value="concert" />
<span class="radio_mark"></span>
<span class="radio_label">Другое</span>
</label>
</div>
<div class="field_group">
<label class="field">
<span class="field_title">Планируемое количество посетителей:</span>
<select class="field_select" name="amount">
<option value="20">До 20 человек</option>
<option value="100">от 20 до 100 человек</option>
<option value="500">от 100 до 500 человек</option>
<option value="1000">более 500 человек</option>
</select>
</label>
<label class="field">
<span class="field_title">Дата проведения:</span>
<input class="field_input" type="date" />
</label>
</div>
<label class="field">
<span class="field_title">Контакные данные:</span>
<span class="field_label">Имя*</span>
<input class="field_input" type="text" placeholder="Имя" name="name" required />
</label>
<label class="field">
<span class="field_label">Фамилия*</span>
<input class="field_input" type="text" placeholder="Фамилия" name="name" required />
</label>
<label class="field">
<span class="field_label">Телефон*</span>
<input class="field_input" type="text" placeholder="Телефон" name="name" required />
</label>
<label class="field">
<span class="field_label">Email*</span>
<input class="field_input" type="text" placeholder="Email" name="name" required />
</label>
</div>
<label class="field">
<span class="field_title">Есть пожелания? Напишите нам:</span>
<textarea class="field_textarea" placeholder="Напишите что-нибудь" name="Пожелания" required></textarea>
</label>
<label class="check">
<input type="checkbox" name="agree" class="check_input" required checked />
<span class="check_mark"></span>
<span class="check_label check_label-s">
Я соглашаюсь с пользовательским соглашением и с политикой использования персональных данных
</span>
</label>
<div class="pp_btn">
<button class="pp_btn-submit btn" type="submit">Отправить</button>
<button class="pp_btn-close btn" type="button">Закрыть</button>
</div>
</form>
</div>
</div>
</div>
<br />
<footer class="page-footer"></footer>
</body>
</html>