-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
154 lines (146 loc) · 8.26 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
<!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>Document</title>
<!-- Fonts start -->
<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">
<!-- Fonts end -->
<!-- Normalize styles start-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/modern-normalize.min.css">
<!-- Normalize styles end-->
<!-- Custom styles start -->
<link rel="stylesheet" href="./css/styles.css">
<!-- Custom styles end -->
</head>
<body>
<header class="header">
<div class="container header-container">
<nav class="header-nav">
<a class="logo link" href="/">Web<span class="logo-top">Studio</span>
</a>
<ul class="nav-list list">
<li class="nav-list-item">
<a class="nav-link current link" href="./index.html">Студія</a>
</li>
<li class="nav-list-item">
<a class="nav-link link" href="./portfolio.html">Портфоліо</a>
</li>
<li class="nav-list-item">
<a class="nav-link link" href="">Контакти</a>
</li>
</ul>
</nav>
<ul class="contacts-list list">
<li class="contacts-list-item">
<a class="contacts-link link" href="mailto:[email protected]">[email protected]</a>
</li>
<li class="contacts-list-item">
<a class="contacts-link link" href="tel:+380961111111">+38 096 111 11 11</a>
</li>
</ul>
</div>
</header>
<main>
<!--Hero-->
<section class="hero">
<div class="container hero-container">
<h1 class="hero-title">Ефективні рішення для вашого бізнесу</h1>
<button class="hero-button" type="button">Замовити послугу</button>
</div>
</section>
<!-- Peculiarities -->
<section class="features section">
<div class="container features-container">
<!--Заголовок Особливості сховати при форматуванні стилів-->
<h2 class="features-title visually-hidden">Особливості</h2>
<ul class="features-list list">
<li class="features-list-item">
<h3 class="features-list-title">УВАГА ДО ДЕТАЛЕЙ</h3>
<p class="feature-definition">Ідейні міркування, і навіть початок повсякденної роботи з формування позиції.</p>
</li>
<li class="features-list-item">
<h3 class="features-list-title">ПУНКТУАЛЬНІСТЬ</h3>
<p class="feature-definition">Завдання організації, особливо рамки і місце навчання кадрів тягне у себе.</p>
</li>
<li class="features-list-item">
<h3 class="features-list-title">ПЛАНУВАННЯ</h3>
<p class="feature-definition">Так само консультація з широким активом значною мірою зумовлює.</p>
</li>
<li class="features-list-item">
<h3 class="features-list-title">СУЧАСНІ ТЕХНОЛОГІЇ</h3>
<p class="feature-definition">Значимість цих проблем настільки очевидна, що реалізація планових завдань.</p>
</li>
</ul>
</div>
</section>
<!--Activities-->
<section class="activities section">
<div class="container activities-container">
<h2 class="activities-title">Чим ми займаємося</h2>
<ul class="activities-list list">
<li class="activities-list-item">
<img class="activities-img" src="./images/box_1.jpg" alt="Планшет и клавиатура" width="370">
</li>
<li class="activities-list-item">
<img class="activities-img" src="./images/box_2.jpg" alt="Ноутбук и смартфон" width="370">
</li>
<li class="activities-list-item">
<img class="activities-img" src="./images/box_3.jpg" alt="Планшет, стилус и мышь" width="370">
</li>
</ul>
</div>
</section>
<!--Our Team-->
<section class="team section">
<div class="container team-container">
<h2 class="team-title">Наша команда</h2>
<ul class="team-list list">
<li class="team-list-item">
<img class="team-list-img" src="./images/team_1.jpg" alt="Product Designer" width="270">
<h3 class="team-list-title">Ігор Дем'яненко</h3>
<p class="team-list-text"><span lang="en">Product Designer</span></p>
</li>
<li class="team-list-item">
<img class="team-list-img" src="./images/team_2.jpg" alt="Frontend Developer" width="270">
<h3 class="team-list-title">Ольга Рєпіна</h3>
<p class="team-list-text"><span lang="en">Frontend Developer</span></p>
</li>
<li class="team-list-item">
<img class="team-list-img" src="./images/team_3.jpg" alt="Marketing" width="270">
<h3 class="team-list-title">Микола Тарасов</h3>
<p class="team-list-text"><span lang="en">Marketing</span></p>
</li>
<li class="team-list-item">
<img class="team-list-img" src="./images/team_4.jpg" alt="UI Designer" width="270">
<h3 class="team-list-title">Михайло Єрмаков</h3>
<p class="team-list-text"><span lang="en">UI Designer</span></p>
</li>
</ul>
</div>
</section>
</main>
<footer class="footer">
<div class="container footer-container">
<a class="logo link" href="/">Web<span class="logo-down">Studio</span>
</a>
<address class="address">
<p class="address-text">м. Київ, пр-т Лесі Українки, 26</p>
<ul class="address-contacts list">
<li class="address-item">
<a class="address-link link" href="mailto:[email protected]">[email protected]</a><br>
</li>
<li>
<a class="address-link link" href="tel:+380991111111">+38 099 111 11 11</a>
</li>
</ul>
</address>
</div>
</footer>
</body>
</html>