Line 1: | Line 1: | ||
− | + | <!DOCTYPE html> | |
<html> | <html> | ||
+ | <style> | ||
+ | body, html { | ||
+ | height: 100%; | ||
+ | margin: 0; | ||
+ | } | ||
+ | .bgfull { | ||
+ | background-image: url('Images/temp_bg_kent.jpeg'); | ||
+ | height: 100%; | ||
+ | background-position: center; | ||
+ | background-size: cover; | ||
+ | position: relative; | ||
+ | color: white; | ||
+ | font-family: 'Exo 2', sans-serif; | ||
+ | font-size: 20px; | ||
+ | } | ||
− | + | .logo { | |
− | + | position: fixed; | |
− | + | position: fixed; | |
− | + | top:25%; | |
+ | left:50%; | ||
+ | transform: translate(-50%,-75%); | ||
+ | } | ||
+ | .logo img{ | ||
+ | width:200px; | ||
+ | } | ||
+ | .projectsum { | ||
+ | background: #79F7B2;; | ||
+ | opacity: 0.6; | ||
+ | width:100%; | ||
+ | position: absolute; | ||
+ | top: 70%; | ||
+ | left: 50%; | ||
+ | transform: translate(-50%, -30%); | ||
+ | text-align: center; | ||
+ | color: #313935; | ||
+ | } | ||
+ | .projectsum p{ | ||
+ | padding-left: 10px; | ||
+ | padding-right: 10px; | ||
+ | |||
+ | } | ||
− | + | .csbanner { | |
− | + | position: absolute; | |
− | + | top: 43%; | |
− | + | left: 50%; | |
− | + | transform: translate(-50%, -55%); | |
− | + | text-align: center; | |
+ | } | ||
− | < | + | hr { |
+ | margin: auto; | ||
+ | width: 60%; | ||
+ | } | ||
+ | </style> | ||
+ | <head> | ||
+ | <link href="https://fonts.googleapis.com/css?family=Exo+2:300" rel="stylesheet"> | ||
+ | </head> | ||
+ | <body> | ||
− | + | <div class="bgfull"> | |
− | + | <div class="logo"> | |
− | + | <p><img src = "Images/temp_logo.png"</p> | |
− | + | </div> | |
− | + | <div class="csbanner"> | |
− | + | <h1>Stay Tuned</h1> | |
− | + | <hr> | |
− | <div class=" | + | <p id="demo" style="font-size:30px"></p> |
− | < | + | </div> |
− | <p> | + | <div class="projectsum"> |
− | < | + | <h2>Project Discription</h2> |
− | < | + | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum praesentium, blanditiis sapiente labore aliquam ipsa architecto vitae. Minima soluta temporibus voluptates inventore commodi cumque esse suscipit optio aliquam et, dolorem a cupiditate nihil fuga laboriosam fugiat placeat dignissimos! Unde eveniet placeat quisquam blanditiis voluptatem doloremque fugiat dolor repellendus ratione in.</p> |
− | < | + | </div> |
− | < | + | |
− | </ | + | |
</div> | </div> | ||
− | < | + | <script> |
− | + | // Set the date we're counting down to | |
− | + | var completionDate = new Date("Oct 15, 2017 12:00:00").getTime(); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | // Update the count down every 1 second | ||
+ | var countdownfunction = setInterval(function() { | ||
+ | // Get todays date and time | ||
+ | var now = new Date().getTime(); | ||
+ | |||
+ | // Find the distance between now an the count down date | ||
+ | var distance = completionDate - 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); | ||
+ | |||
+ | // Output the result in an element with id="demo" | ||
+ | document.getElementById("demo").innerHTML = days + "d " + hours + "h " | ||
+ | + minutes + "m " + seconds + "s "; | ||
+ | |||
+ | // If the count down is over, write some text | ||
+ | if (distance < 0) { | ||
+ | clearInterval(countdownfunction); | ||
+ | document.getElementById("demo").innerHTML = "EXPIRED"; | ||
+ | } | ||
+ | }, 1000); | ||
+ | </script> | ||
+ | </body> | ||
</html> | </html> |
Revision as of 12:26, 24 July 2017
<!DOCTYPE html>
Project Discription
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum praesentium, blanditiis sapiente labore aliquam ipsa architecto vitae. Minima soluta temporibus voluptates inventore commodi cumque esse suscipit optio aliquam et, dolorem a cupiditate nihil fuga laboriosam fugiat placeat dignissimos! Unde eveniet placeat quisquam blanditiis voluptatem doloremque fugiat dolor repellendus ratione in.