Difference between revisions of "Template:SZU-China/header"

Line 1: Line 1:
−
{{SZU-China/Nav_demo}}
 
 
<html>
 
<html>
−
<style>
 
−
.container-fluid {
 
−
width: 100%;
 
−
padding-right: 0px;
 
−
padding-left: 0px;
 
−
}
 
−
 
−
.col-12 {
 
−
padding-right: 0px;
 
−
padding-left: 0px;
 
−
}
 
−
    a:hover{
 
−
        text-decoration: none;
 
−
    }
 
−
    a:visited{
 
−
        color:white;
 
−
    }
 
−
body {
 
−
   
 
−
    line-height: 0;
 
−
   
 
−
}
 
−
</style>
 
  
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/CSS/Bootstrap&action=raw&ctype=text/css" />
  
−
<body style="font-size: 2vw">
 
−
<style>
 
−
 
−
    .recommand{
 
−
        text-align: center;
 
−
    }
 
  
−
     @font-face {
+
     <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/CSS/Fluent&action=raw&ctype=text/css" />
−
        font-family: "Hollywood";
+
−
        src: url("https://static.igem.org/mediawiki/2018/0/0c/T--SZU-China--Hollywood.ttf") format("truetype");
+
−
    }
+
−
    .container-fluid {
+
−
        width: 100%;
+
−
        padding-right: 0px;
+
−
        padding-left: 0px;
+
−
    }
+
−
    .col-12 {
+
−
        padding-right: 0px;
+
−
        padding-left: 0px;
+
−
    }
+
−
    .col-12 {
+
−
        -ms-flex: 0 0 100%;
+
−
        flex: 0 0 100%;
+
−
        max-width: 100%;
+
−
    }
+
−
    a:hover{
+
−
        text-decoration: none;
+
−
    }
+
−
    a:visited{
+
−
        color:white;
+
−
    }
+
−
</style>
+
  
−
<style>
+
    <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/CSS/FontAwesome&action=raw&ctype=text/css" />
−
#video-carousel-example > a.carousel-control-prev{
+
−
height: 90%;
+
−
}
+
−
#video-carousel-example > a.carousel-control-next{
+
−
height: 90%;
+
−
}
+
−
#video-carousel-example > a.carousel-control-next > span.carousel-control-next-icon{
+
−
width: 30px;
+
−
height: 30px;
+
−
}
+
−
#video-carousel-example > a.carousel-control-prev > span.carousel-control-prev-icon{
+
−
width: 30px;
+
−
height: 30px;
+
−
}
+
−
</style>
+
  
 +
    <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/CSS/Custom&action=raw&ctype=text/css" />
  
−
<div class="container-fluid" style="background-color: #1c1d1f;">
 
  
−
<div class="col-12">
+
    <!--
−
<!--Carousel Wrapper-->
+
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
−
<div id="video-carousel-example" class="carousel slide carousel-fade" data-ride="carousel ">
+
−
<!--Indicators-->
+
−
<ol class="carousel-indicators">
+
−
<li data-target="#video-carousel-example" data-slide-to="0" class="active"></li>
+
−
<li data-target="#video-carousel-example" data-slide-to="1"></li>
+
  
−
</ol>
 
−
<!--/.Indicators-->
 
−
<!--Slides-->
 
−
<div class="carousel-inner" role="listbox">
 
−
<div class="carousel-item active">
 
−
<video style="width: 100%;" class="" autoplay muted>
 
−
<source src="https://static.igem.org/mediawiki/2018/b/b6/T--SZU-China--home.mp4" type="video/mp4" />
 
−
</video>
 
−
</div>
 
−
<div class="carousel-item">
 
−
<video style="width: 100%;" class="" controls muted>
 
−
<source src="https://static.igem.org/mediawiki/2018/5/5d/T--SZU-China--2018igemvideo.mp4" type="video/mp4" />
 
−
</video>
 
−
</div>
 
  
−
</div>
+
<script type="text/javascript" src="js/bootstrap.min.js"></script>
−
<!--/.Slides-->
+
−
<!--Controls-->
+
−
<a class="carousel-control-prev" href="#video-carousel-example" role="button" data-slide="prev">
+
−
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
+
−
<span class="sr-only">Previous</span>
+
−
</a>
+
−
<a class="carousel-control-next" href="#video-carousel-example" role="button" data-slide="next">
+
−
<span class="carousel-control-next-icon" aria-hidden="true"></span>
+
−
<span class="sr-only">Next</span>
+
−
</a>
+
−
<!--/.Controls-->
+
−
</div>
+
−
<!--Carousel Wrapper-->
+
  
−
</div>
+
 +
<script type="text/javascript" src="js/popper.min.js" ></script>
 +
-->
  
  
−
     <div class="col-12">
+
     <script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/JS/jquery3.2.1&action=raw&ctype=text/javascript"></script>
−
        <div class="card">
+
−
            <div class="view" style="position: relative">
+
−
                <div style="position: absolute;top: 22%;left: 13%;line-height: 1.2em">
+
−
                    <div class="recommand">
+
−
                        <span style="color: white">Cockroach carries pathogen and parasites which </span>
+
−
                    </div>
+
−
                    <div class="recommand">
+
−
                        <span style="color: white">are harmful. And can be commonly found in </span>
+
−
                    </div>
+
−
                    <div class="recommand">
+
−
                        <span style="color: white">warm damp area</span>
+
−
                    </div>
+
−
                    <div class="recommand" style="margin-top: 20px;margin-bottom: 20px">
+
−
                        <span style="color: #39643A;font-family: 'Hollywood',sans-serif;font-size: 42pt;">Problem</span>
+
−
                    </div>
+
−
                    <div class="recommand">
+
−
                        <span style="color: white">So this year </span><span style="color:  #39643A;">SZU-China iGEM </span><span style="color: white"> team de-</span>
+
−
                    </div>
+
−
                    <div class="recommand">
+
−
                        <span style="color: white">signed a </span><span style="color:  #39643A;">fungal cockroach terminator </span>
+
−
                    </div>
+
−
                    <div class="recommand">
+
−
                        <span style="color: #39643A">system</span><span style="color: white"> based on Metarhizium anisopliae</span>
+
−
                    </div>
+
−
                    <div style="margin-top: 20px;">
+
−
                        <div style="margin:0 auto;width:9.5em;height: 1.3em;line-height: 1.2em;  background-color: #39643A;text-align: center;border-radius: 25px"><a href="https://2018.igem.org/Team:SZU-China/Description" style="color: white;font-size: 0.9em;">click and learn more</a></div>
+
−
                    </div>
+
−
                </div>
+
−
                <img class="card-img-bottom" src="https://static.igem.org/mediawiki/2018/4/45/T--SZU-China--1.png">
+
−
            </div>
+
  
−
        </div>
+
    <script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/JS/bootstrap&action=raw&ctype=text/javascript"></script>
  
−
        <div class="card" style="position:relative">
+
    <script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/JS/bootstrap.bundle&action=raw&ctype=text/javascript"></script>
−
            <div class="view" onclick="window.location.href='https://2018.igem.org/Team:SZU-China/Design'">
+
−
                <div style="position: absolute;top: 50%;left: 49%">
+
−
                    <div class="recommand">
+
−
                        <span style="color: black">Our system consists of</span><span style="color: #8B072E;"> three </span><span style="color: black">parts</span>
+
−
                    </div>
+
−
                    <div class="recommand">
+
−
                        <span style="color: #8B072E;font-family: 'Hollywood',sans-serif;font-size: 1.75em;">Principle</span>
+
−
                    </div>
+
−
                    <div class="recommand">
+
−
                        <span style="color: black">Want to know how we build our system? </span>
+
−
                    </div>
+
−
                    <div class="recommand">
+
−
                        <span style="color: black">Watch the video and learn more</span>
+
−
                    </div>
+
−
                </div>
+
−
                <img class="card-img-bottom" src="https://static.igem.org/mediawiki/2018/6/6b/T--SZU-China--2.png">
+
−
                <div class="video" style="position:absolute;top:15.98%;left:6.4%">
+
−
                    <video width="37.41%" height="62.37%" controls="">
+
−
                        <source id="video" src="https://static.igem.org/mediawiki/2018/e/e4/T--SZU-China--description_min.mp4" type="video/mp4">
+
−
                    </video>
+
−
                </div>
+
  
−
            </div>
+
    <script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/JS/popper&action=raw&ctype=text/javascript"></script>
  
−
        </div>
+
    <script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:SZU-China/JS/smooth-scroll&action=raw&ctype=text/javascript"></script>
  
 +
    <title></title>
 +
</head>
  
−
        <div class="card">
+
<style>
−
            <div class="view" style="position: relative">
+
    #sideMenu, #top_title, #toc, .toc {
−
                <div style="position: absolute;top: 16%;left: 18%">
+
        display: none;
−
                    <div class="recommand">
+
         }
−
                        <span style="color: white">We constructed an </span><span style="color: #5E3723;"> epidemic model </span><span style="color: white">to</span>
+
         #content {
−
                    </div>
+
             width: 100%;
−
                    <div class="recommand">
+
            margin: 0px;
−
                        <span style="color: white">estimate the efficiency of our product</span>
+
            padding: 0px;
−
                    </div>
+
            background: #FFF;
−
                    <div style="margin-top: 10px;margin-bottom: 20px" class="recommand">
+
        }
−
                        <span style="color: #5E3723;font-family: 'Hollywood',sans-serif;font-size: 1.75em;margin-top: 10px">Modeling</span>
+
−
                    </div>
+
−
                    <div class="recommand">
+
−
                        <span style="color: white">and </span><span style="color: #5E3723;">statistic model </span><span style="color: white">helping us get sci-</span>
+
−
                    </div>
+
−
                    <div class="recommand">
+
−
                        <span style="color: white">entific results of simulation experiment</span>
+
−
                    </div>
+
−
                    <div style="margin-top: 20px;">
+
−
                        <div style="margin:0 auto;width:9.5em;height: 1.3em;line-height: 1.2em;  background-color: #5E3723;text-align: center;border-radius: 25px"><a href="https://2018.igem.org/Team:SZU-China/Model" style="color: white;font-size: 0.9em;">click and learn more</a></div>
+
−
                    </div>
+
−
                </div>
+
−
                <img class="card-img-bottom" src="https://static.igem.org/mediawiki/2018/a/a9/T--SZU-China--3.png">
+
−
            </div>
+
−
         </div>
+
−
         <div class="card">
+
−
             <div class="view" style="position: relative">
+
−
                <div style="position: absolute;font-size: 0.83em;top: 24%;left: 40%">
+
−
                    <div style="margin-top: 10px;" class="recommand">
+
−
                        <span style="color: #324452;font-family: 'Hollywood',sans-serif;font-size: 1.75em;">Application</span>
+
−
                    </div>
+
−
                    <div class="recommand">
+
−
                        <span style="color: black">To put our lab work </span><strong><span style="color: #324452;">into market</span></strong><span style="color: black"> as soon ,we de-</span>
+
−
                    </div>
+
−
                    <div class="recommand">
+
−
                        <span style="color: black">signed models which can contain our Metarhizium </span>
+
−
                    </div>
+
−
                    <div class="recommand">
+
−
                        <span style="color: black">anisopliae and can lure cockroaches simultaneous-</span>
+
−
                    </div>
+
  
−
                    <div class="recommand">
 
−
                        <span style="color: black">ly. It is also </span><strong><span style="color: #324452;">cheap and convenient </span></strong><span style="color: black">to use for the </span>
 
−
                    </div>
 
−
                    <div class="recommand">
 
−
                        <span style="color: black">customers</span>
 
−
                    </div>
 
−
                    <div style="margin-top: 20px;">
 
−
                        <div style="margin:0 auto;width:9.5em;height: 1.3em;line-height: 1.2em;  background-color: #324452;text-align: center;border-radius: 25px"><a href="https://2018.igem.org/Team:SZU-China/Model" style="color: white;font-size: 0.9em;">click and learn more</a></div>
 
−
                    </div>
 
−
                </div>
 
−
                <img class="card-img-bottom" src="https://static.igem.org/mediawiki/2018/a/ae/T--SZU-China--4.png">
 
−
            </div>
 
−
        </div>
 
−
        <div class="card">
 
−
            <div class="view" style="position: relative">
 
−
                <div style="position: absolute;top: 23%;left: 20%">
 
−
                    <div class="recommand">
 
−
                        <span style="color: white">To figure out whether our projects are </span>
 
−
                    </div>
 
−
                    <div class="recommand">
 
−
                        <span style="color: white">responsible and good for the world</span>
 
−
                    </div>
 
−
                    <div style="margin-top: 20px;margin-bottom: 25px;">
 
−
                        <span style="color: #8B072E;font-family: 'Hollywood',sans-serif;font-size: 1.5em;padding-left: 137px">human practice</span>
 
−
                    </div>
 
−
                    <div class="recommand">
 
−
                        <span style="color: white">It helps us get much </span><span style="color: #8B072E">feedback</span><span style="color: white"> and </span><span style="color: #8B072E">meet</span>
 
−
                    </div>
 
−
                    <div class="recommand">
 
−
                        <span style="color: #8B072E;">more need</span><span style="color: white"> of the social.</span>
 
−
                    </div>
 
−
                    <div style="margin-top: 20px;">
 
−
                        <div style="margin:0 auto;width:9.5em;height: 1.3em;line-height: 1.2em;  background-color: #8B072E;text-align: center;border-radius: 25px"><a href="https://2018.igem.org/Team:SZU-China/Human_Practices" style="color: white;font-size: 0.9em;">click and learn more</a></div>
 
−
                    </div>
 
−
                </div>
 
−
                <img class="card-img-bottom" src="https://static.igem.org/mediawiki/2018/b/b7/T--SZU-China--5.png">
 
−
            </div>
 
−
        </div>
 
−
        <div class="card">
 
−
            <div class="view" style="position: relative">
 
−
                <div style="position: absolute;top: 20%;left: 42%">
 
−
                    <div class="recommand">
 
−
                        <span style="color: black">Finding the important to connect the public </span>
 
−
                    </div>
 
−
                    <div class="recommand">
 
−
                        <span style="color: black">with iGEM,</span><span style="color: #324452">we create</span>
 
−
                    </div>
 
−
                    <div style="margin-top: 10px;margin-bottom: 10px;" class="recommand">
 
−
                        <span style="color: #324452;font-family: 'Hollywood',sans-serif;font-size: 1.4em;">Applet</span>
 
−
                    </div>
 
−
                    <div class="recommand">
 
−
                        <span style="color: black">It a </span><strong><span style="color: #324452">brand new app</span></strong><span style="color: black"> which provide timely </span>
 
−
                    </div>
 
−
                    <div class="recommand">
 
−
                        <span style="color: black">feedback,sense of participation&acco-</span>
 
−
                    </div>
 
−
                    <div class="recommand">
 
−
                        <span style="color: black">many and team promotion</span>
 
−
                    </div>
 
−
                    <div style="margin-top: 20px;">
 
−
                        <div style="margin:0 auto;width:9.5em;height: 1.3em;line-height: 1.2em;  background-color: #324452;text-align: center;border-radius: 25px"><a href="https://2018.igem.org/Team:SZU-China/Applet" style="color: white;font-size: 0.9em;">click and learn more</a></div>
 
−
                    </div>
 
−
                </div>
 
−
                <img class="card-img-bottom" src="https://static.igem.org/mediawiki/2018/9/9e/T--SZU-China--6.png">
 
−
            </div>
 
−
        </div>
 
−
        <div class="card">
 
−
            <div class="view" style="position: relative">
 
−
                <div style="position: absolute;top: 8%;width: 100%">
 
  
−
                    <div class="recommand">
+
#globalWrapper {
−
                        <span style="color: #39643A;font-family: 'Hollywood',sans-serif;">conclusion</span>
+
    font-size: 100%;
−
                    </div>
+
}
−
                    <div class="recommand">
+
.dropdown-menu {
−
                        <span style="color: white">All the data prove that our project is possible to </span><strong><span style="color: #39643A">realize</span></strong>
+
    width: 160px !important;
−
                    </div>
+
   
−
                    <div style="margin-top: 20px;">
+
}
−
                        <div style="margin:0 auto;width:9.5em;height: 1.3em;line-height: 1.2em;  background-color: #39643A;text-align: center;border-radius: 25px"><a href="#" style="color: white;font-size: 0.9em;">click and learn more</a></div>
+
−
                    </div>
+
−
                </div>
+
−
            </div>
+
−
            <img class="card-img-bottom" src="https://static.igem.org/mediawiki/2018/a/ae/T--SZU-China--7.png">
+
−
            </div>
+
−
        </div>
+
−
    </div>
+
  
  
−
<!-- Footer -->
+
#HQ_page p{
−
<footer class="page-footer font-small pt-4" style="background-color: #1c1c1c;">
+
font-size: 20px;
 +
color: #393939;
 +
padding-top: -20px;
 +
}
  
−
  <!-- Footer Elements -->
+
body{
−
  <div class="container">
+
padding-top: -20px;
 +
}
  
−
    <!--Grid row-->
+
h2 h3 h4 {
−
    <div class="row">
+
font-weight: bold;
 +
}
  
−
      <!--Grid column-->
+
.row {
−
      <div class="col-lg-2 col-md-12 mb-4">
+
padding: 36px;
 +
}
 +
hr {
 +
width: auto;
 +
border-top: 1px solid rgba(0, 0, 0, 0.125);
 +
}
  
−
        <!--Image-->
+
    </style>
−
        <div class="view overlay z-depth-1-half">
+
−
          <img src="https://static.igem.org/mediawiki/2017/0/08/2017SZUChina-sponsor1.jpg" class="img-fluid" alt="">
+
−
         
+
−
        </div>
+
  
−
      </div>
+
<style>
−
      <!--Grid column-->
+
    .header-nav {
 +
position: fixed;
 +
top: 16px;
 +
left: 0;
 +
width: 100%;
 +
padding-top: 0;
 +
padding-bottom: 5px;
 +
background-color: #020202;
 +
box-shadow: 0 0 6px 0 #333;
 +
opacity: 0.7;
 +
z-index: 1000;
 +
-webkit-transition: all 0.3s;
 +
transition: all 0.3s;
 +
text-align: center;
 +
height: 45px;
 +
}
 +
.header-nav:hover{
 +
opacity: 1;
 +
}
 +
.nav-item1{
 +
font-size: 20px;
 +
font-weight: 700;
 +
padding-right: 15px;
 +
padding-left: 15px;
  
−
      <!--Grid column-->
+
}
−
      <div class="col-lg-2 col-md-6 mb-4">
+
.nav-sub-item{
 +
font-size: 20px;
 +
padding: 5px 10px;
 +
top:0;
 +
text-align: center
 +
}
 +
.sub_menu{
 +
position: absolute;
 +
z-index: 1000;
 +
float: left;
 +
min-width: 160px;
 +
top: 39px;
 +
list-style: none;
 +
font-size: 12px;
 +
background-color: #464646;
 +
border: 1px solid #cccccc;
 +
color: #fff;
 +
border: 1px solid rgba(0, 0, 0, 0.15);
 +
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 +
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 +
-webkit-background-clip: padding-box;
 +
background-clip: padding-box;
 +
}
 +
.nav-sub-item:hover{
 +
background-color: rgb(171,171,171);
 +
}
 +
.nav-sub-item a{
 +
text-decoration: none;
 +
color: #FFFFFF !important;
 +
 +
}
 +
.nav-1-item{
 +
font-size: 16px;
 +
font-weight: 700;
 +
padding: 0px 11px;
  
−
        <!--Image-->
+
}
−
        <div class="view overlay z-depth-1-half">
+
.nav-1-item{
−
          <img src="https://static.igem.org/mediawiki/2017/d/d4/2017SZUChina-sponsor2.jpg" class="img-fluid" alt="">
+
display:block;
−
         
+
height: 42px;
−
        </div>
+
float: right;
 +
}
 +
a:not([href]):not([tabindex]) {
 +
    color: #fff;
 +
  }
 +
#mw-content-text > div:nth-child(2) > div > a:nth-child(2){
 +
color: #fff !important;
 +
}
 +
#mw-content-text > div:nth-child(2) > div > a:nth-child(1){
 +
color: #fff !important;
 +
}
 +
#header_list > a:nth-child(5){
 +
color: #fff !important;
 +
}
 +
#header_list > a:nth-child(6){
 +
color: #fff !important;
 +
}
 +
#mw-content-text > div:nth-child(2) > a > span{
 +
color: #fff !important;
 +
}
 +
#content{
 +
margin-top: -18px;
 +
}
  
−
      </div>
+
#bodyContent
−
      <!--Grid column-->
+
{
 +
margin-top: -18px;
 +
}
  
−
      <!--Grid column-->
 
−
      <div class="col-lg-2 col-md-6 mb-4">
 
  
−
         <!--Image-->
+
.animated {
−
         <div class="view overlay z-depth-1-half">
+
    -webkit-animation-duration: 1s;
−
          <img src="https://static.igem.org/mediawiki/2017/d/d5/2017SZUChina-sponsor3.jpg" class="img-fluid" alt="">
+
    animation-duration: 1s;
−
         
+
    -webkit-animation-fill-mode: both;
−
         </div>
+
    animation-fill-mode: both;
 +
}
 +
.bounce {
 +
    -webkit-animation-name: bounce;
 +
    animation-name: bounce;
 +
    -webkit-transform-origin: center bottom;
 +
    transform-origin: center bottom;
 +
}
 +
@keyframes bounce {
 +
    0%, 20%, 53%, 80%, 100% {
 +
         -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 +
         transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 +
        -webkit-transform: translate3d(0,0,0);
 +
        transform: translate3d(0,0,0);
 +
    }
 +
    40%, 43% {
 +
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 +
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 +
        -webkit-transform: translate3d(0, -30px, 0);
 +
        transform: translate3d(0, -30px, 0);
 +
    }
 +
    70% {
 +
         -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 +
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 +
        -webkit-transform: translate3d(0, -15px, 0);
 +
        transform: translate3d(0, -15px, 0);
 +
    }
 +
    90% {
 +
        -webkit-transform: translate3d(0,-4px,0);
 +
        transform: translate3d(0,-4px,0);
 +
    }
 +
}
  
−
      </div>
 
−
      <!--Grid column-->
 
  
−
      <!--Grid column-->
+
</style>
−
      <div class="col-lg-2 col-md-12 mb-4">
+
  
−
        <!--Image-->
 
−
        <div class="view overlay z-depth-1-half">
 
−
          <img src="https://static.igem.org/mediawiki/2017/1/1e/2017SZUChina-sponsor4.jpg" class="img-fluid" alt="">
 
−
         
 
−
        </div>
 
  
−
      </div>
+
<body>
−
      <!--Grid column-->
+
<div style="height: 56px;background-color: black;opacity: 0.7;padding: 0 1rem;position:relative;z-index:1000;">
−
 
+
<a class="navbar-brand" href="https://2018.igem.org/Team:SZU-China">
−
      <!--Grid column-->
+
<img src="https://static.igem.org/mediawiki/2018/1/15/T--SZU-China--logo.png" height="50" alt="Route 66 in navbar">
−
      <div class="col-lg-2 col-md-6 mb-4">
+
<span class="d-inline-block ml-2">SZU-China</span>
−
 
+
</a>
−
         <!--Image-->
+
<div style="height: 56px;width: 60%;float: right;text-align: right;padding-top: 14px">
−
         <div class="view overlay z-depth-1-half">
+
<a class="nav-1-item" style="color: white;" href="https://2018.igem.org/Team:SZU-China/Applet">Applet</a>
−
          <img src="https://static.igem.org/mediawiki/2017/a/a3/2017SZUChina-sponsor5.jpg" class="img-fluid" alt="">
+
<a class="nav-1-item father" id="nav1_5" data-id="5" style="color: white;" href="https://2018.igem.org/Team:SZU-China/Human_Practices">Human Practices</a>
−
       
+
<a class="nav-1-item father" id="nav1_4" data-id="4">Experiment</a>
−
         </div>
+
<a class="nav-1-item father" id="nav1_3" data-id="3">Project</a>
−
 
+
<a class="nav-1-item father" id="nav1_2" data-id="2">Team</a>
−
      </div>
+
<a class="nav-1-item father" id="nav1_1" data-id="1">Awards</a>
−
      <!--Grid column-->
+
</div>
 +
    <div class="sub_menu son" id="sub1" style="display: none;left: 21%;">
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Achievement">Achievement</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Applied_Design">Applied Design</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Human_Practices">Human Practices</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Public_Engagement">Public Engagement</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Model">Model</a></div>
 +
    </div>
 +
    <div class="sub_menu son" id="sub2" style="display: none;left: 28.6%">
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Team">Team Members</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Collaborations">Collaborations</a></div>
 +
         <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Attributions">Attributions</a></div>
 +
    </div>
 +
    <div class="sub_menu son" id="sub3" style="display: none;left: 35.6%">
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Description">Description</a></div>
 +
         <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Demonstrate">Demonstrate</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Model">Model</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Improve">Improve</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Parts">Parts</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Safety">Safety</a></div>
 +
    </div>
 +
    <div class="sub_menu son" id="sub4" style="display: none;left: 44.3%">
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Design">Design</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Procedure">Procedure</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Results">Results</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/InterLab">InterLab</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Notebook">Notebook</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Protocol">Protocol</a></div>
 +
    </div>
 +
    <div class="sub_menu son" id="sub5" style="display: none;left: 44.3%">
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Applet">Applet</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Meetup">Meetup</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Investigation">Investigation</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Simulation">Simulation</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Public_Engagement">Education &#38; Public engagement</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Prospect">Prospect</a></div>
 +
    </div>
 +
</div>
 +
<div class="header-nav" style="text-align: center;display: none">
 +
<div style="width: 100%;height: 45px;text-align: center;" id="header_list">
 +
<a class="nav-item1" id="nav0" style="color: white;" href="https://2018.igem.org/Team:SZU-China">Home</a>
 +
<a class="nav-item1 nav-father" style="display:inline-block;height:45px" id="nav1" data-id="1">Awards</a>
 +
<a class="nav-item1 nav-father" style="display:inline-block;height:45px" id="nav2" data-id="2">Team</a>
 +
<a class="nav-item1 nav-father" style="display:inline-block;height:45px" id="nav3" data-id="3">Project</a>
 +
<a class="nav-item1 nav-father" style="display:inline-block;height:45px" id="nav4" data-id="4">Experiment</a>
 +
<a class="nav-item1 nav-father" style="display:inline-block;height:45px" id="nav5" data-id="5" style="color: white;" href="https://2018.igem.org/Team:SZU-China/Human_Practices">Human Practices</a>
 +
<a class="nav-item1" style="color: white;" href="https://2018.igem.org/Team:SZU-China/Applet">Applet</a>
 +
</div>
 +
    <div class="sub_menu nav_son" id="header_nav1" style="display: none;left: 21%;">
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Achievement">Achievement</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Applied_Design">Applied Design</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Human_Practices">Human Practices</a></div>
 +
         <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Public_Engagement">Public Engagement</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Model">Model</a></div>
 +
    </div>
 +
    <div class="sub_menu nav_son" id="header_nav2" style="display: none;left: 28.6%">
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Team">Team Members</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Collaborations">Collaborations</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Attributions">Attributions</a></div>
 +
    </div>
 +
    <div class="sub_menu nav_son" id="header_nav3" style="display: none;left: 35.6%">
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Description">Description</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Demonstrate">Demonstrate</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Model">Model</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Improve">Improve</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Parts">Parts</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Safety">Safety</a></div>
 +
    </div>
 +
    <div class="sub_menu nav_son" id="header_nav4" style="display: none;left: 44.3%">
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Design">Design</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Procedure">Procedure</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Results">Results</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/InterLab">InterLab</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Notebook">Notebook</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Protocol">Protocol</a></div>
 +
    </div>
 +
    <div class="sub_menu nav_son" id="header_nav5" style="display: none;left: 44.3%">
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Applet">Applet</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Meetup">Meetup</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Investigation">Investigation</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Simulation">Simulation</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Public_Engagement">Education&Public engagement</a></div>
 +
        <div class="nav-sub-item"><a href="https://2018.igem.org/Team:SZU-China/Prospect">Prospect</a></div>
 +
    </div>
 +
</div>
 +
<script>
 +
    for(i=1;i<=5;i++){
 +
        $("#sub"+i).attr("style","left:" + document.getElementById("nav1_"+i).getBoundingClientRect().left+"px;display:none");
 +
    }
 +
    $(".nav-father").hover(function(){
 +
        $("#header_nav"+$(this).data("id")).show();
 +
        $("#header_nav"+$(this).data("id")).attr("style","left:" + document.getElementById("nav"+$(this).data("id")).getBoundingClientRect().left+"px;");
 +
    },function(){
 +
        $("#header_nav"+$(this).data("id")).hide();
 +
    });
 +
    $(".nav_son").hover(function(){
 +
        $(this).show();
 +
    },function(){
 +
        $(this).hide();
 +
    });
 +
    $(".father").hover(function(){
 +
        $("#sub"+$(this).data("id")).show();
 +
    },function(){
 +
        $("#sub"+$(this).data("id")).hide();
 +
    });
 +
    $(".son").hover(function(){
 +
        $(this).show();
 +
    },function(){
 +
        $(this).hide();
 +
    });
 +
</script>
  
 +
    <script type="text/javascript">
 +
        window.onscroll = function () {
 +
            var t = document.documentElement.scrollTop || document.body.scrollTop;
 +
            if (t >= 56) {
 +
                $(".header-nav").show();
 +
                $("#header_list").addClass("animated animation-done bounce");
 +
            } else {
 +
                $(".header-nav").hide();
 +
            }
 +
            if (t >= 600) {
 +
                $("#p1").removeClass("in").addClass("out");
 +
                $("#ti").show();
 +
            } else {
 +
                $("#p1").removeClass("out").addClass("in");
 +
                $("#ti").hide();
 +
            }
 +
        };
 
      
 
      
  
−
    </div>
+
      $("#nav1_1").hover(function () {
−
    <!--Grid row-->
+
            $("#sub1").show();
 +
            $("#sub1").attr("style", "left:" + document.getElementById("nav1_1").getBoundingClientRect().left +
 +
                "px;top:" + (document.getElementById("nav1_1").getBoundingClientRect().top + 22) + "px");
 +
        }, function () {
 +
            $("#sub1").hide();
 +
        });
 +
        $("#nav1_2").hover(function () {
 +
            $("#sub2").show();
 +
            $("#sub2").attr("style", "left:" + document.getElementById("nav1_2").getBoundingClientRect().left +
 +
                "px;top:" + (document.getElementById("nav1_1").getBoundingClientRect().top + 22) + "px");
 +
        }, function () {
 +
            $("#sub2").hide();
 +
        });
 +
        $("#nav1_3").hover(function () {
 +
            $("#sub3").show();
 +
            $("#sub3").attr("style", "left:" + document.getElementById("nav1_3").getBoundingClientRect().left +
 +
                "px;top:" + (document.getElementById("nav1_1").getBoundingClientRect().top + 22) + "px");
 +
        }, function () {
 +
            $("#sub3").hide();
 +
        });
 +
        $("#nav1_4").hover(function () {
 +
            $("#sub4").show();
 +
            $("#sub4").attr("style", "left:" + document.getElementById("nav1_4").getBoundingClientRect().left +
 +
                "px;top:" + (document.getElementById("nav1_1").getBoundingClientRect().top + 22) + "px");
 +
        }, function () {
 +
            $("#sub4").hide();
 +
        });
 +
        $("#nav1_5").hover(function () {
 +
            $("#sub5").show();
 +
            $("#sub5").attr("style", "left:" + document.getElementById("nav1_5").getBoundingClientRect().left +
 +
                "px;top:" + (document.getElementById("nav1_1").getBoundingClientRect().top + 22) + "px");
 +
        }, function () {
 +
            $("#sub5").hide();
 +
        });
  
−
  </div>
 
−
  <!-- Footer Elements -->
 
  
−
  <!-- Copyright -->
+
        $("#nav1").hover(function () {
−
  <div style="color: white;" class="footer-copyright text-center py-3">© 2018 Copyright:
+
            $("#sub1").show();
−
    <a style="color: white;" href="https://2018.igem.org/Team:SZU-China">SZU-China</a>
+
            $("#sub1").attr("style", "left:" + document.getElementById("nav1").getBoundingClientRect().left +
−
  </div>
+
                "px;top:" + (document.getElementById("nav1").getBoundingClientRect().top + 11 + document.documentElement
−
  <!-- Copyright -->
+
                    .scrollTop) + "px");
 +
        }, function () {
 +
            $("#sub1").hide();
 +
        });
 +
        $("#sub1").hover(function () {
 +
            $("#sub1").show();
 +
        }, function () {
 +
            $("#sub1").hide();
 +
        });
 +
        $("#nav2").hover(function () {
 +
            $("#sub2").show();
 +
            $("#sub2").attr("style", "left:" + document.getElementById("nav2").getBoundingClientRect().left +
 +
                "px;top:" + (document.getElementById("nav2").getBoundingClientRect().top + 11 + document.documentElement
 +
                    .scrollTop) + "px");
 +
        }, function () {
 +
            $("#sub2").hide();
 +
        });
 +
        $("#sub2").hover(function () {
 +
            $("#sub2").show();
 +
        }, function () {
 +
            $("#sub2").hide();
 +
        });
 +
        $("#nav3").hover(function () {
 +
            $("#sub3").show();
 +
            $("#sub3").attr("style", "left:" + document.getElementById("nav3").getBoundingClientRect().left +
 +
                "px;top:" + (document.getElementById("nav3").getBoundingClientRect().top + 11 + document.documentElement
 +
                    .scrollTop) + "px");
 +
        }, function () {
 +
            $("#sub3").hide();
 +
        });
 +
        $("#sub3").hover(function () {
 +
            $("#sub3").show();
 +
        }, function () {
 +
            $("#sub3").hide();
 +
        });
 +
        $("#nav4").hover(function () {
 +
            $("#sub4").show();
 +
            $("#sub4").attr("style", "left:" + document.getElementById("nav4").getBoundingClientRect().left +
 +
                "px;top:" + (document.getElementById("nav4").getBoundingClientRect().top + 11 + document.documentElement
 +
                    .scrollTop) + "px");
 +
        }, function () {
 +
            $("#sub4").hide();
 +
        });
 +
        $("#sub4").hover(function () {
 +
            $("#sub4").show();
 +
        }, function () {
 +
            $("#sub4").hide();
 +
        });
 +
        $("#nav5").hover(function () {
 +
            $("#sub5").show();
 +
            $("#sub5").attr("style", "left:" + document.getElementById("nav5").getBoundingClientRect().left +
 +
                "px;top:" + (document.getElementById("nav5").getBoundingClientRect().top + 11 + document.documentElement
 +
                    .scrollTop) + "px");
 +
        }, function () {
 +
            $("#sub5").hide();
 +
        });
 +
        $("#sub4").hover(function () {
 +
            $("#sub5").show();
 +
        }, function () {
 +
            $("#sub5").hide();
 +
        });
  
−
</footer>
+
    </script>
−
<!-- Footer -->
+
  
  
−
</body>
 
  
−
<script>
+
 
−
$('.carousel').carousel({
+
</body>
−
interval: false
+
−
});
+
−
</script>
+
  
 
</html>
 
</html>

Revision as of 22:44, 17 October 2018