-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
112 lines (99 loc) · 7.88 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
<!doctype html>
<html dir="ltr" lang="ru-RU" class="no-js">
<head>
<meta charset="utf-8">
<title>Субкультурная Генетика</title>
<meta name="description" content="Проект курса «Фотография в Медиа» для выставки Faces&Laces 2019">
<meta property="msapplication-TileColor" content="#f7f7f7">
<meta property="msapplication-TileImage" content="https://subcultural-genetics.com/mstile.png">
<meta property="og:locale" content="ru_RU">
<meta property="og:type" content="website">
<meta property="og:title" content="Субкультурная Генетика">
<meta property="og:description" content="Проект курса «Фотография в Медиа» для выставки Faces&Laces 2019.">
<meta property="og:url" content="https://subcultural-genetics.com/">
<meta property="og:site_name" content="Субкультурная Генетика">
<meta property="og:image:secure_url" content="https://subcultural-genetics.com/screenshoot.png">
<meta property="og:image:type" content="image/png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Субкультурная Генетика">
<meta name="twitter:description" content="Проект курса «Фотография в Медиа» для выставки Faces&Laces 2019.">
<meta name="twitter:image" content="https://subcultural-genetics.com/screenshoot.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<link rel="preload" href="fonts/NeueMachina-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="css/base.css" type="text/css">
<meta name="theme-color" content="#333333">
<base target="_blank">
<style>
:root {
--color-bg: hsl(0, 0%, 20%);
--color-bd: hsl(0, 0%, 96.9%);
}
body {
background-color: var(--color-bg);
color: var(--color-bd);
overflow: hidden
}
</style>
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Пожалуйста, просмотрите этот вебсайт в современном браузере, который поддерживает переменные CSS.");</script>
</head>
<body>
<main class="main">
<header class="main__header">
<h2 class="tagline">Субкультурная Генетика — проект курса «Фотография в Медиа» для выставки Faces&Laces 2019</h2>
<div id="openBtn" class="btn" role="button" aria-pressed="false" tabindex="0">∞</div>
<dialog id="dialog" class="dialog">
<div id="closeBtn" class="btn btn--close" role="button" aria-pressed="false" tabindex="0">❌</div>
<ul>
<li>
<p class="text">Проект состоит из трех частей, каждая из которых осмысливает субкультуры, как часть культурного кода.</p>
</li>
<li>
<ol>
<li>
<h4 class="subheading">❶</h4>
<p class="text">Это каталог из 100 предметов, принадлежащих представителям субкультур прошлого и настоящего. Собранные вместе они формируют собственный визуальный язык.</p>
</li>
<li>
<h4 class="subheading">❷</h4>
<p class="text">Cмешение направлений и коммерциализация стирают границы между принадлежностью к субкультуре и модным потреблением. Во второй части проекта одежда представлена через гиперболизацию этой идеи.</p>
</li>
<li>
<h4 class="subheading">❸</h4>
<p class="text">Это визуализация обучения нейросетей на выборке фотографий различных субкультур. В результате вы можете увидеть, как искусственный интеллект стирает границы между панками, готами, рэперами и рэйверами.</p>
</li>
</ol>
</li>
<li>
<p class="text">Кураторы:<br>Анастасия Баташова, Екатерина Старостина, Анна Кортюкова</p>
</li>
<li>
<p class="text">Обучение моделей ProGAN:<br>Николай Иванов, Вадим Эпштейн</p>
</li>
<li>
<p class="text">Над проектом работали:<br>Анастасия Квариани, Станислав Привалов, Евгения Черновская, Мария Курзякова, Таисия Ищенко, Элина Ли, Антон Курлаев, Любовь Котова, Ольга Попова, Ирина Писарева, Карина Вагапова, Александр Климов, Екатерина Одина, Алексей Победителев, Виктория Юрушкина, Василиса Бикеева, Анастасия Елизарьева, Людмила Букалова, Дарья Глобина.</p>
</li>
</ul>
</dialog>
</header>
<nav class="main__nav">
<a class="main__nav-link" href="/past" data-instant>①</a>
<a class="main__nav-link" href="/present" data-instant>②</a>
<a class="main__nav-link" href="/future" data-instant>③</a>
</nav>
<footer class="main__footer">
<a class="main__footer-link" href="http://mamm-edu.ru/courses/photoinmedia/" rel="noopener" data-no-instant>Photo in Media</a>
<a class="main__footer-link" href="https://www.instagram.com/photo_in_media/" rel="noopener" data-no-instant>
<svg aria-hidden="true" focusable="false" class="svg" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg>
</a>
</footer>
</main>
<div class="cursor">
<div class="cursor__inner"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js" integrity="sha256-lPE3wjN2a7ABWHbGz7+MKBJaykyzqCbU96BJWjio86U=" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
<script src="//instant.page/3.0.0" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>
</body>
</html>