Difference between revisions of "Team:Harvard/Team"
| Line 66: | Line 66: | ||
line-height: 70px !important; | line-height: 70px !important; | ||
} | } | ||
| + | |||
| + | |||
.slider { | .slider { | ||
| Line 268: | Line 270: | ||
<div style="background-color: white !important;"> | <div style="background-color: white !important;"> | ||
| − | + | ||
<div class="page-title" style="background-color: white !important; border-top: 5px solid #222;padding-bottom: 0px;"> | <div class="page-title" style="background-color: white !important; border-top: 5px solid #222;padding-bottom: 0px;"> | ||
<div class="container"> | <div class="container"> | ||
Revision as of 15:43, 14 October 2019
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style> .img-circular{
width: 300px; height: 300px;
margin: 0px 2em 2em 0px;
display: block;
border-radius: 50%; border: 5px solid #ddd; float:left; } .img-circular-small {
width: 140px; height: 140px;
display: block;
border-radius: 50%;
border: 5px solid #ddd;
}
.wall1 {
background-image: url(
);
background-size: contain; background-repeat: no-repeat;
}
.wall2 {
background-image: url(
);
background-size: contain; background-repeat: no-repeat;
}
.wall3 {
background-image: url(
);
background-size: contain; background-repeat: no-repeat;
}
- a1 h1 {
font-family: 'Open Sans' !important; color: #9d1c20 !important;
}
- a2 h1 {
font-family: 'Open Sans' !important; color: #F8991D !important;
}
- a3 h1{
font-family: 'Open Sans' !important; color: #009193 !important; line-height: 70px !important;
}
- a4 h1 {
font-family: 'Open Sans' !important;
color: #009E73 !important;
}
- a5 h1 {
font-family: 'Open Sans' !important;
color: #ffd700 !important;
}
- a6 h1{
font-family: 'Open Sans' !important;
color: #005493 !important;
line-height: 70px !important;
}
.slider { position: relative; width: 100%;
padding-bottom: 50px;
height: auto; transition: all .3s; perspective: 900px; transform-style: preserve-3d; }
.slider .previous, .slider .next{
font-family: "FontAwesome";
font-size: 20px;
position: absolute;
top: 50%;
color: #2c2c2c;
padding: 20px;
text-decoration: none;
left: -100px;
margin-top: -34px;
transition: all .3s;
opacity: 0;
z-index: 10000;
height: auto;
} .slider .next{ right: -100px; content: "\f054"; left: auto; } .slider:hover .previous, .slider:hover .next{ opacity: 1; } .slider:hover .previous{ left: 0; } .slider:hover .next{ right: 0; } .slider .slides{ height: 100%;
} .slide{
text-align: center;
position: absolute; transform: scale(0.5,0.5); opacity: 0; transition: all .3s;
padding: 50px;
height: auto;
} .slide.active{ z-index: 10; left: 0; opacity: 1; transform: scale(1,1); } .slider .bullets { text-align: center; position: absolute; bottom: 0px; width: 100%; } .slider .bullets .bullet{ position: relative; display: inline-block; background: rgba(0, 0, 0,.8); border-radius: 50%; width: 8px; height: 8px; z-index: 14; margin: 0 5px; cursor: pointer; border: 2px solid transparent; transition: all .3s; } .slider .bullets .bullet.active{ background: rgba(0, 0, 0,.4); } .slider .bullets .bullet:hover{ border: 2px solid rgba(0, 0, 0,.8); background: transparent; }
.arrows a {
cursor: pointer;
}
.slider2{ position: relative; width: 100%;
padding-bottom: 50px;
height: auto; transition: all .3s; perspective: 900px; transform-style: preserve-3d; } .slider2 .previous2, .slider2 .next2{ font-family: "FontAwesome"; font-size: 20px; position: absolute; top: 50%; color: #2c2c2c; padding: 20px; text-decoration: none; left: -100px; margin-top: -34px; transition: all .3s; opacity: 0; z-index: 10000; } .slider2 .next2{ right: -100px; content: "\f054"; left: auto; } .slider2:hover .previous2, .slider2:hover .next2{ opacity: 1; } .slider2:hover .previous2{ left: 0; } .slider2:hover .next2{ right: 0; } .slider2 .slides2{ height: 100%; } .slide2{ text-align: center; position: absolute; transform: scale(0.5,0.5); opacity: 0; transition: all .3s;
padding: 50px;
height: auto;
} .slide2.active{ z-index: 10; left: 0; opacity: 1; transform: scale(1,1); } .slider2 .bullets2{ text-align: center; position: absolute; bottom: 0px; width: 100%; } .slider2 .bullets2 .bullet2{ position: relative; display: inline-block; background: rgba(0, 0, 0,.8); border-radius: 50%; width: 8px; height: 8px; z-index: 14; margin: 0 5px; cursor: pointer; border: 2px solid transparent; transition: all .3s; } .slider2 .bullets2 .bullet2.active{ background: rgba(0, 0, 0,.4); } .slider2 .bullets2 .bullet2:hover{ border: 2px solid rgba(0, 0, 0,.8); background: transparent; }
.arrows a {
cursor: pointer;
}
.inner-slide {
-webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.25);
padding: 20px;
min-height: 500px;
}
.inner-slide > h1 {
line-height: 70px !important;
}
.member-text, .member-text > ul {
font-family: 'Open Sans' !important;
text-align: justify !important;
font-size: 20px !important;
font-weight: 300 !important;
}
.gallery-icon {
margin: 1em 1em 1em 1em;
}
.gallery-icon-2 {
margin: 1em 1em 1em 1em;
}
</style>
Members
Supervisors
<script>
var $slider = $(".slider"), $bullets = $(".bullets");
function calculateHeight(){ var height = $(".slide.active").outerHeight(); $slider.height(height); }
$(window).resize(function() { calculateHeight(); clearTimeout($.data(this, 'resizeTimer')); });
function resetSlides(){ $(".slide.inactive").removeClass("inactiveRight").removeClass("inactiveLeft"); }
function gotoSlide($activeSlide, $slide, className){ $activeSlide.removeClass("active").addClass("inactive "+className); $slide.removeClass("inactive").addClass("active"); calculateHeight(); resetBullets(); setTimeout(resetSlides, 300); }
$(".next").on("click", function(){ var $activeSlide = $(".slide.active"), $nextSlide = $activeSlide.next(".slide").length != 0 ? $activeSlide.next(".slide") : $(".slide:first-child"); console.log($nextSlide); gotoSlide($activeSlide, $nextSlide, "inactiveLeft"); }); $(".previous").on("click", function(){ var $activeSlide = $(".slide.active"), $prevSlide = $activeSlide.prev(".slide").length != 0 ? $activeSlide.prev(".slide") : $(".slide:last-child");
console.log($prevSlide);
gotoSlide($activeSlide, $prevSlide, "inactiveRight"); });
$(".gallery-icon").on("click", function() {
var $activeSlide = $(".slide.active");
var get_div = "#a" + $(this).children().attr("class").split(" ")[0].substring(4, $(this).children().attr("class").split(" ")[0].length);
var $clickedSlide = $(get_div);
gotoSlide($activeSlide, $clickedSlide, 'nothing');
})
$(document).on("click", ".bullet", function(){ if($(this).hasClass("active")){ return; } var $activeSlide = $(".slide.active"); var currentIndex = $activeSlide.index(); var targetIndex = $(this).index(); console.log(currentIndex, targetIndex); var $theSlide = $(".slide:nth-child("+(targetIndex+1)+")"); gotoSlide($activeSlide, $theSlide, currentIndex > targetIndex ? "inactiveRight" : "inactiveLeft"); }) function addBullets(){ var total = $(".slide").length, index = $(".slide.active").index(); for (var i=0; i < total; i++){
var $bullet = $("if(i==index){ $bullet.addClass("active"); } $bullets.append($bullet); } }
function resetBullets(){ $(".bullet.active").removeClass("active"); var index = $(".slide.active").index()+1; console.log(index); $(".bullet:nth-child("+index+")").addClass("active"); } addBullets(); calculateHeight();
</script>
<script>
var $slider = $(".slider2"), $bullets = $(".bullets2"); function calculateHeight(){ var height = $(".slide2.active").outerHeight(); $slider.height(height); }
$(window).resize(function() { calculateHeight(); clearTimeout($.data(this, 'resizeTimer')); });
function resetSlides(){ $(".slide2.inactive").removeClass("inactiveRight").removeClass("inactiveLeft"); }
function gotoSlide($activeSlide, $slide, className){ $activeSlide.removeClass("active").addClass("inactive "+className); $slide.removeClass("inactive").addClass("active"); calculateHeight(); resetBullets(); setTimeout(resetSlides, 300); }
$(".next2").on("click", function(){ var $activeSlide = $(".slide2.active"), $nextSlide = $activeSlide.next(".slide2").length != 0 ? $activeSlide.next(".slide2") : $(".slide2:first-child"); console.log($nextSlide); gotoSlide($activeSlide, $nextSlide, "inactiveLeft"); }); $(".previous2").on("click", function(){ var $activeSlide = $(".slide2.active"), $prevSlide = $activeSlide.prev(".slide2").length != 0 ? $activeSlide.prev(".slide2") : $(".slide2:last-child");
console.log($prevSlide);
gotoSlide($activeSlide, $prevSlide, "inactiveRight"); });
$(".gallery-icon-2").on("click", function() {
var $activeSlide = $(".slide2.active");
console.log($(this).children().attr("class").split(" ")[0].substring(4, $(this).children().attr("class").split(" ")[0].length));
var get_div = "#a" + $(this).children().attr("class").split(" ")[0].substring(4, $(this).children().attr("class").split(" ")[0].length);
var $clickedSlide = $(get_div);
gotoSlide($activeSlide, $clickedSlide, 'nothing');
})
$(document).on("click", ".bullet2", function(){ if($(this).hasClass("active")){ return; } var $activeSlide = $(".slide2.active"); var currentIndex = $activeSlide.index(); var targetIndex = $(this).index(); console.log(currentIndex, targetIndex); var $theSlide = $(".slide2:nth-child("+(targetIndex+1)+")"); gotoSlide($activeSlide, $theSlide, currentIndex > targetIndex ? "inactiveRight" : "inactiveLeft"); }) function addBullets(){ var total = $(".slide2").length, index = $(".slide2.active").index(); for (var i=0; i < total; i++){
var $bullet = $("if(i==index){ $bullet.addClass("active"); } $bullets.append($bullet); } } function resetBullets(){ $(".bullet2.active").removeClass("active"); var index = $(".slide2.active").index()+1; console.log(index); $(".bullet2:nth-child("+index+")").addClass("active"); } addBullets(); calculateHeight();
</script>
</html>