Platforms
objkt
Description
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Message to the Masses</title>
<style>
:root {
--bg-color: #0a0a0c;
--text-primary: #ffffff;
--text-accent: #ff3333;
--glitch-shadow: rgba(255, 51, 51, 0.5);
}
body {
background-color: var(--bg-color);
color: var(--text-primary);
font-family: 'Helvetica Neue', Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
overflow: hidden;
letter-spacing: 0.05em;
}
.broadcast-container {
text-align: center;
text-transform: uppercase;
position: relative;
}
/* The Transmission/Signal Indicator */
.status-indicator {
font-size: 0.75rem;
color: var(--text-accent);
letter-spacing: 0.4em;
margin-bottom: 1.5rem;
animation: pulse 2s infinite;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.status-indicator::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
background-color: var(--text-accent);
border-radius: 50%;
}
/* Main Title Breakdown */
.title-main {
font-size: 1.5rem;
font-weight: 300;
letter-spacing: 0.6em;
margin-bottom: 0.5rem;
opacity: 0.9;
}
.title-sub {
font-size: 5rem;
font-weight: 900;
letter-spacing: -0.02em;
line-height: 0.9;
background: linear-gradient(180deg, #fff 40%, #555 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 30px var(--glitch-shadow);
}
/* Decorative framing elements to give an "official" or "urgent" feel */
.frame-line {
width: 80px;
height: 1px;
background-color: var(--text-accent);
margin: 2rem auto 0 auto;
opacity: 0.7;
}
/* Animations */
@keyframes pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
/* Responsive scaling */
@media (max-width: 768px) {
.title-main { font-size: 1rem; letter-spacing: 0.4em; }
.title-sub { font-size: 3rem; }
}
</style>
</head>
<body>
<main class="broadcast-container" role="banner">
<div class="status-indicator" aria-hidden="true">Incoming Transmission</div>
<h1 aria-label="A Message to the Masses">
<span class="title-main">A Message to the</span>
<span class="title-sub">Masses</span>
</h1>
<div class="frame-line" aria-hidden="true"></div>
</main>
</body>
</html>On-Chain Data