CINXE.COM
Coming Soon
<!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> <!-- Bootstrap CSS --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom CSS --> <style> body, html { height: 100%; margin: 0; font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; text-align: center; background: #0e1c36; color: #ffffff; } .container { max-width: 600px; } h1 { font-size: 3rem; margin-bottom: 1rem; font-weight: bold; } .countdown { display: flex; justify-content: space-between; margin: 2rem 0; } .countdown div { font-size: 2rem; } .social-icons a { color: #ffffff; font-size: 1.5rem; margin: 0 10px; transition: color 0.3s ease; } .social-icons a:hover { color: #00ae6d; } </style> </head> <body> <div class="container"> <h1>Coming Soon!</h1> <!-- Countdown Timer --> <!-- <div class="countdown"> <div id="days">00</div>: <div id="hours">00</div>: <div id="minutes">00</div>: <div id="seconds">00</div> </div> --> <!-- Email Subscription Form --> <!-- <form> <div class="form-group"> <input type="email" class="form-control" placeholder="Enter your email to stay updated"> </div> <button type="submit" class="btn btn-primary">Notify Me</button> </form> --> <!-- Social Media Links --> <div class="social-icons mt-4"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-linkedin-in"></i></a> </div> </div> <!-- Bootstrap JS and Font Awesome --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.4.3/dist/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <!-- Countdown Script --> <script> const targetDate = new Date("2024-12-31T00:00:00").getTime(); const countdown = () => { const now = new Date().getTime(); const distance = targetDate - now; 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); document.getElementById("days").innerText = days; document.getElementById("hours").innerText = hours; document.getElementById("minutes").innerText = minutes; document.getElementById("seconds").innerText = seconds; if (distance < 0) { clearInterval(x); document.querySelector(".countdown").innerText = "We're Live!"; } }; setInterval(countdown, 1000); </script> </body> </html>