-
Notifications
You must be signed in to change notification settings - Fork 287
/
frames.html
139 lines (121 loc) · 4.98 KB
/
frames.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
<!DOCTYPE html>
<html class="page" lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Две колонки на фреймах</title>
<style>
/* Page */
.page,
.page__body {
height: 100%;
}
.page {
font-family: sans-serif;
}
.page__body {
margin: auto;
width: 800px;
background-color: tomato;
}
/* News */
.news--first {
background-color: lightgreen;
}
.news--second {
background-color: peachpuff;
}
/* News Title */
.news__title {
margin: 0;
padding: 15px;
font-weight: normal;
font-size: 20px;
}
/* News Lead */
.news__lead {
margin: 0;
padding: 15px;
padding-top: 0;
line-height: 1.4;
font-size: 16px;
}
/* Columns */
.columns {
display: block;
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body class="page__body">
<iframe class="columns" src="data:text/html,
<!DOCTYPE html>
<meta charset='utf-8'>
<frameset cols='50%,20,50%' border='0'>
<frame frameborder='0' src='data:text/html,
<!DOCTYPE html>
<meta charset=utf-8>
<style>
body {
margin: 0;
font-family: sans-serif;
}
.news {
background-color: lightgreen;
}
.news__title {
margin: 0;
padding: 15px;
font-weight: normal;
font-size: 20px;
}
.news__lead {
margin: 0;
padding: 15px;
padding-top: 0;
line-height: 1.4;
font-size: 16px;
}
</style>
<article class=news>
<h2 class=news__title>В Англии обнаружили круги на полях. Но это круги из обнимающихся щенков лабрадора!</h2>
<p class=news__lead>В английском городе Брэдстоун графства Девон восемь щенков лабрадора легли кругом, прижавшись друг к другу — получился большой калачик. Увы, один из щенков опоздал. Пришлось залезть прямо на братьев и сестер и спать на их спинах. Впрочем, так даже мягче и теплее!</p>
</article>
'>
<frame frameborder='0' src='data:text/html,'>
<frame frameborder='0' src='data:text/html,
<!DOCTYPE html>
<meta charset=utf-8>
<style>
body {
margin: 0;
font-family: sans-serif;
}
.news {
background-color: peachpuff;
}
.news__title {
margin: 0;
padding: 15px;
font-weight: normal;
font-size: 20px;
}
.news__lead {
margin: 0;
padding: 15px;
padding-top: 0;
line-height: 1.4;
font-size: 16px;
}
</style>
<article class=news>
<h2 class=news__title>На Камчатке лиса украла у туристов камеру. Поэтому сейчас вы увидите прямое включение из ее пасти</h2>
<p class=news__lead>Наконец-то, нашлось видео, в котором операторской работе позавидует сам Эммануэль Любецки, работавший над «Выжившим», «Бердмэном» и «Гравитацией»! Не будем томить: на Камчатке лиса украла камеру у невнимательных туристов — и убежала вместе с ней куда глаза глядят. Соответственно, вид получился буквально изнутри лисы, еще и с ASMR-озвучкой в виде ее громкого пыхтения.</p>
</article>
'>
</frameset>
"></iframe>
</body>
</html>