Difference between revisions of "Template:Fudan-CHINA"

(Replaced content with "{{Fudan-CHINA/initialize}} {{Fudan-CHINA/mainNav}}")
 
(26 intermediate revisions by the same user not shown)
Line 1: Line 1:
<html>
+
{{Fudan-CHINA/initialize}}
+
{{Fudan-CHINA/mainNav}}
+
+
<!--start---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
</p>
+
+
+
<!--get jQuery------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
<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/SuperSlide&amp;action=raw&amp;ctype=text/javascript">
+
//jQuery_SuperSlide
+
</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>
+
+
<script>
+
$("#firstHeading").remove();
+
$(".logo_2018").remove();
+
</script>
+
+
<style>
+
#home_logo, #sideMenu,#top { display:none; }
+
#sideMenu, #top_title, .patrollink  {display:none;}
+
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
#top_menu_under{display: none;}
+
</style>
+
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
+
+
<!--get fonts----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
<style>
+
@font-face
+
{
+
  font-family:_Quicksand;/*for loading*/
+
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;/*for loading*/
+
src: url('https://static.igem.org/mediawiki/2018/5/56/T--Fudan-CHINA--Algerian.ttf');
+
}
+
@font-face
+
{
+
  font-family:_ZELDA;
+
src: url('https://static.igem.org/mediawiki/2018/d/df/T--Fudan-CHINA--ZELDA.ttf');
+
}
+
@font-face
+
{
+
  font-family:_Butler;
+
src: url('https://static.igem.org/mediawiki/2018/e/e1/T--Fudan-CHINA--Butler.ttf');
+
}
+
+
</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(0,36,49,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;}
+
+
#loader-wrapper .load_title {/*words*/
+
    font-family:_Quicksand;
+
    color:#FFF;
+
font-size:19px;
+
width:100%;
+
text-align:center;
+
z-index:9999999999999;
+
position:absolute;
+
top:60%;
+
opacity:1;
+
line-height:30px;
+
}
+
#loader-wrapper .load_title span { 
+
font-family: _Algerian;
+
font-weight:normal;
+
font-size:13px;
+
color:#FFF;
+
opacity:0.5;
+
}
+
 
+
 
+
</style>
+
+
 
+
<div id="loader-wrapper">
+
    <div id="loader"></div>
+
    <div class="loader-section section-left"></div>
+
    <div class="loader-section section-right"></div>
+
    <div class="load_title">LOADING<br><span>Fudan-CHINA</span></div>
+
</div>
+
+
<script type="text/javascript">       
+
    $(document).ready(function(){
+
setTimeout(function(){ $('body').addClass('loaded');
+
        $('#loader-wrapper .load_title').remove(); }, 1500);
+
    });
+
</script> 
+
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
+
+
+
 
+
 
+
 
+
+
 
+
+
<!--make the menu hidden------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
<script>
+
$(document).ready(function(){
+
  $('#sideMenu').remove();
+
  let trigger = document.createElement('div');
+
$(trigger).attr('id','menu-trigger');
+
let menu = document.getElementById('top_menu_14');
+
  $(trigger).mouseenter(function(){
+
$(menu).css('top','0');
+
  });
+
  $(trigger).mouseleave(function(){
+
    $(menu).css('top','-20px');
+
  });
+
  document.body.appendChild(trigger);
+
});
+
</script>
+
+
+
+
<style>
+
+
#top_menu_14{
+
  top: -20px; padding-bottom: 2px; transition: top 0.3s;
+
}
+
#top_menu_14:hover {
+
    top: 0 !important;
+
}
+
#menu-trigger{
+
  width:100%;
+
  height:16px;
+
  position:fixed;
+
  left:0;
+
  top:0;
+
  z-index:10;
+
}
+
#HQ_page ul.navigation-bar > li > ul.sub-menu > li{
+
  min-width: 100px;
+
}
+
#HQ_page ul.navigation-bar > li > ul > li.long{
+
  min-width: 160px;
+
}
+
</style>
+
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
+
+
+
+
+
 
+
<!--navigation bar-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
<style>
+
#navUl{
+
list-style: none;
+
margin: 0;
+
padding: 0;
+
overflow: hidden;
+
position:fixed;
+
width: 1500px;
+
}
+
.navLi:not(.navImg){
+
float: right;
+
}
+
.navA{
+
display: block;
+
height: 110px;
+
padding:0 20px;
+
color:white;
+
font-family:_Butler;
+
font-weight: 400;
+
font-size: 30px;
+
text-align: center;
+
line-height: 110px;
+
}
+
.teamName{
+
font-family:_Zelda;
+
font-weight: 400;
+
font-size: 35px;
+
}
+
.navA:link{
+
text-decoration: none;
+
}
+
 
+
.navA:visited{
+
color: white;
+
}
+
+
.navA:hover:not(.activeA){
+
color: rgba(0,189,234,1);
+
}
+
.jqhover {
+
        color:black  !important;
+
    }
+
.navA:hover{
+
text-decoration:none;
+
}
+
 
+
    .navA:active{
+
text-decoration:none;
+
color: white;
+
}
+
+
</style>
+
+
+
+
<ul id="navUl" style="z-index: 999;">
+
<li class="navLi navImg" style="display: inline-block;float: left;width: 10px;" href="#8"></li>
+
<li class="navLi navImg" style="float: left;"><a href="https://2018.igem.org/Team:Fudan-CHINA"><img class="navA" style="width=80px;height:80px;padding:15px; " src="https://static.igem.org/mediawiki/2018/6/6b/T--Fudan-CHINA--teamBadgeWhite_noCircle.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">Fudan-CHINA</a></li>
+
  <li class="navLi"><a class="navA" href="#7">Team</a></li>
+
<li class="navLi"><a class="navA" href="#6">Parts</a></li>
+
<li class="navLi"><a class="navA" href="#5">Practices</a></li>
+
<li class="navLi"><a class="navA" href="#4">Lab</a></li>
+
<li class="navLi"><a class="navA" href="#3">Modeling</a></li>
+
<li class="navLi"><a class="navA" href="#2">Project</a></li>
+
</ul>
+
<script>
+
$(function(){
+
var navFun=function(){
+
var winWidth=$(window).width();
+
var navWidth=$('#navUl').width();
+
var winHeight=$(window).height();
+
$("#navUl").css("left",0.5*(winWidth-navWidth));
+
$("#navUl").css("top",0.1*winHeight);
+
};
+
navFun();
+
$(window).resize(function(){
+
navFun();
+
});
+
 
+
+
    $(window).scroll(function(){
+
var winHeight=$(window).height();
+
        var topDis = $(window).scrollTop();
+
if(topDis >150){
+
$("#navUl").stop().animate({top:'0px',backgroundColor:"rgba(4,198,215,1)",boxShadow:"0px 0px 5px"},"fast");
+
    $(".navA:not(.activeA)").hover(function () {
+
                $(this).addClass("jqhover");
+
            }).mouseout(function () {
+
$(this).removeClass("jqhover");
+
            });
+
}
+
else{
+
$("#navUl").stop().animate({top:0.1*winHeight,backgroundColor:"transparent"},"fast");
+
$(".navA:not(.activeA)").hover(function () {
+
                $(this).removeClass("jqhover");
+
            });
+
};
+
    });
+
});
+
</script>
+
+
+
+
+
+
+
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
+
 
+
 
+
 
+
 
+
</html>
+

Latest revision as of 08:58, 17 October 2018