|
|
| Line 1: |
Line 1: |
| | <html> | | <html> |
| | | | |
| − |
| |
| − |
| |
| − | <!--start---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | </p>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!--TEMPLATE:initialize-->
| |
| − |
| |
| − | <!--get jQuery and wiki settings------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <style>
| |
| − | #top_menu_under,#home_logo, #sideMenu,#top,.logo_2018,#firstHeading ,#top_title, .patrollink { display:none; }
| |
| − | .mediawiki,#globalWrapper,#content,#HQ_page,#bodyContent,#mw-content-text { width:100%; padding:0px; margin:0px; }
| |
| − |
| |
| − | #top_menu_14{position: fixed;top:0;z-index: 889;}
| |
| − |
| |
| − | #mw-content-text>p{padding: 0; margin: 0;width: 100%;}
| |
| − | a, button, input, textarea {
| |
| − | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
| |
| − | -moz-transition: all .5s ease;
| |
| − | -webkit-transition: all .5s ease;
| |
| − | transition: all .5s ease;
| |
| − | }
| |
| − | </style>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/jQuery&action=raw&ctype=text/javascript">
| |
| − | //jQuery
| |
| − | </script>
| |
| − | <script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/jQueryUi&action=raw&ctype=text/javascript">
| |
| − | //jQueryUi
| |
| − | </script>
| |
| − | <script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/jQueryAnimateColors&action=raw&ctype=text/javascript">
| |
| − | //jQuery_AnimateColors
| |
| − | </script>
| |
| − | <link href="css/video-js.min.css" rel="stylesheet" type="text/css">
| |
| − | <script src="js/video.min.js"></script>
| |
| − | <link href="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/font_awesome&action=raw&ctype=text/css" rel="stylesheet">
| |
| − |
| |
| − | <!--
| |
| − | <script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/bookstrapJs &action=raw&ctype=text/javascript">
| |
| − | //bootstrap
| |
| − | </script>
| |
| − |
| |
| − | <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/bookstrapCss&action=raw&ctype=text/css" />
| |
| − | -->
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!---------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − |
| |
| − | <!--get fonts----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <style>
| |
| − | @font-face
| |
| − | {
| |
| − | font-family:_Quicksand;
| |
| − | src: url('https://static.igem.org/mediawiki/2018/8/8a/T--Fudan-CHINA--Quicksand.ttf');
| |
| − | }
| |
| − | @font-face
| |
| − | {
| |
| − | font-family:_LucidaCalligraphy;/*for fullname of STEP*/
| |
| − | src: url('https://static.igem.org/mediawiki/2018/a/a8/T--Fudan-CHINA--LucidaCalligraphy.ttf');
| |
| − | }
| |
| − | @font-face
| |
| − | {
| |
| − | font-family:_CalistoMT;
| |
| − | src: url('https://static.igem.org/mediawiki/2018/b/be/T--Fudan-CHINA--CalistoMT.ttf');
| |
| − | }
| |
| − | @font-face
| |
| − | {
| |
| − | font-family:_Algerian;
| |
| − | src: url('https://static.igem.org/mediawiki/2018/5/56/T--Fudan-CHINA--Algerian.ttf');
| |
| − | }
| |
| − | @font-face
| |
| − | {
| |
| − | font-family:_ZELDA;/*for team name*/
| |
| − | src: url('https://static.igem.org/mediawiki/2018/d/df/T--Fudan-CHINA--ZELDA.ttf'),
| |
| − | url('https://static.igem.org/mediawiki/2018/6/63/T--Fudan-CHINA--ZELDA.eot');
| |
| − | }
| |
| − | @font-face
| |
| − | {
| |
| − | font-family:_Butler;
| |
| − | src: url('https://static.igem.org/mediawiki/2018/e/e1/T--Fudan-CHINA--Butler.ttf'),
| |
| − | url('https://static.igem.org/mediawiki/2018/c/c9/T--Fudan-CHINA--Butler.eot');/*IE 9+*/
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − | <!---------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!--loading page------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <style>
| |
| − | .chromeframe {
| |
| − | margin: 0.2em 0;
| |
| − | background: #ccc;
| |
| − | color: #000;
| |
| − | padding: 0.2em 0;
| |
| − | }
| |
| − | #loader-wrapper {
| |
| − | position: fixed;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | z-index:999999;
| |
| − |
| |
| − | }
| |
| − | #loader {
| |
| − | display: block;
| |
| − | position: relative;
| |
| − | left: 50%;
| |
| − | top: 50%;
| |
| − | width: 150px;
| |
| − | height: 150px;
| |
| − | margin: -75px 0 0 -75px;
| |
| − | border-radius: 50%;
| |
| − | border: 3px solid transparent;
| |
| − | /* COLOR 1 */
| |
| − | border-top-color: rgba(255,0,255,1);
| |
| − | -webkit-animation: spin 2s linear infinite;
| |
| − | -ms-animation: spin 2s linear infinite;
| |
| − | -moz-animation: spin 2s linear infinite;
| |
| − | -o-animation: spin 2s linear infinite;
| |
| − | animation: spin 2s linear infinite;
| |
| − | z-index:1001;
| |
| − | }
| |
| − | #loader:before {
| |
| − | content: "";
| |
| − | position: absolute;
| |
| − | top: 5px;
| |
| − | left: 5px;
| |
| − | right: 5px;
| |
| − | bottom: 5px;
| |
| − | border-radius: 50%;
| |
| − | border: 3px solid transparent;
| |
| − | /* COLOR 2 */
| |
| − | border-top-color: rgba(255,255,0,1);
| |
| − | -webkit-animation: spin 3s linear infinite;
| |
| − | -moz-animation: spin 3s linear infinite;
| |
| − | -o-animation: spin 3s linear infinite;
| |
| − | -ms-animation: spin 3s linear infinite;
| |
| − | animation: spin 3s linear infinite;
| |
| − | }
| |
| − | #loader:after {
| |
| − | content: "";
| |
| − | position: absolute;
| |
| − | top: 15px;
| |
| − | left: 15px;
| |
| − | right: 15px;
| |
| − | bottom: 15px;
| |
| − | border-radius: 50%;
| |
| − | border: 3px solid transparent;
| |
| − | border-top-color: rgba(0,255,255,1);
| |
| − | /* COLOR 3 */
| |
| − | -moz-animation: spin 1.5s linear infinite;
| |
| − | -o-animation: spin 1.5s linear infinite;
| |
| − | -ms-animation: spin 1.5s linear infinite;
| |
| − | -webkit-animation: spin 1.5s linear infinite;
| |
| − | animation: spin 1.5s linear infinite;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | @-webkit-keyframes spin {
| |
| − | 0%{
| |
| − | -webkit-transform: rotate(0deg);
| |
| − | -ms-transform: rotate(0deg);
| |
| − | transform: rotate(0deg);
| |
| − | }100%{
| |
| − | -webkit-transform: rotate(360deg);
| |
| − | -ms-transform: rotate(360deg);
| |
| − | transform: rotate(360deg); }
| |
| − | }
| |
| − |
| |
| − | @keyframes spin {
| |
| − | 0%{
| |
| − | -webkit-transform: rotate(0deg);
| |
| − | -ms-transform: rotate(0deg);
| |
| − | transform: rotate(0deg);
| |
| − | }100%{
| |
| − | -webkit-transform: rotate(360deg);
| |
| − | -ms-transform: rotate(360deg);
| |
| − | transform: rotate(360deg); }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #loader-wrapper .loader-section {
| |
| − | position: fixed;
| |
| − | top: 0;
| |
| − | width: 51%;
| |
| − | height: 100%;
| |
| − | background: rgba(2,28,53,1); /* loading background color!!!*/
| |
| − | z-index: 1000;
| |
| − | -webkit-transform: translateX(0);
| |
| − | -ms-transform: translateX(0);
| |
| − | transform: translateX(0);
| |
| − | }
| |
| − | #loader-wrapper .loader-section.section-left {left: 0;}
| |
| − | #loader-wrapper .loader-section.section-right {right: 0;}
| |
| − |
| |
| − | /* Loaded */
| |
| − | .loaded #loader-wrapper .loader-section.section-left {
| |
| − | -webkit-transform: translateX(-100%);
| |
| − | -ms-transform: translateX(-100%);
| |
| − | transform: translateX(-100%);
| |
| − | -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
| |
| − | transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
| |
| − | }
| |
| − | .loaded #loader-wrapper .loader-section.section-right {
| |
| − | -webkit-transform: translateX(100%);
| |
| − | -ms-transform: translateX(100%);
| |
| − | transform: translateX(100%);
| |
| − | -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
| |
| − | transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
| |
| − | }
| |
| − | .loaded #loader {
| |
| − | opacity: 0;
| |
| − | -webkit-transition: all 0.3s ease-out;
| |
| − | transition: all 0.3s ease-out;
| |
| − | }
| |
| − | .loaded #loader-wrapper {
| |
| − | visibility: hidden;
| |
| − | -webkit-transform: translateY(-100%);
| |
| − | -ms-transform: translateY(-100%);
| |
| − | transform: translateY(-100%);
| |
| − | -webkit-transition: all 0.3s 1s ease-out;
| |
| − | transition: all 0.3s 1s ease-out;
| |
| − | }
| |
| − | /* JavaScript Turned Off */
| |
| − | .no-js #loader-wrapper {display: none;}
| |
| − | .no-js h1 {color: #222222;}
| |
| − |
| |
| − |
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − |
| |
| − | <div id="loader-wrapper">
| |
| − | <div id="loader"></div>
| |
| − | <div class="loader-section section-left"></div>
| |
| − | <div class="loader-section section-right"></div>
| |
| − | </div>
| |
| − |
| |
| − | <script>
| |
| − | $(function(){
| |
| − | var myBgVideo=document.getElementById("bgVideo");
| |
| − | myBgVideo.addEventListener('canplaythrough',function(){
| |
| − | setTimeout(function(){ $('body').addClass('loaded');
| |
| − | $('#loader-wrapper .load_title').remove(); },500);
| |
| − | });
| |
| − | });
| |
| − | $(function(){
| |
| − | var myBgVideo=document.getElementById("bgVideo");
| |
| − | setTimeout(function(){ $('body').addClass('loaded');
| |
| − | $('#loader-wrapper .load_title').remove(); }, 1000);
| |
| − | });
| |
| − |
| |
| − | function slideInTop(obj,obj2,delayTime){
| |
| − | var targetHeight = obj.offset().top-50;
| |
| − | var scrollTop = $(document).scrollTop();
| |
| − | var winHeight=$(window).height();
| |
| − | var imgHeight=obj2.height();
| |
| − | if(scrollTop+winHeight-0.3*imgHeight>targetHeight){
| |
| − | setTimeout(function(){ obj.animate({top:'0px',opacity:1},800,"easeInOutCubic"); }, delayTime);
| |
| − | }
| |
| − | };
| |
| − | function slideInLeft(obj,obj2,delayTime){
| |
| − | var targetHeight = obj.offset().top;
| |
| − | var scrollTop = $(document).scrollTop();
| |
| − | var winHeight=$(window).height();
| |
| − | var imgHeight=obj2.height();
| |
| − | if(scrollTop+winHeight-0.3*imgHeight>targetHeight){
| |
| − | setTimeout(function(){ obj.animate({left:'0px',opacity:1},800,"easeInOutCubic"); }, delayTime);
| |
| − | }
| |
| − | };
| |
| − | </script>
| |
| − | <!--------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − |
| |
| − | <!--TEMPLATE END:initialize-->
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!--TEMPLATE:mainNavBar-->
| |
| − |
| |
| − | <!--navigation bar-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <ul id="navUl" style="z-index: 888;">
| |
| − | <li class="navLi navImg" style="display: inline-block;float: left;width: 5%;"></li>
| |
| − | <li class="navLi navImg" style="float: left;"><a href="https://2018.igem.org/Team:Fudan-CHINA"><img class="navA teamImg" src="https://static.igem.org/mediawiki/2018/6/62/T--Fudan-CHINA--stepLogo1.png" /></a></li>
| |
| − | <li class="navLi navImg" style="float: left;position: relative;"><a class="navA activeA teamName" href="https://2018.igem.org/Team:Fudan-CHINA" style="color: white;">Fudan-CHINA</a></li>
| |
| − |
| |
| − | <li class="navLi" style="display: inline-block;width: 5%;"></li>
| |
| − | <li class="navLi"><a class="navA" href="#7">Team</a>
| |
| − | <ul class="ul2" style="padding: 0;margin: 0;">
| |
| − | <li class="li2"><a class="navA2" href="#14">Team</a></li>
| |
| − | <li class="li2"><a class="navA2" href="#15">Attributions</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li class="navLi"><a class="navA" href="#6">Awards</a></li>
| |
| − | <li class="navLi"><a class="navA" href="#5">Practices</a>
| |
| − | <ul class="ul2" style="padding: 0;margin: 0;">
| |
| − | <li class="li2"><a class="navA2" href="#16">Overview</a></li>
| |
| − | <li class="li2"><a class="navA2" href="#17">Silver HP</a></li>
| |
| − | <li class="li2"><a class="navA2" href="#18">Integrated HP</a></li>
| |
| − | <li class="li2"><a class="navA2" href="#19">Collaborations</a></li>
| |
| − | <li class="li2"><a class="navA2" href="#20">Safety</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − |
| |
| − | <li class="navLi"><a class="navA" href="#4">Modeling</a></li>
| |
| − | <li class="navLi"><a class="navA" href="#2">Project</a>
| |
| − | <ul class="ul2" style="padding: 0;margin: 0;">
| |
| − | <li class="li2"><a class="navA2" href="#21">Background</a></li>
| |
| − | <li class="li2"><a class="navA2" href="#22">Design</a></li>
| |
| − | <li class="li2"><a class="navA2" href="#23">Result</a></li>
| |
| − | <li class="li2"><a class="navA2" href="#24">Parts</a></li>
| |
| − | <li class="li2"><a class="navA2" href="#25">Demonstrate</a></li>
| |
| − | <li class="li2"><a class="navA2" href="#26">Notebook</a></li>
| |
| − | <li class="li2"><a class="navA2" href="#27">Interlab</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | </ul>
| |
| − | <style>
| |
| − | #navUl{
| |
| − | list-style: none;
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | overflow: visible;
| |
| − | position:absolute;
| |
| − | width: 100%;
| |
| − | }
| |
| − | .ul2{
| |
| − | list-style: none;
| |
| − | text-align: center;
| |
| − | position: absolute;
| |
| − | left:50%;
| |
| − | transform: translateX(-50%);
| |
| − | background-image: linear-gradient(rgba(19,45,91,0.95) 10%, rgba(188,120,236,0.9) 100%);
| |
| − | display: none;
| |
| − | border-radius:0 0 5% 5%;
| |
| − | overflow: hidden;
| |
| − |
| |
| − | }
| |
| − | .li2{
| |
| − | font-size: 0;
| |
| − | }
| |
| − | .navLi:not(.navImg){
| |
| − | float: right;
| |
| − | position: relative;
| |
| − | }
| |
| − | .navA{
| |
| − | display: block;
| |
| − | font-family:"Josefin Sans","Quicksand Medium",_Quicksand;
| |
| − | font-weight:400;
| |
| − | text-align: center;
| |
| − | }
| |
| − | .navA2{
| |
| − | display: block;
| |
| − | font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
| |
| − | overflow: visible;
| |
| − | color: white;
| |
| − | }
| |
| − | .navA:not(.teamName){
| |
| − | color:white;
| |
| − | }
| |
| − | .teamName{
| |
| − | font-family:Zelda,_Zelda;
| |
| − | font-weight: 900;
| |
| − | }
| |
| − | .navA:link,.navA2:link{
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | .navA:visited{
| |
| − | color: white;
| |
| − | }
| |
| − | .navA2:visited,.navA2:active{
| |
| − | text-decoration: none;
| |
| − | color: white;
| |
| − | }
| |
| − |
| |
| − | .navA:hover:not(.activeA){
| |
| − | color: rgba(0,189,234,1);
| |
| − | }
| |
| − | .navA2:hover{
| |
| − | color:rgba(0,189,234,1);
| |
| − | }
| |
| − | .jqhover {
| |
| − | color:rgba(0,189,234,1) !important;
| |
| − | }
| |
| − | .navA:hover{
| |
| − | text-decoration:none;
| |
| − | }
| |
| − |
| |
| − | .navA:active{
| |
| − | text-decoration:none;
| |
| − | color: white;
| |
| − | }
| |
| − | </style>
| |
| − | <script>
| |
| − | function navFun(){
| |
| − | var winWidth=$(window).width();
| |
| − | var navWidth=$('#navUl').width();
| |
| − | var winHeight=$(window).height();
| |
| − | $("#navUl").css("top",0.1*winHeight);
| |
| − | if (winWidth/winHeight>2){
| |
| − | $("#navUl").css("height","8vh");
| |
| − | $(".navA:not(.teamName)").css("height","8vh");
| |
| − | $(".navA:not(.teamName)").css("line-height","8vh");
| |
| − | $(".navA:not(.teamName)").css("font-size","3.4vh");
| |
| − |
| |
| − | $(".teamName").css("height","8vh");
| |
| − | $(".teamName").css("line-height","8vh");
| |
| − | $(".teamName").css("font-size","3.7vh");
| |
| − |
| |
| − | $(".navA2").css("padding","0 6vh");
| |
| − | $(".navA2").css("height","6vh");
| |
| − | $(".navA2").css("line-height","6vh");
| |
| − | $(".navA2").css("font-size","2.6vh");
| |
| − |
| |
| − | $(".navA:not(img)").css("padding","0 3vh");
| |
| − | $(".teamImg").css("width","8vh");
| |
| − | $(".teamImg").css("height","8vh");
| |
| − | $(".teamImg").css("padding","0");
| |
| − | }
| |
| − | else{
| |
| − | $("#navUl").css("height","4vw");
| |
| − | $(".navA:not(.teamName)").css("height","4vw");
| |
| − | $(".navA:not(.teamName)").css("line-height","4vw");
| |
| − | $(".navA:not(.teamName)").css("font-size","1.7vw");
| |
| − |
| |
| − | $(".teamName").css("height","4vw");
| |
| − | $(".teamName").css("line-height","4vw");
| |
| − | $(".teamName").css("font-size","1.85vw");
| |
| − |
| |
| − | $(".navA2").css("padding","0 3vw");
| |
| − | $(".navA2").css("height","3vw");
| |
| − | $(".navA2").css("line-height","3vw");
| |
| − | $(".navA2").css("font-size","1.3vw");
| |
| − |
| |
| − | $(".navA:not(img)").css("padding","0 1.5vw");
| |
| − | $(".teamImg").css("width","4vw");
| |
| − | $(".teamImg").css("height","4vw");
| |
| − | $(".teamImg").css("padding","0 0");
| |
| − | }
| |
| − | };
| |
| − |
| |
| − | navFun();
| |
| − |
| |
| − | $(window).resize(function(){
| |
| − | navFun();
| |
| − | });
| |
| − |
| |
| − | var scrDir=0;
| |
| − | $(window).scroll(function(){
| |
| − | var winHeight=$(window).height();
| |
| − | var topDis = $(window).scrollTop();
| |
| − | var barHeight=$("#top_menu_14").height();
| |
| − | if(topDis > 0.45*winHeight){
| |
| − | if (scrDir!=1){
| |
| − | $("#navUl").css({"position":"fixed",top:-barHeight,"boxShadow":"0px 0px 13px rgba(25,25,25,0.15)",background:"rgba(19,45,91,0.95)"});
| |
| − | $("#navUl").stop().animate({top:barHeight,},200);
| |
| − | }
| |
| − |
| |
| − | scrDir=1;
| |
| − | $(".navA:not(.activeA)").hover(function () {
| |
| − | $(this).addClass("jqhover");
| |
| − | }).mouseout(function () {
| |
| − | $(this).removeClass("jqhover");
| |
| − | });
| |
| − | }
| |
| − | else{
| |
| − | if (scrDir!=2){
| |
| − | $("#navUl").stop().animate({top:-1.5*barHeight},200,function(){
| |
| − | $("#navUl").css({"position":"absolute","boxShadow":"0px 0px 5px transparent",background:"transparent","top":0.1*winHeight});
| |
| − | });
| |
| − |
| |
| − |
| |
| − |
| |
| − | }
| |
| − | scrDir=2;
| |
| − | $(".navA:not(.activeA)").hover(function () {
| |
| − | $(this).removeClass("jqhover");
| |
| − | });
| |
| − |
| |
| − | };
| |
| − | });
| |
| − |
| |
| − | $(document).ready(function(){
| |
| − | $(".navLi").mouseenter(function(){
| |
| − | $(this).find(".ul2").stop().fadeIn(300);4
| |
| − | });
| |
| − | $(".navLi").mouseleave(function(){
| |
| − | $(this).find(".ul2").stop().fadeOut(300);
| |
| − | });
| |
| − | });
| |
| − | </script>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!---------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − |
| |
| − | <!--TEMPLATE END:mainNavBar-->
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!--page-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <div id="firstDiv">
| |
| − | <img src="https://static.igem.org/mediawiki/2018/9/99/T--Fudan-CHINA--teamBgImg.jpg" />
| |
| − | <div class="fiName">Team</div>
| |
| − | <div class="pSentence">"All human wisdom is summed up in two words, wait and hope."</div>
| |
| − | </div>
| |
| − | <style>
| |
| − | #firstDiv{
| |
| − | width: 100%;
| |
| − | height: 22vw;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − | #firstDiv img{
| |
| − | filter: brightness(0.6);
| |
| − | position: relative;
| |
| − | width: 140%;
| |
| − | top:50%;
| |
| − | left:50%;
| |
| − | transform: translateX(-43%) translateY(-30%);
| |
| − | }
| |
| − | .fiName{
| |
| − | color: white;
| |
| − | font-family:Allura,_Allura;
| |
| − | font-size: 5vw;
| |
| − | font-weight: 600;
| |
| − | position: absolute;
| |
| − | top:15vw;
| |
| − | right: 12vw;
| |
| − | }
| |
| − | .pSentence{
| |
| − | color: white;
| |
| − | font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
| |
| − | font-size: 1.2vw;
| |
| − | font-weight: 400;
| |
| − | position: absolute;
| |
| − | top:18vw;
| |
| − | right: 12vw;
| |
| − | }
| |
| − | </style>
| |
| − |
| |
| − | <!--TEMPLATE:leftNav
| |
| − | <ul class="leftNav" style="margin:0;padding:0;">
| |
| − | <li class="leftNavLi"><a class="leftNavA" href="#">Members</a></li>
| |
| − | <li class="leftNavLi"><a class="leftNavA" href="#">Supervisors</a></li>
| |
| − | </ul>
| |
| − | <style>
| |
| − |
| |
| − | .leftNav{
| |
| − | position: fixed;
| |
| − | top:25%;
| |
| − | list-style: none;
| |
| − | box-shadow: 0 0px 4px rgba(50,50,50,1);
| |
| − | border-radius: 0 5% 5% 0 ;
| |
| − | background:rgba(95,108,125,1);
| |
| − | }
| |
| − | .leftNavLi{
| |
| − | font-size: 0;
| |
| − | }
| |
| − | .leftNavA{
| |
| − | display: block;
| |
| − | font-size: 1.3vw;
| |
| − | font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
| |
| − | padding: 1vw 1.5vw;
| |
| − | color:white;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − | .leftNavA:active,.leftNavA:visited,.leftNavA:focus{
| |
| − | text-decoration: none;
| |
| − | color:white;
| |
| − | }
| |
| − | .leftNavA:hover{
| |
| − | text-decoration: none;
| |
| − | background-color: rgba(75,82,100,1);
| |
| − | }
| |
| − | </style>
| |
| − | TEMPLATE END:leftNav-->
| |
| − |
| |
| − | <div class="members">
| |
| − | <div class="memberTitle">
| |
| − | MEMBERS
| |
| − | <div>In delay there lies no plenty, then come kiss me, sweet and twenty, youth’s a stuff that will not endure.</div>
| |
| − | </div>
| |
| − | <div class="memberPhoto">
| |
| − | <div class="everyMem">
| |
| − | <div class="memImgDiv">
| |
| − | <img class="memImg" src="image/memberImg.jpg">
| |
| − | <img class="memPic" src="image/20181002184750.jpg">
| |
| − | </div>
| |
| − | <div class="memberName">Kaifeng Jin</div>
| |
| − | <div class="memberDes">Captain</div>
| |
| − | </div>
| |
| − | <div class="everyMem">
| |
| − | <div class="memImgDiv">
| |
| − | <img class="memImg" src="image/memberImg.jpg">
| |
| − | <img class="memPic" src="image/20181002184750.jpg">
| |
| − | </div>
| |
| − | <div class="memberName">Kaifeng Jin</div>
| |
| − | <div class="memberDes">Captain</div>
| |
| − | </div>
| |
| − | <div class="everyMem">
| |
| − | <div class="memImgDiv">
| |
| − | <img class="memImg" src="image/memberImg.jpg">
| |
| − | <img class="memPic" src="image/20181002184750.jpg">
| |
| − | </div>
| |
| − | <div class="memberName">Kaifeng Jin</div>
| |
| − | <div class="memberDes">Captain</div>
| |
| − | </div>
| |
| − | <div class="everyMem">
| |
| − | <div class="memImgDiv">
| |
| − | <img class="memImg" src="image/memberImg.jpg">
| |
| − | <img class="memPic" src="image/20181002184750.jpg">
| |
| − | </div>
| |
| − | <div class="memberName">Kaifeng Jin</div>
| |
| − | <div class="memberDes">Captain</div>
| |
| − | </div>
| |
| − | <div class="everyMem">
| |
| − | <div class="memImgDiv">
| |
| − | <img class="memImg" src="image/memberImg.jpg">
| |
| − | <img class="memPic" src="image/20181002184750.jpg">
| |
| − | </div>
| |
| − | <div class="memberName">Kaifeng Jin</div>
| |
| − | <div class="memberDes">Captain</div>
| |
| − | </div>
| |
| − | <br>
| |
| − | <div class="everyMem">
| |
| − | <div class="memImgDiv">
| |
| − | <img class="memImg" src="image/memberImg.jpg">
| |
| − | <img class="memPic" src="image/20181002184750.jpg">
| |
| − | </div>
| |
| − | <div class="memberName">Kaifeng Jin</div>
| |
| − | <div class="memberDes">Captain</div>
| |
| − | </div>
| |
| − | <div class="everyMem">
| |
| − | <div class="memImgDiv">
| |
| − | <img class="memImg" src="image/memberImg.jpg">
| |
| − | <img class="memPic" src="image/20181002184750.jpg">
| |
| − | </div>
| |
| − | <div class="memberName">Kaifeng Jin</div>
| |
| − | <div class="memberDes">Captain</div>
| |
| − | </div>
| |
| − | <div class="everyMem">
| |
| − | <div class="memImgDiv">
| |
| − | <img class="memImg" src="image/memberImg.jpg">
| |
| − | <img class="memPic" src="image/20181002184750.jpg">
| |
| − | </div>
| |
| − | <div class="memberName">Kaifeng Jin</div>
| |
| − | <div class="memberDes">Captain</div>
| |
| − | </div>
| |
| − | <div class="everyMem">
| |
| − | <div class="memImgDiv">
| |
| − | <img class="memImg" src="image/memberImg.jpg">
| |
| − | <img class="memPic" src="image/20181002184750.jpg">
| |
| − | </div>
| |
| − | <div class="memberName">Kaifeng Jin</div>
| |
| − | <div class="memberDes">Captain</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <style>
| |
| − | .memberTitle {
| |
| − | text-align: left;
| |
| − | position: relative;
| |
| − | color: rgba(36,36,36,1);
| |
| − | font-family: Arial,Helvetica;
| |
| − | font-weight: 900;
| |
| − | font-size: 2.3vw;
| |
| − | padding:7.3vw 4vw 2.5vw 11vw;
| |
| − | }
| |
| − | .memberTitle:before{
| |
| − | content: "";
| |
| − |
| |
| − | width: 4vw;
| |
| − | height: 0.15vw;
| |
| − | background-color: rgba(0,189,234,1);
| |
| − | position: absolute;
| |
| − | top: 10vw;
| |
| − | left:11vw;
| |
| − |
| |
| − |
| |
| − | }
| |
| − | .memberTitle div{
| |
| − | padding: 3vw 0 0 0;
| |
| − | color: rgba(121,121,121,1);
| |
| − | font-family:Jura;
| |
| − | font-size: 1.4vw;
| |
| − | }
| |
| − | .memberPhoto{
| |
| − | text-align: center;
| |
| − | }
| |
| − | .everyMem{
| |
| − | display: inline-block;
| |
| − | width:12vw;
| |
| − |
| |
| − | margin:1vw 1.7vw;
| |
| − | }
| |
| − | .memImgDiv{
| |
| − | width: 100%;
| |
| − | height: 14vw;
| |
| − | position: relative;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − | .memImgDiv img{
| |
| − | position: absolute;
| |
| − | transition: all 1s;
| |
| − | }
| |
| − | .memImgDiv .memImg{
| |
| − | width: 100%;
| |
| − | top:0;
| |
| − | left:0;
| |
| − | }
| |
| − | .memImgDiv .memPic{
| |
| − | width: 100%;
| |
| − | top:0;
| |
| − | left: 0;
| |
| − | background-color: white;
| |
| − | transform: rotateY(180deg);
| |
| − | }
| |
| − | .memImgDiv:hover .memImg{
| |
| − | transform: rotateY(180deg);
| |
| − | }
| |
| − | .memImgDiv:hover .memPic{
| |
| − | transform: rotateY(360deg);
| |
| − | }
| |
| − | img.memImg{
| |
| − | z-index: 5;
| |
| − | backface-visibility: hidden;
| |
| − | }
| |
| − | .memberName{
| |
| − | font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
| |
| − | font-size: 1.5vw;
| |
| − | margin: 1vw 0 1vw 0;
| |
| − | }
| |
| − | .memberDes{
| |
| − | font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
| |
| − | font-size: 1vw;
| |
| − | color: rgba(124,124,124,1);
| |
| − | margin: 1vw 0 1vw 0;
| |
| − | }
| |
| − | </style>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <div class="videoOutDiv">
| |
| − | <div class="videoDiv" data-paralasic="0.45">
| |
| − | </div>
| |
| − | <div class="videoTitle">Watch Team Video</div>
| |
| − | <div class="videoCont">Because I could not stop for death, he kindly stopped for me. The carriage held but just ourselves and immortality.</div>
| |
| − | <div class="videoPlayI"><i class="fa fa-play"></i></div>
| |
| − | </div>
| |
| − | <div class="teamVideo">
| |
| − | <video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls poster="http://video-js.zencoder.com/oceans-clip.png"
| |
| − | data-setup="{}" preload="auto">
| |
| − | <source src="https://static.igem.org/mediawiki/2018/d/d1/T--Fudan-CHINA--teamIntro.mp4" type="video/mp4" />
| |
| − | </video>
| |
| − | <div class="closeVideo">
| |
| − | <i class="fa fa-close"></i>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <style>
| |
| − | #example_video_1{
| |
| − | display: inline-block;
| |
| − | position: relative;
| |
| − | top:50%;
| |
| − | transform: translateY(-50%);
| |
| − | }
| |
| − | .teamVideo{
| |
| − | position: fixed;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | background-color: rgba(0,0,0,1);
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | z-index: 900;
| |
| − | text-align: center;
| |
| − | display: none;
| |
| − | }
| |
| − | .videoDiv{
| |
| − | width:100%;
| |
| − | height:28vw;
| |
| − | background-image: url('image/videoImg.jpg');
| |
| − | background-position: center top;
| |
| − | background-repeat: no-repeat;
| |
| − | background-size: 100%;
| |
| − | text-align: center;
| |
| − | filter: brightness(0.5);
| |
| − | }
| |
| − | .videoTitle{
| |
| − | color: white;
| |
| − | font-size:3vw;
| |
| − | font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
| |
| − | text-align:center;
| |
| − | position: relative;
| |
| − | top:-19vw;
| |
| − | font-weight: 900;
| |
| − | }
| |
| − | .videoCont{
| |
| − | color: white;
| |
| − | font-size:1.2vw;
| |
| − | font-family:;
| |
| − | text-align:center;
| |
| − | position: relative;
| |
| − | top:-17vw;
| |
| − | font-weight: 100;
| |
| − | }
| |
| − | .videoOutDiv{
| |
| − | position: relative;
| |
| − | text-align: center;
| |
| − | margin: 5vw 0;
| |
| − | }
| |
| − | .videoOutDiv i{
| |
| − | font-size:2.7vw;
| |
| − | cursor:pointer;
| |
| − | position: relative;
| |
| − | left: 0.3vw;
| |
| − | }
| |
| − | .videoPlayI{
| |
| − | position: relative;
| |
| − | top:-13vw;
| |
| − | border:2px solid white;
| |
| − | width: 4.5vw;
| |
| − | height: 4.5vw;
| |
| − | line-height: 5.8vw;
| |
| − | border-radius: 50%;
| |
| − | display: inline-block;
| |
| − | }
| |
| − | .closeVideo{
| |
| − | position: fixed;
| |
| − | top:2vw;
| |
| − | right: 2vw;
| |
| − | color:rgba(211,211,211,0.8);
| |
| − | font-size: 2.5vw;
| |
| − | cursor: pointer;
| |
| − | transition: all 0.3s ease;
| |
| − | }
| |
| − | .closeVideo:hover{
| |
| − | color: rgba(211,211,211,1);
| |
| − | }
| |
| − | </style>
| |
| − | <script>
| |
| − | $(".videoPlayI").css({"color":"white"});
| |
| − | $(".videoPlayI").mouseenter(function(){
| |
| − | $(this).stop().animate({"color":"aqua","borderColor":"aqua"},200);
| |
| − | })
| |
| − | $(".videoPlayI").mouseleave(function(){
| |
| − | $(this).stop().animate({"color":"white","borderColor":"white"},200);
| |
| − | })
| |
| − |
| |
| − | videoSizeAdj();
| |
| − | $(window).resize(function(){
| |
| − | videoSizeAdj();
| |
| − | });
| |
| − |
| |
| − | function videoSizeAdj(){
| |
| − | var winHeight=$(window).height();
| |
| − | var winWidth=$(window).width();
| |
| − | if (winWidth/winHeight>16/9){
| |
| − | videojs(document.getElementById('example_video_1'), {}, function() {
| |
| − | this.width(winHeight/9*16);
| |
| − | this.height(winHeight);
| |
| − | });
| |
| − | }
| |
| − | else{
| |
| − | videojs(document.getElementById('example_video_1'), {}, function() {
| |
| − | this.width(winWidth);
| |
| − | this.height(winWidth/16*9);
| |
| − | });
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | $(".videoPlayI").click(function(){
| |
| − | $(".teamVideo").fadeIn();
| |
| − | $("#top_menu_14").fadeOut();
| |
| − | videojs(document.getElementById('example_video_1'), {}, function() {
| |
| − | this.play();
| |
| − | });
| |
| − | })
| |
| − | $(".closeVideo").click(function(){
| |
| − | $("#top_menu_14").fadeIn();
| |
| − | $(".teamVideo").fadeOut();
| |
| − | videojs(document.getElementById('example_video_1'), {}, function() {
| |
| − | this.pause();
| |
| − | });
| |
| − | });
| |
| − |
| |
| − | $(window).scroll(function() {
| |
| − | var scrollTop = $(window).scrollTop();
| |
| − | var videoDivTop=$(".videoDiv").offset().top;
| |
| − | var winHeight=$(window).height();
| |
| − | var videoDivValue = $('.videoDiv').attr('data-paralasic');
| |
| − | if (scrollTop+winHeight-videoDivTop>0){
| |
| − | $('.videoDiv').css('background-position', 'center top -' + (scrollTop+winHeight-videoDivTop)*videoDivValue + 'px');
| |
| − | }
| |
| − | });
| |
| − | </script>
| |
| − |
| |
| − | <div class="div1_1">
| |
| − | <div class="paraFilter"></div>
| |
| − | <div id="rightBut"><i class="fa fa-angle-right"></i></div>
| |
| − | <div id="leftBut"><i class="fa fa-angle-left"></i></div>
| |
| − | <div id="memSay">What they say</div>
| |
| − | <div class="paraDiv1" style="width: 64vw; height: 20vw; overflow:hidden; margin: 0 auto;position: relative;top:9.5vw;">
| |
| − | <div class="carousel" data-num="1">
| |
| − | <img src="image/memberImg.jpg"><br>
| |
| − | <i class="fa fa-quote-left"></i>
| |
| − | <div class="memCont">
| |
| − | 1Every atom in your body came from a star that exploded.And, the atoms in your left hand probably came from a different star than your right hand.It really is the most poetic thing I know about physics:You are all stardust.
| |
| − | <div style="text-align: right;">——Kaifeng Jin</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="carousel" data-num="2">
| |
| − | <img src="image/memberImg.jpg"><br>
| |
| − | <i class="fa fa-quote-left"></i>
| |
| − | <div class="memCont">
| |
| − | 2Some of us get dipped in flat, some in satin, some in gloss. But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare.
| |
| − | <div style="text-align: right;">——Kaifeng Jin</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="carousel" data-num="3">
| |
| − | <img src="image/memberImg.jpg"><br>
| |
| − | <i class="fa fa-quote-left"></i>
| |
| − | <div class="memCont">
| |
| − | 3Two things fill the mind with ever new and increasing admiration and reverence - the starry heavens above me and the moral law within me.
| |
| − | <div style="text-align: right;">——Kaifeng Jin</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="carousel" data-num="4">
| |
| − | <img src="image/memberImg.jpg"><br>
| |
| − | <i class="fa fa-quote-left"></i>
| |
| − | <div class="memCont">
| |
| − | 4Two things fill the mind with ever new and increasing admiration and reverence - the starry heavens above me and the moral law within me.
| |
| − | <div style="text-align: right;">——Kaifeng Jin</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="carousel" data-num="5">
| |
| − | <img src="image/memberImg.jpg"><br>
| |
| − | <i class="fa fa-quote-left"></i>
| |
| − | <div class="memCont">
| |
| − | 5Two things fill the mind with ever new and increasing admiration and reverence - the starry heavens above me and the moral law within me.
| |
| − | <div style="text-align: right;">——Kaifeng Jin</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="carousel" data-num="6">
| |
| − | <img src="image/memberImg.jpg"><br>
| |
| − | <i class="fa fa-quote-left"></i>
| |
| − | <div class="memCont">
| |
| − | 6Two things fill the mind with ever new and increasing admiration and reverence - the starry heavens above me and the moral law within me.
| |
| − | <div style="text-align: right;">——Kaifeng Jin</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="carousel" data-num="7">
| |
| − | <img src="image/memberImg.jpg"><br>
| |
| − | <i class="fa fa-quote-left"></i>
| |
| − | <div class="memCont">
| |
| − | 7Two things fill the mind with ever new and increasing admiration and reverence - the starry heavens above me and the moral law within me.
| |
| − | <div style="text-align: right;">——Kaifeng Jin</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="carousel" data-num="8">
| |
| − | <img src="image/memberImg.jpg"><br>
| |
| − | <i class="fa fa-quote-left"></i>
| |
| − | <div class="memCont">
| |
| − | 8Two things fill the mind with ever new and increasing admiration and reverence - the starry heavens above me and the moral law within me.
| |
| − | <div style="text-align: right;">——Kaifeng Jin</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="carousel" data-num="9">
| |
| − | <img src="image/memberImg.jpg"><br>
| |
| − | <i class="fa fa-quote-left"></i>
| |
| − | <div class="memCont">
| |
| − | 9Two things fill the mind with ever new and increasing admiration and reverence - the starry heavens above me and the moral law within me.
| |
| − | <div style="text-align: right;">——Kaifeng Jin</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="memDotDiv">
| |
| − | <div class="memDot" data-dotNum="1"></div>
| |
| − | <div class="memDot" data-dotNum="2"></div>
| |
| − | <div class="memDot" data-dotNum="3"></div>
| |
| − | <div class="memDot" data-dotNum="4"></div>
| |
| − | <div class="memDot" data-dotNum="5"></div>
| |
| − | <div class="memDot" data-dotNum="6"></div>
| |
| − | <div class="memDot" data-dotNum="7"></div>
| |
| − | <div class="memDot" data-dotNum="8"></div>
| |
| − | <div class="memDot" data-dotNum="9"></div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <style>
| |
| − | .carousel{
| |
| − | width: 100%;
| |
| − | padding: 0;
| |
| − | margin: 0;
| |
| − | color: white;
| |
| − | font-size: 1vw;
| |
| − | position: absolute;
| |
| − | top:0;
| |
| − | left: 0;
| |
| − | display: none;
| |
| − | z-index:2;
| |
| − | }
| |
| − | .carousel:before{
| |
| − | content: "";
| |
| − | height: 10vw;
| |
| − | width: 0.05vw;
| |
| − | background-color: white;
| |
| − | position: absolute;
| |
| − | left: 13vw;
| |
| − | top:2.8vw;
| |
| − | }
| |
| − | .carousel i{
| |
| − | font-size: 3vw;
| |
| − | padding: 2vw 0 0 3.8vw ;
| |
| − | }
| |
| − | .carousel img{
| |
| − | width: 10vw;
| |
| − | border-radius: 50%;
| |
| − | }
| |
| − | .memCont{
| |
| − | position: absolute;
| |
| − | width: 46vw;
| |
| − | left: 16vw;
| |
| − | top:50%;
| |
| − | transform: translateY(-70%);
| |
| − | font-size: 1.4vw;
| |
| − | font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
| |
| − | line-height: 2vw;
| |
| − | }
| |
| − | #rightBut,#leftBut{
| |
| − | font-size: 1.3vw;
| |
| − | color: rgba(225,225,225,1);
| |
| − | border: 0.2vw solid rgba(235,235,235,1);
| |
| − | display: inline-block;
| |
| − | width: 2.6vw;
| |
| − | height: 2.6vw;
| |
| − | padding: 0;
| |
| − | margin: 0;
| |
| − | text-align: center;
| |
| − | line-height: 2.6vw;
| |
| − | position: absolute;
| |
| − | z-index: 3;
| |
| − | top:5vw;
| |
| − | cursor:pointer;
| |
| − | }
| |
| − | #rightBut{
| |
| − | right:20vw;
| |
| − | }
| |
| − | #leftBut{
| |
| − | right:24vw;
| |
| − | }
| |
| − | #memSay{
| |
| − | font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
| |
| − | font-size: 2.5vw;
| |
| − | font-weight: 900;
| |
| − | color: white;
| |
| − | position: absolute;
| |
| − | top:5.3vw;
| |
| − | left: 30vw;
| |
| − | z-index: 2;
| |
| − | }
| |
| − | .memDotDiv{
| |
| − | position: absolute;
| |
| − | top:27vw;
| |
| − | left:50%;
| |
| − | transform: translateX(-50%);
| |
| − | z-index: 2;
| |
| − | }
| |
| − | .memDot{
| |
| − | width: 0.65vw;
| |
| − | height: 0.65vw;
| |
| − | background: rgba(214,222,229,1);
| |
| − | border-radius: 50%;
| |
| − | display: inline-block;
| |
| − | margin: 0 0.3vw;
| |
| − | cursor:pointer;
| |
| − | }
| |
| − | .div1_1{
| |
| − | height:29vw;
| |
| − | position: relative;
| |
| − | font-size: 0;
| |
| − | margin: 2vw 0 0 0;
| |
| − | }
| |
| − |
| |
| − | .paraFilter{
| |
| − | background:url(image/bgimg1.jpg);
| |
| − | background-size: 100%;
| |
| − | background-position:center center;
| |
| − | background-repeat: no-repeat;
| |
| − | position: absolute;
| |
| − | z-index: 1;
| |
| − | top:0;
| |
| − | left:0;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | filter: brightness(0.4);
| |
| − | }
| |
| − | </style>
| |
| − | <script>
| |
| − | var actNum=1;
| |
| − | var ani;
| |
| − | var caraWidth=$(".carousel").width();
| |
| − | var memDotDivNum=$(".memDotDiv").children().length;
| |
| − | $("[data-num=1]").show();
| |
| − | $("[data-dotNum='"+actNum+"']").css("backgroundColor","rgba(106,140,183,1)");
| |
| − |
| |
| − | $("#rightBut").click(function(){
| |
| − | if($("[data-num='"+ani+"']").is(":animated")){
| |
| − | $("[data-num='"+ani+"']").stop(false,true);
| |
| − | }
| |
| − | if($("[data-num='"+actNum+"']").is(":animated")){
| |
| − | $("[data-num='"+actNum+"']").stop(false,true);
| |
| − | }
| |
| − | ani=actNum;
| |
| − | actNum=actNum%memDotDivNum+1;
| |
| − | $("[data-dotNum='"+actNum+"']").css("backgroundColor","rgba(106,140,183,1)");
| |
| − | $(".memDotDiv [data-dotNum!='"+actNum+"']").css("backgroundColor","rgba(214,222,229,1)");
| |
| − | $("[data-num='"+actNum+"']").show();
| |
| − | $("[data-num='"+actNum+"']").css("left",caraWidth);
| |
| − | $("[data-num='"+actNum+"']").animate({left:"0"});
| |
| − | $("[data-num='"+ani+"']").animate({left:-caraWidth});
| |
| − |
| |
| − | });
| |
| − | $("#leftBut").click(function(){
| |
| − | if($("[data-num='"+ani+"']").is(":animated")){
| |
| − | $("[data-num='"+ani+"']").stop(false,true);
| |
| − | }
| |
| − | if($("[data-num='"+actNum+"']").is(":animated")){
| |
| − | $("[data-num='"+actNum+"']").stop(false,true);
| |
| − | }
| |
| − | ani=actNum;
| |
| − | actNum=memDotDivNum-(memDotDivNum+1-actNum)%memDotDivNum;
| |
| − | $("[data-dotNum='"+actNum+"']").css("backgroundColor","rgba(106,140,183,1)");
| |
| − | $(".memDotDiv [data-dotNum!='"+actNum+"']").css("backgroundColor","rgba(214,222,229,1)");
| |
| − |
| |
| − | $("[data-num='"+actNum+"']").show();
| |
| − | $("[data-num='"+actNum+"']").css("left",-caraWidth);
| |
| − | $("[data-num='"+actNum+"']").animate({left:"0"});
| |
| − | $("[data-num='"+ani+"']").animate({left:caraWidth});
| |
| − | });
| |
| − |
| |
| − | var curDot=1;
| |
| − | $(".memDot").mouseenter(function(){
| |
| − | if($("[data-num='"+actNum+"']").is(":animated")){
| |
| − | $("[data-num='"+actNum+"']").stop(false,true);
| |
| − | }
| |
| − | if($("[data-num='"+curDot+"']").is(":animated")){
| |
| − | $("[data-num='"+curDot+"']").stop(false,true);
| |
| − | }
| |
| − | actNum=curDot;
| |
| − | curDot=$(this).attr("data-dotNum");
| |
| − | $("[data-dotNum='"+curDot+"']").css("backgroundColor","rgba(106,140,183,1)");
| |
| − | $(".memDotDiv [data-dotNum!='"+curDot+"']").css("backgroundColor","rgba(214,222,229,1)");
| |
| − | if(actNum<curDot){
| |
| − | $("[data-num='"+curDot+"']").show();
| |
| − | $("[data-num='"+curDot+"']").css("left",caraWidth);
| |
| − | $("[data-num='"+curDot+"']").animate({left:"0"});
| |
| − | $("[data-num='"+actNum+"']").animate({left:-caraWidth});
| |
| − | }
| |
| − | else if(actNum>curDot){
| |
| − | $("[data-num='"+curDot+"']").show();
| |
| − | $("[data-num='"+curDot+"']").css("left",-caraWidth);
| |
| − | $("[data-num='"+curDot+"']").animate({left:"0"});
| |
| − | $("[data-num='"+actNum+"']").animate({left:caraWidth});
| |
| − | }
| |
| − | });
| |
| − | </script>
| |
| − | <!---------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − |
| |
| − |
| |
| − | <!--TEMPLATE:contact-->
| |
| − |
| |
| − | <div id="contactUs">
| |
| − | <img width="8%">
| |
| − | <div class="cuCol" id="cuCol1" style="width: 17%;">
| |
| − | <h1 class="cuH1"><i class="fa fa-link"></i> Useful Links</h1>
| |
| − | <hr width="50%">
| |
| − | <br/>
| |
| − | <div class="cuContent">
| |
| − | <a target="_blank" href="https://2018.igem.org/Main_Page"><i class="fa fa-caret-right"></i> iGEM Main Page</a>
| |
| − | <br/>
| |
| − | <a target="_blank" href="https://2018.igem.org/Main_Page"><i class="fa fa-caret-right"></i> iGEM Special Pages</a>
| |
| − | </div>
| |
| − | </div>
| |
| − | <img width="5%">
| |
| − | <div class="cuCol" id="cuCol2" style="width: 17%;">
| |
| − | <h1 class="cuH1"><i class="fa fa-envelope-o"></i> Email</h1>
| |
| − | <hr width="50%">
| |
| − | <br/>
| |
| − | <div class="cuContent">
| |
| − | <a href="mailto:igem@fudan.edu.cn"><i class="fa fa-caret-right"></i> igem@fudan.edu.cn</a>
| |
| − | <br/>
| |
| − | <a href="mailto:kfjin16@fudan.edu.cn"><i class="fa fa-caret-right"></i> kfjin16@fudan.edu.cn</a>
| |
| − |
| |
| − | <br/>
| |
| − | </div>
| |
| − | </div>
| |
| − | <img width="5%">
| |
| − | <div class="cuCol" id="cuCol3" style="width: 30%;">
| |
| − | <h1 class="cuH1"><i class="fa fa-paper-plane"></i> Address</h1>
| |
| − | <hr width="50%">
| |
| − | <br/>
| |
| − | <div class="cuContent">
| |
| − | G604, School of Life Sciences, Fudan University<br/>
| |
| − | 2005 Songhu Road, Yangpu, Shanghai, China
| |
| − | </div>
| |
| − | </div>
| |
| − | <img id="cuTeamImg" src="https://static.igem.org/mediawiki/2018/f/fc/T--Fudan-CHINA--teamBadgeWhite.png"/>
| |
| − | </div>
| |
| − |
| |
| − | <style>
| |
| − | #contactUs{
| |
| − | width: 100%;
| |
| − | background: rgba(25,25,25,1);
| |
| − | overflow: hidden;
| |
| − | margin: 0;
| |
| − | padding:1.5% 0 3% 0;
| |
| − | text-align: left;
| |
| − | position: relative;
| |
| − | }
| |
| − | .cuCol{
| |
| − | display: inline-block;
| |
| − | position: relative;
| |
| − | left:20px;
| |
| − | opacity: 0;
| |
| − | color: rgba(168,168,168,1.00);
| |
| − | text-align: left;
| |
| − | vertical-align: top;
| |
| − | }
| |
| − | h1.cuH1{
| |
| − | color: white;
| |
| − | font-size: 1.4vw;
| |
| − | font-style: normal;
| |
| − | }
| |
| − | .cuContent{
| |
| − | font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
| |
| − | font-size: 1.25vw;
| |
| − | line-height: 1.6vw;
| |
| − | }
| |
| − | #contactUs a{
| |
| − | color: rgba(168,168,168,1.00);
| |
| − | text-decoration: none;
| |
| − | }
| |
| − | #contactUs a:hover{
| |
| − | text-decoration: none;
| |
| − | color:rgba(0,189,234,1);
| |
| − | }
| |
| − | #contactUs a:visited{
| |
| − | text-decoration: none;
| |
| − | }
| |
| − | #contactUs a:active{
| |
| − | text-decoration: none;
| |
| − | }
| |
| − | #contactUs br{
| |
| − | line-height: 1vw;
| |
| − | }
| |
| − | #cuTeamImg{
| |
| − | position: absolute;
| |
| − | top:1vw;
| |
| − | right:4vw;
| |
| − | width: 10vw;
| |
| − | opacity: 0.2;
| |
| − | }
| |
| − | </style>
| |
| − | <script>
| |
| − | slideInLeft($("#cuCol1"),$("#contactUs"),0);
| |
| − | slideInLeft($("#cuCol2"),$("#contactUs"),150);
| |
| − | slideInLeft($("#cuCol3"),$("#contactUs"),300);
| |
| − | $(window).scroll(function(){
| |
| − | slideInLeft($("#cuCol1"),$("#contactUs"),0);
| |
| − | slideInLeft($("#cuCol2"),$("#contactUs"),150);
| |
| − | slideInLeft($("#cuCol3"),$("#contactUs"),300);
| |
| − | });
| |
| − |
| |
| − |
| |
| − | </script>
| |
| − |
| |
| − |
| |
| − | <!---------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − |
| |
| − |
| |
| − | <p>
| |
| − |
| |
| − | <!--end--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − |
| |
| | | | |
| | </html> | | </html> |
