<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Coming Soon — Under Construction</title>
<meta name="description" content="This website is under construction and will be available soon. Contact us via email or phone." />
<meta name="color-scheme" content="light dark" />
<meta name="robots" content="noindex, nofollow" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
<style>
:root{
--bg: #0b1020;
--panel: #121a33;
--text: #e6e9f5;
--muted: #aab2cf;
--accent: #ffb02e; /* construction yellow */
--accent-2: #3b82f6; /* blue */
--border: rgba(255,255,255,.09);
--shadow: 0 18px 50px rgba(2,6,23,.45);
--radius: 20px;
}
@media (prefers-color-scheme: light){
:root{
--bg: #f6f8ff;
--panel: #ffffff;
--text: #0f172a;
--muted: #475569;
--border: rgba(2,6,23,.08);
--shadow: 0 18px 40px rgba(2,6,23,.06);
}
}
*{box-sizing:border-box}
html, body {height:100%}
body{
margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background:
radial-gradient(1200px 600px at 90% -10%, rgba(59,130,246,.14), transparent 60%),
radial-gradient(900px 500px at -10% 110%, rgba(255,176,46,.18), transparent 60%),
var(--bg);
color:var(--text);
display:grid; place-items:center; padding:24px;
}
.card{
width:min(900px, 100%);
background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)) , var(--panel);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow);
overflow:hidden;
}
header{position:relative; padding:28px 28px 18px 28px}
.brand{display:flex; align-items:center; gap:12px}
.logo{
width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#111;
background:linear-gradient(135deg, var(--accent), #ffd873);
box-shadow: 0 10px 28px rgba(255,176,46,.35);
font-weight:800;
}
.brand h1{margin:0; font-size:20px}
.stripe{
margin-top:16px; height:12px; background: repeating-linear-gradient(135deg, rgba(0,0,0,.25) 0 16px, var(--accent) 16px 32px);
border:1px solid var(--border); border-left:0; border-right:0;
position:relative; overflow:hidden;
}
.stripe::after{
content:""; position:absolute; inset:0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
transform: translateX(-100%);
animation: sweep 2.8s infinite;
}
@keyframes sweep{ to{ transform: translateX(100%);} }
.content{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; padding:22px}
@media (max-width: 760px){ .content{grid-template-columns:1fr} }
.hero{padding:10px 14px}
.hero h2{margin:0 0 8px 0; font-size:36px; letter-spacing:.2px}
.hero p{margin:0; color:var(--muted); line-height:1.7}
.panel{border:1px solid var(--border); background:rgba(255,255,255,.03); border-radius:16px; padding:18px}
.panel h3{margin:0 0 10px 0; font-size:15px; text-transform:uppercase; letter-spacing:.25px; opacity:.9}
.list{margin:0; padding-left:18px; color:var(--muted); line-height:1.9}
.cta{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.btn{appearance:none; text-decoration:none; border:1px solid var(--border); padding:10px 14px; border-radius:12px; font-weight:600; color:var(--text)}
.btn.primary{background:var(--accent); color:#111; border-color:transparent}
.btn:hover{filter: brightness(1.03)}
.contact{
display:grid; grid-template-columns:1fr; gap:12px; margin-top:6px
}
.contact a{color:inherit; text-decoration:none}
.row{display:flex; align-items:center; gap:10px}
.icon{width:18px; height:18px; opacity:.9}
footer{padding:14px 20px; color:var(--muted); display:flex; justify-content:space-between; align-items:center}
</style>
</head>
<body>
<main class="card" role="main" aria-labelledby="title">
<header>
<div class="brand">
<div class="logo" aria-hidden="true">UC</div>
<h1 id="title">Website Under Construction</h1>
</div>
<div class="stripe" aria-hidden="true"></div>
</header>
<section class="content">
<div class="hero">
<h2>We’re building something new.</h2>
<p>
Thanks for stopping by! Our website is currently under construction and will be available soon.
In the meantime, feel free to reach out — we’d love to hear from you.
</p>
<div class="cta">
<a class="btn primary" href="mailto:you@example.com">Email us</a>
<a class="btn" href="tel:+491234567890">Call +49 123 456 7890</a>
</div>
</div>
<aside class="panel" aria-labelledby="contact">
<h3 id="contact">Contact Information</h3>
<div class="contact">
<div class="row">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z" opacity=".1"/><path d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z" opacity="0"/><path d="M4 4l8 8 8-8"/></svg>
<a href="mailto:you@example.com">you@example.com</a>
</div>
<div class="row">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.08 4.18 2 2 0 0 1 4.06 2h3a2 2 0 0 1 2 1.72c.12.9.3 1.77.56 2.61a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.47-1.47a2 2 0 0 1 2.11-.45c.84.26 1.71.44 2.61.56A2 2 0 0 1 22 16.92Z"/></svg>
<a href="tel:+491234567890">+49 123 456 7890</a>
</div>
<div class="row">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 9l9 6 9-6"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" opacity=".2"/></svg>
<a href="https://yourdomain.com" target="_blank" rel="noopener">yourdomain.com</a>
</div>
<div class="row">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 1 1 18 0Z"/><circle cx="12" cy="10" r="3"/></svg>
<span>Paderborn, Germany</span>
</div>
</div>
<hr style="border:none;border-top:1px solid var(--border); margin:14px 0;" />
<div class="row" style="gap:8px; flex-wrap:wrap">
<a class="btn" href="#" target="_blank" rel="noopener">LinkedIn</a>
<a class="btn" href="#" target="_blank" rel="noopener">GitHub</a>
<a class="btn" href="#" target="_blank" rel="noopener">X / Twitter</a>
</div>
</aside>
</section>
<footer>
<small>© <span id="year"></span> Your Company</small>
<small>We’ll be live soon — thanks for your patience.</small>
</footer>
</main>
<script>
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</body>
</html>