Difference between revisions of "Team:Fudan-CHINA/Team"

 
(9 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
{{Fudan-CHINA}}
 
<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&amp;action=raw&amp;ctype=text/javascript">
 
−
//jQuery
 
−
</script>
 
−
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/jQueryUi&amp;action=raw&amp;ctype=text/javascript">
 
−
//jQueryUi
 
−
</script>
 
−
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/jQueryAnimateColors&amp;action=raw&amp;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 &amp;action=raw&amp;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-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!--page-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<div id="firstDiv">
 
<div id="firstDiv">
−
<img src="https://static.igem.org/mediawiki/2018/9/99/T--Fudan-CHINA--teamBgImg.jpg" />
+
<img src="https://static.igem.org/mediawiki/2018/0/0a/T--Fudan-CHINA--headforteam.png" />
 
<div class="fiName">Team</div>
 
<div class="fiName">Team</div>
−
<div class="pSentence">"All human wisdom is summed up in two words, wait and hope."</div>
+
<div class="pSentence">" If you want to go far, walk together."</div>
 
</div>
 
</div>
 
<style>
 
<style>
Line 530: Line 17:
 
filter: brightness(0.6);
 
filter: brightness(0.6);
 
position: relative;
 
position: relative;
−
width: 140%;
+
width: 100%;
−
top:50%;
+
top:20%;
−
left:50%;
+
transform:translateY(-30%);
−
transform: translateX(-43%) translateY(-30%);
+
 
}
 
}
 
     .fiName{
 
     .fiName{
Line 554: Line 40:
 
}
 
}
 
</style>
 
</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="members">
−
<div class="memberTitle">
+
<div class="memberTitle theDivTitle">
 
MEMBERS
 
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>
 
<div class="memberPhoto">
 
<div class="memberPhoto">
 
<div class="everyMem">
 
<div class="everyMem">
 
<div class="memImgDiv">
 
<div class="memImgDiv">
−
<img class="memImg" src="image/memberImg.jpg">
+
<img class="memImg" src="https://static.igem.org/mediawiki/2018/9/9c/T--Fudan-CHINA--JKF.jpg">
−
<img class="memPic" src="image/20181002184750.jpg">
+
<img class="memPic" src="https://static.igem.org/mediawiki/2018/5/5f/T--Fudan-CHINA--TZ_JKF.jpg">
 
</div>
 
</div>
 
<div class="memberName">Kaifeng Jin</div>
 
<div class="memberName">Kaifeng Jin</div>
−
<div class="memberDes">Captain</div>
+
<div class="memberDes">Team leader</div>
 
</div>
 
</div>
 
<div class="everyMem">
 
<div class="everyMem">
 
<div class="memImgDiv">
 
<div class="memImgDiv">
−
<img class="memImg" src="image/memberImg.jpg">
+
<img class="memImg" src="https://static.igem.org/mediawiki/2018/6/67/T--Fudan-CHINA--ZZX1234.jpg">
−
<img class="memPic" src="image/20181002184750.jpg">
+
<img class="memPic" src="https://static.igem.org/mediawiki/2018/c/c7/T--Fudan-CHINA--TZ_ZZX.jpg">
 
</div>
 
</div>
−
<div class="memberName">Kaifeng Jin</div>
+
<div class="memberName">Zixuan Zhang</div>
−
<div class="memberDes">Captain</div>
+
<div class="memberDes">Experiments designer</div>
 
</div>
 
</div>
 
<div class="everyMem">
 
<div class="everyMem">
 
<div class="memImgDiv">
 
<div class="memImgDiv">
−
<img class="memImg" src="image/memberImg.jpg">
+
<img style="position: relative;top:-1vw;" class="memImg" src="https://static.igem.org/mediawiki/2018/5/5c/T--Fudan-CHINA--DLJ.jpg">
−
<img class="memPic" src="image/20181002184750.jpg">
+
<img class="memPic" src="https://static.igem.org/mediawiki/2018/c/cf/T--Fudan-CHINA--TZ_DLJ.jpg">
 
</div>
 
</div>
−
<div class="memberName">Kaifeng Jin</div>
+
<div class="memberName">Leijie Dai</div>
−
<div class="memberDes">Captain</div>
+
<div class="memberDes">Experiments and Hp master
 +
</div>
 
</div>
 
</div>
 
<div class="everyMem">
 
<div class="everyMem">
 
<div class="memImgDiv">
 
<div class="memImgDiv">
−
<img class="memImg" src="image/memberImg.jpg">
+
<img class="memImg" src="https://static.igem.org/mediawiki/2018/e/e7/T--Fudan-CHINA--WSH.jpg">
−
<img class="memPic" src="image/20181002184750.jpg">
+
<img class="memPic" src="https://static.igem.org/mediawiki/2018/8/8e/T--Fudan-CHINA--TZ_WSH.jpg">
 
</div>
 
</div>
−
<div class="memberName">Kaifeng Jin</div>
+
<div class="memberName">Sihan Wang</div>
−
<div class="memberDes">Captain</div>
+
<div class="memberDes">Experiments</div>
 
</div>
 
</div>
 
<div class="everyMem">
 
<div class="everyMem">
 
<div class="memImgDiv">
 
<div class="memImgDiv">
−
<img class="memImg" src="image/memberImg.jpg">
+
<img class="memImg" src="https://static.igem.org/mediawiki/2018/d/d0/T--Fudan-CHINA--WXX.jpg">
−
<img class="memPic" src="image/20181002184750.jpg">
+
<img class="memPic" src="https://static.igem.org/mediawiki/2018/b/b6/T--Fudan-CHINA--TZ_WX.jpg">
 
</div>
 
</div>
−
<div class="memberName">Kaifeng Jin</div>
+
<div class="memberName">Xin Wang</div>
−
<div class="memberDes">Captain</div>
+
<div class="memberDes">Modeling and wiki master</div>
 
</div>
 
</div>
−
<br>
+
<br>
 
<div class="everyMem">
 
<div class="everyMem">
 
<div class="memImgDiv">
 
<div class="memImgDiv">
−
<img class="memImg" src="image/memberImg.jpg">
+
<img class="memImg" src="https://static.igem.org/mediawiki/2018/7/7e/T--Fudan-CHINA--ZYN.jpg">
−
<img class="memPic" src="image/20181002184750.jpg">
+
<img class="memPic" src="https://static.igem.org/mediawiki/2018/c/c1/T--Fudan-CHINA--TZ_ZYN.jpg">
 
</div>
 
</div>
−
<div class="memberName">Kaifeng Jin</div>
+
<div class="memberName">Yineng Zhou</div>
−
<div class="memberDes">Captain</div>
+
<div class="memberDes">Experiments</div>
 
</div>
 
</div>
 
<div class="everyMem">
 
<div class="everyMem">
 
<div class="memImgDiv">
 
<div class="memImgDiv">
−
<img class="memImg" src="image/memberImg.jpg">
+
<img style="position: relative;top:1vw;" class="memImg" src="https://static.igem.org/mediawiki/2018/f/f9/T--Fudan-CHINA--HCC.jpg">
−
<img class="memPic" src="image/20181002184750.jpg">
+
<img class="memPic" src="https://static.igem.org/mediawiki/2018/b/be/T--Fudan-CHINA--TZ_HHC.jpg">
 
</div>
 
</div>
−
<div class="memberName">Kaifeng Jin</div>
+
<div class="memberName">Haichen Hu</div>
−
<div class="memberDes">Captain</div>
+
<div class="memberDes">Experiments and Hp master</div>
 
</div>
 
</div>
 
<div class="everyMem">
 
<div class="everyMem">
 
<div class="memImgDiv">
 
<div class="memImgDiv">
−
<img class="memImg" src="image/memberImg.jpg">
+
<img style="position: relative;top:-2vw;" class="memImg" src="https://static.igem.org/mediawiki/2018/8/86/T--Fudan-CHINA--WY.jpg">
−
<img class="memPic" src="image/20181002184750.jpg">
+
<img class="memPic" src="https://static.igem.org/mediawiki/2018/5/5c/T--Fudan-CHINA--TZ_WY.jpg">
 
</div>
 
</div>
−
<div class="memberName">Kaifeng Jin</div>
+
<div class="memberName">Yi Wang</div>
−
<div class="memberDes">Captain</div>
+
<div class="memberDes">Video designer and photographer</div>
 
</div>
 
</div>
 
<div class="everyMem">
 
<div class="everyMem">
 
<div class="memImgDiv">
 
<div class="memImgDiv">
−
<img class="memImg" src="image/memberImg.jpg">
+
<img class="memImg" src="https://static.igem.org/mediawiki/2018/b/b1/T--Fudan-CHINA--WYFFF.jpg">
−
<img class="memPic" src="image/20181002184750.jpg">
+
<img class="memPic" src="https://static.igem.org/mediawiki/2018/3/3a/T--Fudan-CHINA--TZ_ZYF.jpg">
 
</div>
 
</div>
−
<div class="memberName">Kaifeng Jin</div>
+
<div class="memberName">Yifan Wang</div>
−
<div class="memberDes">Captain</div>
+
<div class="memberDes">Dry lab master</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
<style>
 
<style>
−
.memberTitle {
+
.theDivTitle{
−
  text-align: left;
+
color: rgba(6,34,82,1);
−
position: relative;
+
font-family: "Verlag Book",Arial,Helvetica;
−
color: rgba(36,36,36,1);
+
font-weight: 400;
−
font-family: Arial,Helvetica;
+
font-size: 3vw;
−
font-weight: 900;
+
padding:0;
−
font-size: 2.3vw;
+
margin: 8vw 0 3vw 0;
−
padding:7.3vw 4vw 2.5vw 11vw;
+
position: relative;
−
}
+
text-align: center;
−
.memberTitle:before{
+
}
−
content: "";
+
.theDivTitle:after {
−
 
+
    content: "";
−
  width: 4vw;
+
    position: absolute;
−
        height: 0.15vw;
+
    width: 4vw;
−
        background-color: rgba(0,189,234,1);
+
    height: 0.06vw;
−
position: absolute;
+
    background-color: rgba(6,34,82,1);
−
        top: 10vw;
+
    top:3.4vw;
−
left:11vw;
+
    left: 50%;
−
+
    transform: translateX(-50%);
−
+
}
−
}
+
 
.memberTitle div{
 
.memberTitle div{
 
padding: 3vw 0 0 0;
 
padding: 3vw 0 0 0;
Line 707: Line 154:
 
display: inline-block;
 
display: inline-block;
 
width:12vw;
 
width:12vw;
−
+
position: relative;
−
margin:1vw 1.7vw;
+
margin:2vw 2vw;
 
}
 
}
 
.memImgDiv{
 
.memImgDiv{
 
width: 100%;
 
width: 100%;
−
height: 14vw;
+
height: 13vw;
 
position: relative;
 
position: relative;
 
overflow: hidden;
 
overflow: hidden;
Line 719: Line 166:
 
position: absolute;
 
position: absolute;
 
transition: all 1s;
 
transition: all 1s;
 +
transform: translateY(-10%);
 
}
 
}
 
.memImgDiv .memImg{
 
.memImgDiv .memImg{
Line 727: Line 175:
 
.memImgDiv .memPic{
 
.memImgDiv .memPic{
 
width: 100%;
 
width: 100%;
−
top:0;
+
top:2vw;
 
left: 0;
 
left: 0;
 
background-color: white;
 
background-color: white;
 
transform: rotateY(180deg);
 
transform: rotateY(180deg);
 
}
 
}
−
.memImgDiv:hover .memImg{
+
.memImgDiv:hover .memImg:not(.isor){
 
transform: rotateY(180deg);
 
transform: rotateY(180deg);
 
}
 
}
Line 752: Line 200:
 
color: rgba(124,124,124,1);
 
color: rgba(124,124,124,1);
 
margin: 1vw 0 1vw 0;
 
margin: 1vw 0 1vw 0;
 +
position: absolute;
 +
top:14.8vw;
 +
width: 12vw;
 +
text-align: center;
 
}
 
}
 
</style>
 
</style>
Line 765: Line 217:
 
</div>
 
</div>
 
<div class="teamVideo">
 
<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"
+
<video id="example_video_1" controls controlsList="nodownload" preload="auto">
−
      data-setup="{}" preload="auto">
+
 
     <source src="https://static.igem.org/mediawiki/2018/d/d1/T--Fudan-CHINA--teamIntro.mp4" type="video/mp4" />
 
     <source src="https://static.igem.org/mediawiki/2018/d/d1/T--Fudan-CHINA--teamIntro.mp4" type="video/mp4" />
 
</video>
 
</video>
Line 775: Line 226:
  
 
<style>
 
<style>
 +
video::-webkit-media-controls-panel{
 +
background: rgba(35,35,35,0.8);
 +
 +
}
 +
video::-webkit-media-controls-play-button,video::-webkit-media-controls-mute-button,video::-webkit-media-controls-fullscreen-button{
 +
filter: brightness(2);
 +
}
 +
video::-webkit-media-controls-current-time-display{
 +
color: rgba(255,255,255,0.6);
 +
}
 +
video::-webkit-media-controls-time-remaining-display{
 +
color: rgba(255,255,255,0.6);
 +
}
 
#example_video_1{
 
#example_video_1{
 
display: inline-block;
 
display: inline-block;
Line 795: Line 259:
 
width:100%;
 
width:100%;
 
height:28vw;
 
height:28vw;
−
background-image: url('image/videoImg.jpg');
+
background-image: url('https://static.igem.org/mediawiki/2018/f/f3/T--Fudan-CHINA--videoimg1.jpg');
 
background-position: center top;
 
background-position: center top;
 
background-repeat: no-repeat;
 
background-repeat: no-repeat;
Line 824: Line 288:
 
text-align: center;
 
text-align: center;
 
margin: 5vw 0;
 
margin: 5vw 0;
−
}
 
−
.videoOutDiv i{
 
−
font-size:2.7vw;
 
−
cursor:pointer;
 
−
position: relative;
 
−
left: 0.3vw;
 
 
}
 
}
 
.videoPlayI{
 
.videoPlayI{
 
position: relative;
 
position: relative;
 
top:-13vw;
 
top:-13vw;
−
border:2px solid white;
+
}
−
width: 4.5vw;
+
.videoPlayI i{
−
height: 4.5vw;
+
font-size:2.7vw;
−
line-height: 5.8vw;
+
color: white;
 +
border: 2px solid white;
 +
width: 3vw;
 +
height: 3vw;
 +
padding: 1.3vw 0.9vw 0.9vw 1.3vw;
 
border-radius: 50%;
 
border-radius: 50%;
−
display: inline-block;
+
cursor: pointer;
 
}
 
}
 +
 
.closeVideo{
 
.closeVideo{
 
position: fixed;
 
position: fixed;
Line 855: Line 318:
 
</style>
 
</style>
 
<script>
 
<script>
−
$(".videoPlayI").css({"color":"white"});
+
$(".videoPlayI i").mouseenter(function(){
−
$(".videoPlayI").mouseenter(function(){
+
$(this).stop().animate({"color":"rgba(135,206,250)","borderColor":"rgba(135,206,250)"},200);
−
$(this).stop().animate({"color":"aqua","borderColor":"aqua"},200);
+
 
})
 
})
−
$(".videoPlayI").mouseleave(function(){
+
$(".videoPlayI i").mouseleave(function(){
 
$(this).stop().animate({"color":"white","borderColor":"white"},200);
 
$(this).stop().animate({"color":"white","borderColor":"white"},200);
 
})
 
})
Line 872: Line 334:
 
var winWidth=$(window).width();
 
var winWidth=$(window).width();
 
if (winWidth/winHeight>16/9){
 
if (winWidth/winHeight>16/9){
−
videojs(document.getElementById('example_video_1'), {}, function() {
+
$("#example_video_1").width(winHeight/9*16);
−
this.width(winHeight/9*16);
+
$("#example_video_1").height(winHeight);
−
this.height(winHeight);
+
−
});
+
 
}
 
}
 
else{
 
else{
−
videojs(document.getElementById('example_video_1'), {}, function() {
+
$("#example_video_1").width(winWidth);
−
this.width(winWidth);
+
$("#example_video_1").height(winWidth/16*9);
−
this.height(winWidth/16*9);
+
−
});
+
 
}
 
}
 
}
 
}
−
+
$(".videoPlayI i").click(function(){
−
$(".videoPlayI").click(function(){
+
 
$(".teamVideo").fadeIn();
 
$(".teamVideo").fadeIn();
 
$("#top_menu_14").fadeOut();
 
$("#top_menu_14").fadeOut();
−
videojs(document.getElementById('example_video_1'), {}, function() {
+
$("#example_video_1")[0].play();
−
this.play();
+
−
});
+
 
})
 
})
 
$(".closeVideo").click(function(){
 
$(".closeVideo").click(function(){
 
$("#top_menu_14").fadeIn();
 
$("#top_menu_14").fadeIn();
 
$(".teamVideo").fadeOut();
 
$(".teamVideo").fadeOut();
−
videojs(document.getElementById('example_video_1'), {}, function() {
+
$("#example_video_1")[0].pause();
−
this.pause();
+
−
});
+
 
});
 
});
 +
 
 
 
$(window).scroll(function() {
 
$(window).scroll(function() {
Line 910: Line 364:
 
});
 
});
 
</script>
 
</script>
 +
 +
 +
 +
 +
 +
 +
 +
<div class="members" style="margin-top: -8vw;margin-bottom: 5vw">
 +
<div class="memberTitle theDivTitle">
 +
INSTRUCTORS
 +
</div>
 +
<div class="memberPhoto">
 +
<div class="everyMem">
 +
<div class="memImgDiv">
 +
<img style="position: relative;top:1vw;" class="memImg isor" src="https://static.igem.org/mediawiki/2018/f/f2/T--Fudan-CHINA--huang.jpg">
 +
</div>
 +
<div class="memberName">Qiang Huang</div>
 +
</div>
 +
<div class="everyMem">
 +
<div class="memImgDiv">
 +
<img style="position: relative;top:1.2vw;" class="memImg isor" src="https://static.igem.org/mediawiki/2018/9/9b/T--Fudan-CHINA--mo1.jpg">
 +
</div>
 +
<div class="memberName">Wei Mo</div>
 +
</div>
 +
<div class="everyMem">
 +
<div class="memImgDiv">
 +
<img style="position: relative;top:1vw;" class="memImg isor" src="https://static.igem.org/mediawiki/2018/9/9a/T--Fudan-CHINA--wu.jpg">
 +
</div>
 +
<div class="memberName">Jiaxue Wu</div>
 +
</div>
 +
</div>
 +
</div>
 +
 +
 +
 +
 +
 +
 
 
 
<div class="div1_1">
 
<div class="div1_1">
Line 915: Line 407:
 
<div id="rightBut"><i class="fa fa-angle-right"></i></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="leftBut"><i class="fa fa-angle-left"></i></div>
−
<div id="memSay">What they say</div>
+
<div id="memSay">What Our Members Say</div>
 
<div class="paraDiv1" style="width: 64vw; height: 20vw; overflow:hidden; margin: 0 auto;position: relative;top:9.5vw;">
 
<div class="paraDiv1" style="width: 64vw; height: 20vw; overflow:hidden; margin: 0 auto;position: relative;top:9.5vw;">
 
<div class="carousel" data-num="1">
 
<div class="carousel" data-num="1">
−
<img src="image/memberImg.jpg"><br>
+
<img src="https://static.igem.org/mediawiki/2018/9/9c/T--Fudan-CHINA--JKF.jpg"><br>
 
<i class="fa fa-quote-left"></i>
 
<i class="fa fa-quote-left"></i>
 
<div class="memCont">
 
<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.
+
If you have a workaholic colleague, then you will have a lot less things. If you have a workaholic team leader, then you will be squeezed to work day and night with him. I am sorry, sincerely.  
−
<div style="text-align: right;">——Kaifeng Jin</div>
+
<div style="text-align: right;">—Kaifeng Jin</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
<div class="carousel" data-num="2">
 
<div class="carousel" data-num="2">
−
<img src="image/memberImg.jpg"><br>
+
<img src="https://static.igem.org/mediawiki/2018/6/67/T--Fudan-CHINA--ZZX1234.jpg"><br>
 
<i class="fa fa-quote-left"></i>
 
<i class="fa fa-quote-left"></i>
 
<div class="memCont">
 
<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.
+
Like the competition, the experiments and all the work I've done. But what amazes me the most is the fact that my love for biology and laboratory is always here in my heart.  
−
<div style="text-align: right;">——Kaifeng Jin</div>
+
<div style="text-align: right;">—Zixuan Zhang</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
<div class="carousel" data-num="3">
 
<div class="carousel" data-num="3">
−
<img src="image/memberImg.jpg"><br>
+
<img src="https://static.igem.org/mediawiki/2018/5/5c/T--Fudan-CHINA--DLJ.jpg"><br>
 
<i class="fa fa-quote-left"></i>
 
<i class="fa fa-quote-left"></i>
 
<div class="memCont">
 
<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.
+
I love molecular cloning, but it doesn’t.  
−
<div style="text-align: right;">——Kaifeng Jin</div>
+
<div style="text-align: right;">—Leijie Dai</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
<div class="carousel" data-num="4">
 
<div class="carousel" data-num="4">
−
<img src="image/memberImg.jpg"><br>
+
<img src="https://static.igem.org/mediawiki/2018/e/e7/T--Fudan-CHINA--WSH.jpg"><br>
 
<i class="fa fa-quote-left"></i>
 
<i class="fa fa-quote-left"></i>
 
<div class="memCont">
 
<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.
+
I’m on the way now. Coming sooooon!!!
−
<div style="text-align: right;">——Kaifeng Jin</div>
+
<div style="text-align: right;">—Sihan Wang</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
<div class="carousel" data-num="5">
 
<div class="carousel" data-num="5">
−
<img src="image/memberImg.jpg"><br>
+
<img src="https://static.igem.org/mediawiki/2018/d/d0/T--Fudan-CHINA--WXX.jpg"><br>
 
<i class="fa fa-quote-left"></i>
 
<i class="fa fa-quote-left"></i>
 
<div class="memCont">
 
<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.
+
Tea with milk, triple sugar, plus red bean.
−
<div style="text-align: right;">——Kaifeng Jin</div>
+
<div style="text-align: right;">—Xin Wang</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
<div class="carousel" data-num="6">
 
<div class="carousel" data-num="6">
−
<img src="image/memberImg.jpg"><br>
+
<img src="https://static.igem.org/mediawiki/2018/7/7e/T--Fudan-CHINA--ZYN.jpg"><br>
 
<i class="fa fa-quote-left"></i>
 
<i class="fa fa-quote-left"></i>
−
<div class="memCont">
+
<div class="memCont" style="position: relative;top:-7vw;">
−
6Two things fill the mind with ever new and increasing admiration and reverence - the starry heavens above me and the moral law within me.
+
Believe it or not - it’s my third time participating in iGEM competition! I took part in iGEM twice in ‘14 and ‘15 back in high school years and it was my experience with iGEM that brought me into majoring in biology in university. This year, I am a wet lab squad member for Team Fudan-CHINA mainly responsible for molecular cloning of our STEP system and protein expression. I hope we can all enjoy beautiful world of life science :)
−
<div style="text-align: right;">——Kaifeng Jin</div>
+
<div style="text-align: right;">—Yineng Zhou</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
<div class="carousel" data-num="7">
 
<div class="carousel" data-num="7">
−
<img src="image/memberImg.jpg"><br>
+
<img src="https://static.igem.org/mediawiki/2018/f/f9/T--Fudan-CHINA--HCC.jpg"><br>
 
<i class="fa fa-quote-left"></i>
 
<i class="fa fa-quote-left"></i>
 
<div class="memCont">
 
<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.
+
A word of my iGEM is 'HProtein' :P Unforgettable experience. Contacting experts of different fields. Every-day struggle with E.coli and protein. Lovely team members. Bubble milktea every night. Many thanks for Leslie's support.
−
<div style="text-align: right;">——Kaifeng Jin</div>
+
<div style="text-align: right;">—Haichen Hu</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
<div class="carousel" data-num="8">
 
<div class="carousel" data-num="8">
−
<img src="image/memberImg.jpg"><br>
+
<img src="https://static.igem.org/mediawiki/2018/8/86/T--Fudan-CHINA--WY.jpg"><br>
 
<i class="fa fa-quote-left"></i>
 
<i class="fa fa-quote-left"></i>
 
<div class="memCont">
 
<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.
+
I go wherever team needs me. And I also made two short videos on the wiki. Love photography and film editing. But hate Adobe every time it crashes. Planning to make a vlog about Boston. Please subscribe my youtube channel to watch more!
−
<div style="text-align: right;">——Kaifeng Jin</div>
+
<div style="text-align: right;">—Yi Wang</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
<div class="carousel" data-num="9">
 
<div class="carousel" data-num="9">
−
<img src="image/memberImg.jpg"><br>
+
<img src="https://static.igem.org/mediawiki/2018/b/b1/T--Fudan-CHINA--WYFFF.jpg"><br>
 
<i class="fa fa-quote-left"></i>
 
<i class="fa fa-quote-left"></i>
 
<div class="memCont">
 
<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.
+
Pymol is the most beautiful thing all over the world.
−
<div style="text-align: right;">——Kaifeng Jin</div>
+
<div style="text-align: right;">—Yifan Wang</div>
 
</div>
 
</div>
 
</div>
 
</div>
Line 1,098: Line 590:
  
 
.paraFilter{
 
.paraFilter{
−
background:url(image/bgimg1.jpg);
+
background:url("https://static.igem.org/mediawiki/2018/f/fb/T--Fudan-CHINA--bgimg1.jpg");
 
         background-size: 100%;
 
         background-size: 100%;
 
         background-position:center center;
 
         background-position:center center;
Line 1,113: Line 605:
 
<script>
 
<script>
 
    var actNum=1;
 
    var actNum=1;
−
    var ani;
+
    var ani=1;
−
var caraWidth=$(".carousel").width();
+
 
    var memDotDivNum=$(".memDotDiv").children().length;
 
    var memDotDivNum=$(".memDotDiv").children().length;
 
    $("[data-num=1]").show();
 
    $("[data-num=1]").show();
Line 1,120: Line 611:
  
 
$("#rightBut").click(function(){
 
$("#rightBut").click(function(){
 +
var caraWidth=$(".carousel").width();
 
if($("[data-num='"+ani+"']").is(":animated")){
 
if($("[data-num='"+ani+"']").is(":animated")){
 
$("[data-num='"+ani+"']").stop(false,true);
 
$("[data-num='"+ani+"']").stop(false,true);
Line 1,137: Line 629:
 
});
 
});
 
$("#leftBut").click(function(){
 
$("#leftBut").click(function(){
 +
var caraWidth=$(".carousel").width();
 
if($("[data-num='"+ani+"']").is(":animated")){
 
if($("[data-num='"+ani+"']").is(":animated")){
 
$("[data-num='"+ani+"']").stop(false,true);
 
$("[data-num='"+ani+"']").stop(false,true);
Line 1,154: Line 647:
 
});
 
});
 
 
−
var curDot=1;
 
 
$(".memDot").mouseenter(function(){
 
$(".memDot").mouseenter(function(){
−
    if($("[data-num='"+actNum+"']").is(":animated")){
+
var caraWidth=$(".carousel").width();
 +
    if($("[data-num='"+ani+"']").is(":animated")){
 +
$("[data-num='"+ani+"']").stop(false,true);
 +
}
 +
if($("[data-num='"+actNum+"']").is(":animated")){
 
$("[data-num='"+actNum+"']").stop(false,true);
 
$("[data-num='"+actNum+"']").stop(false,true);
 
}
 
}
−
if($("[data-num='"+curDot+"']").is(":animated")){
+
ani=actNum;
−
$("[data-num='"+curDot+"']").stop(false,true);
+
actNum=$(this).attr("data-dotNum");
 +
$("[data-dotNum='"+actNum+"']").css("backgroundColor","rgba(106,140,183,1)");
 +
$(".memDotDiv [data-dotNum!='"+actNum+"']").css("backgroundColor","rgba(214,222,229,1)");
 +
if(ani<actNum){
 +
$("[data-num='"+actNum+"']").show();
 +
$("[data-num='"+actNum+"']").css("left",caraWidth);
 +
$("[data-num='"+actNum+"']").animate({left:"0"});
 +
$("[data-num='"+ani+"']").animate({left:-caraWidth});
 
}
 
}
−
actNum=curDot;
+
else if(ani>actNum){
−
curDot=$(this).attr("data-dotNum");
+
$("[data-num='"+actNum+"']").show();
−
$("[data-dotNum='"+curDot+"']").css("backgroundColor","rgba(106,140,183,1)");
+
$("[data-num='"+actNum+"']").css("left",-caraWidth);
−
$(".memDotDiv [data-dotNum!='"+curDot+"']").css("backgroundColor","rgba(214,222,229,1)");
+
$("[data-num='"+actNum+"']").animate({left:"0"});
−
if(actNum<curDot){
+
$("[data-num='"+ani+"']").animate({left:caraWidth});
−
$("[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>
 
</script>
 
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
−
+
−
+
 
<!--TEMPLATE:contact-->
 
<!--TEMPLATE:contact-->
 
 
Line 1,232: Line 724:
 
text-align: left;
 
text-align: left;
 
position: relative;
 
position: relative;
 +
z-index: 1;
 
}
 
}
 
.cuCol{
 
.cuCol{
Line 1,289: Line 782:
 
 
 
</script>
 
</script>
−
 
−
 
 
−
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
 
−
 
 
 
 
<p>
 
<p>
Line 1,298: Line 787:
 
<!--end--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!--end--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
 
 +
  
 
</html>
 
</html>

Latest revision as of 22:47, 17 October 2018

Team
" If you want to go far, walk together."
MEMBERS
Kaifeng Jin
Team leader
Zixuan Zhang
Experiments designer
Leijie Dai
Experiments and Hp master
Sihan Wang
Experiments
Xin Wang
Modeling and wiki master

Yineng Zhou
Experiments
Haichen Hu
Experiments and Hp master
Yi Wang
Video designer and photographer
Yifan Wang
Dry lab master
Watch Team Video
Because I could not stop for death, he kindly stopped for me. The carriage held but just ourselves and immortality.
INSTRUCTORS
Qiang Huang
Wei Mo
Jiaxue Wu
What Our Members Say

If you have a workaholic colleague, then you will have a lot less things. If you have a workaholic team leader, then you will be squeezed to work day and night with him. I am sorry, sincerely.
—Kaifeng Jin

Like the competition, the experiments and all the work I've done. But what amazes me the most is the fact that my love for biology and laboratory is always here in my heart.
—Zixuan Zhang

I love molecular cloning, but it doesn’t.
—Leijie Dai

I’m on the way now. Coming sooooon!!!
—Sihan Wang

Tea with milk, triple sugar, plus red bean.
—Xin Wang

Believe it or not - it’s my third time participating in iGEM competition! I took part in iGEM twice in ‘14 and ‘15 back in high school years and it was my experience with iGEM that brought me into majoring in biology in university. This year, I am a wet lab squad member for Team Fudan-CHINA mainly responsible for molecular cloning of our STEP system and protein expression. I hope we can all enjoy beautiful world of life science :)
—Yineng Zhou

A word of my iGEM is 'HProtein' :P Unforgettable experience. Contacting experts of different fields. Every-day struggle with E.coli and protein. Lovely team members. Bubble milktea every night. Many thanks for Leslie's support.
—Haichen Hu

I go wherever team needs me. And I also made two short videos on the wiki. Love photography and film editing. But hate Adobe every time it crashes. Planning to make a vlog about Boston. Please subscribe my youtube channel to watch more!
—Yi Wang

Pymol is the most beautiful thing all over the world.
—Yifan Wang

  Address


G604, School of Life Sciences, Fudan University
2005 Songhu Road, Yangpu, Shanghai, China