Evan pepper (Talk | contribs) |
Evan pepper (Talk | contribs) |
||
Line 1: | Line 1: | ||
{{UCSC}} | {{UCSC}} | ||
+ | |||
<html> | <html> | ||
− | + | <style> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
Line 73: | Line 12: | ||
− | + | #page { | |
− | + | width : 80%; | |
− | + | ||
− | + | margin-left : 10%; | |
− | + | ||
− | + | ||
+ | |||
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | #express{ | |
+ | /*background-image : url("https://static.igem.org/mediawiki/2016/2/27/T--Sydney_Australia--1.png"); */ | ||
+ | |||
+ | background-size:contain; | ||
+ | background-position:center; | ||
+ | background-position: 50% 50%; | ||
+ | margin-left : 0%; | ||
+ | width : 100%; | ||
+ | height : 350px; | ||
+ | background-size : cover; | ||
+ | vertical-align : middle; | ||
+ | line-height : 300px; | ||
+ | text-align : center; | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | vertical-align : center; | ||
+ | align-items: center; | ||
+ | -webkit-display: flex; | ||
+ | -webkit-justify-content: center; | ||
+ | -webkit-align-items: center; | ||
+ | } | ||
+ | |||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .leadingQuestions { /* Projects */ | |
− | + | ||
− | + | width : 100%; | |
− | + | height : 300px; | |
− | + | background-color: yellow; | |
− | + | float:left; | |
− | + | ||
+ | } | ||
− | + | .box2 { /* Projects */ | |
+ | |||
+ | width : 50%; | ||
+ | height : 360px; | ||
+ | /* background-color: red;*/ | ||
+ | float:left; | ||
+ | |||
+ | } | ||
+ | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .infobox { | |
− | + | width : 50px; | |
− | + | height : 100% | |
− | + | background-color: yellow; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .subpanel2 { /* Projects */ | |
− | + | ||
− | + | background-image : url("https://static.igem.org/mediawiki/2016/1/1d/T--Sydney_Australia--5.png"); | |
− | + | ||
− | + | background-position: center top; | |
− | + | background-size: 100% 120px; | |
− | + | float:left; | |
− | + | width:100%; | |
− | + | height:33.3%; | |
− | + | font-size:22px; | |
− | + | text-align:center; | |
− | + | margin-top:0; | |
− | + | margin-right:11px; | |
− | + | border-radius:7px; | |
− | + | overflow:hidden; | |
− | + | line-height:10px; | |
− | + | left-margin: 2000px | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .subpanel2:hover{ | |
− | . | + | |
− | + | background-image : url("https://static.igem.org/mediawiki/2016/a/aa/T--Sydney_Australia--6.png"); | |
− | + | background-position: center top; | |
− | + | background-size: 100% 120px; | |
+ | font-weight:bold; | ||
} | } | ||
− | . | + | .subpanel2:hover .narrowimg { |
− | + | opacity:0.8; | |
− | + | filter: alpha(opacity=80); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
+ | .subpanel22 { /* Projects */ | ||
+ | |||
+ | background-image : url("https://static.igem.org/mediawiki/2016/2/27/T--Sydney_Australia--1.png"); | ||
+ | |||
+ | background-position: center top; | ||
+ | background-size: 100% 120px ; | ||
+ | float:left; | ||
+ | width:100%; | ||
+ | height:33.3%; | ||
+ | font-size:22px; | ||
+ | text-align:center; | ||
+ | margin-top:0; | ||
+ | margin-right:11px; | ||
+ | border-radius:7px; | ||
+ | overflow:hidden; | ||
+ | line-height:10px; | ||
+ | left-margin: 2000px | ||
+ | } | ||
+ | .subpanel22:hover{ | ||
+ | |||
+ | background-image : url("https://static.igem.org/mediawiki/2016/5/5b/T--Sydney_Australia--2.png"); | ||
+ | background-position: center top; | ||
+ | background-size: 100% 120px ; | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | .subpanel22:hover .narrowimg { | ||
+ | opacity:0.8; | ||
+ | filter: alpha(opacity=80); | ||
} | } | ||
+ | .subpanel23 { /* Projects */ | ||
+ | |||
+ | background-image : url("https://static.igem.org/mediawiki/2016/3/3b/T--Sydney_Australia--3.png"); | ||
+ | |||
+ | background-position: center top; | ||
+ | background-size: 100% 120px ; | ||
+ | float:left; | ||
+ | width:100%; | ||
+ | height:33.3%; | ||
+ | font-size:22px; | ||
+ | text-align:center; | ||
+ | margin-top:0; | ||
+ | margin-right:11px; | ||
+ | border-radius:7px; | ||
+ | overflow:hidden; | ||
+ | line-height:10px; | ||
+ | left-margin: 2000px | ||
− | |||
− | |||
} | } | ||
− | + | .subpanel23:hover{ | |
− | . | + | |
− | + | background-image : url("https://static.igem.org/mediawiki/2016/8/8b/T--Sydney_Australia--4.png"); | |
− | + | background-position: center top; | |
− | + | background-size: 100% 120px; | |
− | + | font-weight:bold; | |
− | + | ||
− | - | + | |
− | + | ||
} | } | ||
− | + | .subpanel23:hover .narrowimg { | |
− | . | + | opacity:0.8; |
− | + | filter: alpha(opacity=80); | |
} | } | ||
− | . | + | .subpanel6 { /* Collaboration, SensiGEM */ |
− | + | height:240.5px; | |
− | + | margin:0; | |
− | + | margin-bottom:11px; | |
− | + | border-radius:7px; | |
− | + | overflow:hidden; | |
− | border- | + | background:rgb(255,255,255); |
− | + | color:Black; | |
− | + | text-align:center; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .subpanel6:hover{ | |
− | . | + | font-weight:bold; |
− | + | ||
} | } | ||
− | + | .subpanel6:hover .narrowimg { | |
− | . | + | opacity:0.8; |
− | + | filter: alpha(opacity=80); | |
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .mainLinks { /* Main */ | |
− | + | float:left; | |
− | + | width : 30%; | |
− | + | height : 150px; | |
− | + | border-radius: 8px; | |
− | + | margin-left: 1.53%; | |
− | + | margin-right: 1.53%; | |
+ | margin-top: 20px; | ||
+ | background-color: red; | ||
+ | float:left; | ||
+ | text-align:center; | ||
+ | font-size:26px; | ||
+ | |||
} | } | ||
− | + | .mainLinks:hover{ | |
− | + | background-color:black; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .subLinks { /* Main */ | |
− | + | float:left; | |
− | + | width : 40%; | |
− | + | height : 150px; | |
− | + | border-radius: 8px; | |
− | + | margin-left: 5%; | |
+ | margin-right: 5%; | ||
+ | margin-top: 20px; | ||
+ | background-color: red; | ||
+ | float:left; | ||
+ | text-align:center; | ||
+ | font-size:26px; | ||
+ | |||
− | + | ||
− | + | display: flex; | |
+ | justify-content: center; | ||
+ | vertical-align : center; | ||
+ | align-items: center; | ||
+ | -webkit-display: flex; | ||
+ | -webkit-justify-content: center; | ||
+ | -webkit-align-items: center; | ||
+ | |||
} | } | ||
− | + | .subLinks:hover{ | |
− | + | background-color:black; | |
} | } | ||
− | . | + | .separationFine { |
− | + | width: 100%; | |
+ | height:10px; | ||
} | } | ||
− | + | .boxLeft { /* Projects */ | |
− | + | ||
+ | width : 45%; | ||
+ | display: inline | ||
+ | margin-left: 2.5%; | ||
+ | margin-right: 2.5%; | ||
+ | float:left; | ||
+ | |||
} | } | ||
− | + | .boxRight { /* Projects */ | |
− | + | ||
− | + | width : 45%; | |
− | . | + | display: inline |
− | + | margin-right: 2.5%; | |
− | + | margin-left : 2.5%; | |
− | + | float:left; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | .boxAll { | ||
+ | clear: both; | ||
+ | width: 100% | ||
− | |||
− | |||
+ | height: 10px; | ||
} | } | ||
− | |||
− | |||
− | |||
− | . | + | .hide-bullets { |
− | + | list-style:none; | |
+ | margin-left: -40px; | ||
+ | margin-top:20px; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | .thumbnail { | ||
+ | padding: 0; | ||
+ | } | ||
− | + | .carousel-inner>.item>img, .carousel-inner>.item>a>img { | |
− | + | width: 100%; | |
− | + | outline: 0; | |
− | + | } | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | </style> | ||
+ | |||
+ | <div class="container" > | ||
+ | <div id="main_area" style = "margin-top: -50px;"> | ||
+ | <!-- Slider --> | ||
+ | <div class="row"> | ||
+ | <div class="col-xs-12" id="slider"> | ||
+ | <!-- Top part of the slider --> | ||
+ | <div class="row"> | ||
+ | <div class="col-sm-8" id="carousel-bounding-box" style = "margin-left: 17.5%;"> | ||
+ | <div class="carousel slide" id="myCarousel"> | ||
+ | <!-- Carousel items --> | ||
+ | <div class="carousel-inner"> | ||
+ | <div class="active item" data-slide-number="0"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/b/b9/T--Sydney_Australia--claudiabanner.jpg "></div> | ||
− | + | <div class="item" data-slide-number="1"> | |
− | + | <img src="https://static.igem.org/mediawiki/2016/6/62/T--Sydney_Australia--sholtobanner.png"></div> | |
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <div class="item" data-slide-number="2"> | |
− | + | <img src="https://static.igem.org/mediawiki/2016/c/c7/T--Sydney_Australia--AmandaBio.png"></div> | |
− | + | ||
− | + | ||
+ | <div class="item" data-slide-number="3"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/4/45/T--Sydney_Australia--Liam.png | ||
+ | "></div> | ||
− | + | <div class="item" data-slide-number="4"> | |
+ | <img src="https://static.igem.org/mediawiki/2016/8/89/T--Sydney_Australia--Singyoung.png " ></div> | ||
+ | <div class="item" data-slide-number="5"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/4/40/T--Sydney_Australia--orionbanner.jpg"></div> | ||
+ | <div class="active item" data-slide-number="6"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/1/11/T--Sydney_Australia--almabanner.png"></div> | ||
+ | <div class="item" data-slide-number="7"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/f/ff/T--Sydney_Australia--themathguy.png"></div> | ||
+ | |||
− | + | <div class="item" data-slide-number="8"> | |
+ | <img src="https://static.igem.org/mediawiki/2016/0/0a/T--Sydney_Australia--TeamBanner.jpeg"></div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | </div><!-- Carousel nav --> | |
− | + | <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> | |
− | + | <span class="glyphicon glyphicon-chevron-left"></span> | |
− | + | </a> | |
− | + | <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> | |
− | </ | + | <span class="glyphicon glyphicon-chevron-right"></span> |
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
− | + | ||
− | + | ||
+ | </div> | ||
+ | </div> | ||
+ | </div><!--/Slider--> | ||
+ | <div class = "separationFine"> </div> | ||
+ | <div class="row hidden-xs" id="slider-thumbs" > | ||
+ | <!-- Bottom switcher of slider --> | ||
+ | <ul class="hide-bullets" > | ||
+ | <li class="col-sm-3"> | ||
+ | <a class="thumbnail" id="carousel-selector-0" style = "height: 20px;"><img src="https://static.igem.org/mediawiki/2016/a/aa/T--Sydney_Australia--claudiaface.jpg" > </a> | ||
+ | </li> | ||
− | + | <li class="col-sm-3"> | |
− | + | <a class="thumbnail" id="carousel-selector-1"><img src="https://static.igem.org/mediawiki/2016/3/39/T--Sydney_Australia--SholtoHead.png" ></a> | |
+ | </li> | ||
− | + | <li class="col-sm-3"> | |
+ | <a class="thumbnail" id="carousel-selector-2"><img src="https://static.igem.org/mediawiki/2016/8/8b/T--Sydney_Australia--amandaface.jpg" ></a> | ||
+ | </li> | ||
− | + | <li class="col-sm-3"> | |
− | < | + | <a class="thumbnail" id="carousel-selector-3"><img src="https://static.igem.org/mediawiki/2016/0/0c/T--Sydney_Australia--liamface.jpg" ></a> |
− | + | </li> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | </ul> </div> | |
+ | <div class="row hidden-xs" id="slider-thumbs" > | ||
+ | <ul class="hide-bullets" > | ||
+ | <li class="col-sm-3"> | ||
+ | <a class="thumbnail" id="carousel-selector-4"><img src="https://static.igem.org/mediawiki/2016/0/0c/T--Sydney_Australia--singyoungface.jpg" ></a> | ||
+ | </li> | ||
− | + | <li class="col-sm-3"> | |
− | + | <a class="thumbnail" id="carousel-selector-5"><img src="https://static.igem.org/mediawiki/2016/1/18/T--Sydney_Australia--orionface.jpg" ></a> | |
− | + | </li> | |
− | + | <li class="col-sm-3"> | |
− | + | <a class="thumbnail" id="carousel-selector-6"><img src="https://static.igem.org/mediawiki/2016/9/9f/T--Sydney_Australia--almaface.jpg" ></a> | |
− | + | </li> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | <li class="col-sm-3"> | ||
+ | <a class="thumbnail" id="carousel-selector-7"><img src="https://static.igem.org/mediawiki/2016/7/74/T--Sydney_Australia--wunnaface.jpg" ></a> | ||
+ | </li> | ||
− | + | ||
− | </ | + | </ul> |
− | + | </div> | |
− | + | </div> | |
− | + | ||
− | + | ||
− | </div | + | |
− | + | ||
</div> | </div> | ||
Line 517: | Line 408: | ||
− | |||
− | |||
− | |||
− | |||
− | < | + | <script> jQuery(document).ready(function($) { |
+ | |||
+ | $('#myCarousel').carousel(8); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | $('#myCarousel').carousel({ | |
+ | interval: 100000 | ||
+ | }); | ||
+ | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | $('#carousel-text').html($('#slide-content-4').html()); | ||
+ | |||
+ | //Handles the carousel thumbnails | ||
+ | $('[id^=carousel-selector-]').click( function(){ | ||
+ | var id = this.id.substr(this.id.lastIndexOf("-") + 1); | ||
+ | var id = parseInt(id); | ||
+ | $('#myCarousel').carousel(id); | ||
+ | }); | ||
+ | |||
+ | |||
+ | // When the carousel slides, auto update the text | ||
+ | $('#myCarousel').on('slid.bs.carousel', function (e) { | ||
+ | var id = $('.item.active').data('slide-number'); | ||
+ | $('#carousel-text').html($('#slide-content-'+id).html()); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
− | |||
− | |||
</html> | </html> |
Revision as of 00:12, 20 July 2017