-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
281 lines (268 loc) · 17.8 KB
/
index.html
File metadata and controls
281 lines (268 loc) · 17.8 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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Евклид проектные решения</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/media.css">
<link type="image/x-icon" href="img/favicon.svg" rel="shortcut icon">
</head>
<body>
<header class="header">
<div class="container header__container flex">
<a class="header__logo" href="#">
<img class="header__logo-img" src="img/logo.svg" alt="Логотип Евклид">
</a>
<nav class="nav flex">
<ul class="nav__list list-reset flex">
<li class="nav__item">
<a class="nav__link" href="#about-us">О нас</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#stages">Этапы</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#questions">Вопросы</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#footer">Оставить заявку</a>
</li>
</ul>
</nav>
<button class="header__search">
<svg class="header__search-img" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect width="7.56126" height="1.89031"
transform="matrix(0.713342 0.700816 -0.713342 0.700816 18.6064 17.3762)" fill="black" />
<path
d="M20.9303 10.7726C20.9303 16.1533 16.4855 20.5452 10.9652 20.5452C5.44478 20.5452 1 16.1533 1 10.7726C1 5.39198 5.44478 1 10.9652 1C16.4855 1 20.9303 5.39198 20.9303 10.7726Z"
stroke="black" stroke-width="2" />
</svg>
</button>
</div>
</header>
<main class="main">
<!--! slider -->
<section class="slider" id="slider">
<div class="container slider__container">
<h1 class="slider__title">
Проектные решения любой сложности
</h1>
<p class="slider__text">
Есть над чем задуматься: базовые сценарии поведения пользователей и по сей день остаются уделом проектантов
</p>
<button class="slider__button">Заказать расчёт</button>
</div>
</section>
<!--! about-us -->
<section class="about-us" id="about-us">
<div class="container">
<h2 class="about-us__title">
О нас
</h2>
<p class="about-us__article">
Также как перспективное планирование создаёт необходимость включения в производственный план целого ряда
внеочередных мероприятий с учётом комплекса экспериментов, поражающих по своей масштабности и грандиозности.
А также диаграммы связей могут быть описаны максимально подробно. Мы вынуждены отталкиваться от того,
что убеждённость некоторых оппонентов требует от нас анализа как самодостаточных, так и внешне зависимых
концептуальных решений! Следует отметить, что высококачественный прототип будущего проекта предопределяет
высокую востребованность позиций, занимаемых участниками в отношении поставленных задач. Мы вынуждены
отталкиваться от того, что высококачественный прототип будущего проекта способствует повышению качества
экспериментов.
</p>
<div class="about-us__cards flex">
<div class="about-us__left-card flex">
<div class="about-us__left-group flex">
<p class="about-us__descr">
Принимая во внимание показатели успешности, перспективное планирование способствует подготовке
и реализации новых принципов
</p>
<button class="about-us__button">Подробнее</button>
</div>
</div>
<div class="about-us__right-card flex">
<div class="about-us__card-item flex">
<div class="about-us__image-top">
</div>
<div class="about-us__groupe flex">
<h3 class="about-us__subtitle">
Консультация с широким активом
</h3>
<p class="about-us__text">
А также свежий взгляд на привычные вещи — безусловно открывает новые горизонты
для как самодостаточных, так и внешне зависимых концептуальных решений
</p>
</div>
</div>
<div class="about-us__card-item flex">
<div class="about-us__image-bottom flex"></div>
<div class="about-us__groupe flex">
<h3 class="about-us__subtitle">
В своём стремлении повысить
</h3>
<p class="about-us__text">
Качество жизни, они забывают, что сплочённость команды профессионалов представляет собой интересный
эксперимент проверки прогресса профессионального сообщества
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--! stages -->
<section class="stages" id="stages">
<div class="container">
<h2 class="stages__title">Этапы</h2>
<div class="stages__group flex">
<div class="stages__left-group flex">
<h3 class="stages__subtitle">Проводим консультацию</h3>
<p class="stages__descr">
Влечёт за собой процесс внедрения и модернизации приоритизации разума над эмоциями. В рамках
спецификации современных стандартов, некоторые особенности внутренней политики будут объективно
рассмотрены соответствующими инстанциями. <span class="block"></span>
А также представители современных социальных резервов, инициированные исключительно синтетически,
ограничены исключительно образом мышления. Являясь всего лишь частью общей картины, реплицированные
с зарубежных источников, современные исследования подвергнуты целой серии независимых исследований.
Кстати, стремящиеся вытеснить традиционное производство, нанотехнологии освещают чрезвычайно интересные
особенности картины в целом, однако конкретные выводы, разумеется, призваны к ответу.
</p>
<div class="stages__buttons-group flex">
<button class="stages__btn">Подробнее</button>
<a class="stages__btn btn-no-background" href="#">Договор</a>
</div>
</div>
<div class="stages__right-group flex">
</div>
</div>
</div>
</section>
<!--! question -->
<section class="question" id="questions">
<div class="container question__container">
<h2 class="question__title">Вопросы</h2>
<ul class="question__list list-reset flex">
<li class="question__item flex">
<h3 class="question__subtitle">
Из чего формируется <span class="block"></span> конечная стоимость проекта?
</h3>
<p class="question__descr">
Приятно, граждане, наблюдать, как некоторые особенности внутренней политики могут быть призваны к ответу.
</p>
</li>
<li class="question__item flex">
<h3 class="question__subtitle">
У меня есть свой проект. Можно ли его реализовать?
</h3>
<p class="question__descr">
А ещё некоторые особенности внутренней политики, которые представляют собой яркий пример континентального
типа.
</p>
</li>
<li class="question__item flex">
<h3 class="question__subtitle">
Я выбираю между разными компаниями. Почему вы?
</h3>
<p class="question__descr">
Явные признаки победы институционализации набирают популярность среди определённых слоёв населения.
</p>
</li>
</ul>
</div>
</section>
</main>
<!--! footer -->
<footer class="footer" id="footer">
<div class="container footer__container">
<div class="footer__group flex">
<div class="footer__left-group flex">
<a class="footer__logo" href="#">
<img class="footer__logo-img" src="img/footerlogo.svg" alt="Логотип Евклид">
</a>
<nav class="footer__nav">
<ul class="footer-nav__list list-reset flex">
<li class="footer-nav__item">
<a class="footer-nav__link" href="#about-us">О нас</a>
</li>
<li class="footer-nav__item">
<a class="footer-nav__link" href="#slider">Проекты</a>
</li>
<li class="footer-nav__item">
<a class="footer-nav__link" href="#questions">Отзывы</a>
</li>
<li class="footer-nav__item">
<a class="footer-nav__link" href="#">Договор оферты</a>
</li>
<li class="footer-nav__item">
<a class="footer-nav__link" href="#">Договор подряда</a>
</li>
<li class="footer-nav__item">
<a class="footer-nav__link" href="#">Конфиденциальность</a>
</li>
<li class="footer-nav__item">
<a class="footer-nav__link" href="#">Партнёрское соглашение</a>
</li>
</ul>
</nav>
<ul class="footer__social-links flex">
<li class="list-reset">
<a class="footer__social-link-ok footer__social-link" href="#">
<svg class="footer__img" width="60" height="60" viewBox="0 0 60 60" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M25.7054 19.9812C25.7054 22.4546 27.7105 24.4598 30.1838 24.4598C32.6572 24.4598 34.6623 22.4546 34.6623 19.9812C34.6623 17.5079 32.6572 15.5028 30.1838 15.5028C27.7105 15.5028 25.7054 17.5079 25.7054 19.9812Z"
fill="#666666" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M30 60C46.5686 60 60 46.5685 60 30C60 13.4315 46.5686 0 30 0C13.4314 0 0 13.4315 0 30C0 46.5685 13.4314 60 30 60ZM19.35 19.9811C19.35 13.9978 24.2004 9.14729 30.1838 9.14729C36.1673 9.14729 41.0176 13.9978 41.0176 19.9811C41.0176 25.9645 36.1673 30.8154 30.1838 30.8154C24.2004 30.8154 19.35 25.9645 19.35 19.9811ZM41.0823 36.3881C40.9448 36.4983 38.3457 38.5522 34.0085 39.4358L40.5554 45.9243C41.7067 47.0738 41.7081 48.9389 40.5586 50.0902C39.4091 51.2414 37.5444 51.2432 36.3927 50.0935L30.0368 43.904L24.2639 50.0536C23.6859 50.6532 22.9149 50.9547 22.1431 50.9547C21.407 50.9547 20.6703 50.6808 20.0986 50.1296C18.9274 49.0003 18.8935 47.1355 20.0228 45.9643L26.2369 39.4701C21.7782 38.6073 19.0718 36.4998 18.9324 36.3881C17.6633 35.3702 17.4594 33.5163 18.4772 32.247C19.4949 30.9778 21.3487 30.7739 22.6182 31.7916C22.645 31.8133 25.4756 33.9398 30.0366 33.9429C34.5977 33.9398 37.3698 31.8133 37.3966 31.7916C38.666 30.7739 40.5198 30.9778 41.5375 32.247C42.5553 33.5163 42.3515 35.3702 41.0823 36.3881Z"
fill="#666666" />
</svg>
</a>
</li>
<li class="list-reset">
<a class="footer__social-link-vk footer__social-link" href="#">
<svg class="footer__img" width="60" height="60" viewBox="0 0 60 60" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M30 0C13.432 0 0 13.4314 0 30C0 46.5686 13.432 60 30 60C46.568 60 60 46.5686 60 30C60 13.4314 46.568 0 30 0ZM45.2176 33.2446C46.6159 34.6103 48.0951 35.8957 49.3504 37.4026C49.9065 38.0692 50.4307 38.7585 50.8297 39.5337C51.3993 40.6392 50.8849 41.8515 49.8954 41.9171L43.7494 41.9159C42.162 42.0473 40.8988 41.4071 39.8339 40.3218C38.9837 39.457 38.195 38.5332 37.3762 37.6389C37.0416 37.2718 36.6893 36.9262 36.2695 36.6543C35.4316 36.1093 34.7036 36.2762 34.2236 37.1515C33.7344 38.0421 33.6227 39.0292 33.5761 40.0205C33.5092 41.4697 33.0721 41.8484 31.618 41.9165C28.5109 42.062 25.5628 41.5906 22.8227 40.0241C20.4055 38.6425 18.5346 36.6924 16.9043 34.4845C13.7297 30.1805 11.2984 25.4566 9.11386 20.597C8.6222 19.5026 8.98189 18.917 10.1893 18.8943C12.1952 18.8557 14.2011 18.8606 16.2071 18.8925C17.0234 18.9054 17.5636 19.3725 17.8772 20.1428C18.9612 22.8098 20.2901 25.3473 21.9554 27.7007C22.3992 28.3274 22.8522 28.9522 23.4973 29.3948C24.2093 29.8834 24.7519 29.7219 25.0877 28.9271C25.3025 28.4219 25.3952 27.8817 25.4418 27.3404C25.6014 25.486 25.6205 23.6323 25.3442 21.7854C25.1724 20.6296 24.5224 19.8832 23.3702 19.6647C22.7834 19.5536 22.8694 19.3363 23.1548 19.0011C23.6501 18.4217 24.1142 18.0632 25.0416 18.0632L31.9857 18.062C33.0801 18.2768 33.3256 18.7679 33.4742 19.8703L33.4803 27.5871C33.4674 28.0137 33.6945 29.2782 34.4606 29.5574C35.0744 29.76 35.4795 29.2677 35.8465 28.8792C37.5118 27.112 38.6983 25.0263 39.7608 22.8675C40.2298 21.9155 40.6343 20.9303 41.0271 19.9433C41.3193 19.2135 41.7735 18.8544 42.5972 18.8667L49.2841 18.8747C49.4811 18.8747 49.6812 18.8765 49.8764 18.9103C51.0034 19.103 51.3121 19.5879 50.9635 20.6873C50.4147 22.4145 49.3485 23.8533 48.3063 25.2958C47.1892 26.8401 45.9977 28.3304 44.8917 29.8815C43.8752 31.2994 43.9556 32.0133 45.2176 33.2446Z"
fill="#666666" />
</svg>
</a>
</li>
</ul>
</div>
<div class="footer__mid-right-group flex">
<div class="footer__midle-group flex">
<h3 class="midle-group__title">Оставить заявку</h3>
<form class="form midle-group__form flex" action="https://jsonplaceholder.typicode.com/posts" method="POST">
<div class="form__label flex">
<input class="form__input" type="text" id="name" name="name" placeholder="Фамилия, имя и отчество*"
required>
<input class="form__input" type="email" id="email" name="email" placeholder="Email*" required>
<textarea class="form__text-area" name="textarea" rows="5" cols="20" placeholder="Сообщение"></textarea>
</div>
<div class="midle-group__send-post flex">
<button class="footer__btn">Отправить данные</button>
<label class="form__label-checked flex">
<input class="checkbox" type="checkbox" checked="checked">
<span class="checkbox-text">Согласен на обработку данных</span>
</label>
</div>
</form>
</div>
<div class="footer__right-group flex">
<p class="footer__descr">
Высокий уровень вовлечения представителей целевой аудитории является чётким доказательством простого факта:
разбавленное изрядной долей эмпатии, рациональное мышление позволяет оценить значение модели развития. Таким
образом, консультация
с широким активом обеспечивает широкому кругу (специалистов) участие
в формировании стандартных подходов.
</p>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>