-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
504 lines (477 loc) · 24.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
<!DOCTYPE html>
<html lang="ru">
<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>Marketing</title>
<link
href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,300&family=Montserrat:wght@500;700&family=Open+Sans:wght@300;400&family=Raleway:wght@700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body id="body">
<header class="header">
<div class="header__top">
<div class="container">
<div class="header__top-inner">
<a class="logo" href="#">
<svg width="80" height="64" viewBox="0 0 80 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.3474 55.2856C12.8034 55.2856 10.5114 54.7336 8.47141 53.6296C6.43141 52.5016 4.82341 50.9536 3.64741 48.9856C2.49541 47.0176 1.91941 44.8216 1.91941 42.3976C1.91941 39.9736 2.49541 37.7776 3.64741 35.8096C4.82341 33.8416 6.43141 32.3056 8.47141 31.2016C10.5114 30.0736 12.8034 29.5096 15.3474 29.5096C17.8674 29.5096 20.1474 30.0736 22.1874 31.2016C24.2274 32.3056 25.8234 33.8416 26.9754 35.8096C28.1274 37.7536 28.7034 39.9496 28.7034 42.3976C28.7034 44.8456 28.1274 47.0536 26.9754 49.0216C25.8234 50.9656 24.2274 52.5016 22.1874 53.6296C20.1474 54.7336 17.8674 55.2856 15.3474 55.2856ZM15.3474 52.0816C17.1954 52.0816 18.8514 51.6616 20.3154 50.8216C21.8034 49.9816 22.9674 48.8296 23.8074 47.3656C24.6714 45.8776 25.1034 44.2216 25.1034 42.3976C25.1034 40.5736 24.6714 38.9296 23.8074 37.4656C22.9674 35.9776 21.8034 34.8136 20.3154 33.9736C18.8514 33.1336 17.1954 32.7136 15.3474 32.7136C13.4994 32.7136 11.8194 33.1336 10.3074 33.9736C8.81941 34.8136 7.64341 35.9776 6.77941 37.4656C5.93941 38.9296 5.51941 40.5736 5.51941 42.3976C5.51941 44.2216 5.93941 45.8776 6.77941 47.3656C7.64341 48.8296 8.81941 49.9816 10.3074 50.8216C11.8194 51.6616 13.4994 52.0816 15.3474 52.0816ZM57.5698 54.9976L57.5338 36.6376L48.4258 51.9376H46.7698L37.6618 36.7456V54.9976H34.2058V29.7976H37.1578L47.6698 47.5096L58.0378 29.7976H60.9898L61.0258 54.9976H57.5698Z"
fill="#333333" />
<path
d="M76.6783 19.6298L75.2649 19.1976C75.0688 19.1377 74.8618 19.1941 74.7294 19.3433C74.386 19.7309 74.0092 20.0994 73.6093 20.4387C70.6452 22.9537 66.9246 23.8125 62.85 22.9233C58.7957 22.0386 56.9322 19.692 54.353 16.4441C54.1686 16.2118 53.981 15.9756 53.7891 15.7357C53.7673 15.7083 53.7416 15.6724 53.7144 15.6344C53.6428 15.5343 53.5536 15.4098 53.4281 15.287C53.2576 15.1201 53.0719 14.9646 52.8761 14.825C52.4716 14.5364 52.2018 14.082 52.1361 13.5784L51.7024 10.2566C51.6836 10.1126 51.6098 9.97958 51.4971 9.88658C51.3846 9.79352 51.2423 9.74818 51.1017 9.76061L48.9617 9.94883C48.6692 9.97446 48.4637 10.2384 48.5027 10.5381L48.9187 13.7244C48.9642 14.0732 48.8514 14.428 48.6092 14.6977C48.2393 15.1095 48.0509 15.6178 48.0642 16.1673C48.2326 23.1161 52.8916 28.2594 60.5271 29.9255C63.8224 30.6445 67.3266 30.2145 70.3941 28.7146C71.0115 28.4127 71.5957 28.0749 72.1441 27.7029C72.9085 27.1844 73.6034 26.5995 74.2215 25.9536C75.3264 24.7991 76.1295 23.5062 76.6087 22.111C76.8142 21.5124 76.971 20.8917 77.0744 20.266C77.1203 19.989 76.948 19.7123 76.6783 19.6298ZM49.6332 10.9875L50.7136 10.8925L51.0011 13.0943L50.5648 13.105L49.9117 13.121L49.6332 10.9875ZM71.5314 26.7872C68.5608 28.8018 64.5296 29.6956 60.7032 28.8607C53.613 27.3135 49.2877 22.5775 49.1329 16.1918C49.1246 15.8488 49.2808 15.6009 49.4132 15.4535C49.728 15.1029 49.9232 14.6684 49.9802 14.2102L51.1886 14.1806C51.3811 14.7938 51.7672 15.3339 52.2911 15.7076C52.4387 15.8129 52.5786 15.9299 52.7067 16.0553C52.7595 16.107 52.8063 16.1726 52.8607 16.2485C52.8956 16.2973 52.9317 16.3477 52.9729 16.3992C53.1639 16.6383 53.3508 16.8735 53.5345 17.1049C56.1583 20.409 58.2307 23.0186 62.6737 23.9881C64.9004 24.474 67.0495 24.4727 69.0614 23.9844C70.8865 23.5414 72.5656 22.7073 74.0574 21.5031L74.0933 21.5206L74.2848 21.6142C73.5154 22.8093 72.5337 23.8047 71.3974 24.5753C68.9006 26.2686 65.662 26.879 62.3163 26.149C57.1068 25.0123 53.3962 22.2086 51.8678 18.2544C51.758 17.9702 51.4468 17.8198 51.1728 17.9184C50.8987 18.0169 50.7657 18.3273 50.8755 18.6116C52.548 22.9387 56.5485 25.9938 62.1401 27.2138C64.8685 27.8091 67.5783 27.5923 69.9764 26.5867C70.7048 26.2813 71.3903 25.9101 72.0272 25.478C73.3342 24.5915 74.4353 23.4491 75.2776 22.0992L75.424 22.1707C74.6693 24.0172 73.2854 25.5976 71.5314 26.7872ZM75.7706 21.1544L75.5521 21.0477L74.9213 20.7396C75.0568 20.6079 75.1891 20.4733 75.3175 20.3361L75.9274 20.5226C75.8817 20.7348 75.8294 20.9456 75.7706 21.1544Z"
fill="black" />
</svg>
</a>
<nav class="menu">
<button class="menu__btn">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="18" viewBox="0 0 30 18" fill="none">
<path d="M0 0H30V2H0V0Z" fill="black"></path>
<path d="M0 8H30V10H0V8Z" fill="black"></path>
<rect y="16" width="30" height="2" fill="black"></rect>
</svg>
</button>
<ul class="menu__list">
<li class="menu__list-item">
<a class="menu__list-link" href="#body">
HOME
</a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href="#about">
ABOUT US
</a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href="#portfolio">
PORTFOLIO
</a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href="#team">
OUR TEAM
</a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href="#blog">
BLOG
</a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href="#contact">
CONTACT
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="header__content">
<div class="container">
<div class="header__content-inner">
<h1 class="header__title">
O...MARKETING
</h1>
<h4 class="header__subtitle">
DIGITAL MARKETING AGENCY
</h4>
</div>
</div>
</div>
</header>
<section class="about" id="about">
<div class="container">
<div class="about__inner">
<h2 class="title about__title">About Us</h2>
<div class="about__text">
<p>Практика показывает, что большие продажи далеко не всегда зависят от того, сколько вы потратите на
продвижение сайта и
рекламную кампанию. Значительно сильнее конечный результат зависит от правильной организации кампании. Мы
достигаем
максимальной эффективности и помогаем сберечь бюджеты наших клиентов, используя стратегический
интернет-маркетинг.
</p>
<p>Определяем цели продвижения — что наш клиент хочет получить, когда работа будет сделана. Проводим
маркетинговые
исследования рынка, целевой аудитории, конкурентной среды. При разработке стратегии учитываем все имеющиеся
данные.
</p>
</div>
</div>
</div>
</section>
<section class="expertise">
<div class="container">
<h2 class="title expertise__title">Our Expertise</h2>
<div class="expertise__inner">
<div class="expertise__info">
<div class="expertise__info-item">
BRANDING
<span style="width: calc(100% - 90%)">90%</span>
</div>
<div class="expertise__info-item">
DESIGN
<span style="width: calc(100% - 80%)">80%</span>
</div>
<div class="expertise__info-item">
DEVELOPMENT
<span style="width: calc(100% - 85%)">85%</span>
</div>
</div>
<div class="expertise__text">
<p>В стратегию интернет-маркетинга входит создание имиджевой и рекламной концепции, разработка
контент-стратегии, распределение использования различных каналов коммуникации.
</p>
<p>Реализуем принятую стратегию, отслеживая промежуточные результаты, и корректируя будущие действия с учетом
изменений. Главной целью в этом процессе для нас является конечный результат, а не следование планам.</p>
</div>
</div>
<div class="expertise__items">
<div class="expertise__item expertise__item--design">
<h4 class="expertise__item-title">
GRAPHIC DESIGN
</h4>
<p class="expertise__item-text">
Рекламный дизайн, дизайн упаковки, этикетки, листовок, каталогов, разработка презентаций, дизайн выставочных
стендов
</p>
</div>
<div class="expertise__item expertise__item--dev">
<h4 class="expertise__item-title">
WEB DEVELOPMENT
</h4>
<p class="expertise__item-text">
Разрабатываем веб сайты от концепции до реализации. Дизайн, верстка, программирование и запуск сайт в сеть
</p>
</div>
<div class="expertise__item expertise__item--marketing">
<h4 class="expertise__item-title">
MARKETING
</h4>
<p class="expertise__item-text">
Разрабатываем маркетинговое и рекламное продвижение Вашего продукта или услуги под ключ и на любой бюджет.
</p>
</div>
</div>
</section>
<section class="magic">
<div class="container">
<div class="magic__inner">
<h2 class="title magic__title">Let’s make magic.</h2>
<div class="magic__text">
<p>Маркетинговое агентство MGN: полный комплекс маркетинговых, рекламных и дизайнерских услуг в Харькове и
Украине:
маркетинговые исследования рынков, товаров, потребителей, планирование комплекса маркетинга, реклама,
проведение
рекламных кампаний, брендинг, рекламный дизайн, pr.
</p>
<p>Нами накоплен немалый опыт работы в реальном бизнесе, в самых различных отраслях – от недвижимости до
аптечного и
медицинского бизнеса. Мы не просто беремся решать задачи наших клиентов, мы сами вышли из бизнес-среды и
понимаем суть
бизнес-процессов.
</p>
<p>Мы говорим с бизнесом на одном языке!</p>
</div>
</div>
</div>
</section>
<section class="portfolio" id="portfolio">
<div class="container">
<div class="portfolio__top">
<h2 class="title">Portfolio</h2>
<div class="portfolio__filter-btn">
<button class="portfolio__btn" data-filter="all">all</button>
<button class="portfolio__btn" data-filter=".category-a">branding</button>
<button class="portfolio__btn" data-filter=".category-b">design</button>
<button class="portfolio__btn" data-filter=".category-c">photography</button>
<button class="portfolio__btn" data-filter=".category-d">illustration</button>
</div>
</div>
</div>
<div class="portfolio__content">
<div class="portfolio__item mix category-a">
<img src="images/portfolio/1.jpg" alt="portfolio images">
<a class="portfolio__item-link" href="#">show project</a>
</div>
<div class="portfolio__item mix category-a">
<img src="images/portfolio/2.jpg" alt="portfolio images">
<a class="portfolio__item-link" href="#">show project</a>
</div>
<div class="portfolio__item mix category-b">
<img src="images/portfolio/3.jpg" alt="portfolio images">
<a class="portfolio__item-link" href="#">show project</a>
</div>
<div class="portfolio__item mix category-b">
<img src="images/portfolio/4.jpg" alt="portfolio images">
<a class="portfolio__item-link" href="#">show project</a>
</div>
<div class="portfolio__item mix category-b">
<img src="images/portfolio/5.jpg" alt="portfolio images">
<a class="portfolio__item-link" href="#">show project</a>
</div>
<div class="portfolio__item mix category-c">
<img src="images/portfolio/6.jpg" alt="portfolio images">
<a class="portfolio__item-link" href="#">show project</a>
</div>
<div class="portfolio__item mix category-c">
<img src="images/portfolio/7.jpg" alt="portfolio images">
<a class="portfolio__item-link" href="#">show project</a>
</div>
<div class="portfolio__item mix category-c">
<img src="images/portfolio/8.jpg" alt="portfolio images">
<a class="portfolio__item-link" href="#">show project</a>
</div>
<div class="portfolio__item mix category-d">
<img src="images/portfolio/9.jpg" alt="portfolio images">
<a class="portfolio__item-link" href="#">show project</a>
</div>
</div>
<a class="portfolio__add" href="#">view more projects</a>
<blockquote class="blockquote">
«Неважно какую историю вы рассказываете, главное – сделайте своего покупателя героем»
<span class="blockquote__author">Крис Броган</span>
</blockquote>
<div class="portfolio__video">
<a data-fancybox class="portfolio__video-link" href="https://www.youtube.com/watch?v=_sI_Ps7JSEk">
<img src="images/play.svg" alt="play icon">
</a>
</div>
<div class="container">
<div class="portfolio__numbers">
<h5 class="portfolio__numbers-item">
305
<span>Web Designs</span>
</h5>
<h5 class="portfolio__numbers-item">
220
<span>Logo Designs</span>
</h5>
<h5 class="portfolio__numbers-item">
52
<span>Print Designs</span>
</h5>
<h5 class="portfolio__numbers-item">
88
<span>Mobile Apps</span>
</h5>
</div>
</div>
</section>
<section class="slider-blog" id="blog">
<div class="container">
<div class="slider-blog__inner">
<div class="slider-blog__item">
<a class="slider-blog__item-link" href="#">
<h3 class="slider-blog__item-title">
АНИМИРОВАННЫЙ ЛОГОТИП – ТРЕНД ИЛИ НЕОБХОДИМОСТЬ?
</h3>
</a>
<p class="slider-blog__item-descr">
Что представляет собой анимированный логотип, и в чем его преимущества? И почему сейчас это модно? Давайте
обсудим.
</p>
</div>
<div class="slider-blog__item">
<a class="slider-blog__item-link" href="#">
<h3 class="slider-blog__item-title">
АНИМИРОВАННЫЙ ЛОГОТИП – ТРЕНД ИЛИ НЕОБХОДИМОСТЬ?
</h3>
</a>
<p class="slider-blog__item-descr">
Что представляет собой анимированный логотип, и в чем его преимущества? И почему сейчас это модно? Давайте
обсудим.
</p>
</div>
<div class="slider-blog__item">
<a class="slider-blog__item-link" href="#">
<h3 class="slider-blog__item-title">
АНИМИРОВАННЫЙ ЛОГОТИП – ТРЕНД ИЛИ НЕОБХОДИМОСТЬ?
</h3>
</a>
<p class="slider-blog__item-descr">
Что представляет собой анимированный логотип, и в чем его преимущества? И почему сейчас это модно? Давайте
обсудим.
</p>
</div>
<div class="slider-blog__item">
<a class="slider-blog__item-link" href="#">
<h3 class="slider-blog__item-title">
АНИМИРОВАННЫЙ ЛОГОТИП – ТРЕНД ИЛИ НЕОБХОДИМОСТЬ?
</h3>
</a>
<p class="slider-blog__item-descr">
Что представляет собой анимированный логотип, и в чем его преимущества? И почему сейчас это модно? Давайте
обсудим.
</p>
</div>
<div class="slider-blog__item">
<a class="slider-blog__item-link" href="#">
<h3 class="slider-blog__item-title">
АНИМИРОВАННЫЙ ЛОГОТИП – ТРЕНД ИЛИ НЕОБХОДИМОСТЬ?
</h3>
</a>
<p class="slider-blog__item-descr">
Что представляет собой анимированный логотип, и в чем его преимущества? И почему сейчас это модно? Давайте
обсудим.
</p>
</div>
<div class="slider-blog__item">
<a class="slider-blog__item-link" href="#">
<h3 class="slider-blog__item-title">
АНИМИРОВАННЫЙ ЛОГОТИП – ТРЕНД ИЛИ НЕОБХОДИМОСТЬ?
</h3>
</a>
<p class="slider-blog__item-descr">
Что представляет собой анимированный логотип, и в чем его преимущества? И почему сейчас это модно? Давайте
обсудим.
</p>
</div>
</div>
</div>
</section>
<section class="team" id="team">
<div class="container">
<h2 class="title team__title">Our Team</h2>
<div class="team__items">
<div class="team__item">
<img src="images/team-1.jpg" alt="МАКС">
<h6 class="team__name">МАКС</h6>
<p class="team__position">CEO</p>
</div>
<div class="team__item">
<img src="images/team-2.jpg" alt="АНЯ">
<h6 class="team__name">АНЯ</h6>
<p class="team__position">Co-Founder</p>
</div>
<div class="team__item">
<img src="images/team-3.jpg" alt="МИЛА">
<h6 class="team__name">МИЛА</h6>
<p class="team__position">Designer</p>
</div>
</div>
</div>
</section>
<section class="pricing">
<div class="container">
<h2 class="title pricng__title">Pricing Plans</h2>
<div class="pricing__items">
<ul class="pricing__item">
<li class="pricing__item-name">Basic</li>
<li class="pricing__item-num"><sup>$</sup>290</li>
<li>1 Logo Design</li>
<li>1 Website Design</li>
<li>1 Domain Free</li>
<li>3 Month License</li>
<li>1 GB Storage</li>
<li>
<a class="pricing__item-link" href="#">
CHOOSE PLAN
</a>
</li>
</ul>
<ul class="pricing__item">
<li class="pricing__item-name">Starter</li>
<li class="pricing__item-num"><sup>$</sup>500</li>
<li>2 Logo Design</li>
<li>2 Website Design</li>
<li>1 Domain Free</li>
<li>6 Month License</li>
<li>1 GB Storage</li>
<li>
<a class="pricing__item-link" href="#">
CHOOSE PLAN
</a>
</li>
</ul>
<ul class="pricing__item">
<li class="pricing__item-name">Professional</li>
<li class="pricing__item-num"><sup>$</sup>1500</li>
<li>3 Logo Design</li>
<li>3 Website Design</li>
<li>2 Domain Free</li>
<li>12 Month License</li>
<li>2 GB Storage</li>
<li>
<a class="pricing__item-link" href="#">
CHOOSE PLAN
</a>
</li>
</ul>
</div>
</div>
</section>
<div class="clients">
<div class="container">
<ul class="clients__list">
<li><img src="images/clients/1.png" alt="client-1"></li>
<li><img src="images/clients/2.png" alt="client-2"></li>
<li><img src="images/clients/3.png" alt="client-3"></li>
<li><img src="images/clients/4.png" alt="client-4"></li>
<li><img src="images/clients/5.png" alt="client-5"></li>
</ul>
</div>
</div>
<section class="connection" id="contact">
<div class="container">
<h2 class="title connection__title">Get in Touch</h2>
<form class="form">
<input type="text" placeholder="ИМЯ">
<input type="text" placeholder="EMAIL">
<textarea placeholder="ВАШЕ СООБЩЕНИЕ"></textarea>
<button type="submit">ОТПРАВИТЬ</button>
</form>
</div>
</section>
<footer class="footer">
<div class="footer__top">
<a class="footer__logo" href="#">
<img src="images/logo-white.svg" alt="Логотип">
</a>
<ul class="footer__social">
<li class="footer__social-list">
<a class="footer__social-link" href="#">FACEBOOK</a>
</li>
<li class="footer__social-list">
<a class="footer__social-link" href="#">TWITTER</a>
</li>
<li class="footer__social-list">
<a class="footer__social-link" href="#">GOOGLE+</a>
</li>
<li class="footer__social-list">
<a class="footer__social-link" href="#">BEHANCE</a>
</li>
<li class="footer__social-list">
<a class="footer__social-link" href="#">DRIBBLE</a>
</li>
<li class="footer__social-list">
<a class="footer__social-link" href="#">INSTAGRAM</a>
</li>
</ul>
<div class="footer__contact">
<adress class="adress">
Украина, Харьков ул. Тобольская, 63
</adress>
<a class="phone" href="tel:+3806765252222">(38067) 65 252 222</a>
<a class="email" href="mailto:">[email protected]</a>
</div>
<a class="go-top" href="#body">
<img src="images/angle-up.svg" alt="arrow top">
</a>
</div>
<div class="footer__copy">
<p>@2020 O...Marketing</p>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script src="js/mixitup.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>