-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
816 lines (777 loc) · 63.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
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
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" lang="ru" content="Загнеев Олег Игоревич">
<meta name="author" content="kwork.ru/user/centuria">
<meta name="author" content="github.com/oleqq">
<title>13Fox</title>
<link rel="stylesheet" href="./css/typography.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="./css/style.min.css">
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="header__wrapper">
<div class="header__container">
<a href="/" class="header__logo">
<img src="./img3/header/logo.svg" alt="">
</a>
<div class="header__menu menu">
<nav class="menu__body">
<ul class="menu__list">
<li><a href="#" class="menu__link" data-goto=".opportunities">Наши возможности</a></li>
<li><a href="#" class="menu__link" data-goto=".main-quiz__container">Калькулятор</a></li>
<li><a href="#" class="menu__link" data-goto=".footer-form">Портфолио</a></li>
<li><a href="#" class="menu__link" data-goto=".bonus">Бонус</a></li>
<li><a href="#" class="menu__link" data-goto=".team">Наша команда</a></li>
<li><a href="#" class="menu__link" data-goto=".footer-form">Контакты</a></li>
</ul>
</nav>
</div>
<button type="button" class="menu__icon icon-menu">
<span></span>
</button>
</div>
</div>
</header>
<main class="page">
<section class="main-hero" id="main-hero">
<div class="main-hero__container">
<h1 class="main-hero__title">
Мы создаем и продвигаем
<br>
мобильные приложения
</h1>
<a href="#" class="main-hero__btn btn-glare-silver" id="ut-details" onclick="ym(47849339, 'reachGoal', 'zvonok'); return true;" data-popup=".popup__callback">🚀 Начать</a>
<a href="#" class="main-hero__scrollto" id="scroll" data-goto=".main-achievements">Узнать больше</a>
</div>
</section>
<section class="opportunities" id="opportunities">
<div class="opportunities__container">
<div class="opportunities__wrapper">
<div class="opportunities__info">
<div class="section__title">
Наши возможности
</div>
<div class="section__subtitle">
Добро пожаловать в мир 13FOX - студии, которая воплощает в жизнь разные идеи! Мы специализируемся на разработке и продвижении мобильных приложений, которые не только удовлетворяют потребности наших клиентов, но и привлекают внимание многих пользователей по всему миру.<br>
<div>Наша цель - создавать приложения, которые решают конкретные потребности пользователей. Обратитесь к нам в 13FOX, чтобы воплотить ваши идеи в реальность.</div>
</div>
<div class="achievments-swiper__buttons">
<div class="slidePrev-btn-2">
<svg xmlns="http://www.w3.org/2000/svg" width="49" height="48" viewBox="0 0 49 48" fill="none">
<circle cx="24.5" cy="24" r="20" stroke="#9B5DE5" stroke-width="2"/>
<path d="M32.5 24H16.5M16.5 24L22.5 18M16.5 24L22.5 30" stroke="#9B5DE5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="slideNext-btn-2">
<svg xmlns="http://www.w3.org/2000/svg" width="49" height="48" viewBox="0 0 49 48" fill="none">
<circle cx="24.5" cy="24" r="20" stroke="#9B5DE5" stroke-width="2"/>
<path d="M16.5 24C25.8726 24 23.1274 24 32.5 24M32.5 24L26.5 18M32.5 24L26.5 30" stroke="#9B5DE5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
</div>
<div class="opportunities__slider">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-card">
<div class="swiper-card__num">
#01
</div>
<div class="swiper-card__title">
Разработка для Android и iOS
</div>
<div class="swiper-card__subtitle">
Создаём мобильные приложения для iOS и<br>Android девайсов
</div>
</div>
<div class="swiper-slide swiper-card">
<div class="swiper-card__num">
#02
</div>
<div class="swiper-card__title">
Публикация в магазинах
</div>
<div class="swiper-card__subtitle">
Гарантируем публикацию в любых<br>магазинах приложений
</div>
</div>
<div class="swiper-slide swiper-card">
<div class="swiper-card__num">
#03
</div>
<div class="swiper-card__title">
ASO оптимизация
</div>
<div class="swiper-card__subtitle">
Повышаем видимость вашего продукта в<br>поиске магазина
</div>
</div>
<div class="swiper-slide swiper-card">
<div class="swiper-card__num">
#04
</div>
<div class="swiper-card__title">
Заполните тайтл
</div>
<div class="swiper-card__subtitle">
Заполните сабтайтл, слайдер поддерживает не меньше 4 слайдов
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="flying-cards" id="flying-cards">
<div class="flying-cards__container">
<div class="flying-cards-swiper">
<div class="flying-cards__wrapper">
<div class="flying-card">
<div class="flying-cards__img">
<img src="./img3/flyingcards/1.png" alt="">
</div>
<div class="flying-cards__subtitle">
Простое приложение, что решает<br> несложную задачу
</div>
<div class="flying-cards__price">
от 50 000 ₽
</div>
</div>
<div class="flying-card">
<div class="flying-cards__img">
<img src="./img3/flyingcards/2.png" alt="">
</div>
<div class="flying-cards__subtitle">
Простое приложение, что решает<br> несложную задачу
</div>
<div class="flying-cards__price">
от 50 000 ₽
</div>
</div>
<div class="flying-card">
<div class="flying-cards__img">
<img src="./img3/flyingcards/3.png" alt="">
</div>
<div class="flying-cards__subtitle">
Простое приложение, что решает<br> несложную задачу
</div>
<div class="flying-cards__price">
от 50 000 ₽
</div>
</div>
</div>
</div>
</div>
</section>
<section class="main-quiz" id="main-quiz">
<div class="main-quiz__container">
<form data-ajax="" method="POST" class="main-quiz__form quiz-form" action="sendmail-quiz.php">
<div class="quiz-form__progressbar">
<div class="quiz-form__progress" style="width: 60%;"></div>
</div>
<div class="quiz-form__body">
<div class="quiz-form__block _active">
<h3>Какой бюджет на создание приложения?</h3>
<div id="quiz-form__price" class="quiz-form__price noUi-target noUi-ltr noUi-horizontal noUi-txt-dir-ltr">
</div>
<div class="quiz-form__min-max">
<span class="quiz-form__min">
от 70 000 <span class="rub">руб.</span>
</span>
<span class="quiz-form__max">
более 200 000
<span class="rub">руб.</span>
</span>
</div>
<div class="quiz-form__val">
<input class="quiz-form__value quiz-form__value--1" name="sum" value="70000" id="send-result-polzunok">
<span>руб.</span>
</div>
</div>
<div class="quiz-form__block">
<h3>Сколько экранов планируется в приложении</h3>
<label class="custom-box" for="contactChoice1">до 5 экранов
<input type="radio" id="contactChoice1" name="expirience[]" value="до 5 экранов" checked="">
<span class="checkmark"></span>
</label>
<label class="custom-box" for="contactChoice2">5-8 экранов
<input type="radio" id="contactChoice2" name="expirience[]" value="5-8 экранов">
<span class="checkmark"></span>
</label>
<label class="custom-box" for="contactChoice3">8-12 экранов
<input type="radio" id="contactChoice3" name="expirience[]" value="8-12 экранов">
<span class="checkmark"></span>
</label>
<label class="custom-box" for="contactChoice4">Более 12 экранов
<input type="radio" id="contactChoice4" name="expirience[]" value="Более 12 экранов">
<span class="checkmark"></span>
</label>
</div>
<div class="quiz-form__block">
<h3>Уровень готовности приложения</h3>
<p>
От 1 до 10, где 1 - это идея, а 10 - готов дизайн и вся логика
</p>
<div id="quiz-form__level" class="quiz-form__level noUi-target noUi-ltr noUi-horizontal noUi-txt-dir-ltr">
</div>
<div class="quiz-form__min-max">
<span class="quiz-form__min">1</span>
<span class="quiz-form__max">10</span>
</div>
<div class="quiz-form__val quiz-form__val--small">
<input class="quiz-form__value quiz-form__value--2" name="level" value="1" id="send-result-polzunok">
<span>🦄</span>
</div>
</div>
<div class="quiz-form__block">
<h3>Функции приложения</h3>
<p>
Здесь выбираем интересующие направления
</p>
<div class="btn-group-toggle" data-toggle="buttons">
<input id="btn-secondary1" type="checkbox" name="business[]" value="Интернет продажи" autocomplete="off">
<label for="btn-secondary1" class="btn-secondary">
Интернет продажи
</label>
<input id="btn-secondary2" type="checkbox" name="business[]" value="Оказание услуг" autocomplete="off">
<label for="btn-secondary2" class="btn-secondary">
Оказание услуг
</label>
<input id="btn-secondary3" type="checkbox" name="business[]" value="Досуг" autocomplete="off">
<label for="btn-secondary3" class="btn-secondary">
Досуг
</label>
<input id="btn-secondary4" type="checkbox" name="business[]" value="Игра" autocomplete="off">
<label for="btn-secondary4" class="btn-secondary">
Игра
</label>
<input id="btn-secondary5" type="checkbox" name="business[]" value="Социальная сеть" autocomplete="off">
<label for="btn-secondary5" class="btn-secondary">
Социальная сеть
</label>
<input id="btn-secondary6" type="checkbox" name="business[]" value="Криптовалюта" autocomplete="off">
<label for="btn-secondary6" class="btn-secondary">
Криптовалюта
</label>
<input id="btn-secondary7" type="checkbox" name="business[]" value="Имидж компании" autocomplete="off">
<label for="btn-secondary7" class="btn-secondary">
Имидж компании
</label>
<input id="btn-secondary8" type="checkbox" name="business[]" value="Недвижимость" autocomplete="off">
<label for="btn-secondary8" class="btn-secondary">
Недвижимость
</label>
<input id="btn-secondary9" type="checkbox" name="business[]" value="Финансы" autocomplete="off">
<label for="btn-secondary9" class="btn-secondary">
Финансы
</label>
<input id="btn-secondary10" type="checkbox" name="business[]" value="Здоровье" autocomplete="off">
<label for="btn-secondary10" class="btn-secondary">
Здоровье
</label>
<input id="btn-secondary11" type="checkbox" name="business[]" value="Тело" autocomplete="off">
<label for="btn-secondary11" class="btn-secondary">
Тело
</label>
<input id="btn-secondary12" type="checkbox" name="business[]" value="Финансовые услуги" autocomplete="off">
<label for="btn-secondary12" class="btn-secondary">
Финансовые услуги
</label>
<input id="btn-secondary13" type="checkbox" name="business[]" value="Сетевой бизнес" autocomplete="off">
<label for="btn-secondary13" class="btn-secondary">
Сетевой бизнес
</label>
<input id="btn-secondary14" type="checkbox" name="business[]" value="Производство" autocomplete="off">
<label for="btn-secondary14" class="btn-secondary">
Производство
</label>
<input id="btn-secondary15" type="checkbox" name="business[]" value="Виртуальная реальность" autocomplete="off">
<label for="btn-secondary15" class="btn-secondary">
Виртуальная реальность
</label>
<input id="btn-secondary16" type="checkbox" name="business[]" value="Другое" autocomplete="off">
<label for="btn-secondary16" class="btn-secondary">
Другое
</label>
</div>
</div>
<div class="quiz-form__block">
<h3>Монетизация внутри приложения</h3>
<p>
Как именно будет происходить прием денежных средств?
</p>
<div class="labeltab5">
<label class="custom-box" for="timeChoice1">Apple Pay и Google Pay
<input type="radio" id="timeChoice1" name="time[]" value="Apple Pay и Google Pay" checked="">
<span class="checkmark"></span>
</label>
<label class="custom-box" for="timeChoice2">Подписка
<input type="radio" id="timeChoice2" name="time[]" value="Через готовые онлайн-шлюзы">
<span class="checkmark"></span>
</label>
<label class="custom-box" for="timeChoice3">Оплата картой
<input type="radio" id="timeChoice3" name="time[]" value="Оплата наличными">
<span class="checkmark"></span>
</label>
<label class="custom-box" for="timeChoice4">Приложение без монетизации
<input type="radio" id="timeChoice4" name="time[]" value="Приложение без монетизации">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="quiz-form__block">
<h3 style="text-align: center; padding: unset;">Ура! Секунда до цели</h3>
<p>
Наши кураторы свяжутся в ближайшее время, остался важный шаг
</p>
<div class="quiz-form__input">
<input class="quiz-form__name" data-required="" type="text" name="name" autocomplete="on" placeholder="Представьтесь" data-error="Введите имя" data-placeholder="Представьтесь">
</div>
<div class="quiz-form__input">
<input class="quiz-form__tel phone" data-required="" type="text" name="tel" autocomplete="on" placeholder="Телефон" data-error="Введите корректный номер телефона" inputmode="text" data-placeholder="Телефон">
</div>
</div>
</div>
<div class="quiz-form__buttons">
<a href="#" class="quiz-form__previous" style="display: block;">Назад</a>
<a class="quiz-form__next btn-glare" href="#" style="display: block;">
Вперёд
</a>
<button class="quiz-form__finish btn-glare" style="display: none;" type="submit" id="submit-quiz" onclick="ym(47849339, 'reachGoal', 'brif'); return true;">
Полетели 🚀
</button>
</div>
</form>
</div>
</section>
<section class="main-achievements" id="main-achievements">
<div class="main-achievements__block achievement-block achievement-block--1">
<div class="achievments-swiper">
<div class="swiper-wrapper">
<div class="achievement-block__wrapper swiper-slide">
<div class="achievement-block__body">
<div class="achievement-block__phone">
<div class="achievement__slider swiper achievement__slider--1 swiper-initialized swiper-horizontal swiper-backface-hidden">
<div class="achievement__wrapper swiper-wrapper" style="transform: translate3d(-238px, 0px, 0px); transition-duration: 0ms;">
<div class="achievement__slide swiper-slide swiper-slide-prev" style="width: 238px;" >
<picture><source srcset="./img3/work/1-1.webp" type="image/webp"><img src="./img3/work/Pattern.jpg" alt=""></picture>
</div>
<div class="achievement__slide swiper-slide swiper-slide-active" style="width: 238px;">
<picture><source srcset="./img3/work/1-2.png" type="image/webp"><img src="./assets/img/Pattern.jpg" alt=""></picture>
</div>
<div class="achievement__slide swiper-slide swiper-slide-next" style="width: 238px;">
<picture><source srcset="./img3/work/1-3.png" type="image/webp"><img src="./assets/img/Pattern.jpg" alt=""></picture>
</div>
<div class="achievement__slide swiper-slide" style="width: 238px;">
<picture><source srcset="./img3/work/1-4.png" type="image/webp"><img src="./assets/img/Pattern.jpg" alt=""></picture>
</div>
<div class="achievement__slide swiper-slide" style="width: 238px;">
<picture><source srcset="./img3/work/1-5.png" type="image/webp"><img src="./assets/img/Pattern.jpg" alt=""></picture>
</div>
</div>
</div>
</div>
<div class="achievement__pagination achievement__pagination--1 swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>
</div>
<div class="achievement-block__text">
<div class="section__title" style="margin-bottom: 20px;">
Наши работы
</div>
<p class="achievement-block__subname">
DoPlanner
</p>
<div class="section__subtitle-blue">
Приложение – ежедневный список задач, разработанный с функционалом Trello, но имеющий более удобный интерфейс и категории задач.
</div>
<ul class="achievement-block__list">
<p class="achievement-block__subname" style="color: #000;">
Основные преимущества
</p>
<li class="achievement-block__item">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
<circle cx="8.49998" cy="7.99992" r="6.66667" stroke="#4644A8" stroke-width="1.5"/>
<path d="M7.5 6L9.5 8L7.5 10" stroke="#4644A8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Современный дизайн
</li>
<li class="achievement-block__item">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
<circle cx="8.49998" cy="7.99992" r="6.66667" stroke="#4644A8" stroke-width="1.5"/>
<path d="M7.5 6L9.5 8L7.5 10" stroke="#4644A8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Аналог Trello и заметок объеденённый в систему категорий.
</li>
<li class="achievement-block__item">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
<circle cx="8.49998" cy="7.99992" r="6.66667" stroke="#4644A8" stroke-width="1.5"/>
<path d="M7.5 6L9.5 8L7.5 10" stroke="#4644A8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Система обучения с подробной статистикой, для достижения максимальных результатов.
</li>
</ul>
<div class="achievments-swiper__buttons">
<div class="slidePrev-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="49" height="48" viewBox="0 0 49 48" fill="none">
<circle cx="24.5" cy="24" r="20" stroke="#B5B9DB" stroke-width="2"/>
<path d="M32.5 24H16.5M16.5 24L22.5 18M16.5 24L22.5 30" stroke="#B5B9DB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="slideNext-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="49" height="48" viewBox="0 0 49 48" fill="none">
<circle cx="24.5" cy="24" r="20" stroke="#9B5DE5" stroke-width="2"/>
<path d="M16.5 24C25.8726 24 23.1274 24 32.5 24M32.5 24L26.5 18M32.5 24L26.5 30" stroke="#9B5DE5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
<button class="achievement-block__btn btn-glare" data-popup=".popup__callback">
Повторить успех
</button>
</div>
</div>
<div class="achievement-block__wrapper swiper-slide">
<div class="achievement-block__body">
<div class="achievement-block__phone">
<div class="achievement__slider swiper achievement__slider--2 swiper-initialized swiper-horizontal swiper-backface-hidden">
<div class="achievement__wrapper swiper-wrapper" style="transform: translate3d(-238px, 0px, 0px); transition-duration: 0ms;">
<div class="achievement__slide swiper-slide swiper-slide-prev" style="width: 238px;">
<picture><source srcset="./img3/work/2-1.png" type="image/webp"><img src="./assets/img/Pattern.jpg" alt=""></picture>
</div>
<div class="achievement__slide swiper-slide swiper-slide-active" style="width: 238px;">
<picture><source srcset="./img3/work/2-2.png" type="image/webp"><img src="./assets/img/Pattern.jpg" alt=""></picture>
</div>
<div class="achievement__slide swiper-slide swiper-slide-next" style="width: 238px;">
<picture><source srcset="./img3/work/2-3.png" type="image/webp"><img src="./assets/img/Pattern.jpg" alt=""></picture>
</div>
<div class="achievement__slide swiper-slide" style="width: 238px;">
<picture><source srcset="./img3/work/2-4.png" type="image/webp"><img src="./assets/img/Pattern.jpg" alt=""></picture>
</div>
</div>
</div>
</div>
<div class="achievement__pagination achievement__pagination--2 swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>
</div>
<div class="achievement-block__text">
<div class="section__title" style="margin-bottom: 20px;">
Наши работы
</div>
<p class="achievement-block__subname">
DoPlanner
</p>
<div class="section__subtitle-blue">
Приложение – ежедневный список задач, разработанный с функционалом Trello, но имеющий более удобный интерфейс и категории задач.
</div>
<ul class="achievement-block__list">
<p class="achievement-block__subname" style="color: #000;">
Основные преимущества
</p>
<li class="achievement-block__item">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
<circle cx="8.49998" cy="7.99992" r="6.66667" stroke="#4644A8" stroke-width="1.5"/>
<path d="M7.5 6L9.5 8L7.5 10" stroke="#4644A8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Современный дизайн
</li>
<li class="achievement-block__item">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
<circle cx="8.49998" cy="7.99992" r="6.66667" stroke="#4644A8" stroke-width="1.5"/>
<path d="M7.5 6L9.5 8L7.5 10" stroke="#4644A8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Аналог Trello и заметок объеденённый в систему категорий.
</li>
<li class="achievement-block__item">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
<circle cx="8.49998" cy="7.99992" r="6.66667" stroke="#4644A8" stroke-width="1.5"/>
<path d="M7.5 6L9.5 8L7.5 10" stroke="#4644A8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Система обучения с подробной статистикой, для достижения максимальных результатов.
</li>
</ul>
<div class="achievments-swiper__buttons">
<div class="slidePrev-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="49" height="48" viewBox="0 0 49 48" fill="none">
<circle cx="24.5" cy="24" r="20" stroke="#9B5DE5" stroke-width="2"/>
<path d="M32.5 24H16.5M16.5 24L22.5 18M16.5 24L22.5 30" stroke="#9B5DE5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="slideNext-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="49" height="48" viewBox="0 0 49 48" fill="none">
<circle cx="24.5" cy="24" r="20" stroke="#B5B9DB" stroke-width="2"/>
<path d="M16.5 24C25.8726 24 23.1274 24 32.5 24M32.5 24L26.5 18M32.5 24L26.5 30" stroke="#B5B9DB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
<button class="achievement-block__btn btn-glare" data-popup=".popup__callback">
Повторить успех
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bonus" id="bonus">
<div class="bonus__container">
<div class="bonus__wrapper">
<div class="bonus__top">
<div class="section__title-white">
Бонусы
</div>
<div class="section__subtitle-white">
При заказе прямо сейчас с сайта
</div>
</div>
<div class="bonus__cards">
<div class="bonus-card__wrapper">
<div class="bonus__num">01</div>
<div class="bonus__card">
Бесплатное размещение в<br>магазинах приложений AppStore и<br>Google Play
</div>
</div>
<div class="bonus-card__wrapper">
<div class="bonus__num">02</div>
<div class="bonus__card">
Составление описания приложения<br>для лучшего продвижения в поиске
</div>
</div>
<div class="bonus-card__wrapper">
<div class="bonus__num">03</div>
<div class="bonus__card">
Бесплатная поддержка<br>продукта на протяжении 6 месяцев
</div>
</div>
</div>
<div class="bonus__callback">
<div class="section__subtitle-white">
Заполните форму и получите бонусы
</div>
<div class="bonus__form">
<form data-ajax="" method="POST" class="popup__send form-popup" action="sendmail.php" style=" display: flex;align-items: flex-start;">
<div class="form-popup__input" style="width: unset;">
<input data-required="" type="text" name="tel" autocomplete="on" placeholder="Ваш телефон" data-error="Введите корректный номер телефона" class="phone" inputmode="text" data-placeholder="Ваш телефон">
</div>
<button type="submit" class="form-popup__btn btn-glare">
Отправить
</button>
</form>
</div>
</div>
</div>
</div>
</section>
<section class="team" id="team">
<div class="team__container">
<div class="team-swiper">
<div class="section__title">
Наша команда
</div>
<div class="swiper-wrapper">
<div class="swiper-slide team-card">
<div class="team-card__img">
<div class="team-card__name">Имя Фамилия<br><span>Должность</span></div>
<img src="./img3/team/team-member.webp" alt="">
<div class="gradient-overlay"></div>
</div>
</div>
<div class="swiper-slide team-card">
<div class="team-card__img">
<div class="team-card__name">Имя Фамилия<br><span>Должность</span></div>
<img src="./img3/team/team-member.webp" alt="">
<div class="gradient-overlay"></div>
</div>
</div>
<div class="swiper-slide team-card">
<div class="team-card__img">
<div class="team-card__name">Имя Фамилия<br><span>Должность</span></div>
<img src="./img3/team/team-member.webp" alt="">
<div class="gradient-overlay"></div>
</div>
</div>
<div class="swiper-slide team-card">
<div class="team-card__img">
<div class="team-card__name">Имя Фамилия<br><span>Должность</span></div>
<img src="./img3/team/team-member.webp" alt="">
<div class="gradient-overlay"></div>
</div>
</div>
<div class="swiper-slide team-card">
<div class="team-card__img">
<div class="team-card__name">Имя Фамилия<br><span>Должность</span></div>
<img src="./img3/team/team-member.webp" alt="">
<div class="gradient-overlay"></div>
</div>
</div>
<div class="swiper-slide team-card">
<div class="team-card__img">
<div class="team-card__name">Имя Фамилия<br><span>Должность</span></div>
<img src="./img3/team/team-member.webp" alt="">
<div class="gradient-overlay"></div>
</div>
</div>
<div class="swiper-slide team-card">
<div class="team-card__img">
<div class="team-card__name">Имя Фамилия<br><span>Должность</span></div>
<img src="./img3/team/team-member.webp" alt="">
<div class="gradient-overlay"></div>
</div>
</div>
<div class="swiper-slide team-card">
<div class="team-card__img">
<div class="team-card__name">Имя Фамилия<br><span>Должность</span></div>
<img src="./img3/team/team-member.webp" alt="">
<div class="gradient-overlay"></div>
</div>
</div>
<div class="swiper-slide team-card">
<div class="team-card__img">
<div class="team-card__name">Имя Фамилия<br><span>Должность</span></div>
<img src="./img3/team/team-member.webp" alt="">
<div class="gradient-overlay"></div>
</div>
</div>
<div class="swiper-slide team-card">
<div class="team-card__img">
<div class="team-card__name">Имя Фамилия<br><span>Должность</span></div>
<img src="./img3/team/team-member.webp" alt="">
<div class="gradient-overlay"></div>
</div>
</div>
</div>
<div class="swiper-pagination" style="margin-top: 100px; scale: 1.5;"></div>
</div>
</div>
</section>
</main>
<section class="footer-form" id="footer-form">
<div class="footer-form__container">
<div class="footer-form__wrapper">
<div class="form-main">
<div class="main-wrapper">
<div class="section__title-white">
Связь с нами
</div>
<form class="form-wrapper">
<div class="form-wrapper-secondary">
<div class="form-card" style="width: 45%;">
<input
class="form-input"
type="text"
name="full_name"
required="required"
/>
<label class="form-label" for="full_name">Ваше имя</label>
</div>
<div class="form-card" style="width: 45%;">
<input
class="form-input"
type="email"
name="email"
required="required"
/>
<label class="form-label" for="email">Эл. почта</label>
</div>
</div>
<div class="form-card">
<textarea
class="form-textarea"
maxlength="420"
rows="3"
name="phone_number"
required="required"
></textarea>
<label class="form-textarea-label" for="phone_number">Ваше сообщение</label
>
</div>
<div class="btn-wrap">
<button> Отправить </button>
</div>
</form>
<div class="footer-form__bottom">
<div class="section__title-white">ИЛИ</div>
<div class="footer-form__details">
<div class="footer__cell">
<div class="footer-form__title">
<div>Напишите нам</div>
<div>[email protected]</div>
</div>
<div class="footer-form__subtitle">
Постараемся ответить вам как можно<br>скорее, как только получим от вас письмо
</div>
</div>
<div class="footer__cell">
<div class="footer-form__title">
<div>Позвоните нам</div>
<div>+7 (999) 123-45-67</div>
</div>
<div class="footer-form__subtitle">
Мы с радостью ответим на все<br>ваши вопросы в рабочее время <b>с 10:00 до 18:00</b>
</div>
</div>
<div class="footer__cell-socials">
<div class="footer-form__title">
<div>Мы в<br>соцсетях</div>
</div>
<div class="footer-form__icons">
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 42 42" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5375 28.4812C17.85 29.2688 19.425 29.6625 21 29.6625C25.8562 29.6625 29.6625 25.725 29.6625 21.1312C29.6625 18.7688 28.875 16.6687 27.1688 14.9625C25.4625 13.3875 23.3625 12.4688 21 12.4688C16.275 12.4688 12.3375 16.4062 12.3375 21.1312C12.3375 22.7063 12.7312 24.2812 13.65 25.725L13.9125 26.1188L12.9937 29.2688L16.275 28.35L16.5375 28.4812ZM23.8875 22.3125C24.15 22.3125 25.4625 22.9688 25.725 23.1C25.7659 23.1204 25.8068 23.1377 25.8471 23.1547C26.0661 23.2472 26.2704 23.3334 26.3813 23.8875C26.5125 23.8875 26.5125 24.4125 26.25 25.0687C26.1188 25.5938 25.0688 26.25 24.5438 26.25C24.4548 26.25 24.3696 26.2575 24.2787 26.2656C23.8326 26.305 23.247 26.3568 21.3937 25.5938C19.0936 24.6737 17.4989 22.4436 17.0511 21.8174C16.9879 21.7289 16.9475 21.6725 16.9312 21.6562C16.9089 21.6116 16.8637 21.5402 16.8041 21.4462C16.5138 20.9877 15.8813 19.989 15.8813 18.9C15.8813 17.5875 16.5375 16.9313 16.8 16.6687C17.0625 16.4062 17.325 16.4062 17.4562 16.4062H17.9813C18.1125 16.4062 18.375 16.4062 18.5063 16.8C18.7688 17.325 19.2938 18.6375 19.2938 18.7688C19.2938 18.8125 19.3083 18.8563 19.3229 18.9C19.3521 18.9875 19.3813 19.075 19.2938 19.1625C19.2281 19.2281 19.1953 19.2937 19.1625 19.3594C19.1297 19.425 19.0969 19.4906 19.0312 19.5563L18.6375 19.95C18.5063 20.0813 18.375 20.2125 18.5063 20.475C18.6375 20.7375 19.1625 21.6562 19.95 22.3125C20.8361 23.0878 21.5352 23.3958 21.8897 23.5519C21.9552 23.5808 22.009 23.6045 22.05 23.625C22.3125 23.625 22.4438 23.625 22.575 23.4938C22.6406 23.3625 22.8047 23.1656 22.9688 22.9688C23.1328 22.7719 23.2969 22.575 23.3625 22.4437C23.4937 22.1813 23.625 22.1813 23.8875 22.3125Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 6.5625C0 2.93813 2.93813 0 6.5625 0H35.4375C39.0619 0 42 2.93813 42 6.5625V35.4375C42 39.0619 39.0619 42 35.4375 42H6.5625C2.93813 42 0 39.0619 0 35.4375V6.5625ZM21 10.5C23.7562 10.5 26.3813 11.55 28.35 13.5188C30.3188 15.4875 31.5 18.1125 31.5 20.8688C31.5 26.6438 26.775 31.3688 21 31.3688C19.2937 31.3688 17.5875 30.8438 16.0125 30.0563L10.5 31.5L11.9438 26.25C11.025 24.675 10.5 22.8375 10.5 21C10.5 15.225 15.225 10.5 21 10.5Z" fill="white"/>
</svg>
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 42 42" fill="none">
<path d="M21 24.675C19.0312 24.675 17.325 23.1 17.325 21C17.325 19.0312 18.9 17.325 21 17.325C22.9688 17.325 24.675 18.9 24.675 21C24.675 22.9687 22.9688 24.675 21 24.675Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.4625 12.075H16.5375C15.4875 12.2062 14.9625 12.3375 14.5688 12.4687C14.0438 12.6 13.65 12.8625 13.2563 13.2562C12.9447 13.5678 12.7975 13.8794 12.6195 14.256C12.5726 14.3552 12.5235 14.4593 12.4688 14.5687C12.4484 14.6297 12.425 14.6937 12.3999 14.7624C12.2626 15.1375 12.075 15.6499 12.075 16.5375V25.4625C12.2063 26.5125 12.3375 27.0375 12.4688 27.4312C12.6 27.9562 12.8625 28.35 13.2563 28.7437C13.5678 29.0553 13.8794 29.2025 14.256 29.3805C14.3553 29.4274 14.4592 29.4765 14.5688 29.5312C14.6297 29.5515 14.6937 29.575 14.7624 29.6001C15.1375 29.7374 15.6499 29.925 16.5375 29.925H25.4625C26.5125 29.7937 27.0375 29.6625 27.4312 29.5312C27.9562 29.4 28.35 29.1375 28.7437 28.7437C29.0553 28.4322 29.2025 28.1206 29.3805 27.744C29.4274 27.6447 29.4765 27.5408 29.5312 27.4312C29.5516 27.3703 29.575 27.3063 29.6001 27.2376C29.7374 26.8625 29.925 26.3501 29.925 25.4625V16.5375C29.7937 15.4875 29.6625 14.9625 29.5312 14.5687C29.4 14.0437 29.1375 13.65 28.7437 13.2562C28.4322 12.9447 28.1206 12.7975 27.744 12.6195C27.6448 12.5727 27.5406 12.5234 27.4312 12.4687C27.3703 12.4484 27.3063 12.425 27.2376 12.3999C26.8625 12.2626 26.3501 12.075 25.4625 12.075ZM21 15.3562C17.85 15.3562 15.3562 17.85 15.3562 21C15.3562 24.15 17.85 26.6437 21 26.6437C24.15 26.6437 26.6437 24.15 26.6437 21C26.6437 17.85 24.15 15.3562 21 15.3562ZM28.0875 15.225C28.0875 15.9499 27.4999 16.5375 26.775 16.5375C26.0501 16.5375 25.4625 15.9499 25.4625 15.225C25.4625 14.5001 26.0501 13.9125 26.775 13.9125C27.4999 13.9125 28.0875 14.5001 28.0875 15.225Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 6.5625C0 2.93813 2.93813 0 6.5625 0H35.4375C39.0619 0 42 2.93813 42 6.5625V35.4375C42 39.0619 39.0619 42 35.4375 42H6.5625C2.93813 42 0 39.0619 0 35.4375V6.5625ZM16.5375 10.1062H25.4625C26.6437 10.2375 27.4312 10.3687 28.0875 10.6312C28.875 11.025 29.4 11.2875 30.0562 11.9437C30.7125 12.6 31.1063 13.2562 31.3688 13.9125C31.6313 14.5687 31.8937 15.3562 31.8937 16.5375V25.4625C31.7625 26.6437 31.6313 27.4312 31.3688 28.0875C30.975 28.875 30.7125 29.4 30.0562 30.0562C29.4 30.7125 28.7437 31.1062 28.0875 31.3687C27.4312 31.6312 26.6437 31.8937 25.4625 31.8937H16.5375C15.3563 31.7625 14.5688 31.6312 13.9125 31.3687C13.125 30.975 12.6 30.7125 11.9438 30.0562C11.2875 29.4 10.8938 28.7437 10.6313 28.0875C10.3688 27.4312 10.1062 26.6437 10.1062 25.4625V16.5375C10.2375 15.3562 10.3688 14.5687 10.6313 13.9125C11.025 13.125 11.2875 12.6 11.9438 11.9437C12.6 11.2875 13.2563 10.8937 13.9125 10.6312C14.5688 10.3687 15.3563 10.1062 16.5375 10.1062Z" fill="white"/>
</svg>
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 42 42" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5625 0H35.4375C39.0619 0 42 2.93813 42 6.5625V35.4375C42 39.0619 39.0619 42 35.4375 42H6.5625C2.93813 42 0 39.0619 0 35.4375V6.5625C0 2.93813 2.93813 0 6.5625 0ZM21.9081 15.7597C20.0272 16.542 16.2683 18.1611 10.6311 20.6171C9.71576 20.9812 9.23624 21.3373 9.19259 21.6855C9.11881 22.274 9.85575 22.5057 10.8593 22.8212C10.9958 22.8642 11.1372 22.9086 11.2822 22.9558C12.2695 23.2767 13.5977 23.6522 14.2881 23.6671C14.9144 23.6806 15.6134 23.4224 16.3851 22.8925C21.6521 19.3372 24.3709 17.5401 24.5416 17.5014C24.662 17.474 24.8289 17.4397 24.9419 17.5402C25.055 17.6407 25.0439 17.831 25.0319 17.882C24.9589 18.1933 22.0661 20.8826 20.5691 22.2744C20.1024 22.7083 19.7714 23.016 19.7037 23.0863C19.5521 23.2438 19.3976 23.3927 19.2491 23.5359C18.3319 24.4201 17.6441 25.0832 19.2872 26.166C20.0769 26.6864 20.7087 27.1167 21.3391 27.546C22.0275 28.0148 22.7142 28.4824 23.6026 29.0648C23.8289 29.2131 24.0451 29.3672 24.2557 29.5173C25.0568 30.0885 25.7766 30.6016 26.6659 30.5198C27.1826 30.4723 27.7163 29.9864 27.9874 28.5373C28.628 25.1127 29.8872 17.6926 30.1782 14.635C30.2037 14.3671 30.1716 14.0243 30.1458 13.8738C30.1201 13.7232 30.0662 13.5088 29.8706 13.3501C29.6389 13.1621 29.2813 13.1224 29.1213 13.1251C28.394 13.1381 27.2781 13.5261 21.9081 15.7597Z" fill="white"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div id="popup" aria-hidden="true" class="popup popup__callback">
<div class="popup__wrapper">
<div class="popup__content">
<button data-close="" type="button" class="popup__close">
<img src="img3/icons/close.svg" alt="close">
</button>
<div class="popup__text">
<h5>Поздравляем! Вектор найден!</h5>
<p>Кураторы свяжутся в ближайшее время</p>
</div>
<form data-ajax="" method="POST" class="popup__send form-popup" action="sendmail.php">
<div class="form-popup__input">
<input data-required="" type="text" name="name" autocomplete="on" placeholder="Ваше имя" data-error="Введите имя">
</div>
<div class="form-popup__input">
<input data-required="" type="text" name="tel" autocomplete="on" placeholder="Ваш телефон" data-error="Введите корректный номер телефона" class="phone">
</div>
<button type="submit" class="form-popup__btn btn-glare">
Отправить
</button>
</form>
</div>
</div>
</div>
<script src="./js/index.js"></script>
<script src="./js/app.min.js"></script>
</body>
</html>