-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathform.html
189 lines (149 loc) · 11.3 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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>HTML Academy: Седона</title>
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta property="og:title" content="Sedona: Отзыв"/>
<meta property="og:description" content="Форма отправки отзыва о посещении Sedona"/>
<meta property="og:image" content="img/sedona-preview.jpg">
<meta property="og:image:width" content="262"/>
<meta property="og:image:height" content="137"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content= "https://zbralex.github.io/"/>
</head>
<body>
<div class="body-wrapper">
<svg style="display:none">
<symbol viewBox="0 0 17.5 14.663" id="icon-twitter">
<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>
</symbol>
<symbol viewBox="0 0 19.979 14.015" id="icon-youtube">
<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"/>
</symbol>
<symbol viewBox="0 0 8.672 18.944" id="icon-facebook">
<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"/>
</symbol>
<symbol viewBox="0 0 26.943 34.09" id="icon-academy">
<path 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"/>
</symbol>
<symbol width="18px" height="18px" viewBox="0 0 18 18" id="icon-phone">
<g id="icon-phone">
<g id="Icons-Communication" transform="translate(-85.000000, -126.000000)">
<g id="phone" transform="translate(85.000000, 126.000000)">
<path id="Shape" fill="#010101" d="M3.6,7.8C5,10.6,7.4,12.9,10.2,14.4l2.2-2.2c0.3-0.3,0.699-0.4,1-0.2c1.1,0.4,2.3,0.6,3.6,0.6 c0.6,0,1,0.4,1,1V17c0,0.6-0.4,1-1,1C7.6,18,0,10.4,0,1c0-0.6,0.4-1,1-1h3.5c0.6,0,1,0.4,1,1c0,1.2,0.2,2.4,0.6,3.6 c0.1,0.3,0,0.7-0.2,1L3.6,7.8L3.6,7.8z"/>
</g>
</g>
</g>
</symbol>
<symbol height="16px" viewBox="0 0 16 16" id="icon-email">
<path d="M8,10c-0.266,0-0.5-0.094-1-0.336L0,6v7c0,0.55,0.45,1,1,1h14c0.55,0,1-0.45,1-1V6L9,9.664C8.5,9.906,8.266,10,8,10z M15,2 H1C0.45,2,0,2.45,0,3v0.758l8,4.205l8-4.205V3C16,2.45,15.55,2,15,2z"/>
</symbol>
</svg>
<header class="page-header">
<nav class="main-nav">
<ul class="main-nav__list">
<li class="main-nav__item"><a href="index.html" class="main-nav__link">Главная</a></li>
<li class="main-nav__item"><a href="photo.html" class="main-nav__link">Фото и видео</a></li>
<li class="main-nav__item"><a class="main-nav__link">Форма отзыва</a></li>
<li class="main-nav__item"><a href="https://htmlacademy.ru/" class="main-nav__link">HTML ACADEMY</a></li>
<li class="main-nav__item main-nav__item--logo"><a class="main-nav__link main-nav__link--logo">LOGO</a></li>
</ul>
</nav>
<div class="page-header__review">
<div class="page-header__false-wrapper page-header__false-wrapper--review"></div>
<div class="page-header__review-wrapper">
<h1 class="page-header__review-title">Оставьте свой отзыв</h1>
<div class="page-header__review-text">Помогите нашим отелям стать лучше! оставьте отзыв о них, а также о посещенных вами достопримечательностях</div>
</div>
</div>
</header>
<main>
<section class="review">
<form class="review__form" id="review__form" action="https://echo.htmlacademy.ru/" method="post">
<div class="review__bio review__wrapper">
<fieldset class="review__group">
<legend class="review__title">Представьтесь</legend>
<div class="review__prop-wrapper review__prop-wrapper--bio">
<label for="name" class="review__prop review__prop--name">Имя*:</label>
<input type="text" name="name" id="name" class="review__input-data" placeholder="Петр" required>
<label for="surname" class="review__prop review__prop--name">Фамилия*:</label>
<input type="text" name="surname" id="surname" class="review__input-data" placeholder="Иванов" required>
<label for="patronymic" class="review__prop review__prop--name">Отчество:</label>
<input type="text" name="patronymic" id="patronymic" class="review__input-data" placeholder="Александрович">
</div>
</fieldset>
</div>
<div class="review__tel review__wrapper">
<fieldset class="review__group">
<legend class="review__title">Контактная информация:</legend>
<div class="review__prop-wrapper-wide">
<div class="review__prop-wrapper review__prop-wrapper--small">
<label for="tel" class="review__title review__title--label">Контактный телефон*:</label>
<input type="tel" name="tel" id="tel" class="review__input-data review__input-data--tel" placeholder="Введите телефон" required>
<svg class="icon-phone" width="24.829px" height="24.333px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-phone"></use></svg>
</div>
<div class="review__prop-wrapper review__prop-wrapper--small">
<label for="email" class="review__title review__title--label">Электронная почта*:</label>
<input type="email" name="email" id="email" class="review__input-data review__input-data--mail" placeholder="Введите e-mail" required>
<svg class="icon-email" width="32px" height="32px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-email"></use></svg>
</div>
</div>
</fieldset>
</div>
<div class="review__type review__wrapper">
<fieldset class="review__group">
<legend class="review__title">Ваше общее впечатление:</legend>
<div class="review__prop-wrapper review__prop-wrapper--radio">
<input type="radio" name="impression" id="good" class="review__check-button review__check-button--circle" value="Скорее положительное" checked>
<label for="good" class="review__prop review__prop--circle">Скорее положительное</label>
<input type="radio" name="impression" id="bad" class="review__check-button review__check-button--circle" value="Скорее отрицательное">
<label for="bad" class="review__prop review__prop--circle">Скорее отрицательное</label>
<input type="radio" name="impression" id="do-not-know" class="review__check-button review__check-button--circle" value="Затрудняюсь ответить">
<label for="do-not-know" class="review__prop review__prop--circle">Затрудняюсь ответить</label>
</div>
</fieldset>
</div>
<div class="review__sights review__wrapper">
<fieldset class="review__group">
<legend class="review__title review__title--sights">Посещенные достопримечательности:</legend>
<div class="review__prop-wrapper review__prop-wrapper--checkbox">
<input type="checkbox" name="devils-bridge" id="devils-bridge" class="review__check-button review__check-button--rect" value="Мост Дьявола" checked>
<label for="devils-bridge" class="review__prop review__prop--rect">Мост Дьявола</label>
<input type="checkbox" name="slide-park" id="slide-park" class="review__check-button review__check-button--rect" value="Слайд-парк" checked>
<label for="slide-park" class="review__prop review__prop--rect">Слайд-парк</label>
<input type="checkbox" name="sanbangsan_mountain" id="sanbangsan_mountain" class="review__check-button review__check-button--rect" value="Гора-Колокол">
<label for="sanbangsan_mountain" class="review__prop review__prop--rect">Гора-Колокол</label>
<input type="checkbox" name="red_mountains" id="red_mountains" class="review__check-button review__check-button--rect" value="Красные скалы">
<label for="red_mountains" class="review__prop review__prop--rect">Красные скалы</label>
</div>
</fieldset>
</div>
<div class="review__additional review__wrapper">
<label for="emotions" class="review__title">Опишите свои эмоции:</label>
<div class="review__prop-wrapper">
<textarea name="emotions" id="emotions" rows="4" cols="20" class="review__input-text" placeholder="Опишите подробно все свои восторги"></textarea>
</div>
</div>
<input type="submit" class="review__submit btn" value="Отправить отзыв">
</form>
</section>
</main>
<footer class="page-footer">
<div class="page-footer__tag">#visitSEDONA</div>
<div class="page-footer__socials">
<a class="page-footer__socials-link" href="https://www.instagram.com/htmlacademy/">Мы в Твиттере<svg width="63" height="63" class="icon-twitter"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-twitter"></use></svg></a>
<a class="page-footer__socials-link" href="https://www.facebook.com/htmlacademy">Мы в Фейсбуке<svg width="63" height="63" class="icon-facebook"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-facebook"></use></svg></a>
<a class="page-footer__socials-link" href="https://www.youtube.com/channel/UChUxTMjJGo-JDRY8pNTGL2g">Мы на Youtube <svg width="63" height="63" class="icon-youtube"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-youtube"></use></svg></a>
</div>
<div class="page-footer__copyright">
Разработано
<a class="page-footer__copyright-link" href="https://htmlacademy.ru/intensive/adaptive">HTML Academy<svg width="63" height="63" class="icon-academy"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-academy"></use></svg></a>
</div>
</footer>
</div>
</body>
</html>