Advertisement
Guest User

Untitled

a guest
Oct 17th, 2019
90
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.34 KB | None | 0 0
  1. <div class="bgimg">
  2. <div class="topleft">
  3. <p>Logo</p>
  4. </div>
  5. <div class="middle">
  6. <h1>COMING SOON</h1>
  7. <hr>
  8. <p>35 days</p>
  9. </div>
  10. <div class="bottomleft">
  11. <p>Some text</p>
  12. </div>
  13. </div>
  14.  
  15.  
  16. /* Set height to 100% for body and html to enable the background image to cover the whole page: */
  17. body, html {
  18. height: 100%
  19. }
  20.  
  21. .bgimg {
  22. /* Background image */
  23. background-image: url('/w3images/forestbridge.jpg');
  24. /* Full-screen */
  25. height: 100%;
  26. /* Center the background image */
  27. background-position: center;
  28. /* Scale and zoom in the image */
  29. background-size: cover;
  30. /* Add position: relative to enable absolutely positioned elements inside the image (place text) */
  31. position: relative;
  32. /* Add a white text color to all elements inside the .bgimg container */
  33. color: white;
  34. /* Add a font */
  35. font-family: "Courier New", Courier, monospace;
  36. /* Set the font-size to 25 pixels */
  37. font-size: 25px;
  38. }
  39.  
  40. /* Position text in the top-left corner */
  41. .topleft {
  42. position: absolute;
  43. top: 0;
  44. left: 16px;
  45. }
  46.  
  47. /* Position text in the bottom-left corner */
  48. .bottomleft {
  49. position: absolute;
  50. bottom: 0;
  51. left: 16px;
  52. }
  53.  
  54. /* Position text in the middle */
  55. .middle {
  56. position: absolute;
  57. top: 50%;
  58. left: 50%;
  59. transform: translate(-50%, -50%);
  60. text-align: center;
  61. }
  62.  
  63. /* Style the <hr> element */
  64. hr {
  65. margin: auto;
  66. width: 40%;
  67. }
  68.  
  69.  
  70.  
  71.  
  72. // Set the date we're counting down to
  73. var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();
  74.  
  75. // Update the count down every 1 second
  76. var x = setInterval(function() {
  77.  
  78. // Get todays date and time
  79. var now = new Date().getTime();
  80.  
  81. // Find the distance between now an the count down date
  82. var distance = countDownDate - now;
  83.  
  84. // Time calculations for days, hours, minutes and seconds
  85. var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  86. var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  87. var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  88. var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  89.  
  90. // Display the result in an element with id="demo"
  91. document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  92. + minutes + "m " + seconds + "s ";
  93.  
  94. // If the count down is finished, write some text
  95. if (distance < 0) {
  96. clearInterval(x);
  97. document.getElementById("demo").innerHTML = "EXPIRED";
  98. }
  99. }, 1000);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement