Difference between revisions of "Template:AUC-EGYPT/TemplateCSS"

Revision as of 23:42, 24 October 2020

{

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>

// 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>

@@ Line 1: / Line 1: @@
-<html>
 <style>
 @import url('https://fonts.googleapis.com/css?family=Amatic+SC&display=swap');
@@ Line 191: / Line 191: @@
 });
 </script>
-</html>