Di bawah ini kita akan mempelajari cara membuat “Coming Soon Page” dengan CSS dan JavaScript. Page atau halaman ini biasanya ada untuk website yang baru saja akan liris, seperti utnuk website official suatu brand atau startup. Biasanya ada atribut countdown untuk menghitung waktu perilirisannya dan kata-kata yang membuat para penggunanya untuk dapat melihat tampilan websitenya nanti. Seperti di bawah ini contohnya :
<!DOCTYPE html> <html> <style> body, html { height: 100%; margin: 0; } .bgimg { background-image: url('https://dosenit.com/wp-content/uploads/2021/02/Resep-ayam-geprek-sambal-korek-531x400-1.jpg'); height: 100%; background-position: center; background-size: cover; position: relative; color: white; font-family: "Courier New", Courier, monospace; font-size: 25px; } .topleft { position: absolute; top: 0; left: 50px; } .bottomleft { position: absolute; bottom: 0; left: 50px; } .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="topleft"> <p>Logo</p> </div> <div class="middle"> <h1>COMING SOON</h1> <hr> <p>15 Hari Lagi</p> </div> <div class="bottomleft"> <p>Jangan Lupa!!!</p> </div> </div> </body> </html>
Cara Membuat Coming Soon Page
Langkah 1) Tambahkan HTML:
Dalam contoh kami, kami akan menggunakan gambar latar belakang yang menutupi seluruh halaman dan menempatkan beberapa teks pada gambar untuk memberi tahu pengguna apa yang sedang terjadi.
Contoh ini menunjukkan cara membuat “Coming Soon Page” hanya dengan HTML dan CSS. Lihat contoh berikutnya untuk mencari tahu cara menambahkan “penghitung waktu mundur” dengan JavaScript juga.
Contoh :
<div class="bgimg">
<div class="topleft">
<p>Logo</p>
</div>
<div class="middle">
<h1>COMING SOON</h1>
<hr>
<p>15 Hari Lagi</p>
</div>
<div class="bottomleft">
<p>Jangan Lupa!!!</p>
</div>
</div>Langkah 2) Tambahkan CSS:
Contoh
/* Setel tinggi ke 100% untuk body dan html untuk mengaktifkan background gambar menutupi seluruh halaman: */
body, html {
height: 100%
}
.bgimg {
/* Gambar Background */
background-image: url('https://dosenit.com/wp-content/uploads/2021/02/Resep-ayam-geprek-sambal-korek-531x400-1.jpg');
/* Full-screen */
height: 100%;
/* Pusatkan gambar background */
background-position: center;
/* Skala dan perbesar gambar */
background-size: cover;
/* Tambahkan posisi: relative untuk mengaktifkan elemen yang benar-benar diposisikan di dalam gambar (teks tempat) */
position: relative;
/* Tambahkan warna teks putih ke semua elemen di dalam container .bgimg */
color: white;
/* Tambahkan font */
font-family: "Courier New", Courier, monospace;
/* Atur font-size ke 25 piksel */
font-size: 25px;
}
/* Posisikan teks di pojok kiri atas */
.topleft {
position: absolute;
top: 0;
left: 16px;
}
/* Posisikan teks di pojok kiri bawah */
.bottomleft {
position: absolute;
bottom: 0;
left: 16px;
}
/* Posisikan teks di tengah */
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* Style element <hr> */
hr {
margin: auto;
width: 40%;
}Langkah 3) Tambahkan JavaScript
Tambahkan JavaScript untuk membuat penghitung waktu mundur:
Contoh
// Tetapkan tanggal kita menghitung mundur var countDownDate = new Date("March 20, 2022 15:37:25").getTime(); // Perbarui hitungan mundur setiap 1 detik var x = setInterval(function() { // Dapatkan tanggal dan waktu hari ini var now = new Date().getTime(); //Temukan jarak antara sekarang dengan tanggal hitung mundur var distance = countDownDate - now; // Perhitungan waktu untuk hari, jam, menit dan detik var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Tampilkan hasil dalam elemen dengan id = "demo" document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; // Jika hitungan mundur selesai, tulis beberapa teks if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000);
