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

Revision as of 23:59, 24 October 2020 (view source) Mina146 (Talk | contribs) ← Older edit		Revision as of 00:03, 25 October 2020 (view source) Mina146 (Talk | contribs) Newer edit →
Line 123:		Line 123:
	}		}
	</style>		</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>

---

Revision as of 00:03, 25 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;

}

1. 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>