Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added fonts/machina.eot
Binary file not shown.
154 changes: 154 additions & 0 deletions fonts/machina.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added fonts/machina.ttf
Binary file not shown.
Binary file added fonts/machina.woff
Binary file not shown.
Binary file added fonts/machina.woff2
Binary file not shown.
Binary file added fonts/zelek.eot
Binary file not shown.
269 changes: 269 additions & 0 deletions fonts/zelek.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added fonts/zelek.ttf
Binary file not shown.
Binary file added fonts/zelek.woff
Binary file not shown.
Binary file added fonts/zelek.woff2
Binary file not shown.
Binary file added images/dead.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/king.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/oldpaper.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/yura.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
204 changes: 204 additions & 0 deletions index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
@font-face
{
font-family: machina;
src: url(./fonts/machina.ttf)
format('truetype'), url(./fonts/machina.eot)
format('eot'), url(./fonts/machina.woff)
format('woff'), url(./fonts/machina.woff2)
format('woff2'), url(./fonts/machina.svg)
format('svg');
}

@font-face
{
font-family: zelek;
src: url(./fonts/zelek.ttf)
format('truetype'), url(./fonts/zelek.eot)
format('eot'), url(./fonts/zelek.woff)
format('woff'), url(./fonts/zelek.woff2)
format('woff2'), url(./fonts/zelek.svg)
format('svg');
}

body
{
background: url(images/oldpaper.jpg) no-repeat;
background-size: cover;
}

header
{
font: 5em machina;
text-align: center;
}

aside
{
text-align: center;
width: 50px;
word-break: break-all;
float: left;
font: 4em machina;
}

main
{
margin-left: 60px;
font: 1em zelek;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Где-то em где-то pt, приведи к одному виду

}

h1
{
font-size: 2em;
}

.block1
{

font-size: 1em;
padding: 5px;
}

.first
{
width: 40%;
padding: 20px;
}

.second
{
padding: 20px;
}

.third
{
text-align: center;
width: 20%;
height: 100%;
word-break: break-all;
font: 4em machina;
}

.first,
.second,
.third
{
display: table-cell;
vertical-align: top;
}

.king
{
column-span: all;
text-align: center;
}

.kingimage
{
width: 100%;
}

.walker
{
column-span: all;
text-align: center;
}

.walkerimage
{
width: 100%;
column-span: all;
text-align: center;
}

.first::first-letter
{
font-size: 2em;
margin-left: 15px;
border: 2px dashed #000;
}

.block2

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Название класса должно быть говорящим

{
font-size: 1em;
border: 7px dotted #000;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Если делаешь разный бордер, то сделай что бы на стыке блоков был только один бордер, а не как сейчас 2(не очень красиво)

padding: 2%;
}

.block3
{
font-size: 1em;
padding: 2%;
}

h3
{
column-span: all;
text-align: center;
font-size: 2em;
}

.end,
.authorimage
{
vertical-align: top;
display: inline-block;
}

.end
{
width: calc(100% - 300px);
}

.authorimage
{
width: 200px;
}

.columns1
{
column-count: 1;
column-gap: 3em;
}

.columns2
{
column-count: 2;
column-gap: 2em;

}

.columns3
{
margin-top: 0;
column-count: 3;
column-gap: 3em;
}

.columns4
{
column-count: 4;
column-gap: 3em;
}

.columns5
{
column-count: 5;
column-gap: 3em;
}

.c1:checked ~ main
{
color: #fff;
background-color: #000;
}

.c2:checked ~ main
{
font-family: Arial;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Нужен фолбэк для шрифта

}

.c3:checked ~ main
{
font-size: 150%;
}
163 changes: 162 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,169 @@
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Задача «DeLorean DMC-12»</title>
<title>#киногид_психопата</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<input type="checkbox" id="checkbox1" class="c1">
<label for="checkbox1">Фон</label>

<input type="checkbox" id="checkbox2" class="c2">
<label for="checkbox2">Шрифт</label>

<input type="checkbox" id="checkbox3" class="c3">
<label for="checkbox3">Размер</label>

<header>
свидетели сингулярности
</header>

<aside>#киногид<br><br>психопата</aside>

<main>
<article>
<h1 class="title">Игра Престолов 7 сезон</h1>
<div class="text">
<div class="block1">
<div class="first columns2" >
Как со&shy;вер&shy;шен&shy;но спра&shy;вед&shy;ли&shy;во за&shy;ме&shy;тил
в фейс&shy;бу&shy;ке один мой друг(Шу&shy;рик, при&shy;вет!),
Night King - по&shy;след&shy;ний ин&shy;те&shy;рес&shy;ный пер&shy;со&shy;наж
в Иг&shy;ре Пре&shy;сто&shy;лов. Спе&shy;шу со&shy;гла&shy;сить&shy;ся.
Наи&shy;бо&shy;лее оче&shy;вид&shy;ная при&shy;чи&shy;на здесь в том, что Night
King - один из не&shy;мно&shy;гих ос&shy;нов&shy;ных пер&shy;со&shy;на&shy;жей,
ко&shy;то&shy;ро&shy;го мы до сих пор не уви&shy;де&shy;ли без пор&shy;ток.
<div class="king">
<img alt="kingimage" class="kingimage" title="night king" src="images/king.jpg">
</div>
Осталь&shy;ным уже ни&shy;ко&shy;гда не удаст&shy;ся про&shy;бу&shy;дить
ин&shy;те&shy;рес
к их пер&shy;со&shy;нам, по&shy;то&shy;му что их со&shy;и&shy;тия, пыт&shy;ки и
смер&shy;ти
мы ви&shy;де&shy;ли во всех все&shy;воз&shy;мож&shy;ных ра&shy;кур&shy;сах,
они про&shy;чи&shy;та&shy;ны на&shy;столь&shy;ко, на&shy;сколь&shy;ко мы
се&shy;бя-то
ни&shy;ко&shy;гда
(к сча&shy;стью) не чи&shy;та&shy;ем.
Ка&shy;кой уж тут те&shy;перь мо&shy;жет быть ин&shy;те&shy;рес?
</div>
<div class="third">white<br>walkers</div>
<div class="second columns2">
Но де&shy;ло, ко&shy;неч&shy;но, не толь&shy;ко в этом.
Вду&shy;май&shy;тесь в ис&shy;то&shy;рию Night King-а и White Walker-ов.
Ко&shy;роль был че&shy;ло&shy;ве&shy;ком, не&shy;ко&shy;гда
пре&shy;вра&shy;щен&shy;ным
ма&shy;ги&shy;ей в Ино&shy;го, и по&shy;сле это&shy;го об&shy;ра&shy;тил
хо&shy;до&shy;ков
с по&shy;мо&shy;щью той же са&shy;мой ма&shy;гии в мла&shy;ден&shy;че&shy;стве.
Не за&shy;будь&shy;те о том, что ма&shy;гия яв&shy;ля&shy;ет&shy;ся
фэн&shy;те&shy;зи-ме&shy;та&shy;фо&shy;рой на&shy;у&shy;ки.
<div class="walker">
<img alt="walkerimage" class="walkerimage" title="walker" src="images/dead.gif">
</div>
Те&shy;перь Иные об&shy;ла&shy;да&shy;ют все&shy;воз&shy;мож&shy;ны&shy;ми
ма&shy;ги&shy;че&shy;ски&shy;ми спо&shy;соб&shy;но&shy;стя&shy;ми,
ар&shy;ми&shy;ей
бес&shy;плат&shy;ной и бес&shy;пре&shy;ко&shy;слов&shy;ной ра&shy;бо&shy;чей
си&shy;лы
(весь&shy;ма де&shy;я&shy;тель&shy;ной, как мы ви&shy;де&shy;ли, в пла&shy;не
под&shy;ня&shy;тия
за&shy;то&shy;нув&shy;ших тя&shy;же&shy;стей, и, ве&shy;ро&shy;ят&shy;но,
так&shy;же
в ме&shy;тал&shy;лур&shy;гии, по&shy;то&shy;му что ина&shy;че
ре&shy;ши&shy;тель&shy;но
не&shy;воз&shy;мож&shy;но объ&shy;яс&shy;нить, от&shy;ку&shy;да
за сте&shy;ной та&shy;кие
це&shy;пи),
и, ко&shy;неч&shy;но же, a-mortality - не бес&shy;смер&shy;ти&shy;ем, но
спо&shy;соб&shy;но&shy;стью
не уми&shy;рать в слу&shy;чае, ко&shy;гда к это&shy;му ни&shy;кто не
при&shy;кла&shy;ды&shy;ва&shy;ет
де&shy;я&shy;тель&shy;ных уси&shy;лий.
</div>
</div>
<div class="block2 columns4">

Это же клас&shy;си&shy;че&shy;ский сю&shy;жет син&shy;гу&shy;ляр&shy;но&shy;сти!
Ки&shy;бор&shy;ги&shy;за&shy;ция (в слу&shy;чае ко&shy;ро&shy;ля) и
ге&shy;не&shy;ти&shy;че&shy;ская
ин&shy;же&shy;не&shy;рия (хо&shy;до&shy;ки),
ро&shy;бо&shy;ты-при&shy;служ&shy;ни&shy;ки,
тех&shy;но&shy;ло&shy;гии, за&shy;вер&shy;шен&shy;ный “Про&shy;ект
Гиль&shy;га&shy;меш” -
че&shy;го еще же&shy;лать-то? Это - ре&shy;пор&shy;таж из
пост-син&shy;гу&shy;ляр&shy;но&shy;сти,
и не слу&shy;чай&shy;но нам не&shy;по&shy;нят&shy;ны по&shy;мыс&shy;лы
хо&shy;до&shy;ков,
их мо&shy;ти&shy;вы: цель и смыс&shy;ле - это во&shy;об&shy;ще-то нечто очень
че&shy;ло&shy;ве&shy;че&shy;ское, у по&shy;ст&shy;че&shy;ло&shy;ве&shy;ка и
ка&shy;те&shy;го&shy;рии та&shy;кой мо&shy;жет не быть. Они Иные не толь&shy;ко в
Мар&shy;ти&shy;нов&shy;ском, но и в Ла&shy;ка&shy;нов&shy;ском смыс&shy;ле, и
че&shy;рез
диа&shy;лог Ве&shy;сте&shy;ро&shy;са с ни&shy;ми мы мо&shy;жем
рас&shy;шиф&shy;ро&shy;вать
ав&shy;тор&shy;скую кон&shy;цеп&shy;цию вос&shy;при&shy;я&shy;тия
син&shy;гу&shy;ляр&shy;но&shy;сти.
<h3><q>Это же классический сюжет сингулярности!</q></h3>

И по&shy;ка она, ко&shy;неч&shy;но, жут&shy;кая. В ка&shy;че&shy;стве
ме&shy;та&shy;фо&shy;ры
ро&shy;бо&shy;та у нас не го&shy;ле&shy;мы, а
по&shy;лу&shy;раз&shy;ло&shy;жен&shy;ные
тру&shy;пы,
сам вид ко&shy;то&shy;рых при&shy;зван от&shy;бить у нас же&shy;ла&shy;ние иметь
по&shy;доб&shy;ные
си&shy;лы. По&shy;ст&shy;лю&shy;ди пред&shy;став&shy;ле&shy;ны
из&shy;на&shy;чаль&shy;но
враж&shy;деб&shy;ны&shy;ми, с пер&shy;вой се&shy;рии они же&shy;сто&shy;ко
уби&shy;ва&shy;ют
лю&shy;дей, и для вой&shy;ны нет ни&shy;ка&shy;кой аль&shy;тер&shy;на&shy;ти&shy;вы.
Са&shy;ма Сте&shy;на сво&shy;ей гран&shy;ди&shy;оз&shy;но&shy;стью
сим&shy;во&shy;ли&shy;зи&shy;ру&shy;ет за&shy;ряд этой вой&shy;ны и те
не&shy;во&shy;об&shy;ра&shy;зи&shy;мые уси&shy;лия, ко&shy;то&shy;рые нуж&shy;ны
для за&shy;щи&shy;ты нас от син&shy;гу&shy;ляр&shy;но&shy;сти. По&shy;бе&shy;да над
смер&shy;тью ока&shy;зы&shy;ва&shy;ет&shy;ся Пир&shy;ро&shy;вой, и нам да&shy;же
не мо&shy;жет прий&shy;ти в го&shy;ло&shy;ву мысль о том, что об&shy;ра&shy;ще&shy;ние
всех мла&shy;ден&shy;цев Ве&shy;сте&shy;ро&shy;са в хо&shy;до&shy;ков мо&shy;жет быть
не тра&shy;ге&shy;ди&shy;ей, а ве&shy;ли&shy;чай&shy;шим
эво&shy;лю&shy;ци&shy;он&shy;ным про&shy;ры&shy;вом.

Имен&shy;но так бу&shy;дут ви&shy;деть лю&shy;ди, en masse,
ки&shy;бор&shy;ги&shy;за&shy;цию
и био&shy;ин&shy;же&shy;не&shy;рию: как из&shy;го&shy;тов&shy;ле&shy;ние чуж&shy;дых
и враж&shy;деб&shy;ных су&shy;ществ, для за&shy;щи&shy;ты от ко&shy;то&shy;рых
нуж&shy;на здо&shy;ро&shy;вен&shy;ная сте&shy;на. Не ве&shy;ри&shy;те?
По&shy;смот&shy;ри&shy;те на от&shy;но&shy;ше&shy;ние стар&shy;ше&shy;го
по&shy;ко&shy;ле&shy;ния
к смарт&shy;фо&shy;нам и ин&shy;тер&shy;не&shy;ту, ко&shy;то&shy;рые
“зом&shy;би&shy;ру&shy;ют”
(да&shy;же кон&shy;но&shy;та&shy;ция та же са&shy;мая, труп&shy;ная!)
мо&shy;ло&shy;дежь,
от&shy;ры&shy;ва&shy;ют де&shy;тей от ми&shy;лых че&shy;ло&shy;ве&shy;че&shy;ских
глу&shy;по&shy;стей
вро&shy;де пи&shy;на&shy;ния ме&shy;ча и са&shy;ло&shy;чек, пре&shy;вра&shy;ща&shy;ют
их в Иных,
пу&shy;сто та&shy;ра&shy;ща&shy;щих&shy;ся в экран и бес&shy;смыс&shy;лен&shy;но
кла&shy;ца&shy;ю&shy;щих по не&shy;му. Но мы-то зна&shy;ем, как на са&shy;мом
де&shy;ле
на&shy;сы&shy;ще&shy;на жизнь по ту сто&shy;ро&shy;ну экра&shy;на, не так ли?

</div>
<div class="block3">
<p class="end">
Так что же там, по ту сто&shy;ро&shy;ну Сте&shy;ны? Не&shy;уже&shy;ли лишь ужас
по&shy;жи&shy;ло&shy;го че&shy;ло&shy;ве&shy;ка,
под&shy;на&shy;то&shy;рев&shy;ше&shy;го
в ро&shy;ман&shy;тиз&shy;ме и мен&shy;таль&shy;но
пе&shy;ре&shy;ехав&shy;ше&shy;го в
good old times? Не хо&shy;чу в это ве&shy;рить. Уди&shy;ви ме&shy;ня,
Джордж Мар&shy;тин!
Ведь рань&shy;ше это по&shy;лу&shy;ча&shy;лось так хо&shy;ро&shy;шо!
</p>
<img alt="authorimage" class="authorimage" title="Юрий Окуловский" src="images/yura.png">
</div>
</div>
</article>
</main>
</body>
</html>