diff --git a/css/style.css b/css/style.css index 669abb6..4721d27 100644 --- a/css/style.css +++ b/css/style.css @@ -5,6 +5,85 @@ /**************************** * Header * ****************************/ + * {box-sizing:border-box} + +/* Slideshow container */ +.slideshow-container { + max-width: 1000px; + position: relative; + margin: auto; + +} + +/* Hide the images by default */ +.mySlides { + display: none; +} + +/* Next & previous buttons */ +.prev, .next { + cursor: pointer; + position: absolute; + top: 50%; + width: auto; + margin-top: -22px; + padding: 16px; + color: #000; + font-weight: bold; + font-size: 18px; + transition: 0.6s ease; + border-radius: 0 3px 3px 0; + user-select: none; + background: rgba(19, 18, 18, 0.39); +} + +/* Position the "next button" to the right */ +.next { + right: 0; + border-radius: 3px 0 0 3px; +} + +/* On hover, add a black background color with a little bit see-through */ +.prev:hover, .next:hover { + background-color: rgba(0,0,0,0.8); +} + +/* Caption text */ +.text { + color: #f2f2f2; + font-size: 15px; + padding: 8px 12px; + position: absolute; + bottom: 8px; + width: 100%; + text-align: center; +} + +/* Number text (1/3 etc) */ +.numbertext { + color: #000; + font-size: 12px; + padding: 8px 12px; + position: absolute; + top: 0; +} + +/* The dots/bullets/indicators */ +.dot { + cursor: pointer; + height: 15px; + width: 15px; + margin: 0 2px; + background-color: #e7d806; + border-radius: 50%; + display: inline-block; + /*transition: background-color 0.6s ease;*/ +} + +.active, .dot:hover { + background-color: #000; +} + .container { width: 95%; } @@ -159,7 +238,7 @@ footer { text-align: center; padding: 50px 0; - background-color:#807707; } + background-color:#e7d806; } footer p { color: #000; } @@ -324,7 +403,7 @@ address { color: #777; } strong { - color: #000; + color: #fff; } /**************************** * Animation * diff --git a/img/p1.jpg b/img/p1.jpg new file mode 100644 index 0000000..dc984b6 Binary files /dev/null and b/img/p1.jpg differ diff --git a/img/p2.jpg b/img/p2.jpg new file mode 100644 index 0000000..4ae2780 Binary files /dev/null and b/img/p2.jpg differ diff --git a/img/p3.jpg b/img/p3.jpg new file mode 100644 index 0000000..9d70e8a Binary files /dev/null and b/img/p3.jpg differ diff --git a/img/p4.jpg b/img/p4.jpg new file mode 100644 index 0000000..e1c5169 Binary files /dev/null and b/img/p4.jpg differ diff --git a/index.html b/index.html index 0467b79..3e8f047 100644 --- a/index.html +++ b/index.html @@ -195,8 +195,68 @@

Arts

- - + +
+
+
+
+ +
+ + +
+
1 / 5
+ +
Caption Text
+
+ +
+
2 / 5
+ +
Caption Two
+
+ +
+
3 / 5
+ +
Caption Three
+
+ +
+
4/ 5
+ +
Caption Three
+
+ +
+
5 / 5
+ +
Caption Three
+
+ + + +
+
+ + +
+ + + + + + +
+ + +
+
+
+
+ + +
@@ -255,6 +315,18 @@

club Office

+ + + diff --git a/js/custom.js b/js/custom.js index 677ced0..52b456f 100644 --- a/js/custom.js +++ b/js/custom.js @@ -1,3 +1,33 @@ +////////////////////////////// +var slideIndex = 1; +showSlides(slideIndex); + +// Next/previous controls +function plusSlides(n) { + showSlides(slideIndex += n); +} + +// Thumbnail image controls +function currentSlide(n) { + showSlides(slideIndex = n); +} + +function showSlides(n) { + var i; + var slides = document.getElementsByClassName("mySlides"); + var dots = document.getElementsByClassName("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"; + } + 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 ($) { new WOW().init(); @@ -6,7 +36,7 @@ jQuery("#preloader").delay(100).fadeOut("slow"); jQuery("#load").delay(100).fadeOut("slow"); }); - +///////////////////// //jQuery to collapse the navbar on scroll $(window).scroll(function() {