-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (118 loc) · 6.42 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
<!DOCTYPE html>
<html lang="uk">
<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 lang="en">WebStudio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.1.0/modern-normalize.min.css">
<link rel="stylesheet" href="./css/style.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Roboto:wght@400;500;700;900&display=swap"
rel="stylesheet">
</head>
<body>
<header class="border-header">
<div class="main-nav container ">
<nav class="site-nav">
<a href="./index.html" lang="en" class="logo">
<span>Web</span>Studio
</a>
<ul class="site-nav list">
<li class="item"><a href="./index.html" class="link current">Студія</a></li>
<li class="item"><a href="./portfolio.html" class="link">Портфоліо</a></li>
<li class="item"><a href="#" class="link">Контакти</a></li>
</ul>
</nav>
<ul class="site-nav site-nav-address list">
<li><a href="[email protected]" lang="en" class="contact-header link">[email protected]</a></li>
<li><a href="+380961111111" class="contact-header link">+38 096 111 11 11</a></li>
</ul>
</div>
</header>
<main>
<section class="hero hero-section">
<h1 class="hero-title">ЕФЕКТИВНІ РІШЕННЯ ДЛЯ <br /> ВАШОГО БІЗНЕСУ</h1>
<button type="button" class="primary-button">Замовити послугу</button>
</section>
<section class="section-benefits section">
<div class="container ">
<h2 class="visually-hidden">Наші переваги</h2>
<ul class="list benefits-box">
<li class="item-benefits">
<h3 class="benefits-title">УВАГА ДО ДЕТАЛЕЙ</h3>
<p class="benefits-text">Ідейні міркування, і навіть початок повсякденної роботи з формування позиції.</p>
</li>
<li class="item-benefits">
<h3 class="benefits-title">ПУНКТУАЛЬНІСТЬ</h3>
<p class="benefits-text">Завдання організації, особливо рамки і місце навчання кадрів тягне у себе.</p>
</li>
<li class="item-benefits">
<h3 class="benefits-title">ПЛАНУВАННЯ</h3>
<p class="benefits-text">Так само консультація з широким активом значною мірою зумовлює.</p>
</li>
<li class="item-benefits">
<h3 class="benefits-title">СУЧАСНІ ТЕХНОЛОГІЇ</h3>
<p class="benefits-text">Значимість цих проблем настільки очевидна, що реалізація планових завдань.</p>
</li>
</ul>
</div>
</section>
<section class="section-work section ">
<div class="container">
<h2 class="section-work-title">Чим ми займаємося</h2>
<ul class="list work-list">
<li><img src="./images/img1.jpg" alt="Чоловік працює за комп'ютером" width="370"></li>
<li><img src="./images/img2.jpg" alt="Чоловік розроблює мобільний додаток" width="370"></li>
<li><img src="./images/img3.jpg" alt="Чоловік на єкарні вибирає кольори" width="370"></li>
</ul>
</div>
</section>
<section class="section-team section ">
<div class="container">
<h2 class="team-title">Наша команда</h2>
<ul class="team-list list" >
<li class="team-item">
<img src="./images/our_team1.jpg" alt="Усміхнений бородань в окулярах" width="270">
<div class="team-item-box"> <h3 class="team-item-title">Ігор Дем'яненко</h3>
<p lang="en" class="team-item-text">Product Designer</p>
</div>
</li>
<li>
<img src="./images/our_team2.jpg" alt="Симпатична блондинка" width="270">
<div class="team-item-box"><h3 class="team-item-title">Ольга Рєпіна</h3>
<p lang="en" class="team-item-text">Frontend Developer</p>
</div>
</li>
<li>
<img src="./images/our_team3.jpg" alt="Уміхнений молодик" width="270">
<div class="team-item-box"> <h3 class="team-item-title">Микола Тарасов</h3>
<p lang="en" class="team-item-text">Marketing</p>
</div>
</li>
<li>
<img src="./images/our_team4.jpg" alt="Усміхнений чоловік в окулярах" width="270">
<div class="team-item-box"> <h3 class="team-item-title">Михайло Єрмаков</h3>
<p lang="en" class="team-item-text">UI Designer</p>
</div>
</li>
</ul>
</div>
</section>
</main>
<footer class="footer">
<div class="container footer-box">
<a href="./index.html" class="logo-footer"><span>Web</span>Studio</a>
<address>
<ul class="list footer-address">
<li><a href="https://goo.gl/maps/yWGTS1Bz9kSVneCBA" target="_blank" rel="noopener noreferrer nofollow"
class="address">м. Київ, пр-т Лесі Українки, 26</a></li>
<li><a href="[email protected]" lang="en" class="contact">[email protected]</a></li>
<li><a href="+380961111111" class="contact">+38 096 111 11 11</a></li>
</ul>
</address>
</div>
</footer>
</body>
</html>