Line 1: | Line 1: | ||
− | + | ||
<style> | <style> | ||
@import url('https://fonts.googleapis.com/css?family=Amatic+SC&display=swap'); | @import url('https://fonts.googleapis.com/css?family=Amatic+SC&display=swap'); | ||
Line 191: | Line 191: | ||
}); | }); | ||
</script> | </script> | ||
− |
Revision as of 23:59, 24 October 2020
<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>