-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
144 lines (123 loc) · 6.04 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="normalize.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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Simple Site</title>
</head>
<body class="body">
<header class="header header--left">
<div class="container container--header">
<nav class="nav-bar">
<ol class="nav-bar__list">
<li class="nav-bar__item">
<a href="" class="nav-bar__link nav-bar__link--active">ГЛАВНАЯ</a>
</li>
<li class="nav-bar__item">
<a href="" class="nav-bar__link">ОБ АВТОРЕ</a>
</li>
<li class="nav-bar__item">
<a href="" class="nav-bar__link">РАБОТЫ</a>
</li>
<li class="nav-bar__item">
<a href="" class="nav-bar__link">ПРОЦЕСС</a>
</li>
<li class="nav-bar__item">
<a href="" class="nav-bar__link">КОНТАКТЫ</a>
</li>
</ol>
</nav>
<div class="content">
<h1 class="content__title">Дизайн и верстка</h1>
<p class="content__description">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem
Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
<a href="" class="content__link">НАПИСАТЬ МНЕ</a>
</div>
</div>
</header>
<main>
<section class="about secondary-content">
<div class="container container--centered">
<h2 class="about__title secondary-content__title">Обо мне</h2>
<p class="about__description secondary-content__description">Lorem Ipsum - это текст-"рыба", часто используемый
в печати и
вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
</div>
</section>
<section class="projects">
<div class="container">
<h2 class="projects__title visually-hidden">Projects</h2>
<ol class="projects-list">
<li class="projects-item">
<img src="images/project.svg" alt="project icon" class="projects-item__icon">
<div class="projects-item__description">
<span class="projects-item__description-number">40+</span>
<span class="projects-item__description-text">проектов</span>
</div>
</li>
<li class="projects-item">
<img src="images/project.svg" alt="project icon" class="projects-item__icon">
<div class="projects-item__description">
<span class="projects-item__description-number">40+</span>
<span class="projects-item__description-text">проектов</span>
</div>
</li>
<li class="projects-item">
<img src="images/project.svg" alt="project icon" class="projects-item__icon">
<div class="projects-item__description">
<span class="projects-item__description-number">40+</span>
<span class="projects-item__description-text">проектов</span>
</div>
</li>
<li class="projects-item">
<img src="images/project.svg" alt="project icon" class="projects-item__icon">
<div class="projects-item__description">
<span class="projects-item__description-number">40+</span>
<span class="projects-item__description-text">проектов</span>
</div>
</li>
<li class="projects-item">
<img src="images/project.svg" alt="project icon" class="projects-item__icon">
<div class="projects-item__description">
<span class="projects-item__description-number">40+</span>
<span class="projects-item__description-text">проектов</span>
</div>
</li>
<li class="projects-item">
<img src="images/project.svg" alt="project icon" class="projects-item__icon">
<div class="projects-item__description">
<span class="projects-item__description-number">40+</span>
<span class="projects-item__description-text">проектов</span>
</div>
</li>
</ol>
</div>
</section>
<section class="process secondary-content">
<div class="container container--centered">
<h2 class="process__title secondary-content__title">Как я работаю</h2>
<p class="process__description secondary-content__description">Lorem Ipsum - это текст-"рыба", часто
используемый в печати и
вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
<div class="process__video secondary-content__video"><iframe width="1110" height="600"
src="https://www.youtube.com/embed/TIaH7sqnbyA?si=1fMYArJ1qtasJAZD" title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen class></iframe></div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<h3 class="footer__author-title">Иванов Иван</h3>
<p class="footer__copyright-info">(с) 2018. Все права защищены.</p>
</div>
</footer>
</body>
</html>