ফুল-স্ক্রিন ব্যাকগ্রাউন্ড ইমেজ, সেন্টার্ড কন্টেন্ট, এবং জাভাস্ক্রিপ্ট কাউন্টডাউন টাইমার ব্যবহার করে কমিং সুন পেজ তৈরি করা যায়।
উদাহরণ: কমিং সুন পেজ
<!DOCTYPE html>
<html>
<style>
body { height: 100vh; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; margin: 0; }
.timer { text-align: center; font-size: 60px; margin-top: 0px; color: white; }
.bgimg {
background-image: url("https://i.picsum.photos/id/829/800/800.jpg");
height: 100%; background-position: center; background-size: cover;
position: relative; color: white; font-size: 25px;
}
.middle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
hr { margin: auto; width: 40%; }
</style>
<body>
<div class="bgimg">
<div class="middle">
<h1>COMING SOON</h1>
<hr />
<h2 class="timer"></h2>
</div>
</div>
<script>
var countDownDate = new Date("June 5, 2022 11:27:15").getTime();
var timeClear = setInterval(function() {
var now = new Date().getTime();
var timeLeft = countDownDate - now;
var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
document.querySelector(".timer").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (timeLeft < 0) { clearInterval(timeClear); document.querySelector(".timer").innerHTML = "Timer Finished"; }
}, 1000);
</script>
</body>
</html>
কোড ব্যাখ্যা
- .bgimg { height: 100%; background-size: cover; }: ফুল-স্ক্রিন ব্যাকগ্রাউন্ড।
- .middle { position: absolute; top:50%; left:50%; transform: translate(-50%,-50%): কন্টেন্ট সেন্টার।
- JavaScript setInterval: প্রতি ১ সেকেন্ডে টাইমার আপডেট।
- Math.floor 계산: দিন, ঘন্টা, মিনিট, সেকেন্ড আলাদা করুন।
উন্নতি
এইচটিএমএল-এ `
