-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
326 lines (285 loc) · 22.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="Header.css">
<link rel="stylesheet" href="Main.css">
<link rel="stylesheet" href="slider.css">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<header class="header">
<div class="headerContainer flex mt-5 justify-between">
<a href="/" class="header__logo"><img class="logo" src="png/logo.png" width="200px" height="50px"></a>
<div class="header__menu menu ">
<div class="menu__icon">
<span><img class="mt-2 lg:hidden " src="png/burger.svg"></span>
</div>
<div class="">
<nav class="menu__body block lg:flex">
<ul class="menu__list block lg:flex text-center " >
<li ><a href="about" class="menu__link">Услуги</a></li>
<li><a href="persancoll" class="menu__link">Портфолио</a></li>
<li><a href="sklad" class="menu__link">Этапы</a></li>
<li><a href="contacts" class="menu__link ">Дизайнеры</a></li>
</ul>
<button class="butHeader hidden lg:block w-64 ">Заказать</button>
</nav>
</div>
</div>
</div>
</header>
<div class="wrapper py-2 pt-40">
<div class="firstSec">
<div class="main">
<div class="mainBack mb-16 block md:hidden ">
<img class="w-full" src="png/ill.png">
</div>
<div class="afterBack block px-4 mb-12 ">
<h1 class="textBig mb-5 w-5/5 md:w-4/5 " >Разработка <br> интернет-магазина <br> с нуля за неделю</h1>
<h2 class="textNorm w-5/5 md:w-2/5 ">Дизайн интернет магазина, элементов микро UX, корзин, личного кабинета - от фирменного стиля
до пользовательского интерфейса в сжатые сроки
с командой Virtual Designers </h2>
<button class="butOrdFirst mt-12">Заказать</button>
</div>
</div>
</div>
<div class="secondSec">
<div class="main pb-4 md:pb-20">
<p class="h3 pt-4 md:pt-28 mb-10 text-center">Что входит в услугу по созданию дизайна интернет-магазина?</p>
<div class="block px-4">
<div class="block__item ">
<div class="block__title "><span class="circle">●</span>Дизайн портала</div>
<div class="block__text ">
Дизайн портала — это оформление контента, совокупность всех графических элементов на веб-странице. Основная задача дизайна — познакомить пользователя со страницей. Продуманный дизайн создает нужное впечатление о компании.
</div>
</div>
<div class="block__item ">
<div class="block__title "><span class="circle">●</span>Дизайн адаптивной <br class="br"> <span class="pl-8 md:pl-0">мобильной версии </span>
</div>
<div class="block__text ">
Мобильная версия сайта удобна для пользователя, потому что сильно упрощена по сравнению с обычной версией. Мобильная версия дает наиболее приоритетную информацию, а также позволяет совершать заказ/покупку с минимумом действий.
При адаптивной версии вся структура сайта автоматически подстраивается под различную ширину экрана.
Для того, чтобы получить рабочий продукт не нужно писать все с нуля — достаточно лишь подправить CSS и HTML.
Один URL избавляет нас от ненужных редиректов, и надобности пользователю запоминать адрес мобильной версии.
</div>
</div>
<div class="block__item ">
<div class="block__title "><span class="circle">●</span>Дизайн десктопной версии
</div>
<div class="block__text ">
Десктопную версию сайта просматривают пользователи со стационарных компьютеров. Основная цель: посерфить, углубиться в детали, получить больше информации, сравнить, выбрать, прицениться.
</div>
</div>
<div class="block__item ">
<div class="block__title "><span class="circle">●</span>Пользовательский интерфейс
</div>
<div class="block__text ">
Цель дизайна пользовательского интерфейса - сделать взаимодействие максимально простым и эффективным, насколько это возможно, с точки зрения достижения целей пользователя. Хороший дизайн пользовательского интерфейса облегчает выполнение поставленной задачи, не привлекая к себе лишнего внимания.
</div>
</div>
<div class="block__item ">
<div class="block__title "><span class="circle">●</span>Микро UX
</div>
<div class="block__text ">
Микро-анимация может изменить восприятие продукта, пользовательское поведение и повысить конверсию. Небольшие, преимущественно функциональные анимации поддерживают пользователя: обеспечивают визуальную обратную связь и более понятно отражают происходящие изменения. Микро-анимации способны многое объяснить без слов.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="thirdSec">
<div class="main">
<div class="slider-container">
<p class="w-full h3 text-center mt-6 md:mt-24 mb-6 md:mb-28 px-10">Этапы разработки интернет-магазина</p>
<div class="slider-track">
<div class="slider-item items-center block lg:flex px-12">
<div class="block mb-12 w-11/12 mr-12">
<h4 style="font-weight: 700; font-size: 21px; margin-bottom: 8px;">1. Анализ</h4>
<p class="text-sm lg:text-md">Для того, чтобы <br> онлайн-магазин приносил выгоду, перед его запуском необходимо провести анализ других предложений рынка, оценить конкурентов и найти наиболее удобное решение. </p>
</div>
<div class="w-full items-center ">
<img class="items-center " src="png/slider_1/1.png">
</div>
</div>
<div class="slider-item items-center block lg:flex px-12">
<div class="block mb-12 w-11/12 mr-12">
<h4 style="font-weight: 700; font-size: 21px; margin-bottom: 8px;">2. Визуальное решение</h4>
<p class="text-sm lg:text-md">Разработка дизайна ключевых страниц магазина – главная, каталог, информационные разделы, раздел корзины, товаров. Для нас главное – передать настроение бренда, сделать удобный сайт. </p>
</div>
<div class="w-full items-center ">
<img class="items-center " src="png/slider_1/2.png">
</div>
</div>
<div class="slider-item items-center block lg:flex px-12">
<div class="block mb-12 w-11/12 mr-12">
<h4 style="font-weight: 700; font-size: 21px; margin-bottom: 8px;">3. Техническая реализация</h4>
<p class="text-sm lg:text-md">После утверждения дизайн-макета наступает следующий этап – верстка. Это трудоемкий процесс: программисты должны все тщательно прописать, чтобы не допустить технических ошибок.</p>
</div>
<div class="w-full items-center ">
<img class="items-center " src="png/slider_1/3.png">
</div>
</div>
<div class="slider-item items-center block lg:flex px-12">
<div class="block mb-12 w-11/12 mr-12">
<h4 style="font-weight: 700; font-size: 21px; margin-bottom: 8px;">4. Наполнение контентом </h4>
<p class="text-sm lg:text-md">Создание и публикация текстов, а также видео материала. Хороший контент и качественные фотографии привлекают больше посетителей и помогают клиенту лучше ознакомиться с ассортиментом. </p>
</div>
<div class="w-full items-center ">
<img class="items-center " src="png/slider_1/4.png">
</div>
</div>
<div class="slider-item items-center block lg:flex px-12">
<div class="block mb-12 w-11/12 mr-12">
<h4 style="font-weight: 700; font-size: 21px; margin-bottom: 8px;">5. Тестирование</h4>
<p class="text-sm lg:text-md">Составление плана тестирования для определения ошибок. Проверка работы сайта и визуального восприятия для улучшения сайта. Также используются чек-листы для четкого определения ошибок и их устранения.</p>
</div>
<div class="w-full items-center ">
<img class="items-center " src="png/slider_1/5.png">
</div>
</div>
</div>
</div>
<div class="slider-buttons">
<button class="btn-prev">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</button>
<button class="btn-next">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
</div>
<div class="fourSec">
<div class="main pt-6">
<p class="w-full h3 text-center w-8/12 md:w-full md:mt-24 ">Примеры <br class="br"> онлайн-магазинов</p>
<div class="slider-container1 ">
<div class="slider-track1 ">
<div class="slider-item1 items-center block ">
<div class="card1 text-center items-center text-white" id="card">
<img class="" src="cards_png/1.png">
<p class="opisHide" ><span class="hidetext1">Онлайн-магазин</span><br>для оптовых покупок</p>
</div>
<div class="card1 text-center items-center" id="card">
<img class="" src="cards_png/3.png">
<p class="opisHide" ><span class="hidetext1">Онлайн-магазин</span><br>для парикмахеров</p>
</div>
<div class="card1 text-center items-center" id="card">
<img class="" src="cards_png/5.png">
<p class="opisHide" ><span class="hidetext1">Онлайн-магазин</span><br>для кондитеров</p>
</div>
</div>
<div class="slider-item1 items-center block ">
<div class="card1 text-center items-center" id="card">
<img class="" src="cards_png/2.png">
<p class="opisHide" ><span class="hidetext1">Онлайн-магазин</span><br>для флористов</p>
</div>
<div class="card1 text-center items-center" id="card">
<img class="" src="cards_png/4.png">
<p class="opisHide" ><span class="hidetext1">Онлайн-магазин</span><br>для визажистов</p>
</div>
<div class="card1 text-center items-center" id="card">
<img class="" src="cards_png/6.png">
<p class="opisHide" ><span class="hidetext1">Онлайн-магазин</span><br>для художников</p>
</div>
</div>
</div>
</div>
<div class="slider-buttons1">
<button class="btn-prev1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</button>
<button class="btn-next1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
<div class="fiveSec py-10 mb-12 md:mb-0 md:py-20">
<div class="main">
<div class="mainBack block md:hidden ">
<h1 class="h3 text-center mb-5 w-5/5" >Необходимо больше информации?</h1>
<img class="w-9/12 mx-auto" src="png/ordSmall.png">
</div>
<div class="afterBack block px-4 pt-8">
<h1 class="h3 mb-5 w-5/5 hidden md:block w-4/5 " >Необходимо больше информации?</h1>
<h2 class="textNorm w-5/5 md:w-2/5 ">Если Вы владелец онлайн-магазина или только начинаете свой путь в электронной коммерции и вам нужен уникальный дизайн онлайн магазина для стартапа, обратитесь к нашему веб дизайнеру. За выгодную цену и короткий период времени, он поможет визуализировать ваш веб проект. </h2>
<button class="butOrdFirst mt-12">Оставить заявку</button>
</div>
</div>
</div>
<div class="sixSec ">
<div class="main ">
<div class="w-full md:w-4/5 2xl:w-6/12 mx-auto md:pt-32 text-center lg:px-20">
<h1 class="h3 mb-4">Обсудить проект</h1>
<p class="mb-4 px-4" style="font-family: 'Montserrat';font-style: normal;font-weight: 400;font-size: 18px;line-height: 175%;">Расскажите о своих бизнес-целях и мы поможем вам в их достижении</p>
<div class="px-4">
<input class="inpCall w-full my-2" placeholder="Имя" type="text">
<input class="inpCall number w-full my-2" placeholder="Telegram/Viber" type="tel">
<input class="inpCall email w-full my-2" id="email" placeholder="Email" type="email">
<div class=""><span class="error "></span></div>
<button class="butOrdFirst btn-submit my-4" id="btn-submit">Отправить</button>
</div>
</div>
</div>
</div>
<div class="sevenSec pb-6">
<img class="phoneSmall mx-auto" src="png/call1.png">
</div>
</div>
<footer class="footer w-full text-white">
<div class="">
<div class="p-4 foot_block md:px-28">
<div class="w-full py-10 lg:py-32 lg:flex justify-between p-2">
<div class="lg:w-4/12">
<img class="mx-auto lg:ml-0" src="png_footer/logo_foot.png">
<div class=" hidden lg:flex flex justify-between w-11/12 lg:w-8/12 mt-10">
<img src="png_footer/inst.png">
<img src="png_footer/face.png">
<img src="png_footer/telega.png">
<img src="png_footer/viber.png">
<img src="png_footer/whats.png">
</div>
</div>
<div class="lg:w-4/12 lg:pl-12 py-6 lg:py-4">
<div class="w-9/12 lg:w-full mx-auto ">
<p class="flex h-1/3 my-2"><span class="mx-2"><img src="png_footer/viber.png"></span>Валерия: +79805585949</p>
<p class="flex h-1/3 my-2"><span class="mx-2"><img src="png_footer/viber.png"></span>Анна: +79805585949</p>
<p class="flex h-1/3 my-2"><span class="mx-2"><img src="png_footer/viber.png"></span>Валерия: +79805585949</p>
</div>
</div>
<div class="pt-6 mx-auto flex lg:hidden justify-between w-8/12 ">
<img src="png_footer/face1.png">
<img src="png_footer/telega1.png">
<img src="png_footer/viber1.png">
<img src="png_footer/inst1.png">
<img src="png_footer/whats1.png">
</div>
<div class="w-6/12 mt-12 lg:mt-4 lg:pl-12 mx-auto lg:w-4/12">
<p>[email protected]</p>
</div>
</div>
<div class="w-full">
<p class="text-center">Developers 2018-2021 © All rights reserved</p>
</div>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>
<script src="spoiler.js"></script>
<script src="slider.js"></script>
<script src="validation.js"></script>
</body>
</html>