Java Script

* { box-sizing: border-box; font-family: Ubuntu, sans-serif; } html, body { height: 100%; padding: 0; margin: 0; } /* The wrapper contains all of the page's content besides the footer, which is pushed to the bottom of the page */ .wrapper { position: relative; min-height: 100%; padding-bottom: 130px; overflow: auto; } /* The footer is positioned at the bottom of the page */ .footer { position: absolute; right: 0; bottom: 0; left: 0; min-height: 100px; background: #4e5d6c; } /* The code styles the text at the bottom of the footer */ .footer > .bottom { position: absolute; right: 0; bottom: 0; left: 0; padding: 5px; background: #1b3146; } .navbar { padding: 5px; margin: 0; } /* This CSS styles the ufo icon in the navbar */ .nav-ufo { position: absolute; bottom: 5px; left: 150px; width: 35px; color: white; } /* Adding styles to the aside and filter form */ .ufo-form { margin-top: 50px; } .filters .panel-body { padding: 0; } .filters { margin-top: 10px; } select { display: block; width: 100%; padding: 8px; color: #8e979f; outline: none; } #table-area th { text-align: center; } #table-area th:first-child, #table-area th:nth-child(2), #table-area th:nth-child(6) { min-width: 70px; } .loader { margin-top: 50px; } .margin-top-50 { margin-top: 50px; } /* The styles for the parallax */ .hero { position: relative; height: 550px; padding: 20px; margin: 0; background: black; background-image: url("../images/nasa.jpg"); background-attachment: fixed; background-position: bottom center; background-size: cover; } .hero h1 { margin-top: 200px; font-size: 0.1rem; animation: title 1.2s forwards linear; } .hero p { font-size: 2rem; opacity: 0; animation: subtitle 1.2s forwards linear; animation-delay: 1.2s; } /* input placeholder color changes */ .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #8e979f; } .form-control::-moz-placeholder { /* Firefox 19+ */ color: #8e979f; } .form-control:-ms-input-placeholder { /* IE 10+ */ color: #8e979f; } .form-control:-moz-placeholder { /* Firefox 18- */ color: #8e979f; } /* media queries which will only be activated at specific screen sizes */ @media (max-width: 800px) { #table-area td { font-size: 1em; } } @media (max-width: 500px) { #table-area thead { display: none; } #table-area tr td:first-child { font-size: 1.8em; font-weight: bold; background: #1b3146; } #table-area tr td:last-child { margin-bottom: 20px; } #table-area tr td:last-child::after { display: block; width: 100%; height: 1px; margin-top: 20px; content: " "; background: aliceblue; } #table-area td { font-size: 1.25em; } #table-area tbody td { display: block; text-align: center; } #table-area tbody td::before { display: block; font-size: 1.4em; font-weight: bold; text-align: center; content: attr(data-th); } .hero h1 { animation: smaller-title 1.2s forwards linear; } } /* keyframe animations which will be used to animate the title */ @keyframes title { from { opacity: 0; } to { font-size: 7.5rem; opacity: 1; } } @keyframes smaller-title { from { opacity: 0; } to { font-size: 5.5rem; opacity: 1; } } @keyframes subtitle { from { opacity: 0; } to { opacity: 1; } }