diff --git a/assets/css/style.css b/assets/css/style.css index 286b413..e2b4d7e 100755 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -225,6 +225,127 @@ video.bg-video { text-shadow: -1px -1px 0 #272727, 1px -1px 0 #272727, -1px 1px 0 #272727, 1px 1px 0 #272727; } + +/* GALLERY */ +.gallery{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +.gallery.body { + width: 100%; + min-height: 100vh; + justify-content: center; + align-items: center; +} +.gallery .slide-container { + position: relative; + max-width: 100%; + max-height: 100%; + height: 600px; + margin: 0 auto; +} +.slide-container .images { + width: 100%; + height: 100%; + position: relative; + overflow: hidden; +} +.slide-container .images img{ + position: absolute; + width: 100%; + height: 100%; + object-fit: contain; +} +.slide-container .images img:not(.active){ + top: 0; + left: -100%; +} +span.next, span.prev { + position: absolute; + top: 50%; + transform: translateY(-50%); + padding: 14px; + color: #a589a8; + font-size: 30px; + font-weight: bold; + transition: 0.5s; + border-radius: 3px; + user-select: none; + z-index: 1; + cursor: pointer; +} +span.next { + right: 10px; +} +span.left { + left: 10px; +} +span.next:hover, span.prev:hover { + background-color: #ede6d6; + opacity: 0.8; + color: #222; + +} +.dots-container { + position: absolute; + bottom: 5px; + z-index: 3; + left: 50%; + transform: translateX(-50%); +} + +.dots-container .dot { + width: 15px; + height: 15px; + margin: 0px 2px; + border: 3px solid #bbb; + border-radius: 50%; + display: inline-block; + transition: background-color 0.6s ease; +} +.dots-container .active { + background-color: #1e1e1e; +} +@keyframes next1 { + from { + left: 0%; + } to { + left: -100%; + } +} +@keyframes next2 { + from { + left: 100%; + } to { + left: 0%; + } +} +@keyframes prev1 { + from { + left: 0%; + } to { + left: 100%; + } +} +@keyframes prev2 { + from { + left: -100%; + } to { + left: 0%; + } +} +@media (max-width: 768px) { + .gallery .slide-container { + width: 95%; + max-width: none; /* Remove max-width for smaller screens */ + } + + span.next, span.prev { + font-size: 24px; /* Adjust font size for smaller screens */ + } +} + /* SCHEDULE */ .schedule { padding-bottom: 5%; diff --git a/assets/img/gallery/IMG_1113.JPG b/assets/img/gallery/IMG_1113.JPG new file mode 100644 index 0000000..5afd3c6 Binary files /dev/null and b/assets/img/gallery/IMG_1113.JPG differ diff --git a/assets/img/gallery/IMG_1347.jpg b/assets/img/gallery/IMG_1347.jpg new file mode 100644 index 0000000..2989e16 Binary files /dev/null and b/assets/img/gallery/IMG_1347.jpg differ diff --git a/assets/img/gallery/IMG_8338.jpg b/assets/img/gallery/IMG_8338.jpg new file mode 100644 index 0000000..374a14a Binary files /dev/null and b/assets/img/gallery/IMG_8338.jpg differ diff --git a/assets/img/gallery/IMG_8341.jpg b/assets/img/gallery/IMG_8341.jpg new file mode 100644 index 0000000..3d5a75f Binary files /dev/null and b/assets/img/gallery/IMG_8341.jpg differ diff --git a/assets/img/gallery/IMG_8347.jpg b/assets/img/gallery/IMG_8347.jpg new file mode 100644 index 0000000..91ca0cd Binary files /dev/null and b/assets/img/gallery/IMG_8347.jpg differ diff --git a/assets/img/gallery/IMG_8549.jpg b/assets/img/gallery/IMG_8549.jpg new file mode 100644 index 0000000..2d57d8e Binary files /dev/null and b/assets/img/gallery/IMG_8549.jpg differ diff --git a/assets/img/gallery/IMG_8635.jpg b/assets/img/gallery/IMG_8635.jpg new file mode 100644 index 0000000..e9d7211 Binary files /dev/null and b/assets/img/gallery/IMG_8635.jpg differ diff --git a/assets/img/gallery/IMG_8658.jpg b/assets/img/gallery/IMG_8658.jpg new file mode 100644 index 0000000..6898230 Binary files /dev/null and b/assets/img/gallery/IMG_8658.jpg differ diff --git a/assets/js/gallery.js b/assets/js/gallery.js new file mode 100644 index 0000000..e947624 --- /dev/null +++ b/assets/js/gallery.js @@ -0,0 +1,80 @@ +let slideImages = document.querySelectorAll('.images img'); +let next = document.querySelector('.next'); +let prev = document.querySelector('.prev'); +let dots = document.querySelectorAll('.dot'); + +var counter = 0; + + +function positionArrows() { + let activeImage = document.querySelector('.images img'); + let imageWidth = activeImage.clientWidth; + let imageHeight = activeImage.clientHeight; + + next.style.right = `${(imageWidth / 2) - 500}px`; + prev.style.left = `${(imageWidth / 2) - 500}px`; + next.style.top = prev.style.top = `${(imageHeight / 2)}px`; + +} + +window.addEventListener('load', positionArrows); + +slideImages.forEach(function(image) { + image.addEventListener('transitionend', positionArrows); +}); + +next.addEventListener('click', slideNext); +function slideNext() { + slideImages[counter].style.animation = 'next1 1.0s ease-in forwards'; + counter = counter >= slideImages.length - 1 ? 0 : counter + 1; + slideImages[counter].style.animation = 'next2 1.0s ease-in forwards'; + indicators(); +} + +prev.addEventListener('click', slidePrev); +function slidePrev() { + slideImages[counter].style.animation = 'prev1 1.0s ease-in forwards'; + counter = counter <= 0 ? slideImages.length - 1 : counter - 1; + slideImages[counter].style.animation = 'prev2 1.0s ease-in forwards'; + indicators(); +} + + +function autoSliding() { + deletInterval = setInterval(() => { + slideNext(); + indicators(); + }, 2500); +} +autoSliding(); + +const container = document.querySelector('.slide-container'); +container.addEventListener('mouseover', () => { + clearInterval(deletInterval); +}) +container.addEventListener('mouseout', autoSliding); + + +function indicators() { + for(i = 0; i < dots.length; i++) { + dots[i].className = dots[i].className.replace(' active', ''); + } + dots[counter].className += ' active'; +} + +function switchImage(currentImage) { + currentImage.classList.add('active'); + var imageId = currentImage.getAttribute('attr'); + if (imageId > counter) { + slideImages[counter].style.animation = 'next1 1.0s ease-in forwards'; + counter = imageId; + slideImages[counter].style.animation = 'next2 1.0s ease-in forwards'; + } + if (imageId < counter) { + slideImages[counter].style.animation = 'prev1 1.0s ease-in forwards'; + counter = imageId; + slideImages[counter].style.animation = 'prev2 1.0s ease-in forwards'; + } + indicators(); +} + diff --git a/assets/js/our-team-tab.js b/assets/js/our-team-tab.js index e08217a..f1727a6 100644 --- a/assets/js/our-team-tab.js +++ b/assets/js/our-team-tab.js @@ -6,8 +6,8 @@ Jasmine Cai`; const directorRoles = `Co-Director Co-Director`; -const hardwareNames = `Anushree Patil -Samridh Tuteja +const hardwareNames = `Samridh Tuteja +Anushree Patil Poul Holm Douglas Tran Adi Nelson @@ -16,7 +16,7 @@ Monil Bhavsar Kavya Manchanda Yav Rohatgi`; -const hardwareRoles = `Hardware Co-Director +const hardwareRoles = `Hardware Director Hardware Co-Director Hardware Member Hardware Member diff --git a/index.html b/index.html index 614978d..3e032b8 100644 --- a/index.html +++ b/index.html @@ -312,6 +312,54 @@

+ + + +
+
+
+

Gallery

+
+ Checkout some photos from last year! +
+ +
+ ❯ +
+ + + + + + + + + +
+ ❮ + +
+
+
+
+
+
+
+
+
+
+
+ + +
+ + + +