Html coming soon pages

How TO — Coming Soon Page

Learn how to create a «coming soon page» with CSS and JavaScript.

How To Create a Coming Soon Page

Step 1) Add HTML:

In our example, we will use a background image that covers the entire page and place some text in the image to let the user know what’s going on.

This example shows how to create a «Coming Soon Page» with just HTML and CSS. Look at the next example to find out how to add a «countdown timer» with JavaScript as well.

Example

Step 2) Add CSS:

Example

/* Set height to 100% for body and html to enable the background image to cover the whole page: */
body, html height: 100%
>

.bgimg /* Background image */
background-image: url(‘/w3images/forestbridge.jpg’);
/* Full-screen */
height: 100%;
/* Center the background image */
background-position: center;
/* Scale and zoom in the image */
background-size: cover;
/* Add position: relative to enable absolutely positioned elements inside the image (place text) */
position: relative;
/* Add a white text color to all elements inside the .bgimg container */
color: white;
/* Add a font */
font-family: «Courier New», Courier, monospace;
/* Set the font-size to 25 pixels */
font-size: 25px;
>

/* Position text in the top-left corner */
.topleft position: absolute;
top: 0;
left: 16px;
>

/* Position text in the bottom-left corner */
.bottomleft position: absolute;
bottom: 0;
left: 16px;
>

/* Position text in the middle */
.middle position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
>

/* Style the

---

element */
hr margin: auto;
width: 40%;
>

Step 3) Add JavaScript

Add JavaScript to create a countdown timer:

Example

// Set the date we’re counting down to
var countDownDate = new Date(«Jan 5, 2024 15:37:25»).getTime();

// Update the count down every 1 second
var x = setInterval(function()

// Get todays date and time
var now = new Date().getTime();

// Find the distance between now an the count down date
var distance = countDownDate — now;

// Time calculations for days, hours, minutes and seconds
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);

// Display the result in an element with > document.getElementById(«demo»).innerHTML = days + «d » + hours + «h »
+ minutes + «m » + seconds + «s «;

// If the count down is finished, write some text
if (distance < 0) clearInterval(x);
document.getElementById(«demo»).innerHTML = «EXPIRED»;
>
>, 1000);

Источник

Free Under Construction Html Templates

A coming soon page is a landing page that is used to promote a new product or website. If you have a new product or service that will be launching soon, it’s important to have an attractive and persuasive coming soon page on your website.

There are many reasons why you need a coming soon page on your website. Here are some of the most important reasons:

• An Under Construction page can help you build excitement for your new product or service before it launches

• An Under Construction page can help generate buzz about your new product or service

• An Under Construction page can help you attract more visitors to your site before the launch date

• An Under Construction page is an effective way to keep potential customers interested in what you’re launching

Under Construction templates are a great way to get your website ready for launch. They are also used by startups to show their product in progress.

There are many different types of website under construction templates to choose from, but not all of them are created equally. So how do you go about choosing the best one? This blog post was a guide to help you choose the perfect coming soon HTML template for your site. It is important to find one that matches your brand and will also be able to generate more leads for your business.

The conclusion of this blog post is that it is important to find the perfect HTML Template that matches your brand and will generate more leads for your business.

See also

Источник