Difference between revisions of "Team:Fudan-CHINA"

Line 1: Line 1:
−
{{Fudan-CHINA/initialize}}
+
 
−
{{Fudan-CHINA/mainNavBar}}
+
  
 
<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;}
 +
 +
#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>
 +
 +
 +
 
 
−
<!--page-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/jQuery&amp;action=raw&amp;ctype=text/javascript">
−
<img id="bgPc" src="https://static.igem.org/mediawiki/2018/0/0a/T--Fudan-CHINA--bgimgDNA1.jpg"/>
+
//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="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/font_awesome&action=raw&ctype=text/css" rel="stylesheet">
 +
 +
 
 +
 +
 
 +
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
 +
 +
<!--get fonts----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<style>
 
<style>
−
#bgPc{
+
@font-face
−
position: fixed;
+
{
−
top:0;
+
  font-family:_Quicksand;
−
z-index: -100;
+
src: url('https://static.igem.org/mediawiki/2018/8/8a/T--Fudan-CHINA--Quicksand.ttf');
−
-webkit-filter: brightness(0.6);
+
−
filter: brightness(0.6);
+
 
}
 
}
 +
@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+*/
 +
}
 +
@font-face
 +
{
 +
  font-family:_Allura;
 +
src: url('https://static.igem.org/mediawiki/2018/6/69/T--Fudan-CHINA--Allura-Regular.otf');
 +
}
 +
@font-face
 +
{
 +
  font-family:_VerlagBook;
 +
src: url('https://static.igem.org/mediawiki/2018/f/fe/T--Fudan-CHINA--VerlagBook.otf');
 +
}
 +
 +
 
</style>
 
</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: 2%;"></li>
 +
 +
 +
<li class="navLi"><a class="navA" href="#6">Awards</a></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">Notebook</a></li>
 +
 +
<li class="navLi"><a class="navA" href="#5">Human&nbsp;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&nbsp;HP</a></li>
 +
<li class="li2"><a class="navA2" href="#18">Integrated&nbsp;HP</a></li>
 +
<li class="li2"><a class="navA2 muchWords muchWords1" href="#18">Education&nbsp;&amp;&nbsp;Public&nbsp;Engagement</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="#5">Parts</a>
 +
<ul class="ul2" style="padding: 0;margin: 0;">
 +
<li class="li2"><a class="navA2" href="#16">Improved&nbsp;Part</a></li>
 +
<li class="li2"><a class="navA2" href="#16">Best&nbsp;New&nbsp;Basic&nbsp;Part</a></li>
 +
<li class="li2"><a class="navA2 muchWords muchWords2" href="#16">Best&nbsp;New&nbsp;Composite&nbsp;Part</a></li>
 +
<li class="li2"><a class="navA2" href="#16">Best&nbsp;Part&nbsp;Collection</a></li>
 +
</ul>
 +
</li>
 +
 +
<li class="navLi"><a class="navA" href="#5">Model</a>
 +
<ul class="ul2" style="padding: 0;margin: 0;">
 +
<li class="li2"><a class="navA2" href="#16">Model</a></li>
 +
<li class="li2"><a class="navA2" href="https://2018.igem.org/Team:Fudan-CHINA/Software">Software</a></li>
 +
</ul>
 +
</li>
 +
 +
<li class="navLi"><a class="navA" href="#5">Results</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="#18">Transducers</a></li>
 +
<li class="li2"><a class="navA2" href="#19">Protein&nbsp;Interaction</a></li>
 +
<li class="li2"><a class="navA2" href="#20">Demonstrate</a></li>
 +
<li class="li2"><a class="navA2" href="#20">Interlab</a></li>
 +
</ul>
 +
</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">Overview</a></li>
 +
<li class="li2"><a class="navA2" href="#22">Background</a></li>
 +
<li class="li2"><a class="navA2" href="#23">Design</a></li>
 +
<li class="li2"><a class="navA2" href="#24">Applied&nbsp;Design</a></li>
 +
</ul>
 +
</li>
 +
 +
</ul>
 +
<style>
 +
#navUl{
 +
list-style: none;
 +
margin: 0;
 +
padding: 0;
 +
overflow: visible;
 +
position:fixed;
 +
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) 0%, rgba(21,71,110,0.95) 20%, rgba(29,176,186,0.95) 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:"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","2.5vh");
 +
 +
$(".teamName").css("height","8vh");
 +
$(".teamName").css("line-height","8vh");
 +
$(".teamName").css("font-size","3.3vh");
 +
 +
$(".navA2").css("padding","0 6vh");
 +
$(".navA2").css("height","6vh");
 +
$(".navA2").css("line-height","6vh");
 +
$(".navA2:not(.muchWords)").css("font-size","2.7vh");
 +
$(".muchWords1").css("font-size","2.2vh");
 +
$(".muchWords2").css("font-size","2.3vh");
 +
$(".muchWords3").css("font-size","2.3vh");
 +
 +
$(".navA:not(img)").css("padding","0 3vh");
 +
$(".teamImg").css("width","7vh");
 +
$(".teamImg").css("height","7vh");
 +
$(".teamImg").css("padding","0.5vh 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.25vw");
 +
 +
$(".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:not(.muchWords)").css("font-size","1.35vw");
 +
$(".muchWords1").css("font-size","1.1vw");
 +
$(".muchWords2").css("font-size","1.15vw");
 +
$(".muchWords3").css("font-size","1.15vw");
 +
 +
$(".navA:not(img)").css("padding","0 1.5vw");
 +
$(".teamImg").css("width","3.5vw");
 +
$(".teamImg").css("height","3.5vw");
 +
$(".teamImg").css("padding","0.25vh 0");
 +
}
 +
};
 +
 +
navFun();
 +
navAdj();
 +
 +
$(window).resize(function(){
 +
navFun();
 +
scrDir=0;
 +
navAdj();
 +
 +
});
 +
 +
var scrDir=0;
 +
    $(window).scroll(function(){
 +
navAdj()
 +
    });
 +
 +
function navAdj(){
 +
var winHeight=$(window).height();
 +
        var topDis = $(window).scrollTop();
 +
var barHeight=$("#top_menu_14").height();
 +
var mainNavHeight=$("#navUl").height();
 +
$(".ul2").css("top",mainNavHeight);
 +
if(topDis > 100){
 +
if (scrDir!=1){
 +
$("#navUl").stop().animate({top:barHeight,backgroundColor:"rgba(19,45,91,0.95)",boxShadow:"0px 0px 5px rgba(25,25,25,0.15)"},"fast");
 +
$(".ul2").css("background-image","linear-gradient(rgba(19,45,91,0.95) 0%, rgba(29,176,186,0.95) 100%)");
 +
}
 +
 +
scrDir=1;
 +
    $(".navA:not(.activeA)").hover(function () {
 +
                $(this).addClass("jqhover");
 +
            }).mouseout(function () {
 +
$(this).removeClass("jqhover");
 +
            });
 +
}
 +
else{
 +
if (scrDir!=2){
 +
$("#navUl").stop().animate({top:0.1*winHeight,backgroundColor:"transparent"},"fast");
 +
$(".ul2").css("background-image","linear-gradient(rgba(19,45,91,0) 0%, rgba(21,71,110,0.95) 20%, rgba(29,176,186,0.95) 100%)");
 +
}
 +
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="signageDiv">
 
<div id="signageDiv">
 
<video id="bgVideo" autoplay muted loop>
 
<video id="bgVideo" autoplay muted loop>
Line 27: Line 566:
 
<span id="fullName">Synthetic Transducer Engineering Platform</span>
 
<span id="fullName">Synthetic Transducer Engineering Platform</span>
 
</div>
 
</div>
−
  <div class="discoverBotton"> <a href="#99" class="animated-button victoria-one">DISCOVER NOW</a> </div>
+
  <div class="discoverBotton"><a href="#99" class="animated-button victoria-one">DISCOVER NOW</a></div>
 
</div>
 
</div>
 
 
Line 40: Line 579:
 
-ms-transform: translateX(-50%);
 
-ms-transform: translateX(-50%);
 
-webkit-transform: translateX(-50%);
 
-webkit-transform: translateX(-50%);
−
}
 
−
a.animated-button.victoria-one {
 
−
border: 0.1vw solid #fff;
 
 
}
 
}
 
a.animated-button.victoria-one:after {
 
a.animated-button.victoria-one:after {
Line 61: Line 597:
 
text-align: center;
 
text-align: center;
 
text-decoration: none;
 
text-decoration: none;
−
overflow: hidden;
 
 
letter-spacing: 0.1vw;
 
letter-spacing: 0.1vw;
−
border-radius: 1vw;
+
border-radius:1.5vw;
 +
overflow: hidden;
 +
border: 0.1vw solid #fff;
 
-webkit-transition: all 0.75s ease;
 
-webkit-transition: all 0.75s ease;
 
-moz-transition: all 0.75s ease;
 
-moz-transition: all 0.75s ease;
Line 84: Line 621:
 
a.animated-button:link:hover, a.animated-button:visited:hover {
 
a.animated-button:link:hover, a.animated-button:visited:hover {
 
color: rgba(2,17,35,1);
 
color: rgba(2,17,35,1);
−
border-radius: 0;
+
border: 0.1vw solid transparent;
−
border: 0px solid #fff;
+
−
padding: 1.1vw 1.5vw 1vw 1.5vw;
+
 
}
 
}
 
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
 
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
Line 99: Line 634:
 
var winHeight=$(window).height();
 
var winHeight=$(window).height();
 
var totalScroll=winHeight-barHeight-navHeight;
 
var totalScroll=winHeight-barHeight-navHeight;
−
$('body,html').animate({"scrollTop":totalScroll},1000,"swing");
+
$('body,html').animate({"scrollTop":totalScroll+2},1000);
 
  });
 
  });
 
});
 
});
Line 173: Line 708:
 
</script>
 
</script>
 
 
−
+
 
−
+
−
<link rel="stylesheet" type="text/css"  
+
<div class="videoOutDiv">
−
href="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/moreMenu&action=raw&ctype=text/css">
+
<div class="videoDiv" data-paralasic="0.45">
 +
</div>
 +
<div class="videoTitle">Watch Project 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/5/54/T--Fudan-CHINA--pjVideo.mp4" type="video/mp4" />
 +
</video>
 +
<div class="closeVideo">
 +
<i class="fa fa-close"></i>
 +
</div>
 +
</div>
 +
 
 +
<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{
 +
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/c/ce/T--Fudan-CHINA--pjbgImg.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: 3vw 0 -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").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>
 +
 
 +
<div class="moreInfoma">
 
  <div class="trade-content" style="overflow: hidden;">
 
  <div class="trade-content" style="overflow: hidden;">
 
             <div class="trade-title">
 
             <div class="trade-title">
−
                 <div class="theDivTitle">LEARN MORE</div>  
+
                 <div class="theDivTitle learnMore">LEARN MORE</div>  
 
             </div>
 
             </div>
−
             <div class="trade-black" style="position: relative;top:15px;opacity: 0;">
+
             <div class="trade-black">
 
                 <div class="trade-box">
 
                 <div class="trade-box">
 
                     <div class="trade-box-list">
 
                     <div class="trade-box-list">
−
                         <div class="trade-box-item item01">
+
                         <div class="trade-box-item itemProject">
 
                             <a href="#">
 
                             <a href="#">
 
                                 <div class="item-logo">
 
                                 <div class="item-logo">
Line 191: Line 881:
 
                                 <div class="item-title">Project</div>
 
                                 <div class="item-title">Project</div>
 
                                 <div class="item-text">
 
                                 <div class="item-text">
−
                                     Project
+
                                     Background noise a of the a for the
 
                                 </div>
 
                                 </div>
 
                             </a>
 
                             </a>
 
                         </div>
 
                         </div>
−
                         <div class="trade-box-item item02">
+
                         <div class="trade-box-item itemResults">
 
                             <a href="#">
 
                             <a href="#">
 +
                                <div class="item-logo">
 +
                                  <i class="fa fa-flask"></i>
 +
                                </div>
 +
                                <div class="item-title">Results</div>
 +
                                <div class="item-text">
 +
                                    Human Practice
 +
                                </div>
 +
                            </a>
 +
                        </div>
 +
<div class="trade-box-item itemModel">
 +
                            <a href="https://2018.igem.org/Team:Fudan-CHINA/Model">
 
                                 <div class="item-logo">
 
                                 <div class="item-logo">
 
                                     <i class="fa fa-area-chart"></i>
 
                                     <i class="fa fa-area-chart"></i>
 
                                 </div>
 
                                 </div>
−
                                 <div class="item-title">Modeling</div>
+
                                 <div class="item-title">Model</div>
 
                                 <div class="item-text">
 
                                 <div class="item-text">
−
                                     Modeling
+
                                     Model
 
                                 </div>
 
                                 </div>
 
                             </a>
 
                             </a>
 
                         </div>
 
                         </div>
−
                         <div class="trade-box-item item03">
+
                         <div class="trade-box-item itemParts">
 +
                            <a href="#">
 +
                                <div class="item-logo">
 +
                                    <i class="fa fa-puzzle-piece"></i>
 +
                                </div>
 +
                                <div class="item-title">Parts</div>
 +
                                <div class="item-text">
 +
                                    Awards
 +
                                </div>
 +
                            </a>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
</div>
 +
<div class="trade-content" style="overflow: hidden;">
 +
            <div class="trade-black">
 +
                <div class="trade-box">
 +
                    <div class="trade-box-list">
 +
                      <div class="trade-box-item itemHP">
 
                             <a href="#">
 
                             <a href="#">
 
                                 <div class="item-logo">
 
                                 <div class="item-logo">
Line 217: Line 937:
 
                             </a>
 
                             </a>
 
                         </div>
 
                         </div>
−
                         <div class="trade-box-item item04">
+
                         <div class="trade-box-item itemNotebook">
 
                             <a href="#">
 
                             <a href="#">
 
                                 <div class="item-logo">
 
                                 <div class="item-logo">
−
                                     <i class="fa fa-lightbulb-o"></i>
+
                                     <i class="fa fa-book"></i>
 
                                 </div>
 
                                 </div>
−
                                 <div class="item-title">Awards</div>
+
                                 <div class="item-title">Notebook</div>
 
                                 <div class="item-text">
 
                                 <div class="item-text">
−
                                     Awards
+
                                     Modeling
 
                                 </div>
 
                                 </div>
 
                             </a>
 
                             </a>
 
                         </div>
 
                         </div>
−
                         <div class="trade-box-item item05">
+
                         <div class="trade-box-item itemTeam">
 
                             <a href="#">
 
                             <a href="#">
 
                                 <div class="item-logo">
 
                                 <div class="item-logo">
−
                                   <i class="fa fa-group"></i>
+
                                   <i class="fa fa-users"></i>
 
                                 </div>
 
                                 </div>
 
                                 <div class="item-title">Team</div>
 
                                 <div class="item-title">Team</div>
 
                                 <div class="item-text">
 
                                 <div class="item-text">
−
                                     Team
+
                                     Human Practice
 +
                                </div>
 +
                            </a>
 +
                        </div>
 +
                        <div class="trade-box-item itemAwards">
 +
                            <a href="#">
 +
                                <div class="item-logo">
 +
                                    <i class="fa fa-lightbulb-o"></i>
 +
                                </div>
 +
                                <div class="item-title">Awards</div>
 +
                                <div class="item-text">
 +
                                    Awards
 
                                 </div>
 
                                 </div>
 
                             </a>
 
                             </a>
Line 243: Line 974:
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 +
      </div>
  
 
  <style>
 
  <style>
−
.theDivTitle{
+
.theDivTitle{
−
color: rgba(51,51,51,1);
+
color: rgba(6,34,82,1);
−
font-family: Arial,Helvetica;
+
font-family: "Verlag Book",Arial,Helvetica;
−
font-weight: 900;
+
font-weight: 400;
−
font-size: 2.5vw;
+
font-size: 3vw;
 
padding:0;
 
padding:0;
−
margin: 0;
+
margin: 1vw;
 +
position: relative;
 
}
 
}
 +
.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%);
 +
}
 +
.trade-content{
 +
padding:0 0 0 0;
 +
margin: 0;
 +
}
 +
.trade-title {
 +
    color: #333;
 +
    text-align: center;
 +
    padding: 3.5vw 0 1vw 0;
 +
margin: 0 0 3vw 0;
 +
    position: relative;
 +
}
 +
 +
 +
 +
.trade-box-item a {
 +
    text-decoration: none;
 +
    color: #000;
 +
position: absolute;
 +
    width: 100%;
 +
    height: 100%;
 +
    left: 0;
 +
    top: 0;
 +
}
 +
 +
 +
.trade-box {
 +
    width: 85% !important;
 +
    margin: 0 auto;
 +
    position: relative;
 +
    transition: all .3s ease;
 +
}
 +
 +
.trade-box-list {
 +
    display: flex;
 +
    flex-direction: row;
 +
    justify-content: center;
 +
    align-items: center;
 +
}
 +
 +
.trade-box-item {
 +
    flex: 1;
 +
    text-align: center;
 +
    position: relative;
 +
    height: 26vw;
 +
    background: no-repeat center;
 +
    background-size: 100% auto;
 +
}
 +
 +
.trade-content .trade-box-item:before {
 +
    content: "";
 +
    position: absolute;
 +
    width: 100%;
 +
    height: 100%;
 +
    left: 0;
 +
    top: 0;
 +
    background-color: rgba(0,0,0,.6);
 +
    transition: all .4s cubic-bezier(.4, 0, .2, 1);
 +
}
 +
 +
.item-logo {
 +
    margin: 0 auto;
 +
    display: block;
 +
}
 +
 +
.trade-content .trade-box-item .item-logo {
 +
    position: relative;
 +
    margin-top: 8vw;
 +
    transition: all .4s cubic-bezier(.4, 0, .2, 1);
 +
}
 +
 +
.item-logo i {
 +
    display: block;
 +
    margin: 0 auto;
 +
    max-width: 100%;
 +
color: white;
 +
font-size: 3.5vw;
 +
}
 +
 +
.item-title {
 +
    font-size: 1.8vw;
 +
    font-weight:700;
 +
    color: #fff;
 +
    padding: 0.7vw 0;
 +
    position: relative;
 +
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
 +
}
 +
 +
.trade-content .item-title:before {
 +
    content: "";
 +
    position: relative;
 +
    display: block;
 +
    width: 3vw;
 +
    border-bottom: 0.1vw solid #fff;
 +
    margin: 0 auto 2vw;
 +
    transition: all .4s cubic-bezier(.4, 0, .2, 1);
 +
}
 +
 +
.item-text {
 +
    position: relative;
 +
    transition: all .4s cubic-bezier(.4, 0, .2, 1);
 +
    opacity: 0;
 +
padding: 2vw;
 +
color: #fff;
 +
    font-size: 1.5vw;
 +
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
 +
}
 +
 +
 +
.trade-content .itemProject {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/1/1a/T--Fudan-CHINA--projectBgImg1.png");
 +
}
 +
 +
.trade-content .itemResults {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/0/0e/T--Fudan-CHINA--ResultBgImg.jpg");
 +
filter: brightness(1.1);
 +
}
 +
 +
.trade-content .itemModel {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/2/2b/T--Fudan-CHINA--modelBgImg1.png");
 +
}
 +
 +
.trade-content .itemParts {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/1/18/T--Fudan-CHINA--partsBgImg.jpg");
 +
}
 +
 +
.trade-content .itemHP {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/1/12/T--Fudan-CHINA--hpBgImg2.png");
 +
}
 +
.trade-content .itemNotebook {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/2/26/T--Fudan-CHINA--NotebookBgImg.png");
 +
}
 +
 +
.trade-content .itemAwards {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/2/2a/T--Fudan-CHINA--awardBgImg2.png");
 +
}
 +
 +
.trade-content .itemTeam {
 +
    background-image: url("https://static.igem.org/mediawiki/2018/6/64/T--Fudan-CHINA--teamBgImg1.png");
 +
}
 +
 +
.trade-content .trade-box-item:hover .item-text {
 +
    display: block;
 +
    opacity: 1;
 +
    margin-top: 0;
 +
}
 +
 +
.trade-content .trade-box-item:hover:before {
 +
    background-color: rgba(50,143,189,0.90);
 +
}
 +
 +
.trade-content .trade-box-item:hover .item-logo {
 +
    margin-top: 5vw;
 +
}
 +
 +
.trade-content .trade-box-item:hover .item-title:before {
 +
    opacity: 0;
 +
    margin-bottom: 0;
 +
}
 
</style>
 
</style>
−
<script>
+
−
$(function(){
+
−
slideInTop($(".trade-black"),$(".trade-black"),0);
+
−
      });
+
−
$(window).scroll(function(){
+
−
slideInTop($(".trade-black"),$(".trade-black"),0);
+
−
});
+
−
+
−
</script>
+
 
 
 
 
  
 
<div id="sponsor">
 
<div id="sponsor">
−
<div style="color: rgba(51,51,51,1);font-family: Arial,Helvetica;font-weight: 900;font-size: 2.5vw;">SPONSORS</div>
+
<div class="theDivTitle">SPONSORS</div>
−
<img style="width:7vw;margin: 1% 0 3% 0;" src="https://static.igem.org/mediawiki/2018/0/0d/T--Fudan-CHINA--split1.png"/>
+
<div style="font-size: 0;position: relative;margin: 4vw;">
−
<div>
+
<a href="http://life.fudan.edu.cn/" style="font-size: 0;">
−
<img class="spImg" id="spImg1" src="https://static.igem.org/mediawiki/2018/8/85/T--Fudan-CHINA--sp1.png" />
+
<img class="spImg" id="spImg1" src="https://static.igem.org/mediawiki/2018/7/74/T--Fudan-CHINA--sp2.png" />
−
<img width="1%">
+
</a>
−
<img class="spImg" id="spImg2" src="https://static.igem.org/mediawiki/2018/7/74/T--Fudan-CHINA--sp2.png" />
+
<a href="http://medicine.fudan.edu.cn/" style="font-size: 0;">
−
<img width="1%">
+
<img class="spImg" id="spImg2" src="https://static.igem.org/mediawiki/2018/d/d1/T--Fudan-CHINA--sp3.png" />
−
<img class="spImg" id="spImg3" src="https://static.igem.org/mediawiki/2018/d/d1/T--Fudan-CHINA--sp3.png" />
+
</a>
−
</div>
+
<a href="http://www.yfc.cn/cn/index.html" style="font-size: 0;">
−
<br/>
+
−
<div>
+
 
<img class="spImg" id="spImg4" src="https://static.igem.org/mediawiki/2018/7/7b/T--Fudan-CHINA--sp4.png" />
 
<img class="spImg" id="spImg4" src="https://static.igem.org/mediawiki/2018/7/7b/T--Fudan-CHINA--sp4.png" />
−
<img width="1%">
+
</a>
 +
<a href="https://sg.idtdna.com/pages" style="font-size: 0">
 +
<img class="spImg" id="spImg3" style="position: relative;left:15.3px;" src="https://static.igem.org/mediawiki/2018/e/eb/T--Fudan-CHINA--sp7.png" /></a>
 +
<a href="http://www.snapgene.com/" style="font-size: 0;">
 
<img class="spImg" id="spImg5" src="https://static.igem.org/mediawiki/2018/f/fb/T--Fudan-CHINA--sp5.png" />
 
<img class="spImg" id="spImg5" src="https://static.igem.org/mediawiki/2018/f/fb/T--Fudan-CHINA--sp5.png" />
−
<img width="1%">
+
</a>
−
<img class="spImg" id="spImg6" src="https://static.igem.org/mediawiki/2018/c/c4/T--Fudan-CHINA--sp6.png" />
+
<a href="https://www.mathworks.com/" style="font-size: 0;">
 +
<img class="spImg" id="spImg6" src="https://static.igem.org/mediawiki/2018/c/c4/T--Fudan-CHINA--sp6.png" />
 +
</a>
 
</div>
 
</div>
−
 
 
</div>
 
</div>
 
<style>
 
<style>
Line 293: Line 1,188:
 
padding:5vw 0 4vw 0;
 
padding:5vw 0 4vw 0;
 
background-color: white;
 
background-color: white;
 +
font-size: 0;
 
}
 
}
 +
 
.spImg{
 
.spImg{
 
padding: 0.1vw;
 
padding: 0.1vw;
Line 299: Line 1,196:
 
border-color:rgba(219,219,219,1);
 
border-color:rgba(219,219,219,1);
 
border-width: 0.1vw;
 
border-width: 0.1vw;
−
position:relative;
 
−
top:20px;
 
 
opacity:0;
 
opacity:0;
 +
position: relative;
 +
top:15px;
 
width:25vw;
 
width:25vw;
−
vertical-align: middle;
+
margin: 1vw 1vw;
 
}
 
}
 
</style>
 
</style>
Line 322: Line 1,219:
 
};
 
};
 
</script>
 
</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>
 
 
−
+
<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>
−
{{Fudan-CHINA/contactUs}}
 

Revision as of 06:51, 17 October 2018


S T E P
Synthetic Transducer Engineering Platform
DISCOVER NOW
Watch Project Video
Because I could not stop for death, he kindly stopped for me. The carriage held but just ourselves and immortality.
LEARN MORE
Project
Background noise a of the a for the
Results
Human Practice
Model
Model
Parts
Awards
Human Practice
Human Practice
Notebook
Modeling
Team
Human Practice
Awards
Awards

  Address


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