-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindexrussia.html
215 lines (199 loc) · 16.3 KB
/
indexrussia.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Home Page</title>
<link rel="icon" type="image/ico" href="favicon.ico" />
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #000000;
margin: 0;
padding: 0;
color: #000;
background-image: url(img/background.gif);
}
/* ~~ Селекторы элементов/тегов ~~ */
ul, ol, dl { /* Из-за различий между браузерами рекомендуется обнулять поля в списках. Для согласованности можно указать нужные величины либо здесь, либо в элементах списка (LI, DT, DD), которые они содержат. Помните, что сделанное здесь последовательно включается в список .nav, если только не будет прописан более конкретный селектор. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* удаление верхнего поля позволяет обойти проблему выхода полей за границы содержащего их контейнера DIV. Оставшееся нижнее поле отделит его от любых последующих элементов. */
padding-right: 15px;
padding-left: 15px; /* добавление боковых полей к элементам внутри контейнеров DIV, а не к самим контейнерам избавляет от необходимости расчетов рамочной модели. В качестве альтернативы можно использовать вложенный контейнер DIV с боковыми полями. */
color: #FFF;
text-align: left;
font-family: "Silkscreen [Rus by Mr.Enot]";
background-image: none;
background-color: #000;
background-repeat: no-repeat;
background-attachment: scroll;
}
a img { /* этот селектор убирает стандартную синюю рамку, которая появляется у изображений в некоторых браузерах, если вокруг изображения есть ссылка */
border: none;
}
/* ~~ Оформление ссылок на вашем сайте должно оставаться в этом порядке, включая группу селекторов, создающих эффект наведения. ~~ */
a:link {
color: #FFFFFF;
text-decoration: underline; /* если только ссылки не должны выглядеть исключительно своеобразно, то для быстрого зрительного распознавания рекомендуется использовать подчеркивание */
}
a:visited {
color: #FFFFFF;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* эта группа селекторов обеспечивает пользователю, работающему с клавиатурой, такие же возможности наведения, как и при использовании мыши. */
text-decoration: none;
color: #FFFFFF;
}
/* ~~ этот контейнер окружает все остальные контейнеры DIV, задавая их ширину на процентной основе ~~ */
.container {
width: 80%;
max-width: 1260px;/* желательно задать максимальную ширину, чтобы макет не стал слишком широким на большом экране. Это повышает удобство чтения строк. В IE6 это объявление не соблюдается. */
min-width: 780px;/* желательно задать минимальную ширину, чтобы макет не стал слишком узким. Это повышает удобство чтения строк в боковых столбцах. В IE6 это объявление не соблюдается. */
background-color: #000;
margin: 0 auto; /* автоматическое задание величин по бокам в совокупности с шириной центрирует макет. Это необязательно, если ширина контейнера составляет 100 %. */
}
/* ~~ верхнему колонтитулу не задана ширина. Он растянется на всю ширину макета. Он содержит заполнитель для изображения, который должен быть заменен логотипом по ссылке ~~ */
.header {
background-color: #000000;
}
/* ~~ Столбцы для макета. ~~
1) Поля размещены только вверху и/или внизу DIV. Элементы в этих DIV имеют боковые поля. Это избавляет пользователя от необходимости расчетов рамочной модели. Помните, что при добавлении боковых полей или границы к самому DIV их ширина будет добавлена к задаваемой ширине, что образует "полную" ширину. Кроме того, можно удалить поля элемента в DIV и поместить внутри него второй DIV без ширины и с необходимыми по проекту полями.
2) Столбцы не снабжаются полями, поскольку все они обтекающие. Если нужно добавить поля, то желательно не с той стороны, с которой обтекается столбец (например, правое поле у div, настроенного на обтекание справа). Часто вместо этого можно применить padding. В случаях, когда это правило приходится нарушить, следует добавить к правилу div объявление "display:inline", чтобы исправить ошибку с удвоением полей в некоторых версиях Internet Explorer.
3) Поскольку классы можно использовать в документе многократно (а к элементу можно применять несколько классов), то столбцам вместо идентификаторов назначены имена классов. Например, два DIV с боковыми панелями могут при необходимости стыковаться. По желанию имена можно легко заменить на идентификаторы при условии, что они используются по одному на документ.
4) Если вы предпочитаете, чтобы панель навигации была справа, а не слева, просто установите обтекание столбцов в противоположном направлении (все справа, а не слева), они выстроятся в обратном порядке. Перемещать DIV в исходном коде HTML-документа не нужно.
*/
.sidebar1 {
float: left;
width: 30%;
background-color: #000000;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 50%;
float: left;
font-family: "Silkscreen [Rus by Mr.Enot]";
}
.sidebar2 {
float: left;
width: 20%;
background-color: #000000;
padding: 10px 0;
}
/* ~~ Этот сгруппированный селектор выдает списки в пространстве .content ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* это поле зеркально повторяет правое поле в правиле для заголовков и параграфов выше. Внизу поле помещено как граница между элементами списков, а слева — как отступ. Поля можно настраивать по желанию. */
}
/* ~~ Стили списка навигации (можно убрать, если решено использовать готовое подменю, например Spry) ~~ */
ul.nav {
list-style: none; /* удаляет маркер списка */
border-top: 1px solid #666; /* создает верхнюю границу ссылок — все остальные размещаются с использованием нижней границы в LI */
margin-bottom: 15px; /* создает пространство между навигацией по содержимому ниже */
color: #FFF;
font-family: "Silkscreen [Rus by Mr.Enot]";
}
ul.nav li {
border-bottom: 1px solid #666; /* разделяет кнопки */
}
ul.nav a, ul.nav a:visited { /* группировка этих селекторов гарантирует, что ссылки будут выглядеть как кнопки даже после того, как пользователь перейдет по ним */
padding: 5px 5px 5px 15px;
display: block; /* наделяет ссылку свойствами блока, из-за чего она заполняет весь содержащий ее элемент LI. При этом вся область реагирует на щелчок мышью. */
text-decoration: none;
background-color: #000000;
color: #FFF;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* изменяет цвет текста и фона при навигации с помощью клавиатуры и мыши */
background-color: #000000;
color: #FFF;
}
/* ~~ Нижний колонтитул ~~ */
.footer {
padding: 10px 0;
background-color: #000000;
position: relative;/* IE6 получает hasLayout для правильной очистки */
clear: both; /* это свойство очистки заставляет .container видеть место окончания столбцов и включать их */
background-image: url(img/background.gif);
}
/* ~~прочие классы float/clear~~ */
.fltrt { /* этот класс можно использовать для обтекания элемента справа на странице. Обтекаемый элемент должен предшествовать элементу, с которым он должен находиться рядом на странице. */
float: right;
margin-left: 8px;
}
.fltlft { /* этот класс можно использовать для обтекания элемента слева на странице. Обтекаемый элемент должен предшествовать элементу, с которым он должен находиться рядом на странице. */
float: left;
margin-right: 8px;
}
.clearfloat { /* этот класс можно поместить в теге <br /> или в пустом блоке DIV в качестве конечного элемента, следующего за последним обтекаемым DIV (внутри #container), если .#footer удален или извлечен из #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
body,td,th {
font-family: "Silkscreen [Rus by Mr.Enot]";
}
-->
</style><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* это отрицательное поле в 1 пиксел можно поместить в любом столбце данного макета с таким же корректирующим эффектом. */
ul.nav a { zoom: 1; } /* свойство масштабирования предоставляет IE триггер hasLayout, необходимый для удаления лишнего пустого пространства между ссылками */
</style>
<![endif]--></head>
<body background="img/background.gif">
<div class="container">
<div class="header">
<p><a href="#"><img src="img/logo vovakubarik.com.png" alt="Место для логотипа" name="Insert_logo" width="636" height="89" id="Insert_logo" style="background-color: #000000; display: block;" /></a></p>
<p><a href="#"><img src="img/Flag_of_Russia.svg.png" width="40" height="20" /></a> <a href="https://vovakubarik.com"><img src="img/Flag_of_the_United_States.svg.png" width="40" height="20" /></a></p>
</div>
<div class="sidebar1">
<ul class="nav">
<li><a href="#">▌Главная</a></li>
<li><a href="blog.htm">▌Блог</a></li>
<li><a href="https://vovakubarik.boards.net/">▌Форум</a></li>
<li><a href="https://soundcloud.com/vovakubarik">▌Музыка</a></li>
<li><a href="#">▌Магазин <Скоро будет></a></li>
</ul>
<p>▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌ </p>
<p><img src="img/JnbGnQVF.gif" width="200" height="205" /></p>
<p><a href="https://linktr.ee/vovakubarik"><img src="img/2024-07-28-social-network-.gif" width="350" height="150" /></a></p>
<audio autoplay="autoplay" controls="controls" loop="loop"><br />
<source src="Girl From Petaluma.ogg" type="audio/ogg" />
<source src="Girl From Petaluma.mp3" type="audio/mp3" />
<source src="Girl From Petaluma.wav" type="audio/wav" />
</audio>
</div>
<div class="content">
<h1 align="justify"><img src="img/cooltext462911249496101 (1).gif" width="436" height="92" /><a href="#"><img src="img/1370185436_1852061252.gif" width="146" height="108" /></a></h1>
<h2 align="justify">▌> Добро пожаловать на мою домашнюю страницу. Здесь вы не найдете ничего лишнего, думаю, вам понравится :)<code><kbd><br />
</kbd></code></h2>
<h1 align="justify"><a href="https://web.archive.org/web/20070102003751/https://www.mtv.com/"><img src="img/logomtv-2-5b.gif" width="237" height="137" /></a><img src="img/9e861d701ca498233c3b6082abb7aed3 (1).gif" width="250" height="120" /></h1>
<h1 align="justify">Обо мне </h1>
<h2 align="justify">▌> Привет, меня зовут Вова. Я окончил 9-й класс в 13-й школе, 8-й и 9-й классы мне было скучно посещать. Какое-то время я был студентом, но мне это не нравилось:(<br />
▌> Я играю на гитаре, моя мечта - собрать супер-группу. Но меня не берут, потому что я слишком плохо шучу для них.<br />
</h2>
<!-- end .content --></div>
<div class="sidebar2">
<p><span class="header"><a href="mailto:[email protected]"><img src="img/2024-07-28-EMAIL.gif" width="280" height="130" /></a></span></p>
<p><img src="img/[BraveDown.Com] [Old Web Gif Boardaesthetic Board 🎮] [1722196906] .gifv" width="225" height="170" /></p>
<p> </p>
<p><a href="https://web.archive.org/web/20081025065929/http://www.apple.com/"><img src="img/[BraveDown.Com] [Old Web Gif Boardaesthetic Board 🎮] [1722196913] .gifv" width="240" height="261" /></a></p>
<p> </p>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div class="footer">
<p><img src="img/[BraveDown.Com] [Smiling Friends Blinkies] [1722120185] .gifv" width="377" height="45" /><img src="img/[BraveDown.Com] [Smiling Friends Blinkies] [1722120301] .gifv" width="377" height="45" /><img src="img/[BraveDown.Com] [Smiling Friends Blinkies] [1722120581] .gifv" width="377" height="45" /><!-- end .footer --></p>
</div>
<!-- end .container --></div>
</body>
</html>