about brand x people page
This commit is contained in:
parent
34e029cbb0
commit
e3c0fa72d1
1 changed files with 200 additions and 0 deletions
200
tem/html/pages/about.html
Normal file
200
tem/html/pages/about.html
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
{{ template "head.html" .}}
|
||||
|
||||
<div style="height: 64px; width: 100%;"></div>
|
||||
|
||||
<p style='
|
||||
line-height: 1.75;
|
||||
color: white;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
'>
|
||||
An effort to open higher degrees of<br>
|
||||
spatial interaction free<br>
|
||||
to the world.
|
||||
</p>
|
||||
|
||||
<div style="height: 12px; width: 100%;"></div>
|
||||
|
||||
<img src='https://media.dof.dev/kit/logotype.svg?v22' width='256'>
|
||||
<p>degrees of freedom development</p>
|
||||
|
||||
<div style="height: 12px; width: 100%;"></div>
|
||||
|
||||
<div class='shuffle' style='
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
'>
|
||||
<div style='color: white; font-size: 18px;'>
|
||||
Ethan Merchant <span style="color: var(--col-01); font-size: 14px;">@spatialfree</span>
|
||||
<a
|
||||
href='https://ethanmerchant.com'
|
||||
target="_blank"
|
||||
style="text-decoration: none;"
|
||||
>
|
||||
🔗
|
||||
</a>
|
||||
</div>
|
||||
<div style='color: white; font-size: 18px;'>
|
||||
Niko Ryan <span style="color: var(--col-01); font-size: 14px;">@opendegree</span>
|
||||
<a
|
||||
href='https://nikoryan.com'
|
||||
target="_blank"
|
||||
style="text-decoration: none;"
|
||||
>
|
||||
🔗
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style='
|
||||
color: var(--col-06);
|
||||
font-size: 48px;
|
||||
padding: 12px;
|
||||
'>×</div>
|
||||
|
||||
<div id='x'>
|
||||
{{ range .Data.Peers }}
|
||||
<a
|
||||
href='{{ .Project.Url }}'
|
||||
title='{{ .Project.Name }}'
|
||||
target='_blank'
|
||||
>
|
||||
<div style='
|
||||
background-image: url("{{ .Project.Icon }}");
|
||||
'></div>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div style="flex: 1;"></div>
|
||||
|
||||
<div style="display: block; position: relative; width: auto;">
|
||||
<div style="display: block; position: relative;">
|
||||
<img src="/public/img/knuckles_owo-removebg.png?v29" loading="lazy" height="360px" style="margin-right: 0;">
|
||||
<div class="scene">
|
||||
<div class="cube">
|
||||
<img class="degree" src="/public/img/icons/degree.svg?v29">
|
||||
<div class="cube__face cube__face--front">
|
||||
<div class="edge" style="position: absolute; left: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(000, 000, 255, 1), rgba(000, 255, 255, 1));"></div>
|
||||
<div class="edge" style="position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(000, 255, 255, 1), rgba(255, 255, 255, 1));"></div>
|
||||
<div class="edge" style="position: absolute; bottom: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(000, 000, 255, 1), rgba(255, 000, 255, 1));"></div>
|
||||
<div class="edge" style="position: absolute; right: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(255, 000, 255, 1), rgba(255, 255, 255, 1));"></div>
|
||||
</div>
|
||||
<div class="cube__face cube__face--back">
|
||||
<div class="edge" style="position: absolute; left: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(255, 000, 000, 1), rgba(255, 255, 000, 1));"></div>
|
||||
<div class="edge" style="position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(255, 255, 000, 1), rgba(000, 255, 000, 1));"></div>
|
||||
<div class="edge" style="position: absolute; bottom: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(255, 000, 000, 1), rgba(000, 000, 000, 1));"></div>
|
||||
<div class="edge" style="position: absolute; right: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(000, 000, 000, 1), rgba(000, 255, 000, 1));"></div>
|
||||
</div>
|
||||
<div class="cube__face cube__face--right">
|
||||
<div class="edge" style="position: absolute; left: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(255, 000, 255, 1), rgba(255, 255, 255, 1));"></div>
|
||||
<div class="edge" style="position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 000, 1));"></div>
|
||||
<div class="edge" style="position: absolute; bottom: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(255, 000, 255, 1), rgba(255, 000, 000, 1));"></div>
|
||||
<div class="edge" style="position: absolute; right: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(255, 000, 000, 1), rgba(255, 255, 000, 1));"></div>
|
||||
</div>
|
||||
<div class="cube__face cube__face--left">
|
||||
<div class="edge" style="position: absolute; left: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(000, 000, 000, 1), rgba(000, 255, 000, 1));"></div>
|
||||
<div class="edge" style="position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(000, 255, 000, 1), rgba(000, 255, 255, 1));"></div>
|
||||
<div class="edge" style="position: absolute; bottom: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(000, 000, 000, 1), rgba(000, 000, 255, 1));"></div>
|
||||
<div class="edge" style="position: absolute; right: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(000, 000, 255, 1), rgba(000, 255, 255, 1));"></div>
|
||||
</div>
|
||||
<div class="cube__face cube__face--top">
|
||||
<div class="edge" style="position: absolute; left: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(000, 255, 255, 1), rgba(000, 255, 000, 1));"></div>
|
||||
<div class="edge" style="position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(000, 255, 000, 1), rgba(255, 255, 000, 1));"></div>
|
||||
<div class="edge" style="position: absolute; bottom: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(000, 255, 255, 1), rgba(255, 255, 255, 1));"></div>
|
||||
<div class="edge" style="position: absolute; right: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(255, 255, 255, 1), rgba(255, 255, 000, 1));"></div>
|
||||
</div>
|
||||
<div class="cube__face cube__face--bottom">
|
||||
<div class="edge" style="position: absolute; left: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(000, 000, 000, 1), rgba(000, 000, 255, 1));"></div>
|
||||
<div class="edge" style="position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(000, 000, 255, 1), rgba(255, 000, 255, 1));"></div>
|
||||
<div class="edge" style="position: absolute; bottom: -1px; left: -1px; right: -1px; height: 2px; background: linear-gradient(90deg, rgba(000, 000, 000, 1), rgba(255, 000, 000, 1));"></div>
|
||||
<div class="edge" style="position: absolute; right: -1px; width: 2px; top: -1px; bottom: -1px; background: linear-gradient(00deg, rgba(255, 000, 000, 1), rgba(255, 000, 255, 1));"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: block; position: absolute; bottom: 0; right: 0; padding: 10px;">
|
||||
<a href="https://twitter.com/luciherzig" style="color: rgb(170 175 255);">@luciherzig</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#x {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
justify-content: center;
|
||||
gap: 32px;
|
||||
> a > div {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background-size: contain;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.scene {
|
||||
position: absolute;
|
||||
bottom: 184px;
|
||||
right: 206px;
|
||||
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
perspective: 120px;
|
||||
perspective-origin: 32px 16px;
|
||||
transform-style: preserve-3d;
|
||||
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.666));
|
||||
}
|
||||
.degree {
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
animation: unspin 6s linear infinite;
|
||||
}
|
||||
@keyframes unspin {
|
||||
0% { transform: rotateY(460deg); }
|
||||
50% { transform: rotateY(280deg); }
|
||||
100% { transform: rotateY(100deg); }
|
||||
}
|
||||
.cube {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
/* transform: translateZ(-20px); */
|
||||
animation: spin 6s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
0% { transform: translateY(0px) rotateY( 80deg); }
|
||||
50% { transform: translateY(5px) rotateY(260deg); }
|
||||
100% { transform: translateY(0px) rotateY(440deg); }
|
||||
}
|
||||
.cube__face {
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
/* background: rgba(204, 204, 204, 0.5); */
|
||||
}
|
||||
.edge {
|
||||
border-radius: 3px;
|
||||
}
|
||||
.cube__face--front {
|
||||
transform: rotateY(0deg) translateZ(16px);
|
||||
}
|
||||
.cube__face--right {
|
||||
transform: rotateY(90deg) translateZ(16px);
|
||||
}
|
||||
.cube__face--back {
|
||||
transform: rotateY(180deg) translateZ(16px);
|
||||
}
|
||||
.cube__face--left {
|
||||
transform: rotateY(-90deg) translateZ(16px);
|
||||
}
|
||||
.cube__face--top {
|
||||
transform: rotateX(90deg) translateZ(16px);
|
||||
}
|
||||
.cube__face--bottom {
|
||||
transform: rotateX(-90deg) translateZ(16px);
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Reference in a new issue