-
Notifications
You must be signed in to change notification settings - Fork 0
/
form.html
181 lines (155 loc) · 9.82 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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Мишка — Вязание на заказ</title>
<link rel="preload" href="fonts/opensans.woff2" as="font">
<link rel="preload" href="fonts/opensansbold.woff2" as="font">
<link href="css/style.min.css" rel="stylesheet">
</head>
<body>
<div style="display:none"><include src="build/img/sprite.svg"></include></div>
<header class="page-header">
<nav class="main-nav">
<div class="logo">
<a class="logo__link" href="index.html">
<picture>
<source media="(min-width:1250px)" srcset="img/logo-desktop.svg">
<source media="(min-width:768px)" srcset="img/logo-tablet.svg">
<img class="logo__img" src="img/logo-mobile.svg" width="86" height="35" alt="Мишка">
</picture>
</a>
</div>
<button class="menu-toggle menu-toggle--nojs" type="button"><span class="menu-toggle__icon"></span><span class="visually-hidden">Открыть меню</span></button>
<ul class="site-menu">
<li class="site-menu__item">
<a class="site-menu__link" href="catalog.html"><span class="site-menu__text">Каталог товаров</span></a>
</li>
<li class="site-menu__item">
<a class="site-menu__link" href="form.html"><span class="site-menu__text">Вязание на заказ</span></a>
</li>
<li class="site-menu__item site-menu__item--nomobile site-menu__item--notablet">
<a class="site-menu__link" href="#"><span class="site-menu__text">Новые поступления</span></a>
</li>
<li class="site-menu__item site-menu__item--nomobile site-menu__item--notablet">
<a class="site-menu__link" href="#"><span class="site-menu__text">Распродажа</span></a>
</li>
</ul>
<ul class="user-menu">
<li class="user-menu__item user-menu__item--search">
<a class="user-menu__search" href="#"><svg class="user-menu__icon user-menu__search-icon" width="21" height="19"><use xlink:href="#icon-search"></use></svg><span class="user-menu__text">Поиск по сайту</span></a>
</li>
<li class="user-menu__item user-menu__item--cart">
<a class="user-menu__cart" href="#"><svg class="user-menu__icon user-menu__cart-icon" width="21" height="19"><use xlink:href="#icon-cart"></use></svg><span class="user-menu__text">Корзина: пока пуста</span></a>
</li>
<li class="user-menu__item user-menu__item--delivery user-menu__item--nomobile">
<a class="user-menu__delivery" href="#"><span class="user-menu__text">Бесплатная доставка по России</span></a>
</li>
</ul>
</nav>
</header>
<main class="page-main">
<header class="main-header main-header--secondary">
<h1 class="main-header__title">Вязание на заказ</h1>
</header>
<form class="form" action="https://echo.htmlacademy.ru" method="post">
<p class="form__offer">Мы будем рады воплотить в жизнь ваши пожелания! Заполните простую форму заказа и мы свяжемся с вами, чтобы уточнить детали.</p>
<fieldset class="field-item-type form__group">
<legend><span class="field-item-type__legend form__legend">Тип </span></legend>
<input class="field-item-type__input" type="radio" name="item-type" id="interior-accessory" value="interior-accessory" checked>
<label class="field-item-type__label" for="interior-accessory">Аксессуар для интерьера</label>
<input class="field-item-type__input" type="radio" name="item-type" id="kids-toy" value="kids-toy">
<label class="field-item-type__label" for="kids-toy">Детская игрушка</label>
</fieldset>
<div class="field-wrapper">
<fieldset class="field-color form__group">
<legend class="field-color__legend form__legend">Цвет </legend>
<div class="field-color__wrapper">
<div class="field-color__item">
<input class="field-color__input" type="checkbox" id="white" name="white" checked>
<label class="field-color__label" for="white">Белый</label>
</div>
<div class="field-color__item">
<input class="field-color__input" type="checkbox" id="gray" name="gray" checked>
<label class="field-color__label" for="gray">Серый</label>
</div>
<div class="field-color__item">
<input class="field-color__input" type="checkbox" id="tiffany" name="tiffany">
<label class="field-color__label" for="tiffany">«Тиффани»</label>
</div>
<div class="field-color__item">
<input class="field-color__input" type="checkbox" id="black" name="black">
<label class="field-color__label" for="black">Чёрный</label>
</div>
<div class="field-color__item">
<input class="field-color__input" type="checkbox" id="pink" name="pink">
<label class="field-color__label" for="pink">Розовый</label>
</div>
<div class="field-color__item">
<input class="field-color__input" type="checkbox" id="orange" name="orange">
<label class="field-color__label" for="orange">Оранжевый</label>
</div>
</div>
</fieldset>
</div>
<fieldset class="field-fio form__group">
<legend class="field-fio__legend form__legend">Фио </legend>
<div class="field-fio__wrapper">
<label class="field-fio__label" for="name">Имя:</label>
<input class="field-fio__input form__input" type="text" name="name" id="name" placeholder="Введите ваше имя*" required>
<label class="field-fio__label" for="surname">Фамилия:</label>
<input class="field-fio__input form__input" type="text" name="surname" id="surname" placeholder="Укажите фамилию*" required>
<label class="field-fio__label" for="patronymic">Отчество:</label>
<input class="field-fio__input form__input" type="text" name="patronymic" id="patronymic" placeholder="Отчество, если желаете">
</div>
</fieldset>
<div class="field-tel-mail-wrapper">
<fieldset class="field-tel form__group">
<legend class="field-tel__legend form__legend">Тел </legend>
<input class="field-tel__input form__input" type="tel" name="tel" pattern="\+[0-9]{1} \([0-9]{3}\) [0-9]{3} [0-9]{2} [0-9]{2}" placeholder="+7 (XXX) XXX XX XX*" required>
<svg class="field-tel__tel-icon" width="25" height="24"><use xlink:href="#icon-phone"></use></svg>
</fieldset>
<fieldset class="field-mail form__group">
<legend class="field-mail__legend form__legend">e-mail </legend>
<input class="field-mail__input form__input" type="email" name="email" placeholder="Ваш Email*" required>
<svg class="field-mail__mail-icon" width="40" height="30"><use xlink:href="#icon-mail"></use></svg>
</fieldset>
</div>
<fieldset class="field-dop form__group">
<legend class="field-dop__legend form__legend">доп </legend>
<textarea class="field-dop__textarea" name="add-info" rows="6" placeholder="Опишите все ваши пожелания к заказу"></textarea>
</fieldset>
<div class="form__hint-button">
<p class="form__hint">* Поля обязательны для заполнения</p>
<button class="form__button button" type="submit">Отправить заказ</button>
</div>
</form>
</main>
<footer class="page-footer">
<div class="page-footer__wrapper wrapper">
<a class="footer-logo" href="index.html">
<svg class="footer-logo__image" width="105" height="38"><use xlink:href="#icon-logo-footer"></use></svg>
</a>
<div class="social">
<ul class="social__list">
<li class="social__item">
<a class="social__link social__link--instagram" href="https://www.instagram.com/mimimishkashop"><svg class="social__icon social__icon--instagram" width="24" height="24"><use xlink:href="#icon-insta"></use></svg><span class="visually-hidden">Мы в Инстаграме</span></a>
</li>
<li class="social__item">
<a class="social__link social__link--facebook" href="https://www.facebook.com/mimimishkashop"><svg class="social__icon social__icon--facebook" width="24" height="24"><use xlink:href="#icon-fb"></use></svg><span class="visually-hidden">Мы в Фейсбуке</span></a>
</li>
<li class="social__item">
<a class="social__link social__link--twitter" href="https://vk.com/mimimishkashop"><svg class="social__icon social__icon--twitter" width="24" height="24"><use xlink:href="#icon-twitter"></use></svg><span class="visually-hidden">Мы в Вконтакте</span></a>
</li>
</ul>
</div>
<a class="copyright" href="https://htmlacademy.ru/intensive/adaptive">
<span class="copyright__text">Разработано</span>
<svg class="copyright__icon" width="27" height="34"><use xlink:href="#icon-logo-htmlacademy"></use></svg>
</a>
</div>
</footer>
<script src="js/menu.min.js"></script>
</body>
</html>