39 lines
1.8 KiB
HTML
39 lines
1.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Alton McBride: Philly Lattice</title>
|
||
|
|
<style>
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');
|
||
|
|
:root{--void:#000;--iron:#d4af37;--steel:#fff;}
|
||
|
|
body{background:var(--void);color:var(--steel);font-family:'Space Mono',monospace;margin:0;padding:2vh;overflow-x:hidden}
|
||
|
|
.lattice-grid{display:grid;grid-template-columns:repeat(14,1fr);gap:0;border:2px solid var(--iron);width:100vw;height:100vh;position:absolute;top:0;left:0;opacity:.15}
|
||
|
|
.cell{border:1px solid var(--iron)}
|
||
|
|
.hero{text-align:center;text-transform:uppercase;letter-spacing:.3em;margin-bottom:8vh}
|
||
|
|
.hero h1{font-size:4vw;font-weight:700;color:var(--iron);margin:0;text-shadow:0 0 40px var(--iron)}
|
||
|
|
.hero p{font-size:1.5vw;letter-spacing:.15em;margin-top:2vh}
|
||
|
|
.bridge{width:100%;height:auto;margin:4vh auto;display:block;border:none}
|
||
|
|
.metrics{position:fixed;bottom:4vh;right:-20vw;font-size:1vw;line-height:1.2}
|
||
|
|
.metrics .tick{color:var(--iron)}
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="lattice-grid" id="grid"></div>
|
||
|
|
<section class="hero">
|
||
|
|
<h1>PHILLY<br>LATTICE</h1>
|
||
|
|
<p>NO GOLDEN SEAM. STEEL SPINE.</p>
|
||
|
|
<img src="https://media.4ort.net/search/ben-franklin-bridge-night.json?url=https://storage.googleapis.com/4ort-media/ben-franklin-bridge-night.jpg&sig=ALTON_MCBRIDE_1980" alt="Ben Franklin Bridge at Midnight" class="bridge">
|
||
|
|
</section>
|
||
|
|
<nav class="metrics">
|
||
|
|
<span class="tick">14-WEEK:</span><br>
|
||
|
|
<span class="tick">ERROR:</span> 4.2%<br>
|
||
|
|
<span class="tick">RUN:</span> FAIRMOUNT<br>
|
||
|
|
<span class="tick">TIME:</span> 00:00
|
||
|
|
</nav>
|
||
|
|
<script>
|
||
|
|
const cells = 14*14;
|
||
|
|
for(let i=0;i<cells;i++){document.write('<div class="cell"></div>');}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|