html css coming soon page

Solutions on MaxInterview for html css coming soon page by the best coders in the world

showing results for - "html css coming soon page"

01 Nov 2019

1<html>
2    <head>
3        <style>
4            body, html {
5               height: 100%;
6               margin: 0;
7            }
8
9            .bgimg {
10               background-image: url('https://www.proptecheurasia.com/upload/image/forestbridge.jpg');
11               height: 100%;
12               background-position: center;
13               background-size: cover;
14               position: relative;
15               color: white;
16               font-family: "Courier New", Courier, monospace;
17               font-size: 25px;
18            }
19
20            .topleft {
21               position: absolute;
22               top: 0;
23               left: 16px;
24            }
25
26            .bottomleft {
27               position: absolute;
28               bottom: 0;
29               left: 16px;
30            }
31
32            .middle {
33               position: absolute;
34               top: 50%;
35               left: 50%;
36               transform: translate(-50%, -50%);
37               text-align: center;
38            }
39
40            hr {
41               margin: auto;
42               width: 40%;
43            }
44        </style>
45        <script>
46            // Set the date we're counting down to
47            var countDownDate = new Date("Jan 5, 2022 15:37:25").getTime();
48
49            // Update the count down every 1 second
50            var x = setInterval(function() {
51
52            // Get todays date and time
53            var now = new Date().getTime();
54
55            // Find the distance between now an the count down date
56            var distance = countDownDate - now;
57
58            // Time calculations for days, hours, minutes and seconds
59            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
60            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
61            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
62            var seconds = Math.floor((distance % (1000 * 60)) / 1000);
63
64            // Display the result in an element with id="demo"
65            document.getElementById("demo").innerHTML = days + "d " + hours + "h "
66            + minutes + "m " + seconds + "s ";
67
68            // If the count down is finished, write some text
69            if (distance < 0) {
70                clearInterval(x);
71                document.getElementById("demo").innerHTML = "EXPIRED";
72            }
73            }, 1000);
74        </script>
75    </head>
76    <body>
77        <div class="bgimg">
78            <div class="topleft">
79                <p>Logo</p>
80            </div>
81            <div class="middle">
82                <h1>COMING SOON</h1>
83                <hr>
84                <p id="demo" style="font-size:30px"></p>
85            </div>
86            <div class="bottomleft">
87                <p>Some text</p>
88            </div>
89        </div>
90    </body>
91</html>

similar questions

under construction html page why is html so easy html landing page basis html pagina website under construction html code free how to load at bottom of page html coming soon html template free startup html template how to call a function as soon as a page loads javascript css animation fade out after delay landing page html css

queries leading to this page