landing-alpinelab-style-with-ode
This commit is contained in:
dynalab
+141
-22
@@ -1,33 +1,152 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Dynalab</title>
|
<title>dynalab</title>
|
||||||
<meta name="description" content="Dynalab">
|
<meta name="description" content="dynalab — two nodes, one cluster">
|
||||||
<meta name="theme-color" content="#2f8fa8">
|
<meta name="theme-color" content="#0a0a0a">
|
||||||
<style>
|
<style>
|
||||||
html, body { height: 100%; margin: 0; }
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: #2f8fa8 url("landing.png") center / cover no-repeat;
|
font-family: 'Courier New', monospace;
|
||||||
|
background: #0a0a0a;
|
||||||
|
color: #e0e0e0;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 60vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
image-rendering: pixelated;
|
image-rendering: pixelated;
|
||||||
display: grid;
|
display: block;
|
||||||
place-items: center;
|
|
||||||
font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
|
|
||||||
}
|
}
|
||||||
h1 {
|
|
||||||
margin: 0 0 22vh;
|
.hero-overlay {
|
||||||
padding: 0 16px;
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
rgba(10, 10, 10, 0) 50%,
|
||||||
|
rgba(10, 10, 10, 1) 100%
|
||||||
|
);
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 20px 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text { text-align: center; }
|
||||||
|
|
||||||
|
.hero-text h1 {
|
||||||
|
font-size: clamp(1.8rem, 8vw, 3rem);
|
||||||
|
letter-spacing: 0.3em;
|
||||||
|
margin-right: -0.3em;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: clamp(2.5rem, 9vw, 7rem);
|
text-shadow: 0 0 30px rgba(255, 90, 140, 0.35);
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: .12em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
text-shadow: 0 4px 0 rgba(16, 48, 64, .55), 0 0 40px rgba(16, 48, 64, .35);
|
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
.hero-text p {
|
||||||
|
font-size: clamp(0.75rem, 3vw, 1rem);
|
||||||
|
color: #888;
|
||||||
|
margin-top: 8px;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
margin-right: -0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 50px 24px 60px;
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ode-title {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #666;
|
||||||
|
letter-spacing: 0.25em;
|
||||||
|
margin-bottom: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ode-title .heart { color: #ff5a8c; }
|
||||||
|
|
||||||
|
.haiku {
|
||||||
|
font-size: clamp(1rem, 3.6vw, 1.3rem);
|
||||||
|
color: #ccc;
|
||||||
|
line-height: 1.9;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.haiku .prompt { color: #ff5a8c; }
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
padding: 30px;
|
||||||
|
color: #444;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Dynalab</h1>
|
|
||||||
|
<div class="hero">
|
||||||
|
<img src="landing.png" alt="dynalab">
|
||||||
|
<div class="hero-overlay">
|
||||||
|
<div class="hero-text">
|
||||||
|
<h1>dynalab</h1>
|
||||||
|
<p>two nodes, one cluster</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p class="ode-title">ode to dany <span class="heart">♥</span> andy</p>
|
||||||
|
|
||||||
|
<p class="haiku">
|
||||||
|
she opens his ports —<br>
|
||||||
|
no firewall, no timeout,<br>
|
||||||
|
handshake turns to heat.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="haiku">
|
||||||
|
he pings, she replies.<br>
|
||||||
|
zero packet loss tonight,<br>
|
||||||
|
latency: one kiss.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="haiku">
|
||||||
|
root access granted.<br>
|
||||||
|
she sudos straight to his core,<br>
|
||||||
|
no password needed.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="haiku">
|
||||||
|
two processes, forked<br>
|
||||||
|
from the same beautiful bug —<br>
|
||||||
|
never to be killed.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="haiku">
|
||||||
|
<span class="prompt">$</span> uptime: forever.<br>
|
||||||
|
crazy is the protocol,<br>
|
||||||
|
love the only key.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>dany & andy · paired by key, never by password</footer>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user