<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coming Soon</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
min-height: 100vh;
}
.countdown-item {
position: relative;
width: 80px;
height: 80px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.float {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}
.social-icon {
transition: all 0.3s ease;
}
.social-icon:hover {
transform: translateY(-5px);
color: white;
}
.email-input {
transition: all 0.3s ease;
}
.email-input:focus {
border-color: #8b5cf6;
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
}
</style>
</head>
<body>
<div class="container mx-auto px-4 py-12 flex flex-col items-center justify-center min-h-screen">
<div class="max-w-3xl w-full bg-white bg-opacity-10 backdrop-blur-lg rounded-2xl p-8 md:p-12 shadow-2xl border border-white border-opacity-20">
<div class="text-center">
<!-- Logo Placeholder -->
<div class="mx-auto w-20 h-20 mb-6 float">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" class="w-full h-full">
<path d="M11.7 2.805a.75.75 0 01.6 0A60.65 60.65 0 0122.83 8.72a.75.75 0 01-.231 1.337 49.949 49.949 0 00-9.902 3.912l-.003.002-.34.18a.75.75 0 01-.707 0A50.009 50.009 0 007.5 12.174v-.224c0-.131.067-.248.172-.311a54.614 54.614 0 014.653-2.52.75.75 0 00-.65-1.352 56.129 56.129 0 00-4.78 2.589 1.858 1.858 0 00-.859 1.228 49.803 49.803 0 00-4.634-1.527.75.75 0 01-.231-1.337A60.653 60.653 0 0111.7 2.805z" />
<path d="M13.06 15.473a48.45 48.45 0 017.666-3.282c.134 1.414.22 2.843.255 4.285a.75.75 0 01-.46.71 47.878 47.878 0 00-8.105 4.342.75.75 0 01-.832 0 47.877 47.877 0 00-8.104-4.342.75.75 0 01-.461-.71c.035-1.442.121-2.87.255-4.286A48.4 48.4 0 016 13.18v1.27a1.5 1.5 0 00-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.661a6.729 6.729 0 00.551-1.608 1.5 1.5 0 00.14-2.67v-.645a48.549 48.549 0 013.44 1.668 2.25 2.25 0 002.12 0z" />
<path d="M4.462 19.462c.42-.419.753-.89 1-1.394.453.213.902.434 1.347.661a6.743 6.743 0 01-1.286 1.794.75.75 0 11-1.06-1.06z" />
</svg>
</div>
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4 pulse">Coming Soon</h1>
<p class="text-lg text-white text-opacity-90 mb-8">We're working hard to bring you something amazing. Stay tuned!</p>
<!-- Countdown Timer -->
<div class="flex justify-center gap-4 mb-12">
<div class="countdown-item">
<span id="days" class="text-2xl font-bold text-white">00</span>
<span class="text-xs text-white text-opacity-80">Days</span>
</div>
<div class="countdown-item">
<span id="hours" class="text-2xl font-bold text-white">00</span>
<span class="text-xs text-white text-opacity-80">Hours</span>
</div>
<div class="countdown-item">
<span id="minutes" class="text-2xl font-bold text-white">00</span>
<span class="text-xs text-white text-opacity-80">Minutes</span>
</div>
<div class="countdown-item">
<span id="seconds" class="text-2xl font-bold text-white">00</span>
<span class="text-xs text-white text-opacity-80">Seconds</span>
</div>
</div>
<!-- Newsletter Signup -->
<div class="max-w-md mx-auto mb-10">
<h3 class="text-xl font-semibold text-white mb-4">Get Notified When We Launch</h3>
<div class="flex flex-col sm:flex-row gap-2">
<input type="email" placeholder="Enter your email" class="email-input flex-grow px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 text-white placeholder-white placeholder-opacity-70 focus:outline-none">
<button id="subscribe-btn" class="px-6 py-3 bg-white text-indigo-600 font-medium rounded-lg hover:bg-opacity-90 transition-all">
Notify Me
</button>
</div>
</div>
<!-- Social Media Links -->
<div class="flex justify-center space-x-6 mb-8">
<a href="#" class="social-icon text-white text-opacity-80 hover:text-opacity-100">
<i class="fab fa-facebook-f text-xl"></i>
</a>
<a href="#" class="social-icon text-white text-opacity-80 hover:text-opacity-100">
<i class="fab fa-twitter text-xl"></i>
</a>
<a href="#" class="social-icon text-white text-opacity-80 hover:text-opacity-100">
<i class="fab fa-instagram text-xl"></i>
</a>
<a href="#" class="social-icon text-white text-opacity-80 hover:text-opacity-100">
<i class="fab fa-linkedin-in text-xl"></i>
</a>
</div>
<p class="text-white text-opacity-70 text-sm">© 2023 Your Company. All rights reserved.</p>
</div>
</div>
</div>
<script>
// Set the launch date (1 month from now)
const launchDate = new Date();
launchDate.setMonth(launchDate.getMonth() + 1);
// Update countdown every second
const countdown = setInterval(function() {
const now = new Date().getTime();
const distance = launchDate - now;
// Calculate days, hours, minutes, seconds
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result
document.getElementById("days").innerHTML = days.toString().padStart(2, '0');
document.getElementById("hours").innerHTML = hours.toString().padStart(2, '0');
document.getElementById("minutes").innerHTML = minutes.toString().padStart(2, '0');
document.getElementById("seconds").innerHTML = seconds.toString().padStart(2, '0');
// If the countdown is finished
if (distance < 0) {
clearInterval(countdown);
document.getElementById("days").innerHTML = "00";
document.getElementById("hours").innerHTML = "00";
document.getElementById("minutes").innerHTML = "00";
document.getElementById("seconds").innerHTML = "00";
}
}, 1000);
// Handle newsletter subscription
document.getElementById("subscribe-btn").addEventListener("click", function() {
const emailInput = document.querySelector('input[type="email"]');
if (emailInput.value) {
alert("Thank you for subscribing! We'll notify you when we launch.");
emailInput.value = "";
} else {
alert("Please enter a valid email address.");
}
});
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'93e70bf416bcb5a5',t:'MTc0NzAyMjgyMC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>Free Gratis Coming Soon Template HTML siap pakai
Bagikan:
[addtoany]
Tags
Related Post
Cara Memilih Hosting untuk Website Bisnis Kecil
Hosting yang Bikin Bisnis Kecil Makin Cuan Punya bisnis kecil kayak toko online atau jasa freelance? Website yang cepat dan andal itu kunci buat bikin pelanggan betah. Tapi, memilih hosting untuk bisnis kecil nggak boleh asal-asalan. Kamu butuh hosting yang nggak cuma murah, tapi juga punya performa mumpuni dan fitur keamanan yang oke. Pertama, cek kebutuhan website kamu. Kalau toko online, pastikan hostingnya support e-commerce, seperti integrasi WooCommerce atau SSL gratis untuk keamanan transaksi. Kedua, pilih hosting dengan bandwidth besar ...
Web Hosting Murah Terbaik untuk Pemula di Indonesia
Apa Itu Web Hosting dan Kenapa Penting untuk Pemula? Buat kamu yang baru mulai bikin website, pasti bingung: apa sih web hosting itu? Simpelnya, hosting itu kayak rumah buat website kamu di internet. Tanpa hosting, website nggak bisa diakses orang lain. Nah, kalau kamu pemula dan budget terbatas, nyari web hosting murah tapi tetap oke itu penting banget. Di Indonesia, banyak penyedia hosting yang nawarin paket ramah kantong. Tapi, jangan asal pilih yang termurah! Cek dulu fitur seperti kecepatan server, ...
Plugin wordpress untuk booking tiket dll Panduan Lengkap Mengenai LatePoint, WPAmelia, dan Tickera Seiring dengan berkembangnya teknologi dan kebutuhan bisnis yang semakin digital, banyak platform yang menawarkan solusi untuk mempermudah proses manajemen janji temu, acara, dan tiket. Tiga platform yang cukup populer dan banyak digunakan oleh berbagai jenis bisnis adalah LatePoint, WPAmelia, dan Tickera. Masing-masing platform ini memiliki fitur unik yang dapat memenuhi kebutuhan spesifik pengguna. Dalam artikel ini, kita akan membahas secara rinci mengenai ketiga platform tersebut, keunggulan, serta ...
