|
|
(5 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
− | <html>
| |
− | <style>
| |
− | @import url('https://fonts.googleapis.com/css?family=Amatic+SC&display=swap');
| |
| | | |
− | * {
| |
− | margin: 0;
| |
− | padding: 0;
| |
− | }
| |
− | body {
| |
− | /*background-image: linear-gradient(to bottom right, #436B95, #001F46);*/
| |
− | background-color: #080727;
| |
− | }
| |
− | html {
| |
− | height: 100%;
| |
− | }
| |
− | body {
| |
− | height: 100%;
| |
− | margin: 0;
| |
− | background-repeat: no-repeat;
| |
− | background-attachment: fixed;
| |
− | }
| |
− | #gif {
| |
− | width: 80%;
| |
− | }
| |
− |
| |
− | .page {
| |
− | margin: 0;
| |
− | padding:50px;
| |
− | text-align: center;
| |
− |
| |
− | }
| |
− |
| |
− |
| |
− | .title {
| |
− | margin: 12px;
| |
− | font-size: 1.5em;
| |
− | font-family: 'Amatic SC', cursive;
| |
− | color: white;
| |
− | }
| |
− |
| |
− | .slideshow-container {
| |
− | /*max-width: 645px;
| |
− | max-height: 380px;*/
| |
− |
| |
− | position:relative;
| |
− | margin: auto;
| |
− | /*border: 5px solid #001f3f;
| |
− | box-shadow: 0 0 10px #001f3f;
| |
− | border-radius: 10px;*/
| |
− | }
| |
− |
| |
− | .slide-container {
| |
− | display: none;
| |
− | }
| |
− |
| |
− | .prev, .next {
| |
− | cursor: pointer;
| |
− | position: absolute;
| |
− | top: 50%;
| |
− | width: auto;
| |
− | padding: 16px;
| |
− | color: white;
| |
− | font-weight: bold;
| |
− | font-size: 20px;
| |
− | transition: 0.6s ease;
| |
− | border-radius: 0 3px 3px 0;
| |
− | user-select: none;
| |
− | }
| |
− |
| |
− | .prev {
| |
− | left: 0;
| |
− | border-radius: 3px 0 0 3px;
| |
− | }
| |
− |
| |
− | .next {
| |
− | right: 0;
| |
− | border-radius: 3px 0 0 3px;
| |
− | }
| |
− |
| |
− | .prev:hover, .next:hover {
| |
− | background-color: rgba(0,0,0,0.6);
| |
− | }
| |
− |
| |
− | .slide-number {
| |
− | color: #f2f2f2;
| |
− | background-color: rgba(0,0,0,0.6);
| |
− | font-size: 12px;
| |
− | padding: 8px 12px;
| |
− | position: absolute;
| |
− | top: 0;
| |
− | }
| |
− |
| |
− | .slide-img {
| |
− | width: 100%;
| |
− | }
| |
− |
| |
− | .slide-caption {
| |
− | color: #f2f2f2;
| |
− | background-color: #001f3f;
| |
− | opacity: 0.7;
| |
− | border-radius: 0 15px 15px 0;
| |
− | font-size: 15px;
| |
− | padding: 8px 12px;
| |
− | position: absolute;
| |
− | bottom: 8px;
| |
− | width: 90%;
| |
− | text-align: left;
| |
− | }
| |
− |
| |
− | .slide-selector {
| |
− | padding: 10px;
| |
− | }
| |
− |
| |
− |
| |
− | button {
| |
− | font-family: 'PT Sans', sans-serif;
| |
− | font-size: 13px;
| |
− | font-weight: 400;
| |
− |
| |
− | color: #191970;
| |
− | position: relative;
| |
− | background: rgba(0,0,0,0);
| |
− | }
| |
− | </style>
| |
− |
| |
− | <script>
| |
− | var slideIndex = 1;
| |
− | showSlides(slideIndex);
| |
− |
| |
− | // function to use prev/next controls
| |
− | function plusSlides(n) {
| |
− | showSlides(slideIndex += n);
| |
− | }
| |
− |
| |
− | // function to control slide display
| |
− | function currentSlide(n) {
| |
− | showSlides(slideIndex = n);
| |
− | }
| |
− |
| |
− |
| |
− | function showSlides(n) {
| |
− | var i;
| |
− | // get slides/images to use
| |
− | var slides = document.getElementsByClassName("slide-container");
| |
− | // get dot selectors to use
| |
− | var dots = document.getElementsByClassName("selector-dot");
| |
− | if (n > slides.length) {slideIndex = 1}
| |
− | if (n < 1) {slideIndex = slides.length}
| |
− | for (i = 0; i < slides.length; i++) {
| |
− | slides[i].style.display = "none";
| |
− | }
| |
− | // highlight correct dot when slide is active
| |
− | for (i = 0; i < dots.length; i++) {
| |
− | dots[i].className = dots[i].className.replace(" active", "");
| |
− | }
| |
− | slides[slideIndex-1].style.display = "block";
| |
− | dots[slideIndex-1].className += " active";
| |
− | }
| |
− |
| |
− | (function($) { // Begin jQuery
| |
− | $(function() { // DOM ready
| |
− | // If a link has a dropdown, add sub menu toggle.
| |
− | $('nav ul li a:not(:only-child)').click(function(e) {
| |
− | $(this).siblings('.nav-dropdown').toggle();
| |
− | // Close one dropdown when selecting another
| |
− | $('.nav-dropdown').not($(this).siblings()).hide();
| |
− | e.stopPropagation();
| |
− | });
| |
− | // Clicking away from dropdown will remove the dropdown class
| |
− | $('html').click(function() {
| |
− | $('.nav-dropdown').hide();
| |
− | });
| |
− | // Toggle open and close nav styles on click
| |
− | $('#nav-toggle').click(function() {
| |
− | $('nav ul').slideToggle();
| |
− | });
| |
− | // Hamburger to X toggle
| |
− | $('#nav-toggle').on('click', function() {
| |
− | this.classList.toggle('active');
| |
− | });
| |
− | }); // end DOM ready
| |
− | })(jQuery); // end jQuery
| |
− |
| |
− |
| |
− |
| |
− |
| |
− | $('ul.nav li.dropdown').hover(function() {
| |
− | $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
| |
− | }, function() {
| |
− | $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
| |
− | });
| |
− | </script>
| |
− |
| |
− | </html>
| |