-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (145 loc) · 12.4 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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Сборник Бесконечно Интересных Штук</title>
<link rel="stylesheet/less" type="text/css" href="style.less" />
<script src="https://cdn.jsdelivr.net/npm/less"></script>
<script type='text/javascript' src='main.js'></script>
</head>
<body>
<header>
<h1>
Сборник Бесконечно Интересных Штук
</h1>
<nav>
<ul>
<li>
<a href="#" class="current-page">Главная</a>
</li>
<li>
<a href="#">Обо мне</a>
</li>
<li>
<a href="#">Сиськи</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="main-container">
<aside class="tab">
<button class="tablinks active" onclick="openTab(event, 'Funk')">
Фанк Поп Тэг Паркур
</button>
<button class="tablinks" onclick="openTab(event, 'Main')">
СБИШ
</button>
<button class="tablinks" onclick="openTab(event, 'Лорем')">
Lorem
</button>
</aside>
<article id="Main" class="tabcontent">
<h1>
Что такое СБИШ?
</h1>
<section>
<img src="https://i.pinimg.com/564x/8d/28/57/8d28576d518d4da23e903d96a14ed622.jpg">
<p>
<b>Сборник Бесконечно Интересных Штук</b> -- это <a href="#">мой</a> блог, в котором я буду выкладывать ну уж <i>очень</i> важные штуки. От своих игрушек, до полной коллекции карточек и полноценных романов о <a href="https://tatera.fandom.com/ru">Татере</a>. Я планирую сделать это пространство заменой как раз того сайта на фэндоме (потому что я хочу полную власть над сиэсэсом АХХАХАХАХАХААХАХАХХА).
</p>
<p>
Так же нужно написать отдельную страницу с биографией, и целую галлерею с моими бесконечно интересными штуками.
</p>
<p>
О! Ещё нужно сделать целую страницу где буду писать концептики для моей следующей игры про паркур по крышам и граффити.
</p>
</section>
</article>
<article id="Funk" class="tabcontent tabcontent-display">
<h1>
Фанк Поп Трейсинг Тэг Паркур
</h1>
<section>
<p>
В альтернативном таймлайне, в недалёком будущем, есть город посреди пустыни. Часть проекта компании WeDoEvil по источении ресурсов пустыни Хаст. Весь город — огромный бур-насос, из чего оправдывается его вертикальная архитектура.
</p>
<h2>Слои города</h2>
<p>
Город разделён на три слоя, в каждом живут люди разделённые на классы:
</p>
<ol>
<li>
Нижний слой — слой бедных и рабочих на фабрике. Очень неприятное место.
</li>
<li>
Средний слой — слой среднего класса, застрявшие в рутине. Иногда дым нижнего слоя поднимается и образует непроницаемую пелену.
</li>
<li>
Верхний слой — слой элиты общества, касающийся облаков. Сюда запрещено входить людям слоёв ниже без приглашения.
</li>
</ol>
<h3>
Нижний Слой
</h3>
<img width="200px" class="right" src="https://i.pinimg.com/originals/e4/76/ef/e476eff580e0bd35971ec9335c9db6a6.jpg">
<p>
Основание города, самый просторный и большой слой города по площади. Однако, большой процент этого слоя занимают фабрики, заводы и заброшенные здания, не говоря уже об абсолютно разрушенных природой руин.
</p>
<p>
Каждый здесь мечтает перебраться на средний слой. Но по сравнению, что они получают здесь и с тем, какие цены на жильё там, это может занять пол жизни. И многие просто либо сдаются, либо уходят в криминал.
</p>
<p>
Дети часто выростают беспризорниками и с бандитскими замашками. Устраивают группировки и решают собственные проблемы безаконнья. Они даже пытаются <i>завоевать</i> земли среднего класса, но кроме здешних руин им ещё ничего не получилось взять силой.
</p>
<h3>Средний слой
</h3>
<img width="250px" class="left" src="https://i.imgur.com/GaNizO6.jpeg">
<p>
Люди из среднего слоя всё ещё работают руками, но занимаются менее грязной работой. А кто-то работает в сфере услуг и компьютерных технологий. Почти у каждого дома есть телевизоры и компьютер.
</p>
<p>
Люди здесь уже не волнуются о выживании так сильно, как люди нижнего слоя. Могут позволить поход в кино или ресторан пару раз за месяц. Люди впринципе довольны своей жизни и мало кто стремится к верхнему слою. А тот кто, всё таки желает попасть туда, вынужден смерится с жестокой реальностью бетона.
</p>
<h3>
Верхний слой
</h3>
<img width="240px" class="right" src="https://www.artofmtg.com/wp-content/uploads/2022/04/Mountain-2-Streets-of-New-Capenna-MtG-Art.jpg">
<p>
Жемчужина по среди пустыни, в гнезде орла. Прекрасное место коррупции и непотизма, достигающего облаков. Самый малый из слоёв, которым руководят 5 семей, чётко разделившие слой на районы между собой.
</p>
<p>
Чтобы оказаться на верхнею слою, нужно либо в нём родится, либо получить приглашение, подписанное тремя из пяти семей. В верхний слой ведут 5 лифтов из среднего слоя, каждый в 5 районов. Чтобы перемещаться между ними, нужно тоже иметь разрешение соответствующей семьи.
</p>
<p>Конечно есть и парочка незаконных путей: через внутренний стержень города — канализацию и системные помещения, а так же по воздуху. Главное чтобы никто не заметил, и не выглядеть подозрительно.
</p>
</section>
</article>
<article id="Лорем" class="tabcontent">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet malesuada feugiat. Curabitur fermentum bibendum nulla, non dictum ipsum tincidunt non. Quisque convallis pharetra tempor. Donec id pretium leo. Pellentesque luctus massa non elit viverra pellentesque. Cras vitae neque molestie, rhoncus ipsum sit amet, lobortis dui. Fusce in urna sem. Vivamus vehicula dignissim augue et scelerisque. Etiam quam nisi, molestie ac dolor in, tincidunt tincidunt arcu. Praesent sed justo finibus, fringilla velit quis, porta erat. Donec blandit metus ut arcu iaculis iaculis. Cras nec dolor fringilla justo ullamcorper auctor. Aliquam eget pretium velit. Morbi urna justo, pulvinar id lobortis in, aliquet placerat orci.
Etiam nisi turpis, eleifend nec tellus id, efficitur pellentesque dolor. Proin vitae massa a augue sagittis vulputate. Duis vel fringilla magna, sit amet vestibulum enim. Fusce laoreet accumsan nisl eu sagittis. Morbi hendrerit sapien eget efficitur imperdiet. Aenean vitae nisl id est placerat congue a et nisi. Suspendisse vitae quam ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse eu risus lacus. Ut tristique libero eget est dictum, commodo malesuada orci elementum. Proin molestie eu mi in tempus.
In hac habitasse platea dictumst. Cras augue nisl, cursus mattis mattis id, lacinia nec augue. Integer nec augue non metus interdum rhoncus. Proin non imperdiet ante. Sed mollis, justo ac dapibus auctor, tellus mi congue nisl, nec commodo ex justo ut eros. Etiam fringilla porta dolor vitae gravida. Nulla facilisi. Nam dui eros, mattis ut turpis at, eleifend accumsan odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed id ultrices erat, vehicula viverra ante. Etiam sit amet dignissim tellus, ac laoreet ligula. Aenean fringilla sodales lorem, ac maximus est hendrerit in.
In hac habitasse platea dictumst. Cras augue nisl, cursus mattis mattis id, lacinia nec augue. Integer nec augue non metus interdum rhoncus. Proin non imperdiet ante. Sed mollis, justo ac dapibus auctor, tellus mi congue nisl, nec commodo ex justo ut eros. Etiam fringilla porta dolor vitae gravida. Nulla facilisi. Nam dui eros, mattis ut turpis at, eleifend accumsan odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed id ultrices erat, vehicula viverra ante. Etiam sit amet dignissim tellus, ac laoreet ligula. Aenean fringilla sodales lorem, ac maximus est hendrerit in.
</p>
</article>
</div>
</main>
<footer>
<address>
<a href="https://t.me/Sp1cyP3pp3r">
<img src="tg.svg" width="25vh">
</a>
<a href="https://www.reddit.com/user/Sp1cyP3pp3r/">
<img src="reddit.svg" width="25vh">
</a>
<a href="https://vk.com/ostp4k">
<img src="vk.svg" width="25vh">
</a>
<a href="https://sp1cyp3pp3r.itch.io/">
<img src="itch.svg" width="25vh">
</a>
</address>
</footer>
</body>
</html>