-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
377 lines (366 loc) · 21.9 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
<!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">
<link rel="shortcut icon" href="favicon-a.ico" type="image/x-icon">
<link rel="icon" href="favicon-a.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style-popup.css">
<title>Портфолио Герасимов Александр</title>
</head>
<body class="page light-theme">
<div class="wrapper ">
<header class="page-header">
<div class="container-header">
<p class="dev">Front-End Developer</p>
<button class="theme-button" type="button">Изменить тему</button>
<div class="contacts">
<a class="header-email" href="mailto:[email protected]">[email protected]</a>
<a class="header-phone" href="tel:+375293096030">+375 29 309 60 30</a>
</div>
</div>
</header>
<main class="main">
<section class="hero-image">
<div class="container">
<h1 class="heading">Герасимов Александр</h1>
</div>
</section>
<section class="intro">
<div class="container">
<h2 class="subheading">Давайте познакомимся</h2>
<div class="family">
<figure class="user-image">
<img src="files/family.png" width="430" height="500" alt="Фотография меня с моей семьёй">
<figcaption class="user">
Это я, <b>Александр</b> и моя семья: <br>жена <b>Виктория 💗</b>, сын <b>Владислав 💙</b>, дочь <b>Анна 💝</b>
</figcaption>
</figure>
</div>
<h3>Чем могу быть полезен</h3>
<p>Могу верстать, могу не верстать, могу заставить верстать других.</p>
<div class="skills">
<h2 class="subheading">Мои навыки</h3>
<dl class="skills-list">
<dt class="skill-html">HTML
<em>skills level</em>
</dt>
<dd class="level">
<div style="width: 90%">90%</div>
</dd>
<dt class="skill-css">CSS
<em>skills level</em>
</dt>
<dd class="level">
<div style="width: 80%">80%</div>
</dd>
<dt class="skill-js">JS
<em>skills level</em>
</dt>
<dd class="level">
<div style="width: 60%">60%</div>
</dd>
</dl>
</div>
</div>
</section>
<section class="project">
<div class="sidebar">
<nav class="sidebar-menu">
<h3 class="menu-title">Навигация</h3>
<ul class="sidebar-list">
<li>
<div class="effect-2">
<a href="source/project-gloevk/index.html">Мой первый сайт</a>
</div>
</li>
<li>
<div class="effect-1">
<a href="source/laptop/index.html" class="sidebar-link">Ремонт ноутбуков</a>
</div>
</li>
<li>
<div class="effect-2">
<a href="source/card_visit/Untitled-1.html">Визитная карточка</a>
</div>
</li>
<li>
<div class="effect-1">
<a href="source/my_site_new/index.html" class="sidebar-link">Мой новый сайт</a>
</div>
</li>
<li>
<div class="effect-2">
<a href="source/blog_about_learning/index.html">Блог верстальщика</a>
</div>
</li>
<li>
<div class="effect-1">
<a href="source/cat_energy/main-page.html" class="sidebar-link"> Сайт Cat Energy</a>
</div>
</li>
<li>
<div class="effect-2">
<a href="source/premium_cars_rental/index.html">Сайт аренда авто</a>
</div>
</li>
<li>
<div class="effect-1">
<a href="source/kvast/index.html" class="sidebar-link">Сайт Кваст</a>
</div>
</li>
<li>
<div class="effect-2">
<a href="source/keksby_final/index.html"> Сайт Keksby</a>
</div>
</li>
<li>
<div class="effect-1">
<a href="source/botanika/index.html" class="sidebar-link">Сайт Botanika</a>
</div>
</li>
<li>
<div class="effect-2">
<a href="source/scandi/index.html">Сайт SKANDI</a>
</div>
</li>
<li>
<div class="effect-1">
<a href="source/barbershop/index.html" class="sidebar-link">Сайт Барбершоп</a>
</div>
</li>
<li>
<div class="effect-2">
<a href="source/course_html_1/index.html">Course HTML 1</a>
</div>
</li>
<li>
<div class="effect-1">
<a href="source/course_html_2/build/index.html" class="sidebar-link"> Course HTML 2</a>
</div>
</li>
<li>
<div class="effect-2">
<a href="source/course_js_1/index.html"> Course JS 1</a>
</div>
</li>
</ul>
<div class="text">
<p class="sidebar-text">Почти все свои знания в области разработки я получил обучаясь в </p>
<div class="effect-3">
<a class="academy" href="https://htmlacademy.ru/study" data-hover="HTML Academy">HTML Academy</a>
</div>
<p class="sidebar-text">Cейчас я продолжаю осваивать свою новую профессию «Фронтенд-разработчик».</p>
<p class="sidebar-text">Благодарю всю команду Академии за огромную проделанную работу!!! </p>
</div>
</nav>
</div>
<div class=" content content-gallery gallery">
<h2 class="subheading">Мои работы</h2>
<h3 class="gallery-title">Галерея</h3>
<div class="gallery-items">
<div class="gallery-item gallery-item-big">
<img src="img/gallery/gloevk.jpg" width="500" height="500" alt="Cайт магазина товаров для дома">
</div>
<div class="gallery-item">
<img src="img/gallery/blog.jpg" width="500" height="500" alt="Cайт начинающего верстальщика">
</div>
<div class="gallery-item">
<img src="img/gallery/botanika.jpg" width="500" height="500" alt="Cайт магазина цветов">
</div>
<div class="gallery-item">
<img src="img/gallery/keksby.jpg" width="500" height="500" alt="Cайт магазина товаров для котов">
</div>
<div class="gallery-item">
<img src="img/gallery/kvast.jpg" width="500" height="500" alt="Cайт магазина кваса">
</div>
<div class="gallery-item">
<img src="img/gallery/premium-cars-rental.jpg" width="500" height="500" alt="Cайт аренды автомобилей">
</div>
<div class="gallery-item">
<img src="img/gallery/barbershop.jpg" width="500" height="500" alt="Cайт барбершопа">
</div>
<div class="gallery-item gallery-item-big">
<img src="img/gallery/sedona.jpg" width="500" height="500" alt="Cайт гостиниц в Седоне">
</div>
<div class="gallery-item">
<img src="img/gallery/scandi.jpg" width="500" height="500" alt="Cайт услуги дизайна">
</div>
<div class="gallery-item gallery-item-big">
<img src="img/gallery/cat-energy.jpg" width="500" height="500" alt="Cайт Функциональное питание для котов">
<a class="gallery-item__button button-show" href="popup_cat_energy.html">Показать подробности</a>
</div>
<div class="gallery-item gallery-item-big">
<img src="img/gallery/kekstagram.png" width="500" height="500" alt="Cайт Кекстаграм">
<a class="gallery-item__button" href="/source/course_js_1/index.html">Keksogram</a>
</div>
</div>
</div>
</section>
<section class="popup">
<h2 class="visually-hidden">Техническое задание проета Cat Energy</h2>
<div class="popup__content">
<div class="up-project">
<div class="up-project__info">
<h3 class="up-project__caption">Техническое задание</h3>
<div class="up-project__specification text-container text-container--module text-container--specification">
<h3 class="visually-hidden">Техническое задание</h3>
<h4>1. Общие технические требования</h4>
<ul>
<li>1.1. Сетка: определена в макете.</li>
<li>1.2. Адаптивность сетки: мобильная, планшетная и десктопная версии («фикс» или «резина»).</li>
<li>1.3. Адаптивность графики: ретинизация, векторные изображения.</li>
<li>1.4. Используемая методология: БЭМ.</li>
<li>1.5. Используемый препроцессор: Less или Sass.</li>
<li>1.6. Используемый инструмент автоматизации: Gulp.</li>
<li>1.7. Используемые библиотеки: нет.</li>
<li>1.8. Кроссбраузерность: Chrome, Firefox, Safari.</li>
<li>1.9. Типографика: частично определена в макете (прочее — наусмотрение разработчика).</li>
<li>1.10. Используемый шрифт: Oswald, Arial.</li>
</ul>
<h4>2. Пояснения для учащихся</h4>
<ul>
<li>2.1. Обязательными к вёрстке являются все 3 страницы (главная страница, страница с формой, страница каталога).</li>
<li>2.2. Макеты верстаются постепенно: сначала мобильная версия, далее от мобильной версии к планшетной, а затем и к десктопной.</li>
</ul>
<h3 class="visually-hidden">Требования к поведению блоков</h3>
<h4>3. Все макеты</h4>
<ul>
<li>3.1. Между версиями (мобильная, планшетная, десктопная) сетка может быть как резиновой, так и фиксированной.</li>
<li>3.2. При фиксированной сетке контентная область центруется и не может быть уже макетной ширины. Фоны, которые упираются в края макета должны тянуться на всю страницу.</li>
<li>3.3. Логотип на внутренних страницах — это ссылка на главную страницу.</li>
<li>3.4. Мобильное меню может быть реализовано двумя способами:
<ol>
<li>* реализация без JS;</li>
<li>* реализация с использованием JS.</li>
</ol>
</li>
<li>3.5. При реализации без использования JS главное меню в мобильной версии должно быть открыто, а иконка с крестиком — скрыта. Должны быть предусмотрены классы для скрытого и открытого состояний меню.</li>
<li>3.6. При реализации с использованием JS блок с главным меню в мобильной версии должен открываться при нажатии на иконку «гамбургера». Когда меню открыто, иконка «гамбургера» заменяется на крестик. При нажатии на иконку с крестиком меню закрывается.</li>
<li>3.7. Все состояния элементов при наведении и нажатии указаны в стайлгайде. Состояние ошибки должно быть реализовано только для обязательных полей формы (в макете они помечены звёздочкой).</li>
<li>3.8. Логотип и текст HTML Academy в футере являются ссылкой на <a href="https://htmlacademy.ru/intensive/adaptive">лендинг интенсива «HTML и CSS. Адаптивная вёрстка и автоматизация»</a></li>
</ul>
<h4>4. Главная</h4>
<p><strong>Мобильная версия (Index > Mobile):</strong></p>
<ul>
<li>4.1. Логотип состоит из упрощённой иконки и названия магазина «Кэт энерджи».</li>
<li>4.2. Кнопка «Подобрать программу» должна вести на страницу формы для подбора программы.</li>
<li>4.3. В блоках «Похудение» и «Набор массы» ссылкой должна быть строка, начинающаяся со слова «Каталог». При нажатии должен осуществляться переход на соответствующие разделы каталога. Страницы разделов реализовывать не нужно.</li>
<li>4.4. В блоке «Живой пример» достаточно вёрстки, соответствующей макету. По желанию можно сделать «Было» и «Стало» кнопками переключения фотографий кота.</li>
<li>4.5. Блок карты: необходимая реализация — интерактивная карта (карты Google или Яндекса), ширина подстраивается под ширину вьюпорта (но не уже контентной ширины макета), на карте размещён маркер (может быть как кастомным, так и дефолтным), центр карты соответствует центру блока в макете.
</li>
</ul>
<p><strong>Планшетная версия (Index > Tablet):</strong></p>
<ul>
<li>4.6. Блоки меняют размеры и расположение согласно макету.</li>
<li>4.7. В состав иконки логотипа добавляются новые элементы.</li>
<li>4.8. Главное меню всегда открыто вне зависимости от его состояния на мобильной версии.</li>
<li>4.9. В блоке «Живой пример» котов становится двое. Логику слайдера реализовывать не обязательно.
</li>
</ul>
<p><strong>Десктопная версия (Index > Desktop):</strong></p>
<ul>
<li>4.10. Блоки меняют размеры и расположение согласно макету.</li>
<li>4.11. В составе логотипа добавляются новые элементы.</li>
<li>4.12. Фон первого блока под шапкой тянется на всю ширину экрана и состоит из двух равных частей: левая — с белым фоном, правая — с зелёным фоном и изображением кота, которое упирается в правую границу экрана.</li>
</ul>
<h4>5. Форма</h4>
<p><strong>Мобильная версия (Form > Mobile):</strong></p>
<ul>
<li>5.1. Должны быть реализованы кастомные элементы форм.</li>
<li>5.2. У полей ввода телефона и почты должны быть указаны соответствующие типы для удобного заполнения с телефона.</li>
</ul>
<p><strong>Планшетная версия (Form > Tablet):</strong></p>
<ul>
<li>5.3. Блоки меняют размеры и расположение согласно макету.</li>
</ul>
<p><strong>Десктопная версия (Form > Desktop):</strong></p>
<ul>
<li>5.4. Блоки меняют размеры и расположение согласно макету.</li>
</ul>
<h4>6. Страница каталога</h4>
<p><strong>Мобильная версия (Catalog > Mobile):</strong></p>
<ul>
<li>6.1. Изображение и название товара — ссылки на страницу с описанием товара. Страницу с описанием товара реализовывать не нужно.</li>
<li>6.2. Кнопка «Заказать» открывает страницу оформления заказа.</li>
<li>6.3. Кнопка «Показать все» показывает новые товары. При отключенном JS должен осуществляться переход на страницу новых товаров. Показ новых товаров и их страницу реализовывать не нужно.</li>
</ul>
<p><strong>Планшетная версия (Catalog > Tablet):</strong></p>
<ul>
<li>6.4. Блоки меняют размеры и расположение согласно макету.</li>
</ul>
<p><strong>Десктопная версия (Catalog > Desktop):</strong></p>
<ul>
<li>6.5. Блоки меняют размеры и расположение согласно макету.</li>
</ul>
</div>
</div>
<div class="up-project__review">
<h3 class="up-project__caption">Обзор проекта</h3>
<div class="fixed-aspect-ratio">
<iframe src="https://www.youtube.com/embed/1Jr2JZSRj84?enablejsapi=1&rel=0" allowfullscreen="" title="Cat Energy">Cat Energy</iframe>
</div>
</div>
</div>
<div class="view-gallery">
<h1>Проект Cat Energy</h1>
<p class="view-gallery__photo-full">
<img class="full-photo" src="img/gallery-picture/course_html_2_index-large.jpg" width="600" height="900"
alt="Фото большое">
</p>
<p class="view-gallery__photo-previews">
<button class="view-gallery__photo-preview" type="button">
<img src="img/gallery-picture/course_html_2_index-large.jpg" alt="Превью с ноутбуком">
</button>
<button class="view-gallery__photo-preview" type="button">
<img src="img/gallery-picture/course_html_2_catalog-large.jpg" alt="Превью с микрофоном">
</button>
<button class="view-gallery__photo-preview" type="button">
<img src="img/gallery-picture/course_html_2_form-large.jpg" alt="Превью с клавиатурой">
</button>
<button class="view-gallery__photo-preview" type="button">
<img src="img/gallery-picture/course_html_2_index_tablet-large.jpg" alt="Превью с табличкой">
</button>
<button class="view-gallery__photo-preview" type="button">
<img src="img/gallery-picture/course_html_2_catalog_tablet-large.jpg" alt="Превью с деревом">
</button>
<button class="view-gallery__photo-preview" type="button">
<img src="img/gallery-picture/course_html_2_form_tablet-large.jpg" alt="Превью с деревом">
</button>
<button class="view-gallery__photo-preview" type="button">
<img src="img/gallery-picture/course_html_2_index_mobile-large.jpg" alt="Превью с деревом">
</button>
<button class="view-gallery__photo-preview" type="button">
<img src="img/gallery-picture/course_html_2_catalog_mobile-large.jpg" alt="Превью с деревом">
</button>
<button class="view-gallery__photo-preview" type="button">
<img src="img/gallery-picture/course_html_2_form_mobile-large.jpg" alt="Превью с деревом">
</button>
</p>
</div>
<button class="popup__button button-hide" type="button">Закрыть</button>
</div>
</section>
</main>
<footer class="page-footer">
<div class="container-footer">
<img class="rule-img" src="img/golden-rule.png" height="65" width="65" alt="Логотип." >
<img class="rule-img" src="img/nii.jpg" height="65" width="65" alt="Картинка правила нет ничего невозможного." >
<div class="contacts">
<a class="footer-email" href="mailto:[email protected]">[email protected]</a>
<a class="footer-phone" href="tel:+375293096030">+375 29 309 60 30</a>
</div>
</div>
</footer>
<button class="up-button" type="button">↑
<span class="visually-hidden">Наверх</span>
</button>
</div>
<script src="script.js"></script>
<script src="script-popup.js"></script>
<script src="script-gallery.js"></script>
<script src="up-button.js"></script>
</body>
</html>