<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Coming Soon | Learn With Arshyan</title>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
font-family: 'Outfit', sans-serif;
background: url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 1;
}
.content {
position: relative;
z-index: 2;
text-align: center;
padding: 40px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
backdrop-filter: blur(8px);
}
.content h1 {
font-size: 42px;
margin-bottom: 20px;
letter-spacing: 1px;
}
.timer {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 20px;
}
.timer-box {
text-align: center;
}
.timer-box h2 {
font-size: 48px;
margin-bottom: 10px;
}
.timer-box span {
font-size: 16px;
color: #ddd;
}
@media(max-width: 600px) {
.content h1 {
font-size: 30px;
}
.timer {
flex-direction: column;
gap: 20px;
}
.timer-box h2 {
font-size: 36px;
}
}
</style>
</head>
<body>
<div class="overlay"></div>
<div class="content">
<h1>We’re Launching Soon</h1>
<div class="timer" id="countdown">
<div class="timer-box">
<h2 id="days">00</h2>
<span>Days</span>
</div>
<div class="timer-box">
<h2 id="hours">00</h2>
<span>Hours</span>
</div>
<div class="timer-box">
<h2 id="minutes">00</h2>
<span>Minutes</span>
</div>
<div class="timer-box">
<h2 id="seconds">00</h2>
<span>Seconds</span>
</div>
</div>
</div>
<script>
const launchDate = new Date("2025-12-31T00:00:00").getTime();
const countdown = setInterval(() => {
const now = new Date().getTime();
const gap = launchDate - now;
const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;
const d = Math.floor(gap / day);
const h = Math.floor((gap % day) / hour);
const m = Math.floor((gap % hour) / minute);
const s = Math.floor((gap % minute) / second);
document.getElementById("days").innerText = d.toString().padStart(2, "0");
document.getElementById("hours").innerText = h.toString().padStart(2, "0");
document.getElementById("minutes").innerText = m.toString().padStart(2, "0");
document.getElementById("seconds").innerText = s.toString().padStart(2, "0");
if (gap <= 0) {
clearInterval(countdown);
document.getElementById("countdown").innerHTML = "<h2>We Are Live!</h2>";
}
}, 1000);
</script>
</body>
</html>
]]>
