JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://fallenpevo.com/scripts/js/progressBar.js"></script>
<script src="http://fallenpevo.com/scripts/js/countdown.js"></script>
<script src="https://rawgit.com/rocketwagon/jquery-starfield/master/dist/jquery-starfield.js"></script>
<div id="starfield"></div>
<div id="container">
<div id="maintenanceTop">
<h1>Sorry, We Are Performing Scheduled Site Maintenance!</h1>
<h4>We Are Working Hard To Bring You New Features.</h4>
</div>
<div id="maintenanceTimer">
<h3>Time Until We Return</h3>
<ul class="countdown">
<li> <span class="days time">00</span>
<p class="days_ref">Days</p>
</li>
<li class="seperator">.</li>
<li> <span class="hours time">00</span>
<p class="hours_ref">Hours</p>
</li>
<li class="seperator">:</li>
<li> <span class="minutes time">00</span>
<p class="minutes_ref">Minutes</p>
</li>
<li class="seperator">:</li>
<li> <span class="seconds time">00</span>
<p class="seconds_ref">Seconds</p>
</li>
</ul>
<div id="timerGoal"></div>
</div>
<div id="maintenanceMiddle">
<h4>What Are We Doing?</h4>
<p class="maintenanceText">We are working very hard to bring you the initial release of this website.
<br>Please understand that designing a webpage takes time.
<br>We are doing everything we can to bring you the best user experience possible.
<br>
<br>Thank you,
<br>Jesse Elser
<br>Jolly Roger Pilot Car</p>
</div>
</div>
<div id="credit">Web Design Provided By: <a href="" target="_blank">Jolly Roger PCS</a>
</div>
<div id="compliant"> </div>
CSS
#starfield {
position: absolute;
width: 100%;
height: 100%;
}
#container {
width: 100%;
height: 100%;
position: absolute;
overflow: auto;
}
@import url(http://fonts.googleapis.com/css?family=Oswald);
@import url(http://fonts.googleapis.com/css?family=Michroma|Orbitron:900);
* {
margin: 0;
padding: 0;
text-decoration: none;
outline: none;
list-style: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html, body {
height: 100%;
width: 100%;
font-size: 100%;
}
body {
background-color: #000;
width: 100%;
height: 100%;
}
a:link, a:visited {
color: #ff6600;
}
a:hover {
text-decoration: underline;
}
h1, h2, h3, h4, h5, h6 {
color: #fff;
position: relative;
z-index: 2;
}
h1 {
text-align: center;
font-family: Orbitron;
}
h3 {
text-align: center;
font-family: Orbitron;
}
h4 {
text-align: center;
font-family: Orbitron;
}
#maintenanceTop {
position: relative;
z-index: 2;
}
#maintenanceTimer {
margin: 50px auto;
}
ul.countdown {
list-style: none;
margin: 10px 0;
margin-bottom: 10px;
padding: 0;
display: block;
text-align: center;
color: #787878;
font-family: Orbitron;
position: relative;
z-index: 2;
}
ul.countdown li {
display: inline-block;
}
ul.countdown li span {
font-size: 80px;
font-weight: 300;
line-height: 80px;
}
ul.countdown li.seperator {
font-size: 80px;
line-height: 70px;
vertical-align: top;
}
ul.countdown li span.time {
width: 140px;
display: inline-block;
}
ul.countdown li p {
font-size: 14px;
}
#timerGoal {
margin: 0px auto;
margin-bottom: 75px;
width: 500px;
border-radius: 10px;
position: relative;
z-index: 2;
}
.goalProgress {
background: #343434;
padding: 5px;
border-radius:...
JavaScript
$( document ).ready(function() {
$('#starfield').starfield({
starDensity: 1.0,
mouseScale: 1.0
});
$('.countdown').downCount({
date: '09/15/2015 12:00:00',
offset: +10
}, function () {
alert('WOOT WOOT, done!');
});
$('#timerGoal').goalProgress({
goalAmount: 100,
currentAmount: 17,
textBefore: '',
textAfter: '% Completed.'
});
});