-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
289 lines (274 loc) · 15.5 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
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Code Crew Портфолио</title>
<link rel="stylesheet" href="static/style.css" />
<link rel="stylesheet" href="static/dark-theme.css" />
<link rel="stylesheet" href="static/mobile.css" />
</head>
<body>
<div class="wrapper">
<header class="header">
<h1 class="header__title">Code Crew</h1>
<nav class="menu-list">
<a class="menu-list__item" href="#about">О нас</a>
<a class="menu-list__item" href="#projects">Наши проекты</a>
<a class="menu-list__item" href="#contact">Контакты</a>
</nav>
<button class="header__menu-btn" title="навигация">
<span class="header__menu-btn--long"></span>
<span class="header__menu-btn--short"></span>
<span class="header__menu-btn--long"></span>
</button>
<div class="theme-toggle">
<input
class="input-theme"
type="checkbox"
id="theme-toggle__button"
/>
<label class="label-theme" for="theme-toggle__button">
<svg class="label-theme__svg label-theme__sun" viewBox="0 0 24 24">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 1.25C12.4142 1.25 12.75 1.58579 12.75 2V4C12.75 4.41421 12.4142 4.75 12 4.75C11.5858 4.75 11.25 4.41421 11.25 4V2C11.25 1.58579 11.5858 1.25 12 1.25ZM3.66865 3.71609C3.94815 3.41039 4.42255 3.38915 4.72825 3.66865L6.95026 5.70024C7.25596 5.97974 7.2772 6.45413 6.9977 6.75983C6.7182 7.06553 6.2438 7.08677 5.9381 6.80727L3.71609 4.77569C3.41039 4.49619 3.38915 4.02179 3.66865 3.71609ZM20.3314 3.71609C20.6109 4.02179 20.5896 4.49619 20.2839 4.77569L18.0619 6.80727C17.7562 7.08677 17.2818 7.06553 17.0023 6.75983C16.7228 6.45413 16.744 5.97974 17.0497 5.70024L19.2718 3.66865C19.5775 3.38915 20.0518 3.41039 20.3314 3.71609ZM12 7.75C9.65279 7.75 7.75 9.65279 7.75 12C7.75 14.3472 9.65279 16.25 12 16.25C14.3472 16.25 16.25 14.3472 16.25 12C16.25 9.65279 14.3472 7.75 12 7.75ZM6.25 12C6.25 8.82436 8.82436 6.25 12 6.25C15.1756 6.25 17.75 8.82436 17.75 12C17.75 15.1756 15.1756 17.75 12 17.75C8.82436 17.75 6.25 15.1756 6.25 12ZM1.25 12C1.25 11.5858 1.58579 11.25 2 11.25H4C4.41421 11.25 4.75 11.5858 4.75 12C4.75 12.4142 4.41421 12.75 4 12.75H2C1.58579 12.75 1.25 12.4142 1.25 12ZM19.25 12C19.25 11.5858 19.5858 11.25 20 11.25H22C22.4142 11.25 22.75 11.5858 22.75 12C22.75 12.4142 22.4142 12.75 22 12.75H20C19.5858 12.75 19.25 12.4142 19.25 12ZM17.0255 17.0252C17.3184 16.7323 17.7933 16.7323 18.0862 17.0252L20.3082 19.2475C20.6011 19.5404 20.601 20.0153 20.3081 20.3082C20.0152 20.6011 19.5403 20.601 19.2475 20.3081L17.0255 18.0858C16.7326 17.7929 16.7326 17.3181 17.0255 17.0252ZM6.97467 17.0253C7.26756 17.3182 7.26756 17.7931 6.97467 18.086L4.75244 20.3082C4.45955 20.6011 3.98468 20.6011 3.69178 20.3082C3.39889 20.0153 3.39889 19.5404 3.69178 19.2476L5.91401 17.0253C6.2069 16.7324 6.68177 16.7324 6.97467 17.0253ZM12 19.25C12.4142 19.25 12.75 19.5858 12.75 20V22C12.75 22.4142 12.4142 22.75 12 22.75C11.5858 22.75 11.25 22.4142 11.25 22V20C11.25 19.5858 11.5858 19.25 12 19.25Z"
/>
</svg>
<svg class="label-theme__svg label-theme__moon" viewBox="0 0 24 24">
<path
d="M21.0672 11.8568L20.4253 11.469L21.0672 11.8568ZM12.1432 2.93276L11.7553 2.29085V2.29085L12.1432 2.93276ZM21.25 12C21.25 17.1086 17.1086 21.25 12 21.25V22.75C17.9371 22.75 22.75 17.9371 22.75 12H21.25ZM12 21.25C6.89137 21.25 2.75 17.1086 2.75 12H1.25C1.25 17.9371 6.06294 22.75 12 22.75V21.25ZM2.75 12C2.75 6.89137 6.89137 2.75 12 2.75V1.25C6.06294 1.25 1.25 6.06294 1.25 12H2.75ZM15.5 14.25C12.3244 14.25 9.75 11.6756 9.75 8.5H8.25C8.25 12.5041 11.4959 15.75 15.5 15.75V14.25ZM20.4253 11.469C19.4172 13.1373 17.5882 14.25 15.5 14.25V15.75C18.1349 15.75 20.4407 14.3439 21.7092 12.2447L20.4253 11.469ZM9.75 8.5C9.75 6.41182 10.8627 4.5828 12.531 3.57467L11.7553 2.29085C9.65609 3.5593 8.25 5.86509 8.25 8.5H9.75ZM12 2.75C11.9115 2.75 11.8077 2.71008 11.7324 2.63168C11.6686 2.56527 11.6538 2.50244 11.6503 2.47703C11.6461 2.44587 11.6482 2.35557 11.7553 2.29085L12.531 3.57467C13.0342 3.27065 13.196 2.71398 13.1368 2.27627C13.0754 1.82126 12.7166 1.25 12 1.25V2.75ZM21.7092 12.2447C21.6444 12.3518 21.5541 12.3539 21.523 12.3497C21.4976 12.3462 21.4347 12.3314 21.3683 12.2676C21.2899 12.1923 21.25 12.0885 21.25 12H22.75C22.75 11.2834 22.1787 10.9246 21.7237 10.8632C21.286 10.804 20.7293 10.9658 20.4253 11.469L21.7092 12.2447Z"
/>
</svg>
</label>
</div>
</header>
<a href="#top" class="scroll-to-top" title="Прокрутить вверх"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="size-4 scroll-icon"
>
<path
fill-rule="evenodd"
d="M8 14a.75.75 0 0 1-.75-.75V4.56L4.03 7.78a.75.75 0 0 1-1.06-1.06l4.5-4.5a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06L8.75 4.56v8.69A.75.75 0 0 1 8 14Z"
clip-rule="evenodd"
/>
</svg>
</a>
<div id="top"></div>
<div class="container">
<section class="section" id="about">
<h2 class="title">О нас</h2>
<p class="text">
Code Crew — это команда энтузиастов с опытом в области UX/UI
дизайна, веб-разработки и создания цифровых решений, ориентированных
на удобство пользователей. Наш опыт и креативность позволяют решать
самые сложные задачи и создавать сайты, которые приносят результат.
</p>
<h3 class="subtitle">Илья Шмырёв</h3>
<p class="text">
<img src="images/photo2.png" class="photo-in-paragraph" />
Веб-разработчик<br />
Илья специализируется на создании оптимизированных и адаптивных
веб-приложений. Стремится к тому, чтобы каждая строчка кода
приносила пользу пользователю.
</p>
<h3 class="subtitle">Никита Ваганов</h3>
<p class="text">
<img src="images/photo.png" class="photo-in-paragraph" />
Frontend-разработчик<br />
Никита разрабатывает интуитивные интерфейсы для веб-приложений,
делая акцент на удобство и современный дизайн, чтобы каждый элемент
страницы улучшал взаимодействие пользователя.
</p>
</section>
<section class="section" id="projects">
<h2 class="title">Наши проекты</h2>
<p class="text">
Мы гордимся нашими проектами, в которых реализовали комплексные
решения для различных бизнес-задач, обеспечивая удобство и
функциональность для конечных пользователей.
</p>
<div class="project-list">
<details class="project-details">
<summary class="project-summary">Онлайн-магазин</summary>
<p class="text">
Мы разработали адаптивный онлайн-магазин, который обеспечивает
удобный пользовательский опыт и интуитивную навигацию. Проект
был ориентирован на оптимизацию взаимодействия пользователя с
продуктами и упрощение процесса покупок.
</p>
<ul class="list">
<li class="list__item">
Интеграция с популярными платёжными системами
</li>
<li class="list__item">
Адаптивный дизайн для мобильных устройств
</li>
<li class="list__item">
Фильтры и поиск по категориям для удобства пользователей
</li>
</ul>
<img
class="fill-available"
src="images/shop.webp"
alt="Интерфейс онлайн магазина"
/>
</details>
<details class="project-details">
<summary class="project-summary">Корпоративный сайт</summary>
<p class="text">
Создали сайт для крупной компании, ориентированный на
предоставление информации о компании и её продукции. Сайт
выполнен в минималистичном дизайне, подчёркивая корпоративные
ценности и стиль компании.
</p>
<ul class="list">
<li class="list__item">
Система управления контентом (CMS) для лёгкого обновления
информации
</li>
<li class="list__item">
Контактная форма и карта с местоположением офиса
</li>
<li class="list__item">
Поддержка нескольких языков для международных клиентов
</li>
</ul>
<img
class="fill-available"
src="images/company.webp"
alt="Интерфейс копроративного сайта"
/>
</details>
<details class="project-details">
<summary class="project-summary">Портал для мероприятий</summary>
<p class="text">
Создали интерактивный портал, где пользователи могут
зарегистрироваться и участвовать в мероприятиях онлайн. Проект
ориентирован на развитие коммуникации и возможности
взаимодействия между участниками.
</p>
<ul class="list">
<li class="list__item">
Система регистрации и профилей участников
</li>
<li class="list__item">
Поддержка онлайн-трансляций и вебинаров
</li>
<li class="list__item">
Чат и форумы для обсуждения тем мероприятия
</li>
</ul>
<img
class="fill-available"
src="images/events.webp"
alt="Интерфейс портала для мероприятий"
/>
</details>
</div>
</section>
<section class="section" id="contact">
<h2 class="title">Контакты</h2>
<div class="contact-group">
<h4 class="contact-group__title">Персональные</h4>
<ul class="list contact-group__list">
<li class="list__item contact-group__item">
Шмырёв Илья Алексеевич —
<a class="contact-group__link" href="mailto:[email protected]">
[email protected]<br class="break">
</a>
|
<a class="contact-group__link" href="tel:+79923353581">
+7 (992) 335-35-81
</a>
|
<a
class="contact-group__link"
href="https://github.com/ilyash0"
target="_blank"
>
GitHub
</a>
</li>
<li class="list__item contact-group__item">
Никита Ваганов Максимович —
<a
class="contact-group__link"
href="mailto:[email protected]"
>
[email protected]<br class="break">
</a>
|
<a class="contact-group__link" href="tel:+79022547311">
+7 (902) 254-73-11
</a>
|
<a
class="contact-group__link"
href="https://github.com/Electr0nic1"
target="_blank"
>
GitHub
</a>
</li>
</ul>
</div>
<div class="contact-group">
<h4 class="contact-group__title">Общие</h4>
<p class="text contact-group__text">
Email:
<a
class="contact-group__link"
href="mailto:[email protected]"
>
</a>
</p>
<p class="text contact-group__text">
Телефон:
<a class="contact-group__link" href="tel:+73432425064">
+7 (343) 242-50-64
</a>
</p>
<p class="text contact-group__text">
Адрес: г. Екатеринбург, ул. Крауля, 168
</p>
<a
class="contact-group__link"
target="_blank"
href="https://yandex.ru/maps/54/yekaterinburg/house/ulitsa_kraulya_168/YkkYcwVkS0MFQFtsfXRyc3VrbQ==/?ll=60.524261%2C56.832989&z=16.63"
>
<img
class="contact-group__img"
src="images/map.png"
alt="Адрес: г. Екатеринбург, ул. Крауля, 168"
/>
</a>
</div>
</section>
</div>
<footer class="footer">
<p class="footer__text">© Copyright 2024. Все права защищены</p>
</footer>
</div>
<script>
const themeToggle = document.getElementById("theme-toggle__button");
themeToggle.addEventListener("change", function () {
if (this.checked) {
document.body.classList.add("dark-theme");
} else {
document.body.classList.remove("dark-theme");
}
});
const menuBtn = document.querySelector('.header__menu-btn');
const menuMobile = document.querySelector('.menu-list');
menuBtn.addEventListener('click', () => {
menuMobile.classList.toggle('menu--open');
});
</script>
</body>
</html>