-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
323 lines (262 loc) · 22.2 KB
/
index.html
File metadata and controls
323 lines (262 loc) · 22.2 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset ="UTF-8">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<div class="main">
<div class="container">
<header>
<img class ="logo" src="img\WD.png">
<nav>
<ul class = "nav_links">
<li><a href="#">Главная</a></li>
<li><a href="#">Об авторе</a></li>
<li><a href="#">Работы</a></li>
<li><a href="#">Процесс</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</header>
</div>
<div class="container">
<div class="header_under">
<div class="frame">
<img src="img\Frame.png">
</div>
<div class="main_text">
<h1>Дизайн и верстка</h1>
<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной
"рыбой" для текстов на латинице с начала XVI века.</p>
<button class="button1">Написать мне</button>
</div>
</div>
</div>
</div>
<div class="about">
<div class="container">
<div class="about_text">
<h1>Обо мне</h1>
<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати
и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
</div>
</div>
</div>
<div class="projects_info">
<div class="container">
<div class="projects">
<div class="project_item">
<div>
<img src="img/pr_item.png">
</div>
<div class="item_text">
<h1>40+</h1>
<p>проектов</p>
</div>
</div>
<div class="project_item">
<div>
<img src="img/pr_item.png">
</div>
<div class="item_text">
<h1>40+</h1>
<p>проектов</p>
</div>
</div>
<div class="project_item">
<div>
<img src="img/pr_item.png">
</div>
<div class="item_text">
<h1>40+</h1>
<p>проектов</p>
</div>
</div>
<div class="project_item">
<div>
<img src="img/pr_item.png">
</div>
<div class="item_text">
<h1>40+</h1>
<p>проектов</p>
</div>
</div>
<div class="project_item">
<div>
<img src="img/pr_item.png">
</div>
<div class="item_text">
<h1>40+</h1>
<p>проектов</p>
</div>
</div>
<div class="project_item">
<div>
<img src="img/pr_item.png">
</div>
<div class="item_text">
<h1>40+</h1>
<p>проектов</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="skills">
<div class="container">
<div class ="items">
<div class="skills_bar">
<h1>Мои навыки</h1>
<div class ="progress_bar">
<p>Adobe Photoshop</p>
<div class="border">
<div class="border-grey" style="height:4px;width:350px;background-color:#34547A;"></div>
</div>
</div>
<div class ="progress_bar">
<p>Adobe Photoshop</p>
<div class="border">
<div class="border-grey" style="height:4px;width:350px;background-color:#34547A;"></div>
</div>
</div>
<div class ="progress_bar">
<p>Adobe Photoshop</p>
<div class="border">
<div class="border-grey" style="height:4px;width:350px;background-color:grey;background: #34547A;"></div>
</div>
</div>
</div>
<img src="img/me.png">
</div>
</div>
</div>
<div class="video_section">
<div class="container">
<div class="video_items">
<h1>Как я работаю</h1>
<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
<img src = "img\network.png" class="img1">
<img src = "img\play-button.png" class="img2">
</div>
</div>
</div>
<div class="working">
<div class="working_item">
<img src="img/Rectangle 7.png" class="working_img" alt="img">
<div class="view">
<svg width="100" height="58" viewBox="0 0 100 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M86.2534 15.4207C66.1706 -4.66205 33.4966 -4.66205 13.4139 15.4207L0 28.8329L13.7466 42.5795C23.7872 52.62 36.9764 57.642 50.1672 57.642C63.3581 57.642 76.5456 52.6217 86.5878 42.5795L100.002 29.1657L86.2534 15.4207ZM84.1976 40.191C65.4324 58.9545 34.9003 58.9545 16.1351 40.191L4.77703 28.8329L15.8024 17.8075C34.5676 -0.955968 65.0997 -0.955968 83.8649 17.8075L95.223 29.1657L84.1976 40.191Z" fill="white"/>
<path d="M48.2635 15.436C41.7432 15.436 36.4392 20.7401 36.4392 27.2604C36.4392 28.1928 37.1959 28.9496 38.1284 28.9496C39.0608 28.9496 39.8176 28.1928 39.8176 27.2604C39.8176 22.6033 43.6064 18.8144 48.2635 18.8144C49.1959 18.8144 49.9527 18.0577 49.9527 17.1252C49.9527 16.1928 49.1976 15.436 48.2635 15.436Z" fill="white"/>
<path d="M49.9527 6.98999C37.8446 6.98999 27.9932 16.8413 27.9932 28.9494C27.9932 41.0576 37.8446 50.9089 49.9527 50.9089C62.0608 50.9089 71.9121 41.0576 71.9121 28.9494C71.9121 16.8413 62.0625 6.98999 49.9527 6.98999ZM49.9527 47.5305C39.7078 47.5305 31.3716 39.1944 31.3716 28.9494C31.3716 18.7045 39.7078 10.3684 49.9527 10.3684C60.1976 10.3684 68.5338 18.7045 68.5338 28.9494C68.5338 39.1944 60.1993 47.5305 49.9527 47.5305Z" fill="white"/>
</svg>
</div>
</div>
<div class="working_item">
<img src="img/Rectangle 7.3.png" class="working_img" alt="img">
<div class="view">
<svg width="100" height="58" viewBox="0 0 100 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M86.2534 15.4207C66.1706 -4.66205 33.4966 -4.66205 13.4139 15.4207L0 28.8329L13.7466 42.5795C23.7872 52.62 36.9764 57.642 50.1672 57.642C63.3581 57.642 76.5456 52.6217 86.5878 42.5795L100.002 29.1657L86.2534 15.4207ZM84.1976 40.191C65.4324 58.9545 34.9003 58.9545 16.1351 40.191L4.77703 28.8329L15.8024 17.8075C34.5676 -0.955968 65.0997 -0.955968 83.8649 17.8075L95.223 29.1657L84.1976 40.191Z" fill="white"/>
<path d="M48.2635 15.436C41.7432 15.436 36.4392 20.7401 36.4392 27.2604C36.4392 28.1928 37.1959 28.9496 38.1284 28.9496C39.0608 28.9496 39.8176 28.1928 39.8176 27.2604C39.8176 22.6033 43.6064 18.8144 48.2635 18.8144C49.1959 18.8144 49.9527 18.0577 49.9527 17.1252C49.9527 16.1928 49.1976 15.436 48.2635 15.436Z" fill="white"/>
<path d="M49.9527 6.98999C37.8446 6.98999 27.9932 16.8413 27.9932 28.9494C27.9932 41.0576 37.8446 50.9089 49.9527 50.9089C62.0608 50.9089 71.9121 41.0576 71.9121 28.9494C71.9121 16.8413 62.0625 6.98999 49.9527 6.98999ZM49.9527 47.5305C39.7078 47.5305 31.3716 39.1944 31.3716 28.9494C31.3716 18.7045 39.7078 10.3684 49.9527 10.3684C60.1976 10.3684 68.5338 18.7045 68.5338 28.9494C68.5338 39.1944 60.1993 47.5305 49.9527 47.5305Z" fill="white"/>
</svg>
</div>
</div>
<div class="working_item">
<img src="img/Rectangle 7.png" class="working_img" alt="img">
<div class="view">
<svg width="100" height="58" viewBox="0 0 100 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M86.2534 15.4207C66.1706 -4.66205 33.4966 -4.66205 13.4139 15.4207L0 28.8329L13.7466 42.5795C23.7872 52.62 36.9764 57.642 50.1672 57.642C63.3581 57.642 76.5456 52.6217 86.5878 42.5795L100.002 29.1657L86.2534 15.4207ZM84.1976 40.191C65.4324 58.9545 34.9003 58.9545 16.1351 40.191L4.77703 28.8329L15.8024 17.8075C34.5676 -0.955968 65.0997 -0.955968 83.8649 17.8075L95.223 29.1657L84.1976 40.191Z" fill="white"/>
<path d="M48.2635 15.436C41.7432 15.436 36.4392 20.7401 36.4392 27.2604C36.4392 28.1928 37.1959 28.9496 38.1284 28.9496C39.0608 28.9496 39.8176 28.1928 39.8176 27.2604C39.8176 22.6033 43.6064 18.8144 48.2635 18.8144C49.1959 18.8144 49.9527 18.0577 49.9527 17.1252C49.9527 16.1928 49.1976 15.436 48.2635 15.436Z" fill="white"/>
<path d="M49.9527 6.98999C37.8446 6.98999 27.9932 16.8413 27.9932 28.9494C27.9932 41.0576 37.8446 50.9089 49.9527 50.9089C62.0608 50.9089 71.9121 41.0576 71.9121 28.9494C71.9121 16.8413 62.0625 6.98999 49.9527 6.98999ZM49.9527 47.5305C39.7078 47.5305 31.3716 39.1944 31.3716 28.9494C31.3716 18.7045 39.7078 10.3684 49.9527 10.3684C60.1976 10.3684 68.5338 18.7045 68.5338 28.9494C68.5338 39.1944 60.1993 47.5305 49.9527 47.5305Z" fill="white"/>
</svg>
</div>
</div>
<div class="working_item">
<img src="img/Rectangle 7.3.png" class="working_img" alt="img">
<div class="view">
<svg width="100" height="58" viewBox="0 0 100 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M86.2534 15.4207C66.1706 -4.66205 33.4966 -4.66205 13.4139 15.4207L0 28.8329L13.7466 42.5795C23.7872 52.62 36.9764 57.642 50.1672 57.642C63.3581 57.642 76.5456 52.6217 86.5878 42.5795L100.002 29.1657L86.2534 15.4207ZM84.1976 40.191C65.4324 58.9545 34.9003 58.9545 16.1351 40.191L4.77703 28.8329L15.8024 17.8075C34.5676 -0.955968 65.0997 -0.955968 83.8649 17.8075L95.223 29.1657L84.1976 40.191Z" fill="white"/>
<path d="M48.2635 15.436C41.7432 15.436 36.4392 20.7401 36.4392 27.2604C36.4392 28.1928 37.1959 28.9496 38.1284 28.9496C39.0608 28.9496 39.8176 28.1928 39.8176 27.2604C39.8176 22.6033 43.6064 18.8144 48.2635 18.8144C49.1959 18.8144 49.9527 18.0577 49.9527 17.1252C49.9527 16.1928 49.1976 15.436 48.2635 15.436Z" fill="white"/>
<path d="M49.9527 6.98999C37.8446 6.98999 27.9932 16.8413 27.9932 28.9494C27.9932 41.0576 37.8446 50.9089 49.9527 50.9089C62.0608 50.9089 71.9121 41.0576 71.9121 28.9494C71.9121 16.8413 62.0625 6.98999 49.9527 6.98999ZM49.9527 47.5305C39.7078 47.5305 31.3716 39.1944 31.3716 28.9494C31.3716 18.7045 39.7078 10.3684 49.9527 10.3684C60.1976 10.3684 68.5338 18.7045 68.5338 28.9494C68.5338 39.1944 60.1993 47.5305 49.9527 47.5305Z" fill="white"/>
</svg>
</div>
</div>
<div class="working_item">
<img src="img/Rectangle 7.png" class="working_img" alt="img">
<div class="view">
<svg width="100" height="58" viewBox="0 0 100 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M86.2534 15.4207C66.1706 -4.66205 33.4966 -4.66205 13.4139 15.4207L0 28.8329L13.7466 42.5795C23.7872 52.62 36.9764 57.642 50.1672 57.642C63.3581 57.642 76.5456 52.6217 86.5878 42.5795L100.002 29.1657L86.2534 15.4207ZM84.1976 40.191C65.4324 58.9545 34.9003 58.9545 16.1351 40.191L4.77703 28.8329L15.8024 17.8075C34.5676 -0.955968 65.0997 -0.955968 83.8649 17.8075L95.223 29.1657L84.1976 40.191Z" fill="white"/>
<path d="M48.2635 15.436C41.7432 15.436 36.4392 20.7401 36.4392 27.2604C36.4392 28.1928 37.1959 28.9496 38.1284 28.9496C39.0608 28.9496 39.8176 28.1928 39.8176 27.2604C39.8176 22.6033 43.6064 18.8144 48.2635 18.8144C49.1959 18.8144 49.9527 18.0577 49.9527 17.1252C49.9527 16.1928 49.1976 15.436 48.2635 15.436Z" fill="white"/>
<path d="M49.9527 6.98999C37.8446 6.98999 27.9932 16.8413 27.9932 28.9494C27.9932 41.0576 37.8446 50.9089 49.9527 50.9089C62.0608 50.9089 71.9121 41.0576 71.9121 28.9494C71.9121 16.8413 62.0625 6.98999 49.9527 6.98999ZM49.9527 47.5305C39.7078 47.5305 31.3716 39.1944 31.3716 28.9494C31.3716 18.7045 39.7078 10.3684 49.9527 10.3684C60.1976 10.3684 68.5338 18.7045 68.5338 28.9494C68.5338 39.1944 60.1993 47.5305 49.9527 47.5305Z" fill="white"/>
</svg>
</div>
</div>
<div class="working_item">
<img src="img/Rectangle 7.3.png" class="working_img" alt="img">
<div class="view">
<svg width="100" height="58" viewBox="0 0 100 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M86.2534 15.4207C66.1706 -4.66205 33.4966 -4.66205 13.4139 15.4207L0 28.8329L13.7466 42.5795C23.7872 52.62 36.9764 57.642 50.1672 57.642C63.3581 57.642 76.5456 52.6217 86.5878 42.5795L100.002 29.1657L86.2534 15.4207ZM84.1976 40.191C65.4324 58.9545 34.9003 58.9545 16.1351 40.191L4.77703 28.8329L15.8024 17.8075C34.5676 -0.955968 65.0997 -0.955968 83.8649 17.8075L95.223 29.1657L84.1976 40.191Z" fill="white"/>
<path d="M48.2635 15.436C41.7432 15.436 36.4392 20.7401 36.4392 27.2604C36.4392 28.1928 37.1959 28.9496 38.1284 28.9496C39.0608 28.9496 39.8176 28.1928 39.8176 27.2604C39.8176 22.6033 43.6064 18.8144 48.2635 18.8144C49.1959 18.8144 49.9527 18.0577 49.9527 17.1252C49.9527 16.1928 49.1976 15.436 48.2635 15.436Z" fill="white"/>
<path d="M49.9527 6.98999C37.8446 6.98999 27.9932 16.8413 27.9932 28.9494C27.9932 41.0576 37.8446 50.9089 49.9527 50.9089C62.0608 50.9089 71.9121 41.0576 71.9121 28.9494C71.9121 16.8413 62.0625 6.98999 49.9527 6.98999ZM49.9527 47.5305C39.7078 47.5305 31.3716 39.1944 31.3716 28.9494C31.3716 18.7045 39.7078 10.3684 49.9527 10.3684C60.1976 10.3684 68.5338 18.7045 68.5338 28.9494C68.5338 39.1944 60.1993 47.5305 49.9527 47.5305Z" fill="white"/>
</svg>
</div>
</div>
<div class="working_item">
<img src="img/Rectangle 7.png" class="working_img" alt="img">
<div class="view">
<svg width="100" height="58" viewBox="0 0 100 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M86.2534 15.4207C66.1706 -4.66205 33.4966 -4.66205 13.4139 15.4207L0 28.8329L13.7466 42.5795C23.7872 52.62 36.9764 57.642 50.1672 57.642C63.3581 57.642 76.5456 52.6217 86.5878 42.5795L100.002 29.1657L86.2534 15.4207ZM84.1976 40.191C65.4324 58.9545 34.9003 58.9545 16.1351 40.191L4.77703 28.8329L15.8024 17.8075C34.5676 -0.955968 65.0997 -0.955968 83.8649 17.8075L95.223 29.1657L84.1976 40.191Z" fill="white"/>
<path d="M48.2635 15.436C41.7432 15.436 36.4392 20.7401 36.4392 27.2604C36.4392 28.1928 37.1959 28.9496 38.1284 28.9496C39.0608 28.9496 39.8176 28.1928 39.8176 27.2604C39.8176 22.6033 43.6064 18.8144 48.2635 18.8144C49.1959 18.8144 49.9527 18.0577 49.9527 17.1252C49.9527 16.1928 49.1976 15.436 48.2635 15.436Z" fill="white"/>
<path d="M49.9527 6.98999C37.8446 6.98999 27.9932 16.8413 27.9932 28.9494C27.9932 41.0576 37.8446 50.9089 49.9527 50.9089C62.0608 50.9089 71.9121 41.0576 71.9121 28.9494C71.9121 16.8413 62.0625 6.98999 49.9527 6.98999ZM49.9527 47.5305C39.7078 47.5305 31.3716 39.1944 31.3716 28.9494C31.3716 18.7045 39.7078 10.3684 49.9527 10.3684C60.1976 10.3684 68.5338 18.7045 68.5338 28.9494C68.5338 39.1944 60.1993 47.5305 49.9527 47.5305Z" fill="white"/>
</svg>
</div>
</div>
<div class="working_item">
<img src="img/Rectangle 7.3.png" class="working_img" alt="img">
<div class="view">
<svg width="100" height="58" viewBox="0 0 100 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M86.2534 15.4207C66.1706 -4.66205 33.4966 -4.66205 13.4139 15.4207L0 28.8329L13.7466 42.5795C23.7872 52.62 36.9764 57.642 50.1672 57.642C63.3581 57.642 76.5456 52.6217 86.5878 42.5795L100.002 29.1657L86.2534 15.4207ZM84.1976 40.191C65.4324 58.9545 34.9003 58.9545 16.1351 40.191L4.77703 28.8329L15.8024 17.8075C34.5676 -0.955968 65.0997 -0.955968 83.8649 17.8075L95.223 29.1657L84.1976 40.191Z" fill="white"/>
<path d="M48.2635 15.436C41.7432 15.436 36.4392 20.7401 36.4392 27.2604C36.4392 28.1928 37.1959 28.9496 38.1284 28.9496C39.0608 28.9496 39.8176 28.1928 39.8176 27.2604C39.8176 22.6033 43.6064 18.8144 48.2635 18.8144C49.1959 18.8144 49.9527 18.0577 49.9527 17.1252C49.9527 16.1928 49.1976 15.436 48.2635 15.436Z" fill="white"/>
<path d="M49.9527 6.98999C37.8446 6.98999 27.9932 16.8413 27.9932 28.9494C27.9932 41.0576 37.8446 50.9089 49.9527 50.9089C62.0608 50.9089 71.9121 41.0576 71.9121 28.9494C71.9121 16.8413 62.0625 6.98999 49.9527 6.98999ZM49.9527 47.5305C39.7078 47.5305 31.3716 39.1944 31.3716 28.9494C31.3716 18.7045 39.7078 10.3684 49.9527 10.3684C60.1976 10.3684 68.5338 18.7045 68.5338 28.9494C68.5338 39.1944 60.1993 47.5305 49.9527 47.5305Z" fill="white"/>
</svg>
</div>
</div>
</div>
<div class = "clients">
<div class="container">
<div class="clients_item">
<img src="img/Rectangle 9.1.png">
<img src="img/Rectangle 9.1.png">
<img src="img/Rectangle 9.1.png">
<img src="img/Rectangle 9.1.png">
</div>
</div>
</div>
<div class="form_rectangle">
<h1>Хотите веб-сайт?</h1>
<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
<div id="form">
<form>
<input type="text" placeholder="Ваше имя" class="name">
<input type="text" placeholder="Ваш email" class="email">
<input type="message" placeholder="Сообщение" class="message">
</form>
</div>
<button type="submit" class="submit">Отправить</button>
</div>
<footer>
<div class="container">
<div class="footer_items">
<div class="footer_text">
<h1>Иванов Иван</h1>
<p>(с) 2018. Все права защищены.</p>
</div>
<img src="img/footer__soc-buttons.png">
</div>
</div>
</footer>
</body>
</html>