-
Notifications
You must be signed in to change notification settings - Fork 0
/
popup_cat_energy.html
163 lines (161 loc) · 15.6 KB
/
popup_cat_energy.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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<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-popup.css">
<title>Popup Cat Energy</title>
</head>
<body>
<h1 class="visually-hidden">Проект Cat Energy</h1>
<section class="popup-cat">
<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 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>
</div>
<button class="popup__button button-hide" type="button">Закрыть</button>
</div>
</section>
<script src="script-gallery.js"></script>
</body>
</html>