Difference between revisions of "Team:Tianjin"

Line 1: Line 1:
 
{{Tianjin}}
 
{{Tianjin}}
 +
<!DOCTYPE html>
 
<html>
 
<html>
<meta charset="utf-8">
+
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
+
<script src="https://2018.igem.org/Team:Tianjin/js/jquery?action=raw&ctype=text/javascript"></script>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" name="viewport">
+
        <meta charset="utf-8">
 +
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
 +
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" name="viewport">
 +
        <meta name="renderer" content="webkit">
 +
        <meta name="author" content="773715181 HanJiaxiao">
 +
        <meta content="2018iGEM Team:Tianjin Kai System to control biological clock" name="description">
 +
        <meta content="Team:Tianjin,iGEM:Tianjin,iGEM,2018iGEM" name="keywords">
 +
        <meta content="biological clock,clock,Kai,Kai A,Kai B,KaiC" name="keywords">
 
<title>Team:Tianjin - 2018.igem.org</title>
 
<title>Team:Tianjin - 2018.igem.org</title>
 
+
        <link rel="stylesheet" type="text/css" href="https://2018.igem.org/Team:Tianjin/css/bootstrap?action=raw&ctype=text/css">
<!-- load.css -->
+
        <link rel="stylesheet" type="text/css" href="https://2018.igem.org/Team:Tianjin/css/base?action=raw&ctype=text/css">
<style>
+
         <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
#loading{width:100%;height:100%;z-index:999999;position:fixed;text-align:center;}.loadingClock{width:150px;height:150px;position:relative;background:url(https://static.igem.org/mediawiki/2018/5/5a/T--Tianjin--backClock.png);top:50%;left:50%;margin-left:-75px;margin-top:-75px;background-size:100% 100%;-moz-background-size:100% 100%;z-index:999999;}.loadh,.loadm,.loads{width:100%;height:100%;position:absolute;}.loadh{transform:rotate(-60deg);animation:loadh 4.8s linear infinite;}.loadm{transform:rotate(60deg);animation:loadm 0.8s linear infinite;}.loads{transform:rotate(120deg);animation:loads 0.16s linear infinite;}.loadingPoint{position:relative;width:50%;margin:auto;}.loadingPoint span{display:block;width:9px;height:5px;position:absolute;animation:loadingPoint 1.5s infinite ease-in-out;}.loadingPoint span:nth-child(1){left:47%;}.loadingPoint span:nth-child(2){left:50%;animation-delay:.2s;}.loadingPoint span:nth-child(3){left:53%;animation-delay:.4s}@keyframes loadh{from{transform:rotate(-60deg);}to{transform:rotate(300deg);}}@keyframes loadm{from{transform:rotate(60deg);}to{transform:rotate(420deg);}}@keyframes loads{from{transform:rotate(120deg);}to{transform:rotate(480deg);}}@keyframes loadingPoint{0%{transform:translateY(0px);}25%{transform:translateY(15px);}50%{transform:translateY(0px);}100%{transform:translateY(0px);}}.handh{width:0px;height:0px;position:relative;margin-left:auto;margin-right:auto;border-style:solid;border-color:transparent transparent white transparent;}.handm{width:0px;height:0px;position:relative;margin-left:auto;margin-right:auto;top:0;border-style:solid;border-color:transparent transparent white transparent;}.hands{width:0px;height:0px;position:relative;margin-left:auto;margin-right:auto;border-style:solid;border-color:transparent transparent white transparent;}.loadingP{color:white;position:relative;top:70%;font-size:40px;z-index:999999;}.loadingMask{width:50%;position:fixed;top:0px;height:100%;background:black;}.moveLeft{animation:moveLeft 1s ease-in;}.moveRight{animation:moveRight 1s ease-in;}@keyframes moveLeft{0%{transform:translateX(0);}100%{transform:translateX(-100%);}}@keyframes moveRight{0%{transform:translateX(0);}100%{transform:translateX(100%);}}
+
        <link rel="stylesheet" type="text/css" href="https://2018.igem.org/Team:Tianjin/css/text?action=raw&ctype=text/css">
</style>
+
        <script src="https://2018.igem.org/Team:Tianjin/js/bootstrap?action=raw&ctype=text/javascript"></script>
 
+
</head>
    <div id="loading">
+
        <div class="loadingClock">
+
            <div class="loadh">
+
                <div class="handh" style="top: 25px;border-width: 0px 3px 50px 3px;"></div>
+
            </div>
+
            <div class="loadm">
+
                <div class="handm" style="border-width: 0px 2px 75px 2px;"></div>
+
            </div>
+
            <div class="loads">
+
                <div class="hands" style="top: -5px;border-width: 0px 1px 80px 1px;">                   
+
                </div>
+
            </div>         
+
        </div>
+
        <div class="loadingP">
+
            <p>ON LOADING</p>
+
            <div class="loadingPoint">
+
                <span class="loadingPoint1">.</span>
+
                <span class="loadingPoint2">.</span>
+
                <span class="loadingPoint3">.</span>
+
            </div>
+
        </div>
+
        <div class="loadingLeft loadingMask" style="left: 0;"></div>
+
        <div class="loadingRight loadingMask" style="right: 0;"></div>
+
    </div>
+
 
+
<script type="text/javascript">
+
    $(document).ready(function(){
+
         $('.loadingLeft').addClass("moveLeft");
+
        $('.loadingRight').addClass("moveRight");
+
        $('.loadingP').remove();
+
        $('.loadingClock').remove();
+
        setTimeout(function(){ $('#loading').remove();},998);
+
    })
+
</script>
+
 
+
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
+
<script src="https://2016.igem.org/wiki/index.php?title=Team:Tianjin/js/material/jquery&action=raw&ctype=text/javascript"></script>
+
<script src="https://2017.igem.org/Team:Tianjin/Resources/JS:leftbarbootstrap?action=raw&ctype=text/javascript"></script>
+
 
<!-- delete.css  -->
 
<!-- delete.css  -->
 
<style>
 
<style>
 
#globalWrapper,#content{background-color:transparent;border:0;border-bottom:0;float:none;margin:0;padding:0;width:100%;list-style-image:none}#top_title{margin:0}#HQ_page th{background-color:transparent;padding:0;color:black;border:0;border-collapse:collapse;vertical-align:text-top;text-transform:uppercase;text-align:center}#HQ_page td{padding:0;border:0;vertical-align:text-top;text-align:center;line-height:35px}#HQ_page .jumbotron p{text-align:center;margin-bottom:15px;font-weight:200}#HQ_page p{text-align:center}body{margin-bottom:-10px}#top_title,#sideMenu{display:none}a:hover{text-decoration:none}.mw-content-ltr ul{padding-top:0;padding-right:0;margin:auto}body{margin-top:0}#wrapper{padding-left:0}#page-wrapper{width:100%;padding:0}.intro{background-size:cover;width:100%;position:relative}.huge{font-size:50px;line-height:normal}
 
#globalWrapper,#content{background-color:transparent;border:0;border-bottom:0;float:none;margin:0;padding:0;width:100%;list-style-image:none}#top_title{margin:0}#HQ_page th{background-color:transparent;padding:0;color:black;border:0;border-collapse:collapse;vertical-align:text-top;text-transform:uppercase;text-align:center}#HQ_page td{padding:0;border:0;vertical-align:text-top;text-align:center;line-height:35px}#HQ_page .jumbotron p{text-align:center;margin-bottom:15px;font-weight:200}#HQ_page p{text-align:center}body{margin-bottom:-10px}#top_title,#sideMenu{display:none}a:hover{text-decoration:none}.mw-content-ltr ul{padding-top:0;padding-right:0;margin:auto}body{margin-top:0}#wrapper{padding-left:0}#page-wrapper{width:100%;padding:0}.intro{background-size:cover;width:100%;position:relative}.huge{font-size:50px;line-height:normal}
</style>
 
 
<!-- base.css -->
 
<style>
 
body{background-color:#f7f5e6}.navbar-default{background-color:white;border:solid transparent;padding-top:16px}.navbar-nav>li{margin-right:5px;margin-left:5px}.navbar-brand{height:auto!important;padding:0!important;line-height:25px!important;*/}.navbar-toggle{margin-top:25px!important;border-color:rgba(1,1,1,0)!important}.navbar-toggle:hover,.navbar-toggle:focus{background-color:rgba(1,1,1,0)!important}.navbar-default .navbar-nav>.open>a{background-color:white!important;color:green!important}.dropdown-menu>li>a{background-color:white!important}.dropdown-menu>li>a:hover{background-color:white!important;color:green!important}.open{opacity:1!important;z-index:1998;background-color:white}#footer h4{color:white;font-size:25px!important;padding-top:10px;padding-bottom:10px}#footer p{color:grey;padding-top:10px;padding-bottom:10px}.footer-part{padding-bottom:15px;padding-top:15px}#footer a{color:grey;padding-bottom:10px!important;padding-top:10px!important}#footer a:hover,#footer a:focus{color:white;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;-webkit-transition:all .3s;transition:all .3s}#footer{margin-top:200px}
 
</style>
 
 
<!--  home1-0.css  -->
 
 
<style>
 
#MainPic{position:relative;z-index:0;background-size:contain;background-repeat:no-repeat}#bannercontent{height:75%;box-sizing:border-box;margin:auto}#bannercontent img{background-size:cover;width:100%;height:auto}.mask{margin-top:20px;margin-bottom:20px;margin-left:auto;margin-right:auto}.mask img{width:200px;height:200px;cursor:pointer;transition:all .6s}.mask img:hover{transform:scale(1.1)}.texta{position:fixed;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:10000}.textChange{position:absolute;margin:auto;top:10%;bottom:10%;left:0;right:0;background:#FFF;border-radius:.4rem .4rem .4rem .4rem;text-align:center;box-shadow:0 0 20px rgba(0,0,0,0.2)}.textChange img{width:200px;height:200px;margin-top:20px;margin-bottom:20px}.textforchange{padding-bottom:50px;margin-left:auto;padding-top:50px;margin-right:auto;width:300px;border:1px solid rgba(0,0,0,0.5);box-shadow:2px 2px 3px #aaa}.textAnimation{-webkit-animation-name:textscale;-webkit-animation-duration:.5s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:infinite;-webkit-animation-iteration-count:1}@keyframes textscale{0%{transform:scale(0,0)}50%{transform:scale(1.2,1.2)}100%{transform:scale(1,1)}}.vi{visibility:visible!important;display:block!important;width:20px;height:20px;top:0;position:absolute;right:0;background-repeat:no-repeat;background-size:100% 100%;-moz-background-size:100% 100%;-webkit-background-size:100% 100%;background-image:url(https://static.igem.org/mediawiki/2018/3/31/T--Tianjin--close.jpg)}
 
</style>
 
 
<!--  text.css  -->
 
<style>
 
.titleBox{padding-top:200px}.textCon{padding-left:100px;padding-right:100px}.title{text-align:center;font-weight:400;font-family:'Quicksand',sans-serif;text-align:center;border-bottom:0}.title-big{font-size:3em}.title-normal{font-size:2em;margin-bottom:25px;color:#5265f0}.title-small{font-size:1.8em;color:#222;font-family:'Mysteries of Passion Personal Use',sans-serif}.partition{padding-top:130px}.text{margin-top:25px;margin-bottom:50px;font-weight:400!important;font-size:18px!important;line-height:1.5}.picture{margin-top:25px}.navbar-collapse{font-family:'Rounded Rough',sans-serif!important;font-size:20px!important}
 
 
</style>
 
</style>
  
Line 76: Line 30:
 
<script src="https://use.fontawesome.com/597ba5ca72.js"></script>
 
<script src="https://use.fontawesome.com/597ba5ca72.js"></script>
 
<script>
 
<script>
/*$('#top_title').remove();$("#globalWrapper").removeAttr("id");$("#content").removeAttr("id");$("#HQ_page").removeAttr("id");$('.mw-body').removeClass('mw-body');$('.igem_2018_team_mobile_bar').remove();
+
$('#top_title').remove();$("#globalWrapper").removeAttr("id");$("#content").removeAttr("id");$("#HQ_page").removeAttr("id");$('.mw-body').removeClass('mw-body');$('.igem_2018_team_mobile_bar').remove();
 
$('#bodyContent').removeAttr("id");
 
$('#bodyContent').removeAttr("id");
 
$('#mw-content-text').removeAttr("id");
 
$('#mw-content-text').removeAttr("id");
Line 83: Line 37:
 
$('.igem_2018_team_content').removeAttr("class");
 
$('.igem_2018_team_content').removeAttr("class");
 
$('.igem_2018_team_column_wrapper').removeAttr("class");
 
$('.igem_2018_team_column_wrapper').removeAttr("class");
$('.igem_2018_team_menu').remove();*/
+
$('.igem_2018_team_menu').remove();
 
</script>
 
</script>
 
</head>
 
</head>
 
<body>
 
<body>
     <nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="box-shadow: grey 0em -0.7em 2.1em 0.1em;padding-top:16px;">
+
     <nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color:#79acdd;">
 
     <div class="container-fluid">
 
     <div class="container-fluid">
 
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-main-collapse">
 
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-main-collapse">
Line 93: Line 47:
 
         </button>
 
         </button>
 
     <div class="navbar-header">
 
     <div class="navbar-header">
         <a class="navbar-brand" href="https://2018.igem.org/Team:Tianjin">
+
         <div class="navbar-brand" href="https://2018.igem.org/Team:Tianjin">
             <img class="img-responsive" style="float: left;" src="https://static.igem.org/mediawiki/2018/4/45/T--Tianjin--logo.png" height="80" width="80">
+
             <div class="circle" style="background-image:url(https://static.igem.org/mediawiki/2018/4/45/T--Tianjin--logo.png);left: 50px;">
            <div class="navbar-header" style="float:right;padding-top: 25px;margin-right: 5px;">
+
            </div>
        <span style="color: black; font-size: 30px;font-weight: 550;padding-left: 20px;font-family: Cyborg,sans-serif !important"> iGEM</span><br>
+
         </div>
        <span style="color: black; font-size: 15px;font-weight: 600;">Tianjin University</span>
+
    </div>
+
         </a>
+
 
     </div>
 
     </div>
 
         <div class="navbar-collapse navbar-right navbar-main-collapse collapse">
 
         <div class="navbar-collapse navbar-right navbar-main-collapse collapse">
         <ul class="nav navbar-nav navbar-right" style="margin-top: 15px;">
+
         <ul class="nav navbar-nav navbar-right" style="margin: 15px;">
 
             <li class="dropdown">
 
             <li class="dropdown">
 
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
Line 108: Line 59:
 
                     <b class="caret"></b>
 
                     <b class="caret"></b>
 
                 </a>
 
                 </a>
                 <ul class="dropdown-menu">
+
                 <ul class="dropdown-menu" style="left: -22px;">
                     <li><a href="https://2018.igem.org/Team:Tianjin/Description">Background</a></li>
+
                     <li><a href="https://2018.igem.org/Team:Tianjin/Description">Description</a></li>
                     <li><a href="#">Design</a></li>
+
                     <li><a href="https://2018.igem.org/Team:Tianjin/Design">Design</a></li>
                     <li><a href="#">Perspective</a></li>
+
                     <li><a href="https://2018.igem.org/Team:Tianjin/Experiments">Experiments</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:Tianjin/Notebook">Notebook</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:Tianjin/InterLab">InterLab</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:Tianjin/Model">Model</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:Tianjin/Results">Results</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:Tianjin/Demonstrate">Demonstrate</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:Tianjin/Improve">Improve</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:Tianjin/Attributions">Attributions</a></li>
 
                 </ul>
 
                 </ul>
            </li>
 
            <li>
 
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
                    Experiment             
 
                </a>
 
 
             </li>
 
             </li>
 
             <li class="dropdown">
 
             <li class="dropdown">
 
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                     Modeling
+
                     Parts
 
                     <b class="caret"></b>
 
                     <b class="caret"></b>
 
                 </a>
 
                 </a>
                 <ul class="dropdown-menu">
+
                 <ul class="dropdown-menu" style="left: -32px;">
                     <li><a href="#">Overview</a></li>
+
                     <li><a href="https://2018.igem.org/Team:Tianjin/Parts">Parts Overview</a></li>
                     <li><a href="#">Model | One</a></li>
+
                     <li><a href="https://2018.igem.org/Team:Tianjin/Basic_Part">Basic Parts</a></li>
                     <li><a href="#">Model | Two</a></li>
+
                     <li><a href="https://2018.igem.org/Team:Tianjin/Composite_Part">Composite Parts</a></li>
                     <li><a href="#">Integration</a></li>
+
                     <li><a href="https://2018.igem.org/Team:Tianjin/Part_Collection">Part Collection</a></li>
 
                 </ul>
 
                 </ul>
 
             </li>
 
             </li>
             <li class="dropdown">
+
             <li>
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+
                 <a href="https://2018.igem.org/Team:Tianjin/SAFETY" class="dropdown-toggle" data-toggle="dropdown">
                     Human Practice
+
                     Safety             
                    <b class="caret"></b>
+
 
                 </a>
 
                 </a>
                <ul class="dropdown-menu">
 
                    <li><a href="#">Outreach</a></li>
 
                    <li><a href="#">Consultation</a></li>
 
                    <li><a href="#">Public Invesitigation</a></li>
 
                    <li><a href="#">Colaboration</a></li>
 
                </ul>
 
 
             </li>
 
             </li>
 
             <li class="dropdown">
 
             <li class="dropdown">
 
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                     Safety
+
                     Human Practices
 
                     <b class="caret"></b>
 
                     <b class="caret"></b>
 
                 </a>
 
                 </a>
 
                 <ul class="dropdown-menu">
 
                 <ul class="dropdown-menu">
                     <li><a href="#">Biosafety</a></li>
+
                     <li><a href="https://2018.igem.org/Team:Tianjin/Human_Practices">Human Practices</a></li>
                     <li><a href="#">Labsafety</a></li>
+
                     <li><a href="https://2018.igem.org/Team:Tianjin/Public_Engagement">Education</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:Tianjin/Public_Engagement">Engagement</a></li>
 
                 </ul>
 
                 </ul>
 
             </li>
 
             </li>
 
             <li class="dropdown">
 
             <li class="dropdown">
 
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                     About US
+
                     Awards
 
                     <b class="caret"></b>
 
                     <b class="caret"></b>
 
                 </a>
 
                 </a>
                 <ul class="dropdown-menu">
+
                 <ul class="dropdown-menu" style="left: -19px;">
                     <li><a href="#">Members</a></li>
+
                     <li><a href="https://2018.igem.org/Team:Tianjin/Applied_Design">Applied Design</a></li>
                     <li><a href="#">Labs</a></li>
+
                     <li><a href="https://2018.igem.org/Team:Tianjin/Measurement">Measurement</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:Tianjin/Model">Model</a></li>
 +
                    <li><a href="https://2018.igem.org/Team:Tianjin/Measurement">Plant</a></li>
 
                 </ul>
 
                 </ul>
 
             </li>
 
             </li>
             <li class="dropdown">
+
             <li>
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+
                 <a href="https://igem.org/2018_Judging_Form?team=Tianjin" class="dropdown-toggle" data-toggle="dropdown">
                     Attribution
+
                     Judging Form             
                    <b class="caret"></b>
+
 
                 </a>
 
                 </a>
                <ul class="dropdown-menu">
 
                    <li><a href="#">Teamwork</a></li>
 
                    <li><a href="#">Project Support</a></li>
 
                </ul>
 
 
             </li>
 
             </li>
 
         </ul>
 
         </ul>
 
     </div>
 
     </div>
 
    <script type="text/javascript">
 
    $(document).ready(function(){dropdownOpen();navhide()});function dropdownOpen(){var $dropdownLi=$("li.dropdown");$dropdownLi.mouseover(function(){$(this).addClass("open")}).mouseout(function(){$(this).removeClass("open")})}function navhide(){var $navhideul=$("li.dropdown");var $navul=$("nav.navbar");$navhideul.mouseover(function(){$navul.css({"height":"100%","opacity":"0.87"})}).mouseout(function(){$navul.css({"height":"","opacity":"1"})})};
 
    </script>
 
 
 
 
     </div>
 
     </div>
 
     </nav>
 
     </nav>
 
+
     <script type="text/javascript" src="https://2018.igem.org/Team:Tianjin/js/navigation?action=raw&ctype=text/javascript"></script>
<div id="MainPic">
+
    <div id="bannercontent">
+
            <div id="BgChange">
+
                <img src="https://static.igem.org/mediawiki/2018/b/ba/T--Tianjin--2.jpg">
+
            </div>
+
    </div>
+
     </div>
+
 
+
    <div class="texta text1 closeMask" style="visibility: hidden;
+
    display: none;">
+
        <div class="textChange container">
+
            <div class="row">
+
                <img src="https://static.igem.org/mediawiki/2018/a/ac/T--Tianjin--project.jpg" class="img-circle center-block img-thumbnail">
+
                <div class="textforchange">
+
                    <p>
+
                        project<br>
+
                        输入文本内容1<br>
+
                        输入文本内容<br>
+
                        输入文本内容<br>
+
                        输入文本内容<br>
+
                    </p>
+
                </div>
+
            </div>
+
        </div>
+
    </div>
+
    <div class="texta text2 closeMask" style="visibility: hidden;
+
    display: none;">
+
        <div class="textChange container">
+
            <div class="row">
+
                <img src="https://static.igem.org/mediawiki/2018/9/9f/T--Tianjin--part.jpg" class="img-circle center-block img-thumbnail">
+
                <div class="textforchange">
+
                    <p>
+
                        输入文本内容2<br>
+
                        简介一下parts<br>
+
                        输入文本内容<br>
+
                        输入文本内容<br>
+
                    </p>
+
                </div>
+
            </div>
+
        </div>
+
    </div>
+
    <div class="texta text3 closeMask" style="visibility: hidden;
+
    display: none;">
+
        <div class="textChange container">
+
            <div class="row">
+
                <img src="https://static.igem.org/mediawiki/2018/0/06/T--Tianjin--safety.jpg" class="img-circle center-block img-thumbnail">
+
                <div class="textforchange">
+
                    <p>
+
                        输入文本内容3<br>
+
                        简介一下model<br>
+
                        输入文本内容<br>
+
                        输入文本内容<br>
+
                    </p>
+
                </div>
+
            </div>
+
        </div>
+
    </div>
+
    <div class="texta text4 closeMask" style="visibility: hidden;
+
    display: none;">
+
        <div class="textChange container">
+
            <div class="row">
+
                <img src="https://static.igem.org/mediawiki/2018/3/36/T--Tianjin--HP.jpg" class="img-circle center-block img-thumbnail">
+
                <div class="textforchange">
+
                    <p>
+
                        输入文本内容4<br>
+
                        简介HP<br>
+
                        输入文本内容<br>
+
                        输入文本内容<br>
+
                    </p>
+
                </div>
+
            </div>
+
        </div>
+
    </div>
+
    <div class="texta text5 closeMask" style="visibility: hidden;
+
    display: none;">
+
        <div class="textChange container">
+
            <div class="row">
+
                <img src="http://211.81.63.130/cache/11/04/2018.igem.org/5eea9c447b4253a0e3c163a6644ceaef/T--Tianjin--award.jpg" class="img-circle center-block img-thumbnail">
+
                <div class="textforchange">
+
                    <p>
+
                        输入文本内容5<br>
+
                        award<br>
+
                        输入文本内容<br>
+
                        输入文本内容<br>
+
                        输入文本内容<br>
+
                    </p>
+
                </div>
+
            </div>
+
        </div>
+
    </div>
+
    <div class="texta text6 closeMask" style="visibility: hidden;
+
    display: none;">
+
        <div class="textChange container">
+
            <div class="row">
+
                <img src="https://static.igem.org/mediawiki/2018/b/b6/T--Tianjin--judging.png" class="img-circle center-block img-thumbnail">
+
                <div class="textforchange">
+
                    <p>
+
                        输入文本内容6<br>
+
                        judge<br>
+
                        输入文本内容<br>
+
                        输入文本内容<br>
+
                        输入文本内容<br>
+
                    </p>
+
                </div>
+
            </div>
+
        </div>
+
    </div>
+
 
+
 
+
    <div class="container">
+
    <div class="row">
+
        <div class="col-xs-5">
+
            <div class="mask" class="maskPic1">
+
                <a href="javascript:0;" class="maska mask1">
+
                <img src="https://static.igem.org/mediawiki/2018/a/ac/T--Tianjin--project.jpg" class="img-circle center-block">
+
                </a>
+
            </div>
+
            <div class="mask" class="maskPic2">
+
                <a href="javascript:0;" class="maska mask2">
+
                <img src="https://static.igem.org/mediawiki/2018/9/9f/T--Tianjin--part.jpg" class="img-circle center-block">
+
                </a>
+
            </div>
+
            <div class="mask" class="maskPic3">
+
                <a href="javascript:0;" class="maska mask3">
+
                <img src="https://static.igem.org/mediawiki/2018/0/06/T--Tianjin--safety.jpg" class="img-circle center-block">
+
                </a>
+
            </div>
+
        </div>
+
        <div class="col-xs-2">
+
            <img src="">
+
        </div>
+
        <div class="col-xs-5" class="maskPic1">
+
            <div class="mask" class="maskPic4">
+
                <a href="javascript:0;" class="maska mask4">
+
                <img src="https://static.igem.org/mediawiki/2018/3/36/T--Tianjin--HP.jpg" class="img-circle center-block">
+
                </a>
+
            </div>
+
            <div class="mask" class="maskPic5">
+
                <a href="javascript:0;" class="maska mask5">
+
                <img src="http://211.81.63.130/cache/11/04/2018.igem.org/5eea9c447b4253a0e3c163a6644ceaef/T--Tianjin--award.jpg" class="img-circle center-block">
+
                </a>
+
            </div>
+
            <div class="mask" class="maskPic6">
+
                <a href="javascript:0;" class="maska mask6">
+
                <img src="https://static.igem.org/mediawiki/2018/b/b6/T--Tianjin--judging.png" class="img-circle center-block">
+
                </a>
+
            </div>
+
        </div>
+
    </div>
+
 
+
 
+
    <script type="text/javascript">
+
$(document).ready(function(){maskMouseOver()});function maskMouseOver(){$(".texta").each(function(){$(this).on("click",function(event){if($(event.target).is(".closeMask")){event.preventDefault();$(this).css({"visibility":"hidden","display":"none"});$("div.textChange").removeClass("textAnimation");$(document).unbind("mousewheel")}})});var QAQ="I don't want to write like this, but if I use 'for', there is always something wrong.Excuse me.";var mask1=$("a.mask1");var text1=$("div.text1");mask1.on("click",function(event){event.preventDefault();text1.css({"visibility":"visible","display":""});$("div.textChange").addClass("textAnimation");$(document).bind("mousewheel",function(event,delta){return false})});var mask2=$("a.mask2");var text2=$("div.text2");mask2.on("click",function(event){event.preventDefault();text2.css({"visibility":"visible","display":""});$("div.textChange").addClass("textAnimation");$(document).bind("mousewheel",function(event,delta){return false})});var mask3=$("a.mask3");var text3=$("div.text3");mask3.on("click",function(event){event.preventDefault();text3.css({"visibility":"visible","display":""});$("div.textChange").addClass("textAnimation");$(document).bind("mousewheel",function(event,delta){return false})});var mask4=$("a.mask4");var text4=$("div.text4");mask4.on("click",function(event){event.preventDefault();text4.css({"visibility":"visible","display":""});$("div.textChange").addClass("textAnimation");$(document).bind("mousewheel",function(event,delta){return false})});var mask5=$("a.mask5");var text5=$("div.text5");mask5.on("click",function(event){event.preventDefault();text5.css({"visibility":"visible","display":""});$("div.textChange").addClass("textAnimation");$(document).bind("mousewheel",function(event,delta){return false})});var mask6=$("a.mask6");var text6=$("div.text6");mask6.on("click",function(event){event.preventDefault();text6.css({"visibility":"visible","display":""});$("div.textChange").addClass("textAnimation");$(document).bind("mousewheel",function(event,delta){return false})})};
+
    </script>
+
    <script>
+
    var $close ='<div class="texta closeMask vi"></div>';
+
    $('.textChange').append($close); 
+
    </script>
+
    <div></div>
+
 
+
</div>
+
<div id="footer" style="background-color: #111;text-align: center;">
+
        <div class="container">
+
            <div class="row">
+
                <div class="col-sm-4 footer-part">
+
                    <h4>
+
                        Email
+
                    </h4>
+
                    <p>
+
                        <i class="fa fa-envelope fa-lg"></i>
+
                        hebo@tju.edu.cn
+
                    </p>
+
                </div>
+
                <div class="col-sm-4 footer-part">
+
                    <h4>
+
                        Follow us
+
                    </h4>
+
                    <a href="https://twitter.com/iGEMTianjin2017" target="blank" id="facebook" style="padding: 0 0.5em 0 0;">
+
                        <i class="fa fa-facebook-square fa-3x"></i>
+
                    </a>
+
                    <span></span>
+
                    <a href="https://twitter.com/iGEMTianjin2017" target="blank" id="twitter" style="padding: 0 0 0 0.5em;">
+
                        <i class="fa fa-twitter-square fa-3x"></i>
+
                    </a>
+
                </div>
+
                <div class="col-sm-4 footer-part">
+
                    <h4>
+
                        Contact us
+
                    </h4>
+
                    <p>
+
                        <i class="fa fa-map-marker fa-lg"></i>
+
                        Tianjin University
+
                    </p>
+
                </div>
+
            </div>
+
        </div>
+
    </div>
+
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 06:11, 5 October 2018

<!DOCTYPE html> Team:Tianjin - 2018.igem.org