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

(Prototype team page)
 
 
(12 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{Fudan-CHINA}}
 
{{Fudan-CHINA}}
 
<html>
 
<html>
 +
 +
<!--page-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<div id="firstDiv">
 +
<img src="https://static.igem.org/mediawiki/2018/0/0a/T--Fudan-CHINA--headforteam.png" />
 +
<div class="fiName">Team</div>
 +
<div class="pSentence">" If you want to go far, walk together."</div>
 +
</div>
 +
<style>
 +
#firstDiv{
 +
width: 100%;
 +
height: 22vw;
 +
overflow: hidden;
 +
}
 +
#firstDiv img{
 +
filter: brightness(0.6);
 +
position: relative;
 +
width: 100%;
 +
top:20%;
 +
transform: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>
 +
<div class="members">
 +
<div class="memberTitle theDivTitle">
 +
MEMBERS
 +
</div>
 +
<div class="memberPhoto">
 +
<div class="everyMem">
 +
<div class="memImgDiv">
 +
<img class="memImg" src="https://static.igem.org/mediawiki/2018/9/9c/T--Fudan-CHINA--JKF.jpg">
 +
<img class="memPic" src="https://static.igem.org/mediawiki/2018/5/5f/T--Fudan-CHINA--TZ_JKF.jpg">
 +
</div>
 +
<div class="memberName">Kaifeng Jin</div>
 +
<div class="memberDes">Team leader</div>
 +
</div>
 +
<div class="everyMem">
 +
<div class="memImgDiv">
 +
<img class="memImg" src="https://static.igem.org/mediawiki/2018/6/67/T--Fudan-CHINA--ZZX1234.jpg">
 +
<img class="memPic" src="https://static.igem.org/mediawiki/2018/c/c7/T--Fudan-CHINA--TZ_ZZX.jpg">
 +
</div>
 +
<div class="memberName">Zixuan Zhang</div>
 +
<div class="memberDes">Experiments designer</div>
 +
</div>
 +
<div class="everyMem">
 +
<div class="memImgDiv">
 +
<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="https://static.igem.org/mediawiki/2018/c/cf/T--Fudan-CHINA--TZ_DLJ.jpg">
 +
</div>
 +
<div class="memberName">Leijie Dai</div>
 +
<div class="memberDes">Experiments and Hp master
 +
</div>
 +
</div>
 +
<div class="everyMem">
 +
<div class="memImgDiv">
 +
<img class="memImg" src="https://static.igem.org/mediawiki/2018/e/e7/T--Fudan-CHINA--WSH.jpg">
 +
<img class="memPic" src="https://static.igem.org/mediawiki/2018/8/8e/T--Fudan-CHINA--TZ_WSH.jpg">
 +
</div>
 +
<div class="memberName">Sihan Wang</div>
 +
<div class="memberDes">Experiments</div>
 +
</div>
 +
<div class="everyMem">
 +
<div class="memImgDiv">
 +
<img class="memImg" src="https://static.igem.org/mediawiki/2018/d/d0/T--Fudan-CHINA--WXX.jpg">
 +
<img class="memPic" src="https://static.igem.org/mediawiki/2018/b/b6/T--Fudan-CHINA--TZ_WX.jpg">
 +
</div>
 +
<div class="memberName">Xin Wang</div>
 +
<div class="memberDes">Modeling and wiki master</div>
 +
</div>
 +
<br>
 +
<div class="everyMem">
 +
<div class="memImgDiv">
 +
<img class="memImg" src="https://static.igem.org/mediawiki/2018/7/7e/T--Fudan-CHINA--ZYN.jpg">
 +
<img class="memPic" src="https://static.igem.org/mediawiki/2018/c/c1/T--Fudan-CHINA--TZ_ZYN.jpg">
 +
</div>
 +
<div class="memberName">Yineng Zhou</div>
 +
<div class="memberDes">Experiments</div>
 +
</div>
 +
<div class="everyMem">
 +
<div class="memImgDiv">
 +
<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="https://static.igem.org/mediawiki/2018/b/be/T--Fudan-CHINA--TZ_HHC.jpg">
 +
</div>
 +
<div class="memberName">Haichen Hu</div>
 +
<div class="memberDes">Experiments and Hp master</div>
 +
</div>
 +
<div class="everyMem">
 +
<div class="memImgDiv">
 +
<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="https://static.igem.org/mediawiki/2018/5/5c/T--Fudan-CHINA--TZ_WY.jpg">
 +
</div>
 +
<div class="memberName">Yi Wang</div>
 +
<div class="memberDes">Video designer and photographer</div>
 +
</div>
 +
<div class="everyMem">
 +
<div class="memImgDiv">
 +
<img class="memImg" src="https://static.igem.org/mediawiki/2018/b/b1/T--Fudan-CHINA--WYFFF.jpg">
 +
<img class="memPic" src="https://static.igem.org/mediawiki/2018/3/3a/T--Fudan-CHINA--TZ_ZYF.jpg">
 +
</div>
 +
<div class="memberName">Yifan Wang</div>
 +
<div class="memberDes">Dry lab master</div>
 +
</div>
 +
</div>
 +
</div>
 +
<style>
 +
.theDivTitle{
 +
color: rgba(6,34,82,1);
 +
font-family: "Verlag Book",Arial,Helvetica;
 +
font-weight: 400;
 +
font-size: 3vw;
 +
padding:0;
 +
margin: 8vw 0 3vw 0;
 +
position: relative;
 +
text-align: center;
 +
}
 +
.theDivTitle:after {
 +
    content: "";
 +
    position: absolute;
 +
    width: 4vw;
 +
    height: 0.06vw;
 +
    background-color: rgba(6,34,82,1);
 +
    top:3.4vw;
 +
    left: 50%;
 +
    transform: translateX(-50%);
 +
}
 +
.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;
 +
position: relative;
 +
margin:2vw 2vw;
 +
}
 +
.memImgDiv{
 +
width: 100%;
 +
height: 13vw;
 +
position: relative;
 +
overflow: hidden;
 +
}
 +
.memImgDiv img{
 +
position: absolute;
 +
transition: all 1s;
 +
transform: translateY(-10%);
 +
}
 +
.memImgDiv .memImg{
 +
width: 100%;
 +
top:0;
 +
left:0;
 +
}
 +
.memImgDiv .memPic{
 +
width: 100%;
 +
top:2vw;
 +
left: 0;
 +
background-color: white;
 +
transform: rotateY(180deg);
 +
}
 +
.memImgDiv:hover .memImg:not(.isor){
 +
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;
 +
position: absolute;
 +
top:14.8vw;
 +
width: 12vw;
 +
text-align: center;
 +
}
 +
</style>
 +
  
−
<div class="column two_thirds_size" >
+
 +
<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" controls controlsList="nodownload" 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>
  
−
<h1>Team</h1>
+
<style>
−
<p>In this page you can introduce your team members, instructors, and advisors. </p>
+
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{
 +
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('https://static.igem.org/mediawiki/2018/f/f3/T--Fudan-CHINA--videoimg1.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;
 +
}
 +
.videoPlayI{
 +
position: relative;
 +
top:-13vw;
 +
}
 +
.videoPlayI i{
 +
font-size:2.7vw;
 +
color: white;
 +
border: 2px solid white;
 +
width: 3vw;
 +
height: 3vw;
 +
padding: 1.3vw 0.9vw 0.9vw 1.3vw;
 +
border-radius: 50%;
 +
cursor: pointer;
 +
}
 +
 +
.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 i").mouseenter(function(){
 +
$(this).stop().animate({"color":"rgba(135,206,250)","borderColor":"rgba(135,206,250)"},200);
 +
})
 +
$(".videoPlayI i").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){
 +
$("#example_video_1").width(winHeight/9*16);
 +
$("#example_video_1").height(winHeight);
 +
}
 +
else{
 +
$("#example_video_1").width(winWidth);
 +
$("#example_video_1").height(winWidth/16*9);
 +
}
 +
}
 +
$(".videoPlayI i").click(function(){
 +
$(".teamVideo").fadeIn();
 +
$("#top_menu_14").fadeOut();
 +
$("#example_video_1")[0].play();
 +
})
 +
$(".closeVideo").click(function(){
 +
$("#top_menu_14").fadeIn();
 +
$(".teamVideo").fadeOut();
 +
$("#example_video_1")[0].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>
 +
 +
 +
 +
 +
 +
  
−
<h3>What should this page contain?</h3>
+
<div class="members" style="margin-top: -8vw;margin-bottom: 5vw">
−
<ul>
+
<div class="memberTitle theDivTitle">
−
<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
+
INSTRUCTORS
−
<li>You can add a small biography or a few words from each team member, to tell us what you like, and what motivated you to participate in iGEM.</li>
+
</div>
−
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
+
<div class="memberPhoto">
−
<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
+
<div class="everyMem">
−
</ul>
+
<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="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 Our Members 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="https://static.igem.org/mediawiki/2018/9/9c/T--Fudan-CHINA--JKF.jpg"><br>
 +
<i class="fa fa-quote-left"></i>
 +
<div class="memCont">
 +
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>
 +
</div>
 +
<div class="carousel" data-num="2">
 +
<img src="https://static.igem.org/mediawiki/2018/6/67/T--Fudan-CHINA--ZZX1234.jpg"><br>
 +
<i class="fa fa-quote-left"></i>
 +
<div class="memCont">
 +
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;">—Zixuan Zhang</div>
 +
</div>
 +
</div>
 +
<div class="carousel" data-num="3">
 +
<img src="https://static.igem.org/mediawiki/2018/5/5c/T--Fudan-CHINA--DLJ.jpg"><br>
 +
<i class="fa fa-quote-left"></i>
 +
<div class="memCont">
 +
I love molecular cloning, but it doesn’t.
 +
<div style="text-align: right;">—Leijie Dai</div>
 +
</div>
 +
</div>
 +
<div class="carousel" data-num="4">
 +
<img src="https://static.igem.org/mediawiki/2018/e/e7/T--Fudan-CHINA--WSH.jpg"><br>
 +
<i class="fa fa-quote-left"></i>
 +
<div class="memCont">
 +
I’m on the way now. Coming sooooon!!!
 +
<div style="text-align: right;">—Sihan Wang</div>
 +
</div>
 +
</div>
 +
<div class="carousel" data-num="5">
 +
<img src="https://static.igem.org/mediawiki/2018/d/d0/T--Fudan-CHINA--WXX.jpg"><br>
 +
<i class="fa fa-quote-left"></i>
 +
<div class="memCont">
 +
Tea with milk, triple sugar, plus red bean.
 +
<div style="text-align: right;">—Xin Wang</div>
 +
</div>
 +
</div>
 +
<div class="carousel" data-num="6">
 +
<img src="https://static.igem.org/mediawiki/2018/7/7e/T--Fudan-CHINA--ZYN.jpg"><br>
 +
<i class="fa fa-quote-left"></i>
 +
<div class="memCont" style="position: relative;top:-7vw;">
 +
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;">—Yineng Zhou</div>
 +
</div>
 +
</div>
 +
<div class="carousel" data-num="7">
 +
<img src="https://static.igem.org/mediawiki/2018/f/f9/T--Fudan-CHINA--HCC.jpg"><br>
 +
<i class="fa fa-quote-left"></i>
 +
<div class="memCont">
 +
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;">—Haichen Hu</div>
 +
</div>
 +
</div>
 +
<div class="carousel" data-num="8">
 +
<img src="https://static.igem.org/mediawiki/2018/8/86/T--Fudan-CHINA--WY.jpg"><br>
 +
<i class="fa fa-quote-left"></i>
 +
<div class="memCont">
 +
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;">—Yi Wang</div>
 +
</div>
 +
</div>
 +
<div class="carousel" data-num="9">
 +
<img src="https://static.igem.org/mediawiki/2018/b/b1/T--Fudan-CHINA--WYFFF.jpg"><br>
 +
<i class="fa fa-quote-left"></i>
 +
<div class="memCont">
 +
Pymol is the most beautiful thing all over the world.
 +
<div style="text-align: right;">—Yifan Wang</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>
 
</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("https://static.igem.org/mediawiki/2018/f/fb/T--Fudan-CHINA--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=1;
 +
    var memDotDivNum=$(".memDotDiv").children().length;
 +
    $("[data-num=1]").show();
 +
$("[data-dotNum='"+actNum+"']").css("backgroundColor","rgba(106,140,183,1)");
  
 +
$("#rightBut").click(function(){
 +
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);
 +
}
 +
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});
  
−
<div class="column third_size" >
+
});
−
<div class="highlight decoration_A_full">
+
$("#leftBut").click(function(){
−
<h3>Inspiration</h3>
+
var caraWidth=$(".carousel").width();
−
<p>You can look at what other teams did to get some inspiration! <br />
+
if($("[data-num='"+ani+"']").is(":animated")){
−
Here are a few examples:</p>
+
$("[data-num='"+ani+"']").stop(false,true);
−
<ul>
+
}
−
<li><a href="https://2014.igem.org/Team:METU_Turkey_team">2014 METU Turkey </a></li>
+
if($("[data-num='"+actNum+"']").is(":animated")){
−
<li><a href="https://2014.igem.org/Team:Colombia/Members">2014 Colombia</a></li>
+
$("[data-num='"+actNum+"']").stop(false,true);
−
<li><a href="https://2014.igem.org/Team:Stony_Brook/Team">2014 Stony Brook</a></li>
+
}
−
<li><a href="https://2014.igem.org/Team:OUC-China/Team">2014 OUC-China</a></li>
+
ani=actNum;
−
</ul>
+
actNum=memDotDivNum-(memDotDivNum+1-actNum)%memDotDivNum;
−
</div>
+
$("[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});
 +
});
 +
 +
$(".memDot").mouseenter(function(){
 +
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);
 +
}
 +
ani=actNum;
 +
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});
 +
}
 +
else 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});
 +
}
 +
});
 +
</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>&nbsp;&nbsp;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>&nbsp;iGEM Main Page</a>
 +
<br/>
 +
<a target="_blank" href="https://2018.igem.org/Main_Page"><i class="fa fa-caret-right"></i>&nbsp;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>&nbsp;&nbsp;Email</h1>
 +
<hr width="50%">
 +
<br/>
 +
<div  class="cuContent">
 +
<a href="mailto:igem@fudan.edu.cn"><i class="fa fa-caret-right"></i>&nbsp;igem@fudan.edu.cn</a>
 +
<br/>
 +
<a href="mailto:kfjin16@fudan.edu.cn"><i class="fa fa-caret-right"></i>&nbsp;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>&nbsp;&nbsp;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>
 
</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;
 +
z-index: 1;
 +
}
 +
.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>

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