-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathform.html
178 lines (178 loc) · 14.8 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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/picturefill.min.js" async></script>
<title>HTML Academy: Седона</title>
</head>
<body>
<svg style="display:none"><symbol viewBox="0 0 8.672 18.944" id="icon-facebook"><path d="M6.275 3.356h2.398V0H5.795C2.656.181 1.54 2.387 1.948 6.114H0v3.518h1.959v9.312h3.837V9.632h2.857V6.114H5.787c-.022-1.045-.037-2.405.488-2.758z"/></symbol><symbol viewBox="0 0 22 20" id="icon-like"><path d="M12.383 3.646l-.637 2.929L11.219 9H19.9v2l.001.058L17 18H8V8.029l.014-.015 4.369-4.368M2 10v8-8M13.2 0L6.6 6.6c-.4.3-.6.8-.6 1.4v10c0 1.1.9 2 2 2h9c.8 0 1.5-.5 1.8-1.2l3-7.1c.1-.2.1-.5.1-.7V9h.1c0-1.1-.9-2-2-2h-6.3l1-4.6v-.3c0-.4-.2-.8-.4-1.1l-1.1-1zM4 8H0v12h4V8zm18 1v.044V9z"/></symbol><symbol viewBox="0 0 17.5 14.663" id="icon-twitter"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.283.153c1.736-.484 3.074.264 3.685 1.15.694-.225 1.372-.47 2.072-.69-.004.841-.538 1.478-.883 1.728.704.165 1.343-.481 1.343-.481-.175.977-1.035 1.746-1.611 1.977-.239 6.592-3.272 10.956-10.382 10.823h-.46c-.422 0-4.29-.45-5.047-1.843 2.341.192 4.011-.412 4.835-1.15-.989-.293-2.761-.464-3.07-2.881.362.105.583.223 1.228.117C1.757 8.067.385 7.366.461 5.218c.294.319 1.1.523 1.381.461C1.117 5.444-.188 2.398.921.843 2.794 2.655 4.769 4.364 8.29 4.528c.216-2.24 1.171-3.74 2.993-4.375z"/></symbol><symbol viewBox="0 0 20 20" id="icon-video-fullscreen"><g><path d="M0 0v6h3V3h3V0H3zM3 14H0v6h6v-3H3zM17 0h-3v3h3v3h3V0zM17 17h-3v3h6v-6h-3z"/></g></symbol><symbol viewBox="0 0 16 20" id="icon-video-replay"><path d="M8 4V0L3 5l5 5V6c3.315 0 6 2.686 6 6s-2.685 6-6 6-6-2.686-6-6H0c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></symbol><symbol viewBox="0 0 32 20" id="icon-video-subtitles"><path d="M29 0H3C1.35 0 0 1.35 0 3v14c0 1.65 1.35 3 3 3h26c1.65 0 3-1.35 3-3V3c0-1.65-1.35-3-3-3zM14.403 15.854a8.61 8.61 0 0 1-1.678.164 5.986 5.986 0 0 1-1.976-.323c-.623-.214-1.172-.562-1.646-1.041s-.852-1.103-1.133-1.868c-.28-.766-.419-1.695-.419-2.786 0-1.134.157-2.085.471-2.851.315-.768.723-1.384 1.224-1.854a4.53 4.53 0 0 1 1.679-1.008 5.86 5.86 0 0 1 1.852-.307c.66 0 1.22.045 1.678.134.457.087.835.192 1.133.313l-.448 1.92a3.332 3.332 0 0 0-.902-.265A8.244 8.244 0 0 0 12.973 6c-.915 0-1.649.325-2.206.977-.558.651-.836 1.663-.836 3.031 0 .598.067 1.142.199 1.632.132.493.334.913.603 1.26.271.349.607.619 1.01.812.402.193.867.29 1.396.29.496 0 .915-.049 1.257-.148.342-.099.639-.227.893-.38l.463 1.841c-.354.249-.803.43-1.349.539zm8.698 0a8.618 8.618 0 0 1-1.678.164 5.986 5.986 0 0 1-1.976-.323c-.623-.214-1.172-.562-1.646-1.041s-.852-1.103-1.133-1.868c-.281-.767-.421-1.695-.421-2.786 0-1.134.157-2.085.471-2.851.314-.768.723-1.384 1.223-1.854a4.526 4.526 0 0 1 1.68-1.008 5.858 5.858 0 0 1 1.851-.307c.661 0 1.221.045 1.678.134a6.05 6.05 0 0 1 1.133.313l-.446 1.918a3.314 3.314 0 0 0-.901-.265A8.569 8.569 0 0 0 21.67 6c-.915 0-1.649.325-2.206.977-.558.651-.836 1.663-.836 3.031 0 .598.067 1.142.199 1.632.132.493.334.913.603 1.26.271.349.606.619 1.009.812.402.193.868.29 1.396.29.497 0 .915-.049 1.257-.148.342-.099.64-.227.894-.38l.463 1.841c-.353.249-.803.43-1.348.539z"/></symbol><symbol viewBox="0 0 19.979 14.015" id="icon-youtube"><path d="M17.145 0H2.835A2.842 2.842 0 0 0 0 2.835v8.345a2.842 2.842 0 0 0 2.835 2.835h14.31a2.842 2.842 0 0 0 2.835-2.835V2.835A2.844 2.844 0 0 0 17.145 0zM7.036 10.392V3.623l6.769 3.384-6.769 3.385z"/></symbol><symbol viewBox="0 0 26.943 34.09" id="logo-htmlacademy"><path d="M13.62.017L13.472 0 0 1.412v24.661l13.473 8.017 13.43-7.99.042-.025V1.412L13.62.017zm11.399 12.11L13.495 5.334l-.001-.104-.087.05-.088-.056v.109L1.925 12.118V3.147l11.548-1.212L25.02 3.147v8.98zm-11.614-5.34L24.923 13.5l-4.479 2.64-7.093-4.221-.014 1.415 5.904 3.513-.86.507-5.03-2.992-.014 1.415 3.827 2.275-.782.523-3.031-1.787-.014 1.413 1.853 1.091-1.8 1.081-11.356-6.751 11.371-6.835zm-11.48 8.34l11.411 6.791.016 1.044-7.942-4.728-.015 1.416 7.979 4.795.018 1.076-7.973-4.74-.013 1.414 8.021 4.822.046.025 8.143-4.872-.011-5.177 3.415-2.036v10.021L13.472 31.85 1.925 24.979v-9.852z"/></symbol></svg>
<div class="background-wraper">
<header class="page-header">
<div class="page-header__wraper">
<nav class="page-header__menu page-header__menu--opened">
<ul class="page-header__list">
<li class="page-header__item"><a class="page-header__url" href="index.html">Главная</a></li>
<li class="page-header__item"><a class="page-header__url" href="photo.html">Фото и видео</a></li>
<li class="page-header__item"><a class="page-header__url page-header__url--active" href="form.html">Форма отзыва</a></li>
<li class="page-header__item"><a class="page-header__url" href="https://htmlacademy.ru/intensive/adaptive">HTML Academy</a></li>
</ul>
<button class="page-header__mobile-menu-close" type="button">Закрыть</button>
<a class="page-header__logo-wraper" 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">
<img class="page-header__logo" src="img/logo-sedona-mobile.svg" alt="Sedona" width="102" height="83">
</picture>
</a>
</nav>
<div class="page-header__promo-text promo-text">
<div class="promo-text__slogan promo-text__slogan--lower">
<img class="promo-text__title" src="img/text-sedona.svg" alt="Sedona" width="282" height="47">
</div>
</div>
</div>
</header>
<main class="page-main">
<section class="hotel">
<header class="hotel__wraper">
<h2 class="hotel__header">Оставьте свой отзыв</h2>
<p class="hotel__about">Помогите нашим отелям стать лучше! Оставьте отзыв о них, а также о посещенных вами достопримечательностях</p>
</header>
</section>
<form class="feedback" action="https://echo.htmlacademy.ru" method="post">
<div class="feedback__wraper">
<div class="feedback__form-profil form-profil">
<div class="form-profil__wraper">
<h2 class="form-profil__header ">Представьтесь:</h2>
<div class="form-profil__list">
<label class="form-profil__label">
<span class="form-profil__text">Имя*:</span>
<input type="text" required class="form-profil__placeholder" name="name" placeholder="Петр">
</label>
<label class="form-profil__label">
<span class="form-profil__text">Фамилия*:</span>
<input type="text" required class="form-profil__placeholder" name="surname" placeholder="Иванов">
</label>
<label class="form-profil__label">
<span class="form-profil__text">Отчество:</span>
<input type="text" class="form-profil__placeholder" name="patronymic" placeholder="Александрович">
</label>
</div>
</div>
</div>
<div class="feedback__form-contact form-contact">
<div class="form-contact__wraper">
<h2 class="form-contact__header">Контактная информация:</h2>
<div class="form-contact__phone-email">
<label class="form-contact__label">
<span class="form-contact__text"><span class="form-contact__text-desktop">Контактный </span>телефон*:</span>
<span class="form-contact__input-wrap">
<input type="tel" pattern="8[0-9]{9}" required class="form-contact__placeholder" name="phone" placeholder="Введите телефон">
</span>
</label>
<label class="form-contact__label">
<span class="form-contact__text">Электронная почта*:</span>
<span class="form-contact__input-wrap">
<input type="email" required class="form-contact__placeholder" name="email" placeholder="Введите e-mail">
</span>
</label>
</div>
</div>
</div>
<div class="feedback__form-effect form-effect">
<div class="form-effect__wraper">
<h2 class="form-effect__header">Ваше общее впечатление:</h2>
<div class="form-effect__radio">
<input class="form-effect__input" type="radio" checked id="form-effect__plus" name="form-effect" value="Скорее положительное">
<label class="form-effect__label" for="form-effect__plus" tabindex="0">
<span class="form-effect__text">Скорее положительное</span>
</label>
<input class="form-effect__input" type="radio" id="form-effect__minus" name="form-effect" value="Скорее Отрицательное">
<label class="form-effect__label" for="form-effect__minus" tabindex="0">
<span class="form-effect__text">Скорее отрицательное</span>
</label>
<input class="form-effect__input" type="radio" id="form-effect__neutral" name="form-effect" value="Затрудняюсь ответить">
<label class="form-effect__label" for="form-effect__neutral" tabindex="0">
<span class="form-effect__text">Затрудняюсь ответить</span>
</label>
</div>
</div>
</div>
<div class="feedback__form-visited form-visited">
<div class="form-visited__wraper">
<h2 class="form-visited__header">Посещенные достопримечательности:</h2>
<div class="form-visited__checkbox">
<input class="form-visited__input" type="checkbox" name="form-visited" checked id="form-visited__bridge">
<label class="form-visited__label" for="form-visited__bridge" tabindex="0">
<span class="form-visited__text">Мост Дьявола</span>
</label>
<input class="form-visited__input" type="checkbox" name="form-visited" checked id="form-visited__park">
<label class="form-visited__label" for="form-visited__park" tabindex="0">
<span class="form-visited__text">Слайд-парк</span>
</label>
<input class="form-visited__input" type="checkbox" name="form-visited" id="form-visited__hill">
<label class="form-visited__label" for="form-visited__hill" tabindex="0">
<span class="form-visited__text">Гора-Колокол</span>
</label>
<input class="form-visited__input" type="checkbox" name="form-visited" checked id="form-visited__red-hills">
<label class="form-visited__label" for="form-visited__red-hills" tabindex="0">
<span class="form-visited__text">Красные скалы</span>
</label>
</div>
</div>
</div>
<div class="feedback__form-emot form-emot">
<div class="form-emot__wraper">
<h2 class="form-emot__header">Опишите свои эмоции:</h2>
<textarea class="form-emot__placeholder" placeholder="Опишите подробно все свои восторги"></textarea>
</div>
</div>
<a href="popup.html" class="feedback__btn">Отправить отзыв</a>
</div>
</form>
</main>
<footer class="page-footer">
<div class="page-footer__wraper">
<p class="page-footer__hashtag">#visitsedona</p>
<div class="page-footer__social social">
<div class="social__wraper">
<a class="social__link" href="#" title="Twiter">Twit
<svg class="social__icon" width="18" height="14"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-twitter"></use></svg>
</a>
<a class="social__link" href="#" title="Facebook">FB
<svg class="social__icon" width="9" height="18"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-facebook"></use></svg>
</a>
<a class="social__link" href="#" title="Youtube">Youtube
<svg class="social__icon" width="20" height="14"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-youtube"></use></svg>
</a>
</div>
</div>
<div class="page-footer__copyright-wraper">
<p class="page-footer__copyright">Разработано</p>
<a href="https://htmlacademy.ru/intensive/adaptive" title="HTML ACADEMY">
<svg class="page-footer__copyright-img" width="27" height="37"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo-htmlacademy"></use></svg>
</a>
</div>
</div>
</footer>
<section class="popup">
<div class="popup__wraper popup__wraper--success">
<h2 class="popup__title">Ваш отзыв отправлен!</h2>
<p class="popup__text">Спасибо за ваше участие, ваш отзыв уже поступил к нам. В ближайшее время мы опубликуем его на сайте.</p>
<div class="popup__btn-wraper">
<button class="popup__btn" type="button">закрыть окно</button>
</div>
</div>
<div class="popup__wraper popup__wraper--failure">
<h2 class="popup__title popup__title--failure">Что-то пошло не так!</h2>
<p class="popup__text popup__text--failure">Проверьте поля, выделенные красным, скорее всего вы забыли их заполнить</p>
<button class="popup__btn popup__btn--failure" type="button">ок</button>
</div>
</section>
</div>
<script type="text/javascript" src="js/menu.js"></script>
</body>
</html>