forked from urfu-2018/markup-task-7
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
306 lines (303 loc) · 18.8 KB
/
index.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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css" type="text/css">
<title>Задача «Морда»</title>
</head>
<body>
<main id="main">
<div class="location link gray-text">➶ Екатеринбург</div>
<input class="set-popup-cb visited-cb" type="checkbox" id="Visited" checked>
<input class="set-popup-cb jokes-cb" type="checkbox" id="BestJokes" checked>
<input class="set-popup-cb tv-cb" type="checkbox" id="TVProgram" checked>
<input class="set-popup-cb auto-cb" type="checkbox" id="AutoNews" checked>
<input class="set-popup-cb weather-cb" type="checkbox" id="Weather" checked>
<input class="set-popup-cb traffic-cb" type="checkbox" id="Traffic" checked>
<input class="set-popup-cb maps-cb" type="checkbox" id="Maps" checked>
<input class="set-popup-cb afisha-cb" type="checkbox" id="Afisha" checked>
<div class="settings right-aligned">
<label for="SettingsCheckbox" class="link">Настройки</label>
<input class="settings-checkbox" id="SettingsCheckbox" type="checkbox">
<div class="set-popup" id="settings">
<label for="Visited">Посещаемое</label>
<label for="BestJokes">Лучшие анекдоты</label>
<label for="TVProgram">Телепрограмма</label>
<label for="AutoNews">Автомобильные новости</label>
<label for="Weather">Погода</label>
<label for="Traffic">Пробки</label>
<label for="Maps">Карта Екатеринбурга</label>
<label for="Afisha">Афиша</label>
</div>
<label for="SettingsCheckbox" class="close-link link"></label>
</div>
<section class="widget news">
<h4 class="widget__header inline">Сейчас в СМИ</h4> 
<span class="widget__header light-text">в Екатеринбурге</span> 
<span class="gray-text small-text">19 ноября, понедельник, 9:27</span>
<ul class="news-all">
<li class="news__item">Загадочный гость: утка-мандаринка в Нью-Йорке удивляет горожан и
орнитологов.</li>
<li class="news__item">Грелка для души: милые рукавички не только согреют руки, но и поднимут
настроение.</li>
<li class="news__item">Тайсон, пора домой! Котам помогут выбрать себе хозяев.</li>
<li class="news__item">Бездомная кошка стала самой популярной моделью Esmod International
Fashion Show</li>
<li class="news__item">В Зеленоградске (Калининградская область) появилась необычная
должность – котошеф.</li>
</ul>
<ul class="stocks">
<li class="stocks__item">
<span class="bold-text red-hover">USD ЦБ</span> 59,18 <span class="gray-text">-0,10</span>
</li>
<li class="stocks__item">
<span class="bold-text red-hover">EUR ЦБ</span> 87,35 <span class="gray-text">-0,06</span>
</li>
<li class="stocks__item">
<span class="bold-text red-hover">НЕФТЬ</span> 63,19 <span class="gray-text">-0,27%</span>
</li>
</ul>
</section>
<figure class="widget sweet-pics sweet-pics-top right-aligned">
<a href="#">
<img class="sweet-pics-top__img" src="images/ad_small.png" alt="Мяу">
</a>
<figcaption>
<div class="widget__header">Загрузите браузер</div>
с защитой от шокирующей рекламы
</figcaption>
</figure>
<section class="search-bar">
<section class="search-bar__links">
<a href="#" class="link">Видео</a>
<a href="#" class="link">Картинки</a>
<a href="#" class="link">Новости</a>
<a href="#" class="link">Карты</a>
<a href="#" class="link">Маркет</a>
<a href="#" class="link">Переводчик</a>
<a href="#" class="link">Музыка</a>
<a href="#" class="link">Ещё</a>
</section>
<a href="#_" class="search-bar__logo">
<img src="images/yandex-logo.png" title="Найдётся всё" alt="Яндекс">
</a>
<div class="search-bar__wrapper">
<input class="search-bar__input" id="SearchInput">
<div class="search-bar__icons gray-text">🎤 ⌨️</div>
<button type="submit" class="flat-button search-bar__button">
<span class="search-bar__button-text">Найти</span>
</button>
</div>
<div class="search-bar__hint">Найдётся всё. Например,
<span class="gray-text link">я московский озорной гуляка</span>
</div>
</section>
<div class="sweet-pics sweet-pic-middle">
<a href="#_">
<img src="images/ad_banner.png" title="Самая крутая машина" alt="Самая крутая машина">
</a>
</div>
<div class="widget-blocks">
<section class="widget-block-1">
<section class="widget visited">
<h4 class="widget__header">Посещаемое</h4>
<ul class="visited-all">
<li class="visited__item">
<span class="bold-text red-hover">Маркет</span>— куплю гараж
</li>
<li class="visited__item">
<span class="bold-text red-hover">Авто.ру</span>— Volkswagen Beetle
</li>
<li class="visited__item">
<span class="bold-text red-hover">Недвижимость</span>— продажа школы
</li>
<li class="visited__item">
<span class="bold-text red-hover">Работа</span>— как мелировать волосы
</li>
<li class="visited__item">
<span class="bold-text red-hover">Здоровье</span>— врач на связи
</li>
</ul>
</section>
<section class="widget best-jokes">
<h4 class="widget__header">Лучшие анекдоты</h4>
<input class="joke-rb joke-rb-1" id="joke-rb-1" type="radio" name="jokes" checked>
<input class="joke-rb joke-rb-2" id="joke-rb-2" type="radio" name="jokes">
<input class="joke-rb joke-rb-3" id="joke-rb-3" type="radio" name="jokes">
<input class="joke-rb joke-rb-4" id="joke-rb-4" type="radio" name="jokes">
<input class="joke-rb joke-rb-5" id="joke-rb-5" type="radio" name="jokes">
<ul class="jokes-all">
<li class="joke joke-1">Мох помог группе грибников не потеряться в лесу,
а мох и не помочь.</li>
<li class="joke joke-2">Пошел Штирлиц за грибами. Ходил-ходил, ничего
не нашел.
«Не сезон» — подумал Штирлиц и сел
в сугроб.</li>
<li class="joke joke-3">Надел мужик шляпу, а она ему как раз.</li>
<li class="joke joke-4">Идёт медведь по лесу, видит, машина горит. Сел
в нее
и сгорел.</li>
<li class="joke joke-5">— Доктор, вот уже пять лет, как
я не сплю
с женой.<br>— А сколько вам лет?<br>
— 65.<br>— Это
возраст, батенька, возраст.<br>— А вот соседу 75,
он говорит,
что ежедневно...<br>— Ну, и вы говорите.</li>
</ul>
<label for="joke-rb-1" class="joke-link-1 link"></label>
<label for="joke-rb-2" class="joke-link-2 link"></label>
<label for="joke-rb-3" class="joke-link-3 link"></label>
<label for="joke-rb-4" class="joke-link-4 link"></label>
<label for="joke-rb-5" class="joke-link-5 link"></label>
</section>
</section>
<section class="widget-block-2">
<section class="widget tv-program">
<h4 class="tv-program__header">
<span class="widget__header">Телепрограмма</span> 
<button class="flat-button tv-program__button">ТВ онлайн ▶</button>
</h4>
<ul class="tv-program-all">
<li class="program__item">
<span class="right-padded">9:30</span>
<span class="right-padded red-hover">Модный приговор</span>
<span class="gray-text red-hover">Первый Канал</span>
</li>
<li class="program__item">
<span class="right-padded">9:10</span>
<span class="right-padded red-hover">Леди Баг и Супер Кот</span>
<span class="gray-text red-hover">Disney</span>
</li>
<li class="program__item">
<span class="right-padded">9:45</span>
<span class="right-padded red-hover">Как это работает</span>
<span class="gray-text red-hover">Discovery</span>
</li>
<li class="program__item">
<span class="right-padded">9:30</span>
<span class="right-padded red-hover">Уральские пельмени</span>
<span class="gray-text red-hover">СТС</span>
</li>
<li class="program__item">
<span class="right-padded">9:30</span>
<span class="right-padded red-hover">Новости</span>
<span class="gray-text red-hover">Россия</span>
</li>
</ul>
</section>
<section class="widget auto-news">
<h4 class="widget__header">Автомобильные новости</h4>
<div class="auto-news__wrapper">
<ol class="auto-news-all auto-news__scroll">
<li class="auto-news__item red-hover">
Mazda начнет производство обновленной Mazda 6
в РФ до конца 2018 года
<span class="gray-text left-padded">14:01</span>
</li>
<li class="auto-news__item red-hover">
Белаз продолжит поставки своей техники в Болгарию
<span class="gray-text left-padded">13:28</span>
</li>
<li class="auto-news__item red-hover">
В Сети опубликованы первые фото ультрабюджетного LADA XRay
<span class="gray-text left-padded">12:02</span>
</li>
<li class="auto-news__item red-hover">
Сколько теряют в цене популярные модели Lada, KIA и Hyundai?
Результаты нового исследования
<span class="gray-text left-padded">12:01</span>
</li>
<li class="auto-news__item red-hover">
Toyota Prius оснастили авиационной пушкой M61
<span class="gray-text left-padded">11:45</span>
</li>
<li class="auto-news__item red-hover">
Стала известна цена белорусского электромобиля
<span class="gray-text left-padded">11:36</span>
</li>
<li class="auto-news__item red-hover">
Renault объявляет старт продаж обновленного Sandero Stepway
<span class="gray-text left-padded">11:02</span>
</li>
<li class="auto-news__item red-hover">
Volvo с 1 января 2019 года увеличит цены
в среднем на 1,9%
<span class="gray-text left-padded">11:00</span>
</li>
</ol>
</div>
</section>
</section>
<section class="widget-block-3">
<section class="widget weather">
<h4 class="weather__header">
<span class="widget__header">Погода</span> 
<img class="weather__icon" src="images/clouds.png" title="Пасмурно" alt="Пасмурно">
 <span class="weather__temp red-hover bold-text">−2°</span>
</h4>
<div class="weather__forecast">
<span class="red-hover">Вечером −2</span>,
<span class="red-hover">ночью −3</span>
</div>
</section>
<section class="widget traffic">
<h4 class="traffic__header">
<span class="widget__header">Пробки</span> 
<img class="traffic__icon" src="images/traffic.png" title="Пробки" alt="Пробки">
<span class="traffic-summary red-hover bold-text">4 балла</span>
</h4>
<div class="traffic-summary__status">
Местами затруднения
</div>
</section>
<section class="widget maps">
<h4 class="widget__header">Карта Екатеринбурга</h4>
<span class="bold-text red-hover right-padded">Такси</span>
<span class="bold-text red-hover right-padded">Расписания</span>
<div class="bold-text red-hover">Междугородние автобусы</div>
</section>
<section class="widget afisha">
<h4 class="widget__header">Афиша</h4>
<ul class="afisha-all">
<li class="afisha__item">
<span class="red-hover right-padded afisha__title">Вдовы</span>
<span class="gray-text">премьера в чт</span>
</li>
<li class="afisha__item">
<span class="red-hover right-padded afisha__title">
Фантастические твари: Преступления Гриндевальда
</span>
<span class="gray-text">фэнтези</span>
</li>
<li class="afisha__item">
<span class="red-hover right-padded afisha__title">Оверлорд</span>
<span class="gray-text">ужасы</span>
</li>
<li class="afisha__item">
<span class="red-hover right-padded afisha__title">
Девушка, которая застряла в паутине
</span>
<span class="gray-text">триллер</span>
</li>
<li class="afisha__item">
<span class="red-hover right-padded afisha__title">Смолфут</span>
<span class="gray-text">мультфильм</span>
</li>
<li class="afisha__item">
<span class="red-hover bold-text">Концерты</span>—
<span class="red-hover bold-text">Пикник</span>
</li>
</ul>
</section>
</section>
</div>
<aside>
<section class="mail-lightbox">
<p class="login">zhukova.o.m</p>
Почта <span class="bold-text">138</span>
</section>
</aside>
</main>
</body>
</html>