-
Notifications
You must be signed in to change notification settings - Fork 0
/
form.html
214 lines (197 loc) · 11.4 KB
/
form.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
<!DOCTYPE html>
<html class="page" lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cat Energy: Подбор программы</title>
<link rel="icon" href="favicon.ico"> <!-- 32x32 -->
<link rel="icon" type="image/svg+xml" href="./img/favicons/favicon.svg">
<link rel="apple-touch-icon" href="./img/favicons/apple-icon-180x180.png">
<link rel="stylesheet" href="./css/style.min.css">
</head>
<body class="page__body">
<!-- FORM - HEADER -->
<header class="page__header page-header">
<nav class="page-header__nav page-header__nav--decorate">
<div class="page-header__bar">
<a class="page-header__logo logo" href="./index.html">
<picture>
<source media="(min-width: 1320px)" srcset="./img/logos/ico-cat-big.svg">
<source media="(min-width: 768px)" srcset="./img/logos/ico-cat-medium.svg">
<img class="logo__image" width="34" height="38" src="./img/logos/ico-cat-small.svg" alt="Cat Energy">
</picture>
<picture>
<source media="(min-width: 768px)" srcset="./img/logos/logo-name-tablet.svg">
<img class="logo__name logo__name--header" width="101" height="18" src="./img/logos/logo-name.svg" alt="" aria-hidden="true">
</picture>
</a>
<button class="page-header__toggler page-header__toggler--closed" type="button"><span class="visually-hidden">Открыть меню</span></button>
</div>
<ul class="page-header__menu site-menu site-menu--nojs">
<li class="site-menu__item"><a class="site-menu__link" href="./index.html">Главная</a></li>
<li class="site-menu__item"><a class="site-menu__link" href="./catalog.html">Каталог продукции</a></li>
<li class="site-menu__item"><a class="site-menu__link">Подбор программы</a></li>
</ul>
</nav>
</header>
<!-- FORM - MAIN -->
<main class="page__main page-form">
<header class="page-form__header container">
<h1 class="page-form__title page__title">Подбор программы</h1>
<p class="page-form__lead page__lead">Заполните анкету, и мы подберем программу питания для вашего кота</p>
</header>
<!-- Секция формы -->
<section class="page-form__section">
<h2 class="visually-hidden">Форма заявки</h2>
<!-- Форма заявки -->
<form class="form" action="https://echo.htmlacademy.ru" name="initial-form" method="post">
<div class="form__fieldset-wrapper">
<!-- Информация о коте -->
<fieldset class="form__fieldset form__fieldset--about fieldset">
<legend class="visually-hidden">
<h2 class="page__subtitle">Информация о коте</h2>
</legend>
<ul class="fieldset__list fieldset__list--about container">
<li class="fieldset__item">
<label class="field"><span class="field__text">Имя:* </span><input class="field__input" name="cat-name" type="text" placeholder="Степан" required></label>
</li>
<li class="fieldset__item">
<label class="field"><span class="field__text">Вес (кг):* </span><input class="field__input" name="cat-weight" type="number" min="1" step="0.5" placeholder="7" required></label>
</li>
<li class="fieldset__item">
<label class="field"><span class="field__text">Возраст (лет): </span><input class="field__input" name="cat-age" type="number" min="1" placeholder="7"></label>
</li>
</ul>
</fieldset>
<!-- Цель программы -->
<fieldset class="form__fieldset form__fieldset--target fieldset">
<legend class="visually-hidden">
<h2 class="page__subtitle container">Цель программы</h2>
</legend>
<ul class="fieldset__list fieldset__list--target container">
<li class="fieldset__item">
<label class="select select--radio"><input class="select__input" type="radio" name="target" value="slim" checked><span class="select__text"> Похудение</span></label>
</li>
<li class="fieldset__item">
<label class="select select--radio"><input class="select__input" type="radio" name="target" value="fatten"><span class="select__text"> Набор массы</span></label>
</li>
<li class="fieldset__item">
<label class="select select--radio"><input class="select__input" type="radio" name="target" value="offer"><span class="select__text"> Не знаю (Нужен ваш совет)</span></label>
</li>
</ul>
</fieldset>
</div>
<!-- Контактные данные -->
<fieldset class="form__fieldset form__fieldset--contacts fieldset">
<legend class="fieldset__wrapper fieldset__wrapper--contacts page__divider">
<h2 class="page__subtitle container"><span class="page__divider-item">Контактные данные <br> (владельца кота)</span></h2>
</legend>
<ul class="fieldset__list fieldset__list--contacts container">
<li class="fieldset__item">
<label class="field field__ico field__ico--email"><span class="field__text">E-mail:* </span><input class="field__input" type="email" name="email" placeholder="[email protected]" required>
</label>
</li>
<li class="fieldset__item">
<label class="field field__ico field__ico--phone"><span class="field__text">Телефон:* </span><input class="field__input" type="tel" name="phone" placeholder="8 (960) 900-60-90" required></label>
</li>
</ul>
</fieldset>
<!-- Коментарий -->
<div class="form__fieldset form__fieldset--comments fieldset">
<div class="fieldset__wrapper fieldset__wrapper--comments page__divider">
<h2 class="page__subtitle container"><span class="page__divider-item">Комментарий</span></h2>
</div>
<div class="fieldset__list container">
<label class="field" for="comments"><span class="visually-hidden">Оставьте Ваш коментарий</span>
<textarea class="field__input field__input--comments" name="comments" id="comments" cols="30" rows="10" placeholder="Расскажите обо всех повадках кота"></textarea>
</label>
</div>
</div>
<!-- Дополнительно -->
<fieldset class="form__fieldset form__fieldset--more fieldset">
<legend class="fieldset__wrapper fieldset__wrapper--more page__divider">
<h2 class="page__subtitle container"><span class="page__divider-item">Дополнительно</span></h2>
</legend>
<ul class="fieldset__list fieldset__list--more container">
<li class="fieldset__item">
<label class="select select--checkbox"><input class="select__input" type="checkbox" name="addition" value="sweetener" checked><span class="select__text"> Сахарозаменитель</span></label>
</li>
<li class="fieldset__item">
<label class="select select--checkbox"><input class="select__input" type="checkbox" name="addition" value="water"><span class="select__text"> Питьевая вода</span></label>
</li>
<li class="fieldset__item">
<label class="select select--checkbox"><input class="select__input" type="checkbox" name="addition" value="milk"><span class="select__text"> Молоко</span></label>
</li>
<li class="fieldset__item">
<label class="select select--checkbox"><input class="select__input" type="checkbox" name="addition" value="vitamin"><span class="select__text"> Витамины</span></label>
</li>
</ul>
</fieldset>
<!-- Отправить анкету -->
<div class="form__button-wrapper container">
<button class="form__button button" type="submit">Отправить заявку</button>
<p class="form__notice">* – Обязательные поля</p>
</div>
</form>
</section>
</main>
<!-- FORM - FOOTER -->
<footer class="page__footer page-footer">
<!-- Раздел с адресами и картой -->
<article class="page-footer__contacts contacts">
<h2 class="visually-hidden">Контакты</h2>
<div class="contacts__inner-address container">
<address class="contacts__address">
<p class="contacts__title">Приглашаем к сотрудничеству дилеров!</p>
<p class="contacts__text"><span>ул. Большая Конюшенная, д. 19/8</span> <span>Санкт-Петербург</span></p>
</address>
</div>
<div class="contacts__inner-map">
<iframe class="contacts__map contacts__map--iframe" src="https://yandex.ru/maps/2/saint-petersburg/house/bolshaya_konyushennaya_ulitsa_19_8/Z0kYdQVjSUYAQFtjfXVyeXpgZQ==/?ll=30.323036%2C59.938631&z=16" width="320" height="362" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</article>
<!-- Внутрення обертка с отступами для группы ссылок -->
<div class="page-footer__inner container">
<!-- Логотип со ссылкой на главную-->
<a class="page-footer__logo logo" href="#">
<img class="logo__name logo__name--footer" width="128" height="24" src="./img/logos/logo-name.svg" alt="Cat Energy">
</a>
<!-- Список соцсетей -->
<ul class="page-footer__social social">
<li class="social__item">
<a class="social__link social__link--vkontakte" href="#">
<span class="visually-hidden">ВКонтакте</span>
<svg width="23" height="13">
<use xlink:href="./img/icons/sprite.svg#vkontakte"></use>
</svg>
</a>
</li>
<li class="social__item">
<a class="social__link social__link--instagram" href="#">
<span class="visually-hidden">Инстаграм</span>
<svg width="16" height="16">
<use xlink:href="./img/icons/sprite.svg#instagram"></use>
</svg>
</a>
</li>
<li class="social__item">
<a class="social__link social__link--facebook" href="#">
<span class="visually-hidden">Фейсбук</span>
<svg width="23" height="20">
<use xlink:href="./img/icons/sprite.svg#facebook"></use>
</svg>
</a>
</li>
</ul>
<!-- Ссылка на академию -->
<a class="page-footer__academy academy" href="https://htmlacademy.org/">
<span class="visually-hidden">Разработано в</span> HTML Academy
<svg class="academy__logo" width="27" height="34" role="img" aria-hidden="true">
<use xlink:href="./img/icons/sprite.svg#html-academy"></use>
</svg>
</a>
</div>
</footer>
<script src="./js/siteMenu.min.js"></script>
</body>
</html>