|
|
| Line 1: |
Line 1: |
| - | {{{Team:TPHS/Main}}
| |
| - | <html>
| |
| - | <style>
| |
| | | | |
| - | #Banner {
| |
| - | display: none;
| |
| - | position: fixed;
| |
| - | height: 100px;
| |
| - | width: 100%;
| |
| - | background: url(background.png) center center;
| |
| - | }
| |
| - |
| |
| - | #TeamMembers {
| |
| - | position: relative;
| |
| - | top: 108px;
| |
| - | }
| |
| - |
| |
| - | #Carousel {
| |
| - | width: 990px;
| |
| - | height: 180px;
| |
| - | background-color:rgba(35,31,32,0.6);
| |
| - | padding-left: 90px;
| |
| - | position: relative;
| |
| - | overflow: hidden;
| |
| - | left: 0;
| |
| - | right: 0;
| |
| - | margin: 25px auto;
| |
| - | display: none;
| |
| - | -webkit-user-select: none;
| |
| - | -khtml-user-select: none;
| |
| - | -moz-user-select: none;
| |
| - | -o-user-select: none
| |
| - | user-select: none;
| |
| - | }
| |
| - |
| |
| - | #Carousel .Person {
| |
| - | width: 150px;
| |
| - | height: 150px;
| |
| - | position: absolute;
| |
| - | top: 15px;
| |
| - | }
| |
| - |
| |
| - | #Carousel .Slide0 {
| |
| - | left: 90px;
| |
| - | cursor: pointer;
| |
| - | }
| |
| - |
| |
| - | #Carousel .Slide1 {
| |
| - | left: 255px;
| |
| - | cursor: pointer;
| |
| - | }
| |
| - |
| |
| - | #Carousel .Slide2 {
| |
| - | left: 420px;
| |
| - | background-position: top !important;
| |
| - | }
| |
| - |
| |
| - | #Carousel .Slide3 {
| |
| - | left: 585px;
| |
| - | cursor: pointer;
| |
| - | }
| |
| - |
| |
| - | #Carousel .Slide4 {
| |
| - | left: 750px;
| |
| - | cursor: pointer;
| |
| - | }
| |
| - |
| |
| - | #Carousel .Arrow {
| |
| - | position: absolute;
| |
| - | width: 60px;
| |
| - | height: 60px;
| |
| - | top: 0;
| |
| - | bottom: 0;
| |
| - | margin: auto;
| |
| - | }
| |
| - |
| |
| - | #Carousel #LeftArrow {
| |
| - | left: 0;
| |
| - | margin-left: 15px;
| |
| - | background: url(https://static.igem.org/mediawiki/2013/d/db/2013UCalgaryArrowLeftWhite.png) top;
| |
| - | }
| |
| - |
| |
| - | #Carousel #RightArrow {
| |
| - | right: 0;
| |
| - | margin-right: 15px;
| |
| - | background: url(https://static.igem.org/mediawiki/2013/6/66/2013UCalgaryArrowRightWhite.png) top;
| |
| - | }
| |
| - |
| |
| - | #Carousel #LeftArrow:hover, #Carousel #RightArrow:hover {
| |
| - | background-position: bottom;
| |
| - | cursor: pointer;
| |
| - | }
| |
| - |
| |
| - | #Carousel #Person0 {
| |
| - | background: url() bottom;
| |
| - | }
| |
| - |
| |
| - | #Carousel #Person1 {
| |
| - | background: url() bottom;
| |
| - | }
| |
| - |
| |
| - | #Carousel #Person2 {
| |
| - | background: url() bottom;
| |
| - | }
| |
| - |
| |
| - | #Carousel #Person3 {
| |
| - | background: url() bottom;
| |
| - | }
| |
| - |
| |
| - | #Carousel #Person4 {
| |
| - | background: url() bottom;
| |
| - | }
| |
| - |
| |
| - | #Carousel #Person5 {
| |
| - | background: url() bottom;
| |
| - | display: none;
| |
| - | }
| |
| - |
| |
| - | #Carousel #Person6 {
| |
| - | background: url() bottom;
| |
| - | display: none;
| |
| - | }
| |
| - |
| |
| - | #Carousel #Person7 {
| |
| - | background: url() bottom;
| |
| - | display: none;
| |
| - | }
| |
| - |
| |
| - | #Carousel #Person8 {
| |
| - | background: url() bottom;
| |
| - | display: none;
| |
| - | }
| |
| - |
| |
| - | #Carousel #Person9 {
| |
| - | background: url() bottom;
| |
| - | display: none;
| |
| - | }
| |
| - |
| |
| - | #Carousel #Person10 {
| |
| - | background: url() bottom;
| |
| - | display: none;
| |
| - | }
| |
| - |
| |
| - | #Carousel #Person11 {
| |
| - | background: url() bottom;
| |
| - | display: none;
| |
| - | }
| |
| - |
| |
| - | #Carousel #Person12 {
| |
| - | background: url() bottom;
| |
| - | display: none;
| |
| - | }
| |
| - |
| |
| - | #Carousel #Person13 {
| |
| - | background: url() bottom;
| |
| - | display: none;
| |
| - | }
| |
| - |
| |
| - | #Carousel #Person14 {
| |
| - | background: url() bottom;
| |
| - | display: none;
| |
| - | }
| |
| - |
| |
| - | #Carousel #Person15 {
| |
| - | background: url() bottom;
| |
| - | display: none;
| |
| - | }
| |
| - |
| |
| - | #Carousel #Person16 {
| |
| - | background: url() bottom;
| |
| - | display: none;
| |
| - | }
| |
| - |
| |
| - | #Carousel #Person17 {
| |
| - | background: url() bottom;
| |
| - | display: none;
| |
| - | }
| |
| - |
| |
| - | #WriteUp {
| |
| - | width: 100%;
| |
| - | max-width: 990px;
| |
| - | background-color:rgba(35,31,32,0.6);
| |
| - | left: 0;
| |
| - | right: 0;
| |
| - | margin: 0 auto;
| |
| - | }
| |
| - |
| |
| - | #WriteUp .Info {
| |
| - | clear: both;
| |
| - | overflow: auto;
| |
| - | }
| |
| - |
| |
| - | #WriteUp .InfoImg {
| |
| - | position: relative;
| |
| - | width: 50%;
| |
| - | height: 100%;
| |
| - | padding: 25px;
| |
| - | float: left;
| |
| - | }
| |
| - |
| |
| - | #WriteUp .InfoImg img {
| |
| - | width: 100%;
| |
| - | height: auto;
| |
| - | max-width: 100%;
| |
| - | }
| |
| - |
| |
| - | #WriteUp .Text {
| |
| - | width: 50%;
| |
| - | min-width: 320px;
| |
| - | height: 100%;
| |
| - | padding: 25px;
| |
| - | float: left;
| |
| - | }
| |
| - |
| |
| - | #WriteUp .Text h2 {
| |
| - | line-height: 1;
| |
| - | text-align: left;
| |
| - | font-size: 28px;
| |
| - | font-weight: 600;
| |
| - | color: #FFFFFF;
| |
| - | margin: 0;
| |
| - | }
| |
| - |
| |
| - | #WriteUp .Text h3 {
| |
| - | line-height: 1.6;
| |
| - | text-align: left;
| |
| - | font-size: 20px;
| |
| - | font-weight: 500;
| |
| - | color: #FFFFFF;
| |
| - | padding-left: 0;
| |
| - | }
| |
| - |
| |
| - | #WriteUp .Text p, #WriteUp .Text a {
| |
| - | font-size: 16px;
| |
| - | line-height: 1.2;
| |
| - | margin: 4px 0 12px 0;
| |
| - | text-indent: 50px;
| |
| - | color: #FFFFFF;
| |
| - | text-align:justify;
| |
| - | text-justify:inter-word;
| |
| - | padding-left: 0;
| |
| - | }
| |
| - |
| |
| - | #WriteUp .Text a {
| |
| - | text-decoration: underline;
| |
| - | }
| |
| - | </style>
| |
| - | <!-- JavaScript & JQuery -->
| |
| - | <script>
| |
| - | $(document).ready(function() {
| |
| - | var TotalSlides = $('.Person').length
| |
| - | var CurrentSlide = 0;
| |
| - |
| |
| - | $('#Carousel').css('display', 'block');
| |
| - | $('.Info').css('display', 'none');
| |
| - | $('#Bio' + ((CurrentSlide + TotalSlides + 2) % TotalSlides)).css('display', 'block');
| |
| - |
| |
| - | if ($('body').width() < 990) {
| |
| - | $('.Slide0, .Slide4').css('display', 'none');
| |
| - | $('.Slide1').css('left', '90px');
| |
| - | $('.Slide2').css('left', '255px');
| |
| - | $('.Slide3').css('left', '420px');
| |
| - | $('#Carousel, #WriteUp').css('width', '675px');
| |
| - | }
| |
| - | if ($('body').width() < 675) {
| |
| - | $('#Carousel').css('display', 'none');
| |
| - | $('.Info').css('display', 'block');
| |
| - | $('#WriteUp').css('width', '100%');
| |
| - | $('#WriteUp .Text, #WriteUp .InfoImg').css('width', '100%')
| |
| - | }
| |
| - |
| |
| - | $(window).resize(function() {
| |
| - | if ($('body').width() >= 990) {
| |
| - | $('.Slide0, .Slide4').css('display', 'block');
| |
| - | $('.Person').css('left', '');
| |
| - | $('#Carousel, #WriteUp').css('width', '990px');
| |
| - | $('#Carousel').css('display', 'block');
| |
| - | $('.Info').css('display', 'none');
| |
| - | $('#Bio' + ((CurrentSlide + TotalSlides + 2) % TotalSlides)).css('display', 'block');
| |
| - | $('#WriteUp .Text, #WriteUp .InfoImg').css('width', '50%')
| |
| - | }
| |
| - | if ($('body').width() < 990) {
| |
| - | $('.Slide0, .Slide4').css('display', 'none');
| |
| - | $('.Slide1').css('left', '90px');
| |
| - | $('.Slide2').css('left', '255px');
| |
| - | $('.Slide3').css('left', '420px');
| |
| - | $('#Carousel, #WriteUp').css('width', '675px');
| |
| - | $('#Carousel').css('display', 'block');
| |
| - | $('.Info').css('display', 'none');
| |
| - | $('#Bio' + ((CurrentSlide + TotalSlides + 2) % TotalSlides)).css('display', 'block');
| |
| - | $('#WriteUp .Text, #WriteUp .InfoImg').css('width', '50%')
| |
| - | }
| |
| - | if ($('body').width() < 675) {
| |
| - | $('#Carousel').css('display', 'none');
| |
| - | $('.Info').css('display', 'block');
| |
| - | $('#WriteUp').css('width', '100%');
| |
| - | $('#WriteUp .Text, #WriteUp .InfoImg').css('width', '100%')
| |
| - | }
| |
| - | });
| |
| - |
| |
| - | $('#bodyContent').css({'min-height' : $(window).height(), background : 'url(https://static.igem.org/mediawiki/2013/8/89/2013UCalgaryTeamBackground.png)'});
| |
| - |
| |
| - | $('#RightArrow').click(function() {
| |
| - | CurrentSlide = ++CurrentSlide % TotalSlides;
| |
| - | $('.Person').css('display', 'none');
| |
| - | var i = CurrentSlide;
| |
| - |
| |
| - | for (var count = 0; count < 5; count++) {
| |
| - | if (i >= TotalSlides)
| |
| - | i = 0;
| |
| - |
| |
| - | $('.Person').removeClass('Slide' + count);
| |
| - |
| |
| - | SlideID = '#Person' + i;
| |
| - | $(SlideID).css('display', 'block').addClass('Slide' + count);
| |
| - | i++;
| |
| - | }
| |
| - |
| |
| - | $('.Info').css('display', 'none');
| |
| - | $('#Bio' + ((CurrentSlide + TotalSlides + 2) % TotalSlides)).css('display', 'block');
| |
| - |
| |
| - | if ($('body').width() < 990) {
| |
| - | $('.Slide0, .Slide4').css('display', 'none');
| |
| - | $('.Slide1').css('left', '90px');
| |
| - | $('.Slide2').css('left', '255px');
| |
| - | $('.Slide3').css('left', '420px');
| |
| - | $('#Carousel, #WriteUp').css('width', '675px');
| |
| - | }
| |
| - | });
| |
| - |
| |
| - | $('#LeftArrow').click(function() {
| |
| - | CurrentSlide = (CurrentSlide + TotalSlides - 1) % TotalSlides;
| |
| - | $('.Person').css('display', 'none');
| |
| - | var i = CurrentSlide;
| |
| - |
| |
| - | for (var count = 0; count < 5; count++) {
| |
| - | if (i >= TotalSlides)
| |
| - | i = 0;
| |
| - |
| |
| - | $('.Person').removeClass('Slide' + count);
| |
| - |
| |
| - | SlideID = '#Person' + i;
| |
| - | $(SlideID).css('display', 'block').addClass('Slide' + count);
| |
| - | i++;
| |
| - | }
| |
| - |
| |
| - | $('.Info').css('display', 'none');
| |
| - | $('#Bio' + ((CurrentSlide + TotalSlides + 2) % TotalSlides)).css('display', 'block');
| |
| - |
| |
| - | if ($('body').width() < 990) {
| |
| - | $('.Slide0, .Slide4').css('display', 'none');
| |
| - | $('.Slide1').css('left', '90px');
| |
| - | $('.Slide2').css('left', '255px');
| |
| - | $('.Slide3').css('left', '420px');
| |
| - | $('#Carousel, #WriteUp').css('width', '675px');
| |
| - | }
| |
| - | });
| |
| - |
| |
| - | $('.Person').click(function() {
| |
| - | var ClickedPerson = $(this).attr('id');
| |
| - | CurrentSlide = ((parseInt(ClickedPerson.replace('Person', ''))) + TotalSlides - 2) % TotalSlides;
| |
| - |
| |
| - | $('.Person').css('display', 'none');
| |
| - | var i = CurrentSlide;
| |
| - |
| |
| - | for (var count = 0; count < 5; count++) {
| |
| - | if (i >= TotalSlides)
| |
| - | i = 0;
| |
| - |
| |
| - | $('.Person').removeClass('Slide' + count);
| |
| - |
| |
| - | SlideID = '#Person' + i;
| |
| - | $(SlideID).css('display', 'block').addClass('Slide' + count);
| |
| - | i++;
| |
| - | }
| |
| - |
| |
| - | $('.Info').css('display', 'none');
| |
| - | $('#Bio' + ((CurrentSlide + TotalSlides + 2) % TotalSlides)).css('display', 'block');
| |
| - |
| |
| - | if ($('body').width() < 990) {
| |
| - | $('.Slide0, .Slide4').css('display', 'none');
| |
| - | $('.Slide1').css('left', '90px');
| |
| - | $('.Slide2').css('left', '255px');
| |
| - | $('.Slide3').css('left', '420px');
| |
| - | $('#Carousel, #WriteUp').css('width', '675px');
| |
| - | }
| |
| - | });
| |
| - | });
| |
| - | </script>
| |
| - | <script>
| |
| - | document.ondblclick = function(evt) {
| |
| - | if (window.getSelection)
| |
| - | window.getSelection().removeAllRanges();
| |
| - | else if (document.selection)
| |
| - | document.selection.empty();
| |
| - | }
| |
| - | </script>
| |
| - | </head>
| |
| - |
| |
| - | <body>
| |
| - | <h1>Team Members</h1>
| |
| - |
| |
| - | <div id="TeamMembers">
| |
| - | <div id="Carousel">
| |
| - | <div id="LeftArrow" class="Arrow"></div>
| |
| - | <div id="Person0" class="Person Slide0"></div>
| |
| - | <div id="Person1" class="Person Slide1"></div>
| |
| - | <div id="Person2" class="Person Slide2"></div>
| |
| - | <div id="Person3" class="Person Slide3"></div>
| |
| - | <div id="Person4" class="Person Slide4"></div>
| |
| - | <div id="Person5" class="Person"></div>
| |
| - | <div id="Person6" class="Person"></div>
| |
| - | <div id="Person7" class="Person"></div>
| |
| - | <div id="Person8" class="Person"></div>
| |
| - | <div id="Person9" class="Person"></div>
| |
| - | <div id="Person10" class="Person"></div>
| |
| - | <div id="Person11" class="Person"></div>
| |
| - | <div id="Person12" class="Person"></div>
| |
| - | <div id="Person13" class="Person"></div>
| |
| - | <div id="Person14" class="Person"></div>
| |
| - | <div id="Person15" class="Person"></div>
| |
| - | <div id="Person16" class="Person"></div>
| |
| - | <div id="Person17" class="Person"></div>
| |
| - |
| |
| - | <div id="RightArrow" class="Arrow"></div>
| |
| - | </div>
| |
| - |
| |
| - | <div id="WriteUp">
| |
| - |
| |
| - |
| |
| - | <div id="Bio0" class="Info">
| |
| - | <div class="InfoImg"><img src=""></div>
| |
| - | <div class="Text">
| |
| - | <h2>Amanda Matheson</h2>
| |
| - | <h3>Sophomore at Carmel Canyon Academy</h3>
| |
| - | <p></p>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div id="Bio1" class="Info">
| |
| - | <div class="InfoImg"><img src=""></div>
| |
| - | <div class="Text">
| |
| - | <h2>Julia Wisnia</h2>
| |
| - | <h3>Freshman at Carmel Canyon Academy</h3>
| |
| - | <p></p>
| |
| - | <h3></h3>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div id="Bio2" class="Info">
| |
| - | <div class="InfoImg"><img src=""></div>
| |
| - | <div class="Text">
| |
| - | <h2>Gha Young Lee</h2>
| |
| - | <h3>Junior at Torrey Pines High School</h3>
| |
| - | <p></p>
| |
| - |
| |
| - | </div>
| |
| - | </div>
| |
| - | <div id="Bio3" class="Info">
| |
| - | <div class="InfoImg"><img src=""></div>
| |
| - | <div class="Text">
| |
| - | <h2>Brandon Read</h2>
| |
| - | <h3>Senior at Torrey Pines High School</h3>
| |
| - | <p></p>
| |
| - |
| |
| - | </div>
| |
| - | </div>
| |
| - | <div id="Bio4" class="Info">
| |
| - | <div class="InfoImg"><img src=""></div>
| |
| - | <div class="Text">
| |
| - | <h2>Mokhshan Ramachandran</h2>
| |
| - | <h3>Senior at Torrey Pines High School</h3>
| |
| - | <p></p>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div id="Bio5" class="Info">
| |
| - | <div class="InfoImg"><img src=""></div>
| |
| - | <div class="Text">
| |
| - | <h2>Michael Margolis</h2>
| |
| - | <h3>Junior at Torrey Pines High School</h3>
| |
| - | <p></p>
| |
| - |
| |
| - | </div>
| |
| - | </div>
| |
| - | <div id="Bio6" class="Info">
| |
| - | <div class="InfoImg"><img src=""></div>
| |
| - | <div class="Text">
| |
| - | <h2>Brian Choi</h2>
| |
| - | <h3>Senior at Torrey Pines High School</h3>
| |
| - | <p></p>
| |
| - | <h3></h3>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div id="Bio7" class="Info">
| |
| - | <div class="InfoImg"><img src=""></div>
| |
| - | <div class="Text">
| |
| - | <h2>Anisa Malangone</h2>
| |
| - | <h3>Junior at Torrey Pines High School</h3>
| |
| - | <p></p>
| |
| - | <h3></h3>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div id="Bio8" class="Info">
| |
| - | <div class="InfoImg"><img src=""></div>
| |
| - | <div class="Text">
| |
| - | <h2>Victoria Ouyang</h2>
| |
| - | <h3>Junior at Torrey Pines High School</h3>
| |
| - | <p></p>
| |
| - | <h3></h3>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div id="Bio9" class="Info">
| |
| - | <div class="InfoImg"><img src=""></div>
| |
| - | <div class="Text">
| |
| - | <h2>Melinda Wang</h2>
| |
| - | <h3>Junior at Torrey Pines High School</h3>
| |
| - | <p></p>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div id="Bio10" class="Info">
| |
| - | <div class="InfoImg"><img src=""></div>
| |
| - | <div class="Text">
| |
| - | <h2>Christina Baek</h2>
| |
| - | <h3>Sophomore at Torrey Pines High School</h3>
| |
| - | <p></p>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div id="Bio11" class="Info">
| |
| - | <div class="InfoImg"><img src=""></div>
| |
| - | <div class="Text">
| |
| - | <h2>Evan Kallenberg</h2>
| |
| - | <h3>Senior at Torrey Pines High School</h3>
| |
| - | <p></p>
| |
| - | <h3></h3>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div id="Bio12" class="Info">
| |
| - | <div class="InfoImg"><img src=""></div>
| |
| - | <div class="Text">
| |
| - | <h2>Ellen Ouyang</h2>
| |
| - | <h3>Sophomore at Canyon Crest Academy</h3>
| |
| - | <p></p>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div id="Bio13" class="Info">
| |
| - | <div class="InfoImg"><img src=""></div>
| |
| - | <div class="Text">
| |
| - | <h2>Daniel Sands</h2>
| |
| - | <h3>Junior at Canyon Crest Academy</h3>
| |
| - | <p></p>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div id="Bio14" class="Info">
| |
| - | <div class="InfoImg"><img src=""></div>
| |
| - | <div class="Text">
| |
| - | <h2>Aidan Kahng</h2>
| |
| - | <h3>Sophomore at Torrey Pines High School</h3>
| |
| - | <p></p>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div id="Bio15" class="Info">
| |
| - | <div class="InfoImg"><img src=""></div>
| |
| - | <div class="Text">
| |
| - | <h2>Zilu Pan</h2>
| |
| - | <h3>Sophomore at Carmel Canyon Academy</h3>
| |
| - | <p></p>
| |
| - | <h3></h3>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div id="Bio16" class="Info">
| |
| - | <div class="InfoImg"><img src=""></div>
| |
| - | <div class="Text">
| |
| - | <h2>Nikki Nikkhoy</h2>
| |
| - | <h3>Junior at Torrey Pines High School</h3>
| |
| - | <p></p>
| |
| - | <h3></h3>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div id="Bio17" class="Info">
| |
| - | <div class="InfoImg"><img src=""></div>
| |
| - | <div class="Text">
| |
| - | <h2>Alexander Wen</h2>
| |
| - | <h3>Freshman at Torrey Pines High School</h3>
| |
| - | <p></p>
| |
| - | </div>
| |
| - | </div>
| |
| - |
| |
| - | </div>
| |
| - | </div>
| |
| - | </body>
| |
| - | </html>
| |
"
