-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex1.html
316 lines (300 loc) · 17 KB
/
index1.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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/Normalize.css">
<link rel="stylesheet" href="css/font.css">
<link rel="stylesheet" href="css/general/ui.css">
<link rel="stylesheet" href="css/components/navigation.css">
<link rel="stylesheet" href="css/components/submenu.css">
<link rel="stylesheet" href="css/components/form.css">
<link rel="stylesheet" href="css/components/TV.css">
<link rel="stylesheet" href="css/components/tariff_unlim.css">
<link rel="stylesheet" href="css/components/tariff_clever-things-grey.css">
<link rel="stylesheet" href="css/components/tariff_clever-things-orange.css">
<link rel="stylesheet" href="css/components/tariff_rapid.css">
<link rel="stylesheet" href="css/components/modal.css">
<title>Document</title>
</head>
<script src="js/js.js"></script>
<body>
<div class="ui">
<h1>BUTTONS</h1>
<button class="btn btn_orange">Новое подключение</button>
<button class="btn btn_small">Проверить</button>
<button class="btn btn_transperent">Техническая поддержка</button>
<button class="btn btn_login-orange"> <span class="btn__text_orange btn__icon btn__icon_orange">Войти</span></button>
<button class="btn btn_login-white"><span class="btn__text_white btn__icon btn__icon_white">Войти</span></button>
<h1>LINKS-style</h1>
<a href="javascript:void(0)" class="link link_black-bold">link</a>
<a href="javascript:void(0)" class="link link_black">link</a>
<a href="javascript:void(0)" class="link link_blue">link</a>
<h1>COMPONENTS</h1>
<img src="icon/geo.svg" alt="" class="geo">
<img src="icon/avatar-orange.svg" alt="" class="icon icon_avatar-orange">
<img src="icon/telephone.svg" alt="" class="icon icon_telephone">
<img src="icon/web.svg" alt="" class="icon icon_web">
<img src="icon/desktop.svg" alt="" class="icon icon_desktop">
<img src="icon/massage.svg" alt="" class="icon icon_massage">
<img src="icon/clock.svg" alt="" class="icon icon_clock">
<a href="javascript:void(0)"><img src="icon/right.svg" alt="" class="icon icon_right"></a>
<img src="icon/square.svg" alt="" class="icon icon_square">
<img src="icon/triangle.svg" alt="" class="icon icon_triangle">
<img src="icon/star.svg" alt="" class="icon icon_star">
<img src="icon/cross.svg" alt="" class="icon icon_cross">
<button class="btn btn_orange">Новое подключение</button>
<h1>NAVIGATION</h1>
<header class="header">
<div class="header__content">
<nav class="nav">
<div class="nav__conteiner">
<div class="nav__city">
<img src="icon/geo.svg" alt="" class="nav__city-icon">
<div class="nav__city-container">
<span class="nav__city-now">Москва</span>
<span class="nav__city-change"><a href="javascript:void(0)" class="nav__city-link">Изменить</a></span>
</div>
</div>
<div class="nav__menu">
<a href="javascript:void(0)" class="nav__menu-link nav__menu-link_personal">Частным лицам</a>
<a href="javascript:void(0)" class="nav__menu-link nav__menu-link_business">Бизнесу</a>
</div>
</div>
<button class="btn btn_login-orange"> <span class="btn__text_orange btn__icon btn__icon_orange">Войти</span></button>
</nav>
</div>
</header>
<div class="submenu">
<div class="submenu__content">
<a href="javascript:void(0)"><img src="icon/logo.svg" alt="" class="submenu__logo"></a> <div class="submenu__container"><button class="btn btn_orange">Новое подключение</button>
<button class="btn btn_transperent">Техническая поддержка</button> </div>
</div>
</div>
<form action="javascript:void(0)" method="post">
<input type = "radio" name="radio_button" checked>
</form>
<div class="form">
<div class="form__content">
<legend class="form__legend">Ваш телефон</legend>
<form action="javascript:void(0)" method="post">
<input type="text" name="telephone" placeholder="+7 903 367 65 47" class="form__telephone">
</form>
</div>
</div>
<div class="tv">
<div class="tv__content">
<a href="javascript:void(0)"><img src="img/logo_TV.png" alt="" class="tv__img"></a>
<div class="tv__conteiner">
<a href="javascript:void(0)" class="tv__title-link">Билайн ТВ</a>
<div class="tv__text">Интерактивное телевидение нового поколения. Подключайте телевиденье бесплатно
и смотрите до 300 популярных телеканалов, новинки кино, любимые фильмы и мультфильмы на разных устройствах</div>
</div>
</div>
</div>
<div class="unlimited tariff unlimited__size">
<div class="unlimited__title"><div class="unlimited__title-text">Тариф для тебя «Анлим»</div></div>
<div class="unlimited__content">
<div class="unlimited__home">
<div class="unlimited__home-internet">
<h2 class="unlimited__home-title">Домашний интернет</h2>
<p class="unlimited__text">До <b>100</b> Мбит/c</p>
</div>
<div class="unlimited__home-tv">
<h2 class="unlimited__home-title unlimited__home-title_other" >Телевидение</h2>
<p class="unlimited__text"><b class="b_margin-right">77 </b><a href="javascript:void(0)" class="link link_black link_black_small"> каналов</a></p>
</div>
</div>
<hr>
<div class="unlimited__mobile">
<h2 class="unlimited__mobile-title">Мобильная связь</h2>
<p class="unlimited__text unlimited__text_other"><img src="icon/infinity.svg" alt="" class="unlimited__text-margin"> Гб</p>
<p class="unlimited__text unlimited__text_other"><b class="unlimited__text-margin">600</b> минут</p>
<p class="unlimited__text"><b class="unlimited__text-margin">300</b> СМС</p>
</div>
<hr>
<div class="unlimited__wifi">
<div class="unlimited__wifi-column unlimited__wifi-column_first">
<div class="unlimited__wifi-text">
<h2 class="unlimited__wifi-title">Wi-Fi роутер</h2>
<p class="unlimited__text unlimited__text-grey">3600 ₽</p>
</div>
<form action="javascript:void(0)" class="unlimited__form" method="post" >
<input type="checkbox" id="payt" checked/>
<label for="payt" class="unlimited__text-grey unlimited__text-grey-margin">Купить за 3600 ₽</label>
</form>
</div>
<div class="unlimited__wifi-column">
<a href="javascript:void(0)" class="link link_blue">Выбрать модель</a>
<form action="javascript:void(0)" class="unlimited__form" method="post" >
<input type="checkbox" id="payt2" />
<label for="payt2" class="unlimited__text-grey">Рассрочка на 30 месяцев (80 ₽/месяц)</label>
</form>
</div>
</div>
<hr>
<div class="unlimited__tv">
<div class="unlimited__wifi-text">
<h2 class="unlimited__wifi-title">ТВ приставка</h2>
<p class="unlimited__text unlimited__text-grey">В аренду</p>
</div>
<form action="javascript:void(0)" class="unlimited__form" method="post" >
<input type="checkbox" id="payt3" />
<label for="payt3" class="unlimited__text unlimited__text-grey">150 ₽/месяц </label>
</form>
</div>
<hr>
<div class="unlimited__pay">
<div class="unlimited__pay-column">
<p class="unlimited__text-grey unlimited__text_grey-other">Абонентская плата</p>
<p class="unlimited__text-big">345 <span class="unlimited__text unlimited__text_half-big">₽/месяц</span></p>
<p class=" unlimited__text-grey unlimited__text-grey_other">+ 3600 ₽ единоразово</p>
</div>
<div class="unlimited__pay-column unlimited__pay-column-other">
<a href="javascript:void(0)" class="link link_blue link_blue-other">Подробнее о тарифе</a>
<button class="btn btn_orange btn_orange-other">Подключить</button>
</div>
</div>
</div>
</div>
<!-- Clever things grey - ct-grey -->
<div class="ct-grey ct-grey__size tariff">
<div class="ct-grey__title">
Тариф «Для умных вещей»
</div>
<div class="ct-grey__content">
<div class="ct-grey__home">
<div class="ct-grey__home-internet">
<h2 class="ct-grey__home-title">Домашний интернет</h2>
<p class="ct-grey__text">До <b>100</b> Мбит/c</p>
</div>
</div>
<hr>
<div class="ct-grey__home-tv">
<h2 class="ct-grey__tv-title" >Телевидение</h2>
<p class="ct-grey__text"><b>77 </b><a href="javascript:void(0)" class="link link_black">каналов</a></p>
<p class="ct-grey__text"><b>8000 </b><a href="javascript:void(0)" class="link link_black">фильмов в месяц в подарок</a></p>
</div>
<hr>
<div class="ct-grey__mobile">
<h2 class="ct-grey__mobile-title">Мобильная связь</h2>
<p class="ct-grey__text"><img src="icon/infinity.svg" alt=""> Гб</p>
<p class="ct-grey__text"><b>600</b> минут</p>
<p class="ct-grey__text"><b>300</b> СМС</p>
<p class="ct-grey__text"><b>2</b> доп. устройства за доп. плату</p>
</div>
<hr>
<div class="ct-grey__pay">
<p class="ct-grey__text ct-grey__text_big">345 <span class="ct-grey__text ct-grey__text_half-big">₽/месяц</span></p>
<a href="javascript:void(0)" class="link link_blue link_blue-other">Подробнее о тарифе</a>
<button class="btn btn_orange btn_orange-other ct-grey__button">Подключить</button>
</div>
</div>
</div>
<!-- clever-things orange -->
<div class="ct-orange ct-orange__size tariff">
<div class="ct-orange__title">Тариф «Для умных вещей»</div>
<div class="ct-orange__content">
<div class="ct-orange__internet">
<p class="ct-orange__text-grey">Посекундная тарификация местных вызовов</p>
<p class="ct-orange__text-grey">Единая цена на местные звонки — 3,21 ₽/минуту</p>
<p class="ct-orange__text-grey">Выгодная цена на звонки по России — 3,21 ₽/минуту</p>
<h2 class="ct-orange__internet-subtitle ct-orange__subtitle">Интернет</h2>
<p class="ct-orange__text"><b>500</b> мб</p>
</div>
<hr>
<div class="ct-orange__minuts">
<h2 class="ct-orange__mimuts-subtitle ct-orange__subtitle">Минуты</h2>
<p class="ct-orange__text"><b>30</b> минут</p>
</div>
<hr>
<div class="ct-orange__sms">
<h2 class="ct-orange__sms-subtitle ct-orange__subtitle">СМС</h2>
<p class="ct-orange__text"><b>100</b> СМС</p>
</div>
<hr class="hr hr_margin-other">
<div class="ct-orange__pay">
<p class="ct-orange__pay-text ">Абонентская плата</p>
<p class="ct-orange__text ct-orange__text_big">345 <span class="ct-orange__text ct-orange__text_half-big">₽/месяц</span></p>
<a href="javascript:void(0)" class="link link_blue link_blue-other">Подробнее о тарифе</a>
<button class="btn btn_orange btn_orange-other ct-orange__button">Подключить</button>
</div>
</div>
</div>
<!-- tariff rapid -->
<div class="rapid tariff rapid__size">
<div class="rapid__title"><div class="rapid__title-text">Скоростной</div></div>
<div class="rapid__content">
<div class="rapid__home">
<div class="rapid__home-internet">
<h2 class="rapid__home-title">Скорость</h2>
<p class="rapid__text"><b>300</b> Мбит/cекунду</p>
</div>
</div>
<hr>
<div class="rapid__wifi">
<div class="rapid__wifi-column">
<div class="rapid__wifi-text">
<h2 class="rapid__wifi-title">Wi-Fi роутер</h2>
<p class="rapid__text rapid__text-grey">3600 ₽</p>
</div>
<form action="javascript:void(0)" class="rapid__form" method="post" >
<input type="checkbox" id="payt" checked/>
<label for="payt" class="rapid__text-grey">Купить за 3600 ₽</label>
</form>
</div>
<div class="rapid__wifi-column">
<a href="javascript:void(0)" class="link link_blue link_other-blue">Выбрать модель</a>
<form action="javascript:void(0)" class="rapid__form" method="post" >
<input type="checkbox" id="payt2" />
<label for="payt2" class="rapid__text-grey rapid__text-grey_right">Рассрочка на 30 месяцев (80 ₽/месяц)</label>
</form>
</div>
</div>
<hr>
<div class="rapid__tv">
<div class="rapid__wifi-text">
<h2 class="rapid__wifi-title">ТВ приставка</h2>
<p class="rapid__text rapid__text-grey">В аренду</p>
</div>
<form action="javascript:void(0)" class="rapid__form" method="post" >
<input type="checkbox" id="payt3" />
<label for="payt3" class="rapid__text rapid__text-grey">150 ₽/месяц </label>
</form>
</div>
<hr>
<div class="rapid__pay">
<p class="rapid__pay-text ">Абонентская плата</p>
<p class="rapid__text rapid__text_big">345 <span class="rapid__text rapid__text_half-big">₽/месяц</span></p>
<p class="rapid__text-grey rapid__text-grey_big">+ 3600 ₽ единоразово</p>
<a href="javascript:void(0)" class="link link_blue link_blue-other">Подробнее о тарифе</a>
<button class="btn btn_orange btn_orange-other rapid__button">Подключить</button>
</div>
</div>
</div>
</div>
<br><br>
<a href="#openModal">Открыть модальное окно</a>
<br>
<div id="openModal" class="modal-window">
<div class="modal modal__content modal-img">
<form class="modal__form-close">
<input type="radio" id="close" name="close" value="close">
<input type="radio" id="close1" name="close" value="close1" checked>
<label for= "close"><img src="icon/close.svg" alt=""></label>
</form>
<div class="modal__title modal-title"><p><span class="modal__span">Вы можете позвонить нам </span><span class="modal__span modal__span_orange">по бесплатному номеру</span></p>
</div>
<div class="modal__subtitle modal-title">8 800 100 00 00</div>
<form class="modal__form">
<input type = "radio" id = "new-conect" name = "choice" value = "new-conect" checked>
<label for = "new-conect">Новое подключение</label>
<input type = "radio"id = "support" name = "choice" value = "support">
<label for = "support">Техническая поддержка</label>
</form>
<div class="modal__container"><span class="modal__text">Также вы можете заказать обратный звонок.</span><span class="modal__text">Мы перезвоним вам в течение 15 минут!</span></div>
<button class="btn btn_orange">Новое подключение</button>
</div>
</div>
</body>
</html>