<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<title>WE NEED ANOTHER TITLE!</title>
<style>
@font-face {
font-family: 'BTLM';
src: url('BlackTransLivesMatter-Regular.otf') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Say Their Name';
src: url('SayTheirName-Regular.otf') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Reglo';
src: url('Reglo-Bold.ttf') format('woff');
font-weight: normal;
font-style: normal;
}
@-webkit-keyframes logoshift {
16.5% {
background: url("logo-stripe.svg");
background-size: 10%;
opacity: 1;
}
32.5% {
background: url("logo-shopify.7be96e68.svg");
background-size: 10%;
opacity: 1;
}
49.5% {
background: url("logo-google.ab12f6bf.svg");
background-size: 10%;
opacity: 1;
}
66.5% {
background: url("logo-mckinsey.12e52289.svg");
background-size: 14%;
opacity: 1;
}
82.5% {
background: url("logo-meta.bb40063d.svg");
background-size: 10%;
opacity: 1;
}
0%, 17%, 33%, 50%, 67%, 83%, 100% {
opacity: 0;
}
}
body {
background: url("underwaterblob.gif");
background-size: cover;
overflow: hidden; /* Hide scrollbars */
}
#logos {
animation: logoshift 30s step-end infinite;
position: absolute;
width: 100%;
height: 100%;
z-index: 1000;
}
.quote {
position: absolute;
z-index: 100;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
font-family: 'Reglo';
width: 100vw;
height: 50vw;
display: flex;
align-items: center;
justify-content: center;
font-size: 20vw;
color: transparent;
text-transform: uppercase;
}
/*QUOTE ANIMATION*/
#text {text-align: center; width: 100%}
@-webkit-keyframes quoteshift {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
16.5% {
filter: alpha(opacity=80);
opacity: 0.8;
}
16.6666666666666666666% {
filter: alpha(opacity=0);
opacity: 0;
}
}
.quote:nth-child(1) {
-webkit-animation: quoteshift 8s 2s infinite linear;
background: url("underwaterblob.gif") round scroll center; background-clip: text; background-size: cover;
}
.quote:nth-child(2) {
-webkit-animation: quoteshift 8s 4s infinite linear;
background: url("underwaterblob.gif")round scroll center; background-clip: text; background-size: cover;
}
.quote:nth-child(3) {
-webkit-animation: quoteshift 8s 6s infinite linear;
background: url("underwaterblob.gif") round scroll center; background-clip: text; background-size: cover;
}
.quote:nth-child(4) {
-webkit-animation: quoteshift 8s 8s infinite linear;
background: url("underwaterblob.gif") round scroll center; background-clip: text; background-size: cover;
}
.spin-container01 {
width: 100%;
height: 100%;
animation: spin 14.1s ease-in-out infinite alternate;
position: absolute;
z-index: 10;
}
.spin-container02 {
width: 100%;
height: 100%;
animation: spin 13.9s ease-in-out infinite reverse;
position: absolute;
z-index: 20;
}
.spin-container03 {
width: 100%;
height: 100%;
animation: spin 14.2s ease-in-out infinite alternate;
position: absolute;
z-index: 30;
}
.bd {
width: 100%;
height: 100%;
position: absolute;
background: url("basalt.png");
background-size: 70%;
background-repeat: no-repeat;
background-position: center center;
display: flex;
font-weight: bold;
align-items: center;
justify-content: center;
text-align: center;
opacity: 1;
}
@keyframes spin {
to {
transform: rotate(1turn);
}
}
#container {
position: absolute;
height: 100%;
width: 100%;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
z-index: 50;
font-family: reglo;
color: white;
}
#depth { position: absolute;
z-index: 60;
height: 100%;
width: 95%;
padding-left: 2vw;
padding-right: 2vw;
font-family: reglo;
font-size: 3vw;
color: white;
line-height: 1.3em;
}
.in {margin-left: 50%;}
</style>
</head>
<body>
<div id="logos"></div>
<div id="depth">
<marquee direction="up" height="100%">
geo-physics and<br>
porosity is <br>
a whole queer mood.<br>
<span class="in">world-building but also</span><br>
<span class="in">an insubmission:</span><br>
to dehumanizing effects<br>
of colonial wounds<br>
<span class="in">an insubmission</span><br>
to forced separation</span><br>
between people and land</span><br>
<span class="in">an insubmission</span><br>
to the environmental impact<br>
of extraction<br>
<span class="in">an insubmission</span><br>
<br>
<br>
<span class="in">a queer intimacy with</span></br>
<span class="in">soils, rocks and minerals</span></br>
world-building but also<br>
an insubmission<br>
<span class="in">to dehumanizing effects</span><br>
<span class="in">of colonial wounds</span><br>
an insubmission<br>
<span class="in">to forced separation</span><br>
<span class="in">between people and land</span><br>
an insubmission<br>
<span class="in">to the environmental impact</span><br>
<span class="in">of extraction</span><br>
an insubmission<br>
<br>
<br>
<br>
<br>
<br>
gaps in what’s <br>
gaps to be pushed <br>
gaps to be modelled <br>
gaps to be measured <br>
gaps to be bridged <br>
gaps to be governed <br>
gaps to be profited from (over and over) <br>
gaps between what’s needed <br>
gaps in what’s been achieved <br>
a-historical gaps in the undergrounds <br>
to be filled with chemicals and super critical Co2<br>
<br>
but<br>
<br>
this making and filling of gaps<br>
a displacement<br>
a trapping and death<br>
</marquee>
</div>
<div id="container">
<marquee width="100%" direction="right" height="100%">there are always further depths to go</marquee>
<div class="spin-container01">
<div class="box">
<div class="bd"></div>
</div>
</div>
<div class="spin-container02">
<div class="box">
<div class="bd"></div>
</div>
</div>
<div class="spin-container03">
<div class="box">
<div class="bd"><marquee width="100%" direction="right" height="100%">crystal mutual aid</marquee></div>
</div>
</div>
</div>
<div id="text">
<div class="quote">We Are</div>
<div class="quote">Tectonic</div>
<div class="quote">We Are</div>
<div class="quote">Ready</div>
</div>
</div>
</body>
</html>