This is a simple "Coming Soon" webpage designed using HTML, CSS, and JavaScript. The webpage displays a countdown timer to a specified date, along with a background image. The layout is created using the Bulma CSS framework to make it visually appealing and responsive.
- Full-height Hero section with a background image to create an attractive landing page.
- Countdown timer to a specified date, showing days, hours, minutes, and seconds.
- The countdown automatically updates every second until the specified date.
- Once the countdown reaches the specified date, a "Website is currently being updated" message is displayed.
-
Clone or download the
index.htmlfile to your local machine. -
Open the
index.htmlfile using a web browser. -
Customize the webpage as per your needs:
- Modify the
backgroundCSS property in the<style>tag to change the background image. Replace the URL insideurl('...')with the path to your desired background image. - Update the
countDownDateJavaScript variable to set the desired date and time for the countdown. The format should be"YYYY-MM-DDTHH:mm:ss", e.g.,"2020-09-15T15:30:00". By default, it's set to a random date in 2023, so make sure to change it to a date in 2020 for the countdown to work as intended.
- Modify the
-
Save the changes and refresh the webpage to see the updated coming soon page.
-
The webpage uses the Bulma CSS framework for styling. You can customize the styles further by modifying the
<style>tag in the<head>section. -
The webpage is responsive and will adapt to different screen sizes, ensuring a consistent experience across devices.
-
Remember to update the
countDownDatevariable to a valid date for the countdown to work correctly.
This project is licensed under the MIT License. You are free to use, modify, and distribute this code for personal and commercial purposes. Attribution is not required, but it's always appreciated.
- The layout design is based on the Bulma CSS framework (https://bulma.io/).
- The background image used in the preview is from Pixabay (https://pixabay.com/).
Feel free to use this template for your upcoming website launch or as a placeholder page for your website undergoing updates. Enjoy!