<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Under Construction</title>
<meta name="description" content="This website is currently under construction. Please check back soon." />
<style>
:root { --bg:#0b1220; --card:#111a2e; --text:#e8eefc; --muted:#a8b3cf; --accent:#6ea8fe; }
* { box-sizing: border-box; }
body {
margin: 0; min-height: 100vh; display: grid; place-items: center;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
background: radial-gradient(1200px 700px at 20% 10%, #1a2a52 0%, transparent 55%),
radial-gradient(900px 600px at 90% 20%, #2a1a52 0%, transparent 60%),
var(--bg);
color: var(--text);
padding: 24px;
}
.card {
width: min(720px, 100%);
background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
border: 1px solid rgba(255,255,255,0.10);
border-radius: 20px;
padding: 28px;
box-shadow: 0 20px 60px rgba(0,0,0,0.35);
position: relative;
overflow: hidden;
}
.badge {
display: inline-flex; align-items: center; gap: 10px;
background: rgba(110,168,254,0.12);
border: 1px solid rgba(110,168,254,0.35);
color: var(--accent);
padding: 8px 12px;
border-radius: 999px;
font-size: 14px;
letter-spacing: 0.2px;
}
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px rgba(110,168,254,0.75); }
h1 { margin: 18px 0 10px; font-size: 40px; line-height: 1.05; }
p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; max-width: 56ch; }
.row { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
appearance: none; border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.06);
color: var(--text);
padding: 12px 14px;
border-radius: 12px;
text-decoration: none;
font-size: 14px;
display: inline-flex; align-items: center; gap: 10px;
}
.btn.primary {
background: rgba(110,168,254,0.18);
border-color: rgba(110,168,254,0.35);
color: #dce9ff;
}
footer { margin-top: 18px; color: rgba(168,179,207,0.85); font-size: 12px; }
.bgshape {
position: absolute; inset: -120px -160px auto auto;
width: 420px; height: 420px; border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(110,168,254,0.35), transparent 60%),
radial-gradient(circle at 70% 70%, rgba(180,110,254,0.25), transparent 65%);
filter: blur(2px);
opacity: 0.9;
pointer-events: none;
}
</style>
</head>
<body>
<main class="card" role="main">
<div class="bgshape"></div>
<div class="badge">
<span class="dot"></span>
Under Construction
</div>
<h1>We’re building something new.</h1>
<p>
This website is currently under construction. We’re working hard behind the scenes and will be live soon.
Please check back later.
</p>
<div class="row">
<a class="btn primary" href="#" onclick="navigator.clipboard?.writeText(window.location.href); alert('Link copied!'); return false;">
Copy this link
</a>
<a class="btn" href="mailto:hello@example.com">
Contact us
</a>
</div>
<footer>
© <span id="y"></span> • All rights reserved
</footer>
</main>
<script>
document.getElementById("y").textContent = new Date().getFullYear();
</script>
</body>
</html>