adding grand national dashboard

grandnational-dashboard/static/css/gn.css

@@ -0,0 +1,81 @@
+header {
+    position: relative;
+    background-color: black;
+    height: 55vh;
+    min-height: 25rem;
+    width: 100%;
+    overflow: hidden;
+}
+
+header video {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    min-width: 100%;
+    min-height: 100%;
+    width: auto;
+    height: auto;
+    z-index: 0;
+    -ms-transform: translateX(-50%) translateY(-50%);
+    -moz-transform: translateX(-50%) translateY(-50%);
+    -webkit-transform: translateX(-50%) translateY(-50%);
+    transform: translateX(-50%) translateY(-40%);
+}
+
+header .container {
+    position: relative;
+    z-index: 2;
+}
+
+header .overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-color: #000078;
+    opacity: 0.5;
+    z-index: 1;
+    border-style: solid;
+    border-bottom-color: white;
+}
+
+@media (pointer: coarse) and (hover: none) {
+    header {
+        background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
+    }
+
+    header video {
+        display: none;
+    }
+}
+
+body {
+    background-image: url(/static/assets/images/background.png);
+    background-repeat: all;
+    background-size: 40%;
+}
+
+@font-face {
+    font-family: 'Hoxton';
+    src: url(/static/assets/fonts/WHHoxtonWeb-Regular.ttf);
+}
+
+.hoxton-font {
+    font-family: Hoxton;
+    color: white;
+}
+
+hr {
+    border-top: 1px solid rgb(255, 255, 255) !important;
+}
+
+div.container-fluid {
+    padding-top: 10px;
+}
+
+.display-5 {
+    font-size: 2.5rem !important;
+    font-weight: 300 !important;
+    line-height: 1.2;
+}

grandnational-dashboard/static/js/gn.js

@@ -0,0 +1,19 @@
+$('#gn-countdown').countdown('2020/04/04', function(event) {
+  $(this).html(event.strftime('%D days %Hhrs %Mm %Ss'));
+});
+
+$('#chelt-countdown').countdown('2020/03/13', function(event) {
+  $(this).html(event.strftime('%D days %Hhrs %Mm %Ss'));
+});
+
+$("#event-rotate").Morphist({
+    // The entrance animation type (In).
+    animateIn: "zoomInDown",
+    // The exit animation type (Out). Refer to Animate.css for a list of available animations.
+    animateOut: "zoomOutRight",
+    // The delay between the changing of each object in milliseconds.
+    speed: 4000,
+    complete: function () {
+        // Called after the entrance animation is executed.
+    }
+});