-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
408 lines (388 loc) · 19.4 KB
/
index.html
File metadata and controls
408 lines (388 loc) · 19.4 KB
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
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
<!DOCTYPE html>
<html lang="ru">
<head>
<title>aperture</title>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="css/style.css?_v=20220817235204">
<link rel="shortcut icon" href="img/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<header data-scroll="200" data-scroll-show="300" class="header">
<div class="header__container">
<div class="header__menu menu">
<li class="menu__item_logo">
<a class="menu__link logo" href="index.html">
<img src="img/Logo.svg" alt="">
</a>
</li>
<nav class="menu__body">
<ul class="menu__list">
<li class="menu__item">
<a href="#" data-goto=".works_block" data-goto-header data-goto-top="0" class="menu__link">
Works
</a>
</li>
<li class="menu__item">
<a href="#" data-goto=".tools_block" data-goto-header data-goto-top="0" class="menu__link">
Tools
</a>
</li>
<li class="menu__item">
<a href="#" data-goto=".clients_block" data-goto-header data-goto-top="0" class="menu__link">
Clients
</a>
</li>
<li class="menu__item">
<a href="#" data-goto=".contactus_block" data-goto-header data-goto-top="0" class="menu__link">
Contact
</a>
</li>
</ul>
</nav>
<li class="menu__item_button">
<a class="btn" href="#" data-popup="#popup1">Get template</a>
</li>
<button type="button" class="menu__icon icon-menu"><span></span></button>
</div>
</div>
</header>
<div class="first_block">
<div class="first_block_img">
<img src="img/topimg.png" alt="">
</div>
<div class="first_block_description animdown" data-watch data-watch-margin="-100px">
<div class="first_desc_title">
<span class="upper14"> Photographer & Filmmaker </span>
Aperture Studios
</div>
<div class="first_desc_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum
tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae
erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique
posuere.
</div>
</div>
<div class="first_block_icons animright" data-watch data-watch data-watch-margin="-100px">
<div class="icons">
<div class="first_icon icon">1/2000s</div>
<div class="second_icon icon">f/11</div>
<div class="third_icon icon">100</div>
<div class="fourth_icon icon">Iceland</div>
</div>
</div>
</div>
<main class="main">
<div class="main__container">
<div class="works_block">
<div class="main_desc animright" data-watch data-watch data-watch-margin="-100px">
<div class="main_title">What we do.</div>
<div class="main_text">The areas that we're specialized in.</div>
</div>
<div class="works_grid animleft" data-watch data-watch-margin="-100px">
<div class="work">
<div class="work_img">
<img src="img/work1.png" alt="">
</div>
<div class="work_desc animdown" data-watch data-watch data-watch-margin="-100px">
<span class="upper14"> Product Photography </span>
<div class="work_desc_textvisible">
Cras commodo consequat orci, in convallis risus egestas non. Nulla efficitur auctor
hendrerit.
Etiam ut orci varius, faucibus libero ac, cursus quam.
</div>
<div class="work_desc_texthidden">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, doloremque. Excepturi, laborum
inventore. Ex iusto ipsa dolores quasi quos labore molestias tempora doloremque rerum animi
iure
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore vel a fugiat dolorem
impedit? Eius at ea omnis sapiente aperiam exercitationem a distinctio nulla veniam, odit,
doloribus esse inventore ab!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, quas, beatae neque recusandae
quasi doloremque provident rerum odio, sunt in harum unde fuga distinctio. Architecto illum
quibusdam pariatur quasi iure.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo, nulla beatae, unde
reiciendis architecto eaque maxime rerum ipsa ipsam quas deserunt necessitatibus eveniet iure
commodi repellendus, ipsum incidunt! Saepe, asperiores.
</div>
<a class="work_btn btn btn_dot" href="#"> Read more</a>
</div>
</div>
<div class="work">
<div class="work_img">
<img src="img/work2.png" alt="">
</div>
<div class="work_desc animdown" data-watch data-watch data-watch-margin="-100px">
<span class="upper14">Architecture Photography </span>
<div class="work_desc_textvisible">
Aenean porta neque eget consequat fringilla. Vestibulum ultrices, orci nec egestas pharetra,
ligula est semper enim, nec auctor sapien leo nec purus. Fusce tincidunt aliquet sapien, sit
amet rhoncus leo imperdiet nec.
lorem300
</div>
<div class="work_desc_texthidden">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, doloremque. Excepturi, laborum
inventore. Ex iusto ipsa dolores quasi quos labore molestias tempora doloremque rerum animi
iure
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore vel a fugiat dolorem
impedit? Eius at ea omnis sapiente aperiam exercitationem a distinctio nulla veniam, odit,
doloribus esse inventore ab!
</div>
<a class="work_btn btn btn_dot" href="#"> Read more</a>
</div>
</div>
<div class="work">
<div class="work_img">
<img src="img/work4.png" alt="">
</div>
<div class="work_desc animdown" data-watch data-watch data-watch-margin="-100px">
<span class="upper14">Architecture Photography </span>
<div class="work_desc_textvisible">
Aenean porta neque eget consequat fringilla. Vestibulum ultrices, orci nec egestas pharetra,
ligula est semper enim, nec auctor sapien leo nec purus. Fusce tincidunt aliquet sapien, sit
amet rhoncus leo imperdiet nec.
lorem300
</div>
<div class="work_desc_texthidden">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, doloremque. Excepturi, laborum
inventore. Ex iusto ipsa dolores quasi quos labore molestias tempora doloremque rerum animi
iure
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore vel a fugiat dolorem
impedit? Eius at ea omnis sapiente aperiam exercitationem a distinctio nulla veniam, odit,
doloribus esse inventore ab!
</div>
<a class="work_btn btn btn_dot" href="#"> Read more</a>
</div>
</div>
<div class="work">
<div class="work_img">
<img src="img/work3.png" alt="">
</div>
<div class="work_desc animdown" data-watch data-watch data-watch-margin="-100px">
<span class="upper14">Architecture Photography </span>
<div class="work_desc_textvisible">
Aenean porta neque eget consequat fringilla. Vestibulum ultrices, orci nec egestas pharetra,
ligula est semper enim, nec auctor sapien leo nec purus. Fusce tincidunt aliquet sapien, sit
amet rhoncus leo imperdiet nec.
lorem300
</div>
<div class="work_desc_texthidden">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, doloremque. Excepturi, laborum
inventore. Ex iusto ipsa dolores quasi quos labore molestias tempora doloremque rerum animi
iure
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore vel a fugiat dolorem
impedit? Eius at ea omnis sapiente aperiam exercitationem a distinctio nulla veniam, odit,
doloribus esse inventore ab!
</div>
<a class="work_btn btn btn_dot" href="#"> Read more</a>
</div>
</div>
</div>
</div>
</div>
<div class="fullscreen_block showimg">
<div class="fullscreen_img ">
<img src="img/fullscreen1.png" alt="">
</div>
<div class="fullscreen_decription animright" data-watch data-watch data-watch-margin="-100px">
<span class="upper14"> Sunset at Mount Fuji </span>
Duis tristique sed lorem a vestibulum. Cras commodo consequat orci, in convallis risus egestas non.
</div>
<div class="fullscreen_icons animright" data-watch data-watch data-watch-margin="-100px">
<div class="icons">
<div class="first_icon icon">1"</div>
<div class="second_icon icon">f/16</div>
<div class="third_icon icon">400</div>
<div class="fourth_icon icon">Japan</div>
</div>
</div>
</div>
<div class="tools_block">
<div class="tools_description ">
<div class="tools_desc animdown" data-watch data-watch data-watch-margin="-100px">
<div class="tools_desc_title">
<span class="upper14">The Gear cage </span>
The tools that we use.
</div>
<div class="tools_desc_text">
The say that "no place is boring if you've had a good night's sleep and have a pocket full of
unexposed film". While we don't shoot (a lot) of film these days — these are the tools that we
actually use everyday to capture the amazing things around us.
</div>
<a class="tools_btn btn btn_dot" href="#" data-popup="#popup1"> Check it out</a>
</div>
</div>
<div class="tools_img animright" data-watch data-watch data-watch-margin="-100px">
<img src="img/tools.png" alt="">
<div class="tools_icons animright" data-watch data-watch data-watch-margin="-100px">
<div class="icons">
<div class="first_icon icon">1"</div>
<div class="second_icon icon">f/16</div>
<div class="third_icon icon">400</div>
<div class="fourth_icon icon">Japan</div>
</div>
</div>
</div>
</div>
<div class="fullscreen_block showimg">
<div class="fullscreen_img ">
<img src="img/fullscreen2.png" alt="">
</div>
<div class="fullscreen_decription animright" data-watch data-watch data-watch-margin="-100px">
<span class="upper14"> Monstera Leafs </span>
Vestibulum sit amet urna turpis. Mauris euismod elit et nisi ultrices, ut faucibus orci tincidunt.
</div>
<div class="fullscreen_icons animright" data-watch data-watch data-watch-margin="-100px">
<div class="icons">
<div class="first_icon icon">1/400s</div>
<div class="second_icon icon">f/3,5</div>
<div class="third_icon icon">100</div>
<div class="fourth_icon icon">Costa Rica</div>
</div>
</div>
</div>
<div class="clients_block">
<div class="main__container">
<div class="main_desc animleft" data-watch data-watch data-watch-margin="-100px">
<div class="main_title">Past clients</div>
<div class="main_text">Trusted by your favourite companies lorem lorem</div>
</div>
<div class="clients animright" data-watch data-watch data-watch-margin="-100px">
<div class="client">
<img src="img/client1.svg" alt="">
</div>
<div class="client">
<img src="img/client2.svg" alt="">
</div>
<div class="client">
<img src="img/client3.svg" alt="">
</div>
<div class="client">
<img src="img/client4.svg" alt="">
</div>
<div class="client">
<img src="img/client5.svg" alt="">
</div>
</div>
</div>
</div>
<div class="fullscreen_block showimg">
<div class="fullscreen_img ">
<img src="img/fullscreen3.png" alt="">
</div>
<div class="fullscreen_decription animright" data-watch data-watch data-watch-margin="-100px">
<span class="upper14"> Star fall in the Himalayas </span>
Nulla rhoncus feugiat eros quis consectetur. Morbi neque ex, condimentum dapibus congue et, vulputate ut
ligula.
</div>
<div class="fullscreen_icons animright" data-watch data-watch data-watch-margin="-100px">
<div class="icons">
<div class="first_icon icon">6''</div>
<div class="second_icon icon">f/11</div>
<div class="third_icon icon">800</div>
<div class="fourth_icon icon">Nepal</div>
</div>
</div>
</div>
<div class="contactus_block main__container">
<div class="main_desc animleft" data-watch data-watch data-watch-margin="-100px">
<div class="main_title">Need help with photography <br> or videography?</div>
<div class="main_text">We're here for you!</div>
</div>
<a class="tools_btn btn btn_dot" href="#" data-popup="#popup1"> Get in touch</a>
<!-- <a href="#" data-popup="#popup1" class="contacts_link">оставить заявку на проект</a> -->
</div>
</main>
<footer class="footer">
<div class="footer__container">
<div class="subscribe_block">
<div class="subscribe_desc">
<span class="upper14"> Subscribe to our newsletter </span>
Read about all the things we do.
</div>
<div class="subscribe_email">
<form action="#" data-dev data-popup-message="#popup3" method="POST">
<input type="email" data-required="email" data-validate placeholder="Email" data-error="necessarily">
<button class="blackbtn">get</button>
</form>
</div>
</div>
<div class="bottom_block">
<div class="bottom_text">
© Aperture Photography, Inc. All rights reserved. Licensing.
<a href="#" data-popup="#popup2"> Privacy </a>
</div>
<div class="bottom_social">
<div class="social_link">
<a href="#">
<img src="img/social1.svg" alt="">
</a>
</div>
<div class="social_link">
<a href="#">
<img src="img/social2.svg" alt="">
</a>
</div>
<div class="social_link">
<a href="#">
<img src="img/social3.svg" alt="">
</a>
</div>
</div>
</div>
</div>
</footer>
</div>
<div id="popup1" aria-hidden="true" class="popup">
<div class="popup__wrapper">
<div class="popup__content">
<form class="form_contacts" data-dev data-popup-message="#popup3" method="POST" action="#" enctype="multipart/form-data">
<div class="form_inputs">
<div class="input__box">
<input class="form_name" data-required data-validate placeholder="Name" autocomplete="off" type="text" name="name" data-error="necessarily">
</div>
<div class="input__box">
<input class="form_phone" data-required data-validate placeholder="Phone" autocomplete="off" type="phone" name="tel" data-error="necessarily">
</div>
</div>
<div class="form_footer">
<button class="form_button btn">
Send
</button>
<div class="privacy_policy">
<a data-popup="#popup2" href="#">i agree with the Privacy Policy<br>
</div>
<div class="form_rate">
</div>
</div>
</form>
</div>
<button data-close type="button" class="popup__close"></button>
</div>
</div>
<div id="popup2" aria-hidden="true" class="popup">
<div class="popup__wrapper">
<div class="popup__content">
<div class="privacy_text">
Предоставляя свои персональные данные Покупатель даёт согласие на обработку, хранение и использование своих персональных данных на основании ФЗ № 152-ФЗ «О персональных данных» от 27.07.2006 г. в следующих целях: Регистрации Пользователя на сайте Осуществление клиентской поддержки Получения Пользователем информации о маркетинговых событиях Выполнение Продавцом обязательств перед Покупателем Проведения аудита и прочих внутренних исследований с целью повышения качества предоставляемых услуг. Под персональными данными подразумевается любая информация личного характера, позволяющая установить личность Покупателя такая как: Фамилия, Имя, Отчество Дата рождения Контактный телефон Адрес электронной почты Почтовый адрес Персональные данные Покупателей хранятся исключительно на электронных носителях и обрабатываются с использованием автоматизированных систем, за исключением случаев, когда неавтоматизированная обработка персональных данных необходима в связи с исполнением требований законодательства. Продавец обязуется не передавать полученные персональные данные третьим лицам, за исключением следующих случаев: По запросам уполномоченных органов государственной власти РФ только по основаниям и в порядке, установленным законодательством РФ Стратегическим партнерам, которые работают с Продавцом для предоставления продуктов и услуг, или тем из них, которые помогают Продавцу реализовывать продукты и услуги потребителям. Мы предоставляем третьим лицам минимальный объем персональных данных, необходимый только для оказания требуемой услуги или проведения необходимой транзакции. Продавец оставляет за собой право вносить изменения в одностороннем порядке в настоящие правила, при условии, что изменения не противоречат действующему законодательству РФ. Изменения условий настоящих правил вступают в силу после их публикации на Сайте.
</div>
</div>
<button data-close type="button" class="popup__close"></button>
</div>
</div>
<div id="popup3" aria-hidden="true" class="popup">
<div class="popup__wrapper">
<div class="popup__content ">
<div class="main_title ">
Your application has been successfully submitted! <br> <br>
Thank you!
</div>
</div>
<button data-close type="button" class="popup__close"></button>
</div>
</div>
<script src="js/app.min.js?_v=20220817235204"></script>
</body>
</html>