Save this as index.html and upload it to your domain’s public_html folder:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Mission Within</title>
<style>
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
margin: 0;
display: grid;
place-items: center;
overflow: hidden;
padding: 24px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #fff;
background:
radial-gradient(circle at 20% 20%, #725cff 0, transparent 35%),
radial-gradient(circle at 80% 80%, #00c9a7 0, transparent 35%),
linear-gradient(135deg, #11162f, #1c1642);
}
.glow {
position: fixed;
width: 320px;
height: 320px;
border: 2px solid rgba(255, 255, 255, 0.15);
border-radius: 50%;
animation: pulse 4s ease-in-out infinite;
}
.card {
position: relative;
width: min(620px, 100%);
padding: clamp(36px, 8vw, 72px);
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 32px;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.status {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 28px;
padding: 9px 15px;
border-radius: 999px;
color: #dffdf6;
background: rgba(0, 201, 167, 0.16);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.status-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: #63ffd8;
box-shadow: 0 0 14px #63ffd8;
}
h1 {
margin: 0;
font-size: clamp(3rem, 10vw, 6rem);
line-height: 0.95;
letter-spacing: -0.06em;
}
h1 span {
display: block;
margin-top: 12px;
color: #9effe6;
font-size: 0.38em;
letter-spacing: 0.02em;
}
p {
max-width: 440px;
margin: 30px auto 0;
color: rgba(255, 255, 255, 0.78);
font-size: 1.08rem;
line-height: 1.65;
}
.check {
display: inline-block;
margin-top: 34px;
padding: 14px 22px;
border-radius: 14px;
color: #171631;
background: #fff;
font-weight: 800;
box-shadow: 0 10px 35px rgba(255, 255, 255, 0.16);
}
@keyframes pulse {
0%, 100% {
transform: scale(0.8);
opacity: 0.25;
}
50% {
transform: scale(1.4);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.glow {
animation: none;
}
}
</style>
</head>
<body>
<div class="glow" aria-hidden="true"></div>
<main class="card">
<div class="status">
<span class="status-dot"></span>
Domain connected
</div>
<h1>
Hello, World!
<span>My Mission Within</span>
</h1>
<p>
The mission has officially begun. If you can see this page,
the domain and web hosting are working correctly.
</p>
<div class="check">✓ Systems online</div>
</main>
</body>
</html>