-
Notifications
You must be signed in to change notification settings - Fork 0
/
form.html
191 lines (181 loc) · 8.99 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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мишка</title>
<link rel="preload" href="fonts/opensans.woff2" as="font">
<link rel="preload" href="fonts/opensansbold.woff2" as="font">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/style.min.css">
<script src="js/picturefill.js"></script>
</head>
<body>
<div style="display:none">
<include src="build/img/sprite.svg"></include>
</div>
<header class="page-header">
<nav class="main-nav main-nav--closed main-nav--nojs">
<button class="main-nav__toggle" type="button"><span class="visually-hidden">Открыть меню</span></button>
<ul class="main-nav__list">
<li class="main-nav__item main-nav__item--logo">
<a href="index.html" class="main-nav__logo">
<picture>
<source media="(min-width: 1150px)" srcset="img/logo-desktop.svg">
<source media="(min-width: 768px)" srcset="img/logo-tablet.svg">
<img src="img/logo-mobile.svg" alt="Mishka">
</picture>
</a>
</li>
<li class="main-nav__item main-nav__item--catalog">
<a class="main-nav__link main-nav__link--catalog" href="catalog.html">Каталог товаров</a>
</li>
<li class="main-nav__item main-nav__item--order">
<a class="main-nav__link main-nav__link--order">Вязание на заказ</a>
</li>
<li class="main-nav__item main-nav__item--search">
<a class="main-nav__link main-nav__link--search" href="#">
<svg class="main-nav__icon" width="17.6" height="17.6"><use xlink:href="#icon-search"></use></svg>
Поиск по сайту
</a>
</li>
<li class="main-nav__item main-nav__item--cart">
<a class="main-nav__link main-nav__link--cart" href="#">
<svg class="main-nav__icon" width="20.294" height="18.849"><use xlink:href="#icon-cart"></use></svg>
Корзина: пока пуста
</a>
</li>
<li class="main-nav__item main-nav__item--new">
<a class="main-nav__link main-nav__link--new" href="#">Новые поступления</a>
</li>
<li class="main-nav__item main-nav__item--sale">
<a class="main-nav__link main-nav__link--sale" href="#">Распродажа</a>
</li>
<li class="main-nav__item main-nav__item--delivery">
Бесплатная доставка по России
</li>
</ul>
</nav>
</header>
<main>
<h1 class="page-intro">Вязание на заказ</h1>
<section class="form">
<p class="form-intro">Мы будем рады воплотить в жизнь ваши пожелания! Заполните простую форму заказа и мы свяжемся с вами, чтобы уточнить детали.</p>
<form action="#" method="post">
<fieldset class="product-type form__item">
<div class="form__item-wrapper container">
<h3 class="form__item-title">Тип</h3>
<div class="product-type__inner">
<div class="product-type__item">
<input type="radio" name="type" value="accessories" id="accessories" checked>
<label class="product-type__label form__label" for="accessories">Аксессуар для интерьера</label>
</div>
<div class="product-type__item">
<input type="radio" name="type" value="toys" id="toys">
<label class="product-type__label form__label" for="toys">Детские игрушки</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="color form__item">
<div class="form__item-wrapper container">
<h3 class="form__item-title">Цвет</h3>
<div class="color__inner">
<div class="color__item">
<input type="checkbox" name="white" id="white" checked>
<label class="color__label form__label" for="white">Белый</label>
</div>
<div class="color__item">
<input type="checkbox" name="grey" id="grey" checked>
<label class="color__label form__label" for="grey">Серый</label>
</div>
<div class="color__item">
<input type="checkbox" name="tiffani" id="tiffani">
<label class="color__label form__label" for="tiffani">«Тиффани»</label>
</div>
<div class="color__item">
<input type="checkbox" name="black" id="black">
<label class="color__label form__label" for="black">Черный</label>
</div>
<div class="color__item">
<input type="checkbox" name="pink" id="pink">
<label class="color__label form__label" for="pink">Розовый</label>
</div>
<div class="color__item">
<input type="checkbox" name="orange" id="orange">
<label class="color__label form__label" for="orange">Оранжевый</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="user-name form__item">
<div class="form__item-wrapper container">
<h3 class="form__item-title">Фио</h3>
<div class="user-name__inner">
<div class="user-name__item">
<label class="user-name__label form__label" for="name">Имя:</label>
<input type="text" name="name" id="name" placeholder="Введите ваше имя*" required>
</div>
<div class="user-name__item">
<label class="user-name__label form__label" for="surname">Фамилия:</label>
<input type="text" name="surname" id="surname" placeholder="Укажите фамилию*" required>
</div>
<div class="user-name__item">
<label class="user-name__label form__label" for="patronymic">Отчество:</label>
<input type="text" name="patronymic" id="patronymic" placeholder="Отчество, если желаете">
</div>
</div>
</div>
</fieldset>
<fieldset class="connection form__item">
<div class="connection__wrapper container">
<div class="connection__item connection__item--tel">
<label class="connection__label connection__label--tel" for="tel">Тел</label>
<input type="tel" name="tel" id="tel" placeholder="+7 XXX XX XX*">
<svg class="connection__icon connection__icon--tel" width="24.829" height="24.333"><use xlink:href="#icon-phone"></use></svg>
</div>
<div class="connection__item connection__item--mail">
<label class="connection__label connection__label--mail" for="mail">e-mail</label>
<input type="email" name="mail" id="mail" placeholder="Ваш Email*">
<svg class="connection__icon connection__icon--mail" width="32" height="32"><use xlink:href="#icon-mail"></use></svg>
</div>
</div>
</fieldset>
<fieldset class="additional form__item">
<div class="form__item-wrapper container">
<h3 class="form__item-title">Доп</h3>
<textarea name="additional" placeholder="Опишите все ваши пожелания к заказу"></textarea>
</div>
</fieldset>
<div class="form__submit container">
<p class="form__required">*Поля обязательны для заполнения</p>
<button class="form__submit-btn btn">Отправить заказ</button>
</div>
</form>
</section>
</main>
<footer class="page-footer">
<div class="page-footer__wrapper container">
<a class="page-footer__logo" href="#">
<svg width="101.615" height="34.056"><use xlink:href="#logo-footer"></use></svg>
</a>
<div class="page-footer__social social">
<a href="" class="social-link social-link--insta">
<svg width="21.769" height="21.334"><use xlink:href="#icon-instagram"></use></svg>
</a>
<a href="" class="social-link social-link--facebook">
<svg width="14.962" height="27.718"><use xlink:href="#icon-facebook"></use></svg>
</a>
<a href="" class="social-link social-link--twitter">
<svg width="23.494" height="20.168"><use xlink:href="#icon-twitter"></use></svg>
</a>
</div>
<a class="page-footer__copyright" href="https://htmlacademy.ru/">
<span>Разработано</span>
<svg width="26.943" height="34.09"><use xlink:href="#logo-academy"></use></svg>
</a>
</div>
</footer>
<script src="js/mishkascript.js"></script>
</body>
</html>