forked from demidemid/sedona
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathform.html
225 lines (201 loc) · 13.9 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
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>HTML Academy: Седона</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body class="body">
<header class="main-header">
<div class="main-header__logo">
<a href="./index.html">
<picture>
<source media="(min-width:1200px)" srcset="img/logo-sedona-desktop.svg">
<source media="(min-width:768px)" srcset="img/logo-sedona-tablet.svg">
<source media="(min-width:320px)" srcset="img/logo-sedona-mobile.svg">
<img class="main-header__logo-picture" width="102" height="83" src="img/logo-sedona-desktop.svg" alt="City of Sedona">
</picture>
</a>
</div>
<div class="main-header__menu-button">
<button class="burger-button"></button>
</div>
<nav class="main-menu main-menu--no-js">
<ul class="main-menu__list">
<li class="main-menu__item">
<span class="main-menu__cross-button"></span>
<a class="main-menu__link" href="./index.html">Главная</a>
</li>
<li class="main-menu__item">
<a class="main-menu__link" href="./photo.html">Фото и видео</a>
</li>
<li class="main-menu__item main-menu__item--third">
<a class="main-menu__link main-menu__link--active">Форма отзыва</a>
</li>
<li class="main-menu__item">
<a class="main-menu__link" href="#">HTML Academy</a>
</li>
</ul>
</nav>
</header>
<div class="main">
<article class="info-section">
<div class="info-section__image info-section__image--shorter">
<img width="461" height="80" class="info-section__index-text info-section__index-text--shorter" src="img/text-sedona.svg" alt="Sedona slogan">
</div>
<section class="info-section__promo">
<h2 class="info-section__title info-section__title--promo">Оставьте свой отзыв</h2>
<p class="info-section__text">Помогите нашим отелям стать лучше!
оставьте отзыв о них, а также о посещенных вами достопримечательностях
</p>
</section>
</article>
<form class="feedback-form" action="https://echo.htmlacademy.ru" method="post">
<fieldset class="feedback-form__contact-info feedback-form__contact-info--full-name">
<legend class="feedback-form__title feedback-form__title--full-name">Представьтесь:</legend>
<label class="feedback-form__field-label">Имя*:
<input class="feedback-form__field-input feedback-form__field-input--first-name-longer" type="text" name="first-name" value="Петр" required>
</label>
<label class="feedback-form__field-label">Фамилия*:
<input class="feedback-form__field-input" type="text" name="second-name" value="Иванов" required>
</label>
<label class="feedback-form__field-label">Отчество*:
<input class="feedback-form__field-input" type="text" name="middle-name" value="Александрович" required>
</label>
</fieldset>
<fieldset class="feedback-form__contact-info feedback-form__contact-info--contacts">
<legend class="feedback-form__title feedback-form__title--contacts">Контактная информация:</legend>
<div class="feedback-form__container">
<div class="feedback-form__column">
<label class="feedback-form__field-label feedback-form__field-label--padding" for="telephone"><span class="feedback-form__disable">Контактный </span>телефон*:</label>
<div class="feedback-form__field-container">
<input class="feedback-form__field-input feedback-form__field-input--contact-info" type="tel" id="telephone" name="telephone" placeholder="Введите телефон" pattern="[0-9]{1}-[0-9]{3}-[0-9]{3}-[0-9]{2}-[0-9]{2}" required>
<span class="feedback-form__field-icon feedback-form__field-icon--telephone"></span>
</div>
<span class="feedback-form__error-message">Ошибка, перепроверьте номер</span>
</div>
<div class="feedback-form__column">
<label class="feedback-form__field-label feedback-form__field-label--padding" for="email">Электронная почта*:</label>
<div class="feedback-form__field-container">
<input class="feedback-form__field-input feedback-form__field-input--contact-info" id="email" type="email" name="email" placeholder="Введите e-mail" required>
<span class="feedback-form__field-icon feedback-form__field-icon--email"></span>
</div>
</div>
</div>
</fieldset>
<fieldset class="feedback-form__contact-info feedback-form__contact-info--impression">
<legend class="feedback-form__title feedback-form__title--impression">Ваше общее впечатление:</legend>
<label class="feedback-form__field-label feedback-form__field-label--radio">
<input class="feedback-form__selector feedback-form__selector--radio" type="radio" name="radio" value="positive" checked>
<span class="feedback-form__radio-custom"></span>
<span class="feedback-form__label-text feedback-form__label-text--radio">Скорее положительное</span>
</label>
<label class="feedback-form__field-label feedback-form__field-label--radio">
<input class="feedback-form__selector feedback-form__selector--radio" type="radio" name="radio" value="negative">
<span class="feedback-form__radio-custom"></span>
<span class="feedback-form__label-text feedback-form__label-text--radio">Скорее отрицательное</span>
</label>
<label class="feedback-form__field-label feedback-form__field-label--radio">
<input class="feedback-form__selector feedback-form__selector--radio" type="radio" name="radio" value="neutral">
<span class="feedback-form__radio-custom"></span>
<span class="feedback-form__label-text feedback-form__label-text--radio">Затрудняюсь ответить</span>
</label>
</fieldset>
<fieldset class="feedback-form__contact-info feedback-form__contact-info--sight">
<legend class="feedback-form__title feedback-form__title--sight">Посещенные достопримечательности:</legend>
<div class="feedback-form__sight-container">
<label class="feedback-form__field-label feedback-form__field-label--checkbox feedback-form__field-label--devils-bridge">
<input class="feedback-form__selector feedback-form__selector--checkbox" type="checkbox" name="checkbox" value="devils-bridge" checked>
<span class="feedback-form__checkbox-custom"></span>
<span class="feedback-form__label-text feedback-form__label-text--checkbox">Мост Дьявола</span>
</label>
<label class="feedback-form__field-label feedback-form__field-label--checkbox feedback-form__field-label--mount-bell">
<input class="feedback-form__selector feedback-form__selector--checkbox" type="checkbox" name="checkbox" value="mount-bell">
<span class="feedback-form__checkbox-custom"></span>
<span class="feedback-form__label-text feedback-form__label-text--checkbox">Гора-Колокол</span>
</label>
<label class="feedback-form__field-label feedback-form__field-label--checkbox feedback-form__field-label--slide-park">
<input class="feedback-form__selector feedback-form__selector--checkbox" type="checkbox" name="checkbox" value="slide-park" checked>
<span class="feedback-form__checkbox-custom"></span>
<span class="feedback-form__label-text feedback-form__label-text--checkbox">Слайд-парк</span>
</label>
<label class="feedback-form__field-label feedback-form__field-label--checkbox feedback-form__field-label--red-rocks">
<input class="feedback-form__selector feedback-form__selector--checkbox" type="checkbox" name="checkbox" value="red-rocks" checked>
<span class="feedback-form__checkbox-custom"></span>
<span class="feedback-form__label-text feedback-form__label-text--checkbox">Красные скалы</span>
</label>
</div>
</fieldset>
<fieldset class="feedback-form__contact-info feedback-form__contact-info--review">
<legend class="feedback-form__title feedback-form__title--review">Опишите свои эмоции:</legend>
<textarea class="feedback-form__field-input feedback-form__field-input--textarea" placeholder="Опишите подробно все свои восторги"></textarea>
</fieldset>
<button class="button feedback-form__button" type="submit">
<span class="button__text">Отправить отзыв</span>
</button>
<p class="feedback-form__notice">* — обязательные поля</p>
</form>
</div>
<footer class="main-footer">
<h2 class="main-footer__title">#visitsedona</h2>
<div class="main-footer__social">
<a class="main-footer__social-button" href="#">
<svg class="main-footer__social-button-icon" version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="17" height="15" viewBox="0 0 17.5 14.663" enable-background="new 0 0 17.5 14.663" xml:space="preserve">
<g>
<g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.283,0.153c1.736-0.484,3.074,0.264,3.685,1.15 c0.694-0.225,1.372-0.47,2.072-0.69c-0.004,0.841-0.538,1.478-0.883,1.728C16.861,2.506,17.5,1.86,17.5,1.86 c-0.175,0.977-1.035,1.746-1.611,1.977C15.65,10.429,12.617,14.793,5.507,14.66c-0.538,0,0.077,0-0.46,0 c-0.422,0-4.29-0.45-5.047-1.843c2.341,0.192,4.011-0.412,4.835-1.15c-0.989-0.293-2.761-0.464-3.07-2.881 c0.362,0.105,0.583,0.223,1.228,0.117C1.757,8.067,0.385,7.366,0.461,5.218c0.294,0.319,1.1,0.523,1.381,0.461 c-0.725-0.235-2.03-3.281-0.921-4.836C2.794,2.655,4.769,4.364,8.29,4.528C8.506,2.288,9.461,0.788,11.283,0.153z"/>
</g>
</g>
</svg>
Twitter</a>
<a class="main-footer__social-button" href="#">
<svg class="main-footer__social-button-icon" version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="9" height="19" viewBox="0 0 8.672 18.944" enable-background="new 0 0 8.672 18.944" xml:space="preserve">
<path d="M6.275,3.356c0.799,0,1.599,0,2.398,0c0-1.119,0-2.237,0-3.356c-0.959,0-1.92,0-2.878,0C2.656,0.181,1.54,2.387,1.948,6.114 H0v3.518h1.959c0,3.104,0,6.208,0,9.312c1.279,0,2.559,0,3.837,0c0-3.104,0-6.208,0-9.312h2.857V6.114H5.787 C5.765,5.069,5.75,3.709,6.275,3.356z"/>
</svg>
Facebook
</a>
<a class="main-footer__social-button" href="#">
<svg class="main-footer__social-button-icon" version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20" height="14" viewBox="0 0 19.979 14.015" enable-background="new 0 0 19.979 14.015" xml:space="preserve">
<path d="M17.145,0H2.835C1.275,0,0,1.275,0,2.835v8.345c0,1.56,1.275,2.835,2.835,2.835h14.31c1.56,0,2.835-1.275,2.835-2.835V2.835 C19.979,1.275,18.704,0,17.145,0z M7.036,10.392V3.623l6.769,3.384L7.036,10.392z"/>
</svg>
YouTube</a>
</div>
<p class="main-footer__copyright main-footer__copyright--form-margin">
Разработано<a class="main-footer__copyright-icon" href="#">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="27" height="34" viewBox="0 0 26.943 34.09" enable-background="new 0 0 26.943 34.09" xml:space="preserve">
<path class="main-footer__copyright-image" d="M13.62,0.017L13.472,0L0,1.412v24.661l13.473,8.017l13.43-7.99l0.042-0.025V1.412L13.62,0.017z M25.019,12.127L13.495,5.334 L13.494,5.23l-0.087,0.05l-0.088-0.056v0.109L1.925,12.118V3.147l11.548-1.212l11.547,1.212V12.127z M13.405,6.787L24.923,13.5 l-4.479,2.64l-7.093-4.221l-0.014,1.415l5.904,3.513l-0.86,0.507l-5.03-2.992l-0.014,1.415l3.827,2.275l-0.782,0.523l-3.031-1.787 l-0.014,1.413l1.853,1.091l-1.8,1.081L2.034,13.622L13.405,6.787z M1.925,15.127l11.411,6.791l0.016,1.044L5.41,18.234L5.395,19.65 l7.979,4.795l0.018,1.076l-7.973-4.74l-0.013,1.414l8.021,4.822l0.046,0.025l8.143-4.872l-0.011-5.177l3.415-2.036v10.021 L13.472,31.85L1.925,24.979V15.127z"/>
</svg>
в HTML Academy</a>
</p>
</footer>
<article class="popup popup--failure js-popup-failure">
<section class="popup__section popup__section--failure">
<h2 class="popup__title popup__title--failure">Что-то пошло не так!</h2>
<p class="popup__text popup__text--failure">Проверьте поля, выделенные
красным, скорее всего вы забыли их
заполнить
</p>
</section>
<button class="button popup__button">
<span class="button__text">Ok</span>
</button>
</article>
<article class="popup popup--success js-popup-success">
<section class="popup__section popup__section--success">
<h2 class="popup__title popup__title--success">Ваш отзыв отправлен!</h2>
<p class="popup__text popup__text--success">Спасибо за ваше участие, ваш отзыв
уже поступил к нам.
В ближайшее время мы опубликуем
его на сайте.
</p>
</section>
<div class="popup__button-container">
<button class="button popup__button popup__button--success">
<span class="button__text">Закрыть окно</span>
</button>
</div>
</article>
<script src="js/app.js" async></script>
</body>
</html>