Difference between revisions of "Team:WHU-China"

Line 1: Line 1:
 +
{{WHU-China}}
 
<html>
 
<html>
<style>
 
body{
 
  margin:17px 0 0 0;
 
}
 
/*DISABLE DEFAULT DESIGN*/
 
#bodyContent{
 
  min-width:1024px;
 
  font-family:"Arial Unicode MS";
 
}
 
#top_menu_under{
 
  display:none;
 
}
 
#content{
 
  width: 100%;
 
  margin: 0;
 
  padding: 0;
 
}
 
  
#sideMenu{
+
<head>
  display:none;
+
<style type="text/css">
}
+
  
#top_title{
+
html {
  display:none;
+
}
+
 
+
#globalWrapper{
+
  padding-bottom: 0;
+
}
+
#top_menu_inside .submenu{
+
  padding-top:0px;
+
}
+
#header ul{
+
  list-style-image:none;
+
  list-style-type:none;
+
}
+
#contents ul{
+
  margin-left:0px;
+
}
+
#contents li{
+
  font-size:17px;
+
}
+
 
+
/*---------------------- */
+
 
+
/*menu*/
+
 
+
#header{
+
  position:relative;
+
  width: 100%;
+
  min-width: 1024px;
+
  /*width: 1366px;*/
+
  height: 72px;
+
  margin: 0 auto;
+
  /*border: 1px solid #000;*/
+
  text-align: center;
+
  background-color: #00aeef;
+
  opacity: 0.7;
+
  z-index:2;
+
}
+
#header ul{
+
  /*list-style-type: none;*/
+
  /*margin: 0;*/
+
  padding: 0;
+
}
+
#nav-wrapper{
+
  width: 1300px;
+
  margin: 0 auto;
+
}
+
.nav {
+
  text-align:center;
+
 
+
  height:72px;
+
  position: relative;
+
  left: 0;
+
}
+
.nav ul {
+
 
+
  margin: 0 auto;
+
  list-style-type: none;
+
  font-size:17px;
+
}
+
.nav ul li{
+
  float: left;
+
  width: 110px;
+
  margin: 0;
+
  /*border-right: 1px solid #e6e4e4;*/
+
  box-sizing: border-box;
+
  /*text-indent:-9999px;*/
+
}
+
.nav ul li:last-child {
+
  border-right: none;
+
}
+
.nav ul li a{
+
  display: block;
+
  width: 100%;
+
  height:72px;
+
  line-height:72px;
+
color:#fff;
+
white-space:nowrap;
+
 
+
+
}
+
 
+
 
+
#nv0 a{
+
  background: url(https://static.igem.org/mediawiki/2017/e/e1/WHU-China-logo.png);
+
  background-repeat: no-repeat;
+
  background-position: center;
+
  background-size:cover;
+
}
+
#nv1 > a{background: url();}
+
#nv2 > a{background: url();}
+
#nv3 > a{background: url();}
+
#nv4 > a{background: url();}
+
#nv5 > a{background: url();}
+
#nv6 > a{background: url();}
+
#nv7 > a{background: url();}
+
#nv8 > a{background: url();}
+
#nv9 > a{background: url();}
+
 
 
#nv11  {background-image: url();}
+
    background-position: center center;
#nv12  {background-image: url();}
+
    background-repeat: no-repeat;
#nv13  {background-image: url();}
+
    background-attachment: fixed;
#nv14  {background-image: url();}
+
    background-size: cover;
#nv15  {background-image: url();}
+
    height:1000px;
#nv16  {background-image: url();}
+
 
 
+
#nv21  {background-image: url();}
+
#nv22  {background-image: url();}
+
#nv23  {background-image: url();}
+
+
#nv31  {background-image: url();}
+
#nv32  {background-image: url();}
+
#nv33  {background-image: url();}
+
+
#nv41  {background-image: url();}
+
#nv42  {background-image: url();}
+
 
+
#nv51  {background-image: url();}
+
#nv52  {background-image: url();}
+
 
+
#nv61  {background-image: url();}
+
#nv62  {background-image: url();}
+
#nv63  {background-image: url();}
+
 
+
#nv71  {background-image: url();}
+
#nv72  {background-image: url();}
+
+
#nv81  {background-image: url();}
+
#nv82  {background-image: url();}
+
#nv83  {background-image: url();}
+
+
#nv91  {background-image: url();}
+
#nv92  {background-image: url();}
+
#nv93  {background-image: url();}
+
+
+
#nv1 > a:hover{background-position: 0 -72px;}
+
#nv2 > a:hover{background-position: 0 -72px;}
+
#nv3 > a:hover{background-position: 0 -72px;}
+
#nv4 > a:hover{background-position: 0 -72px;}
+
#nv5 > a:hover{background-position: 0 -72px;}
+
#nv6 > a:hover{background-position: 0 -72px;}
+
#nv7 > a:hover{background-position: 0 -72px;}
+
#nv8 > a:hover{background-position: 0 -72px;}
+
#nv9 > a:hover{background-position: 0 -72px;}
+
 
+
 
+
.nv > li > ul {
+
  width:121px;
+
  position: absolute;
+
  visibility:hidden;
+
 
}
 
}
.nv > li:hover > ul{
 
visibility: visible;
 
 
}
 
 
.nv > li > ul > li{
 
  float:inherit;
 
  height:0px;
 
  transition:height 0.5s;
 
  opacity:0.7;
 
  background-color:#000;
 
}
 
 
.nv > li > ul > li:hover{
 
  opacity:0.9;
 
background-color:#00aeef;}
 
 
.nv > li:hover > ul > li{
 
  height:48px;
 
}
 
 
.nv > li > ul > li  a{
 
  height:0px;
 
  transition:height 0.5s;
 
 
}
 
 
.nv > li:hover > ul > li  a{
 
  height:48px;
 
line-height: 48px;
 
}
 
 
#contents-wrapper{
 
  min-width:1024px;
 
  background-color:#ffffff;
 
  padding-bottom: 100px;
 
}
 
 
#contents{
 
  width: 1024px;
 
  margin: 0 auto;
 
  border-color: #000000;
 
  color: #969696;
 
  border-top:30px solid #ffffff;
 
  border-bottom:30px solid #ffffff;
 
  /*background-color: #c0ffee;*/
 
}
 
#contents p{
 
  word-wrap:break-word;
 
}
 
/*#header li{
 
  text-indent: -9999px;
 
  float:left;
 
  width: 100px;
 
  margin: 0;
 
  padding: 0;
 
}*/
 
#footer{
 
  width: 100%;
 
  min-width: 1024px;
 
  height: 369px;
 
  margin: 0 auto;
 
  display: block;
 
  background-color: #1EC2DB;
 
}
 
 
#footer_logos{
 
  width: 874px;
 
  height: 135px;
 
  margin: 0 auto;
 
  padding: 20px 0;
 
}
 
 
#footer_contact{
 
  width: 874px;
 
  height: 26px;
 
  margin: 0 auto;
 
}
 
#footer_social{
 
  width: 800px;
 
  height: 84px;
 
  margin: 0 auto;
 
}
 
#footer_social img{
 
  margin: 0;
 
}
 
 
.”caption”{
 
  color:#6f89a5;
 
  font-size: 14.5px;
 
}
 
#bodyContent h1{
 
  font-size:40px;
 
  color:#00aeef;
 
  border-bottom:1pt solid #00aeef;
 
  padding-top:45px;
 
  padding-bottom:15px;
 
  margin-bottom:15px;
 
}
 
#bodyContent h2{
 
  font-size:25px;
 
  color:#00aeef;
 
  margin-top:30px;
 
  line-height:25px;
 
}
 
h3{
 
  font-size:30px;
 
  padding-bottom:8px;
 
  color:#808080;
 
  border-bottom:1pt solid #808080;
 
}
 
#bodyContent h4{
 
  font-size:20px;
 
  color:#808080;
 
}
 
h5{
 
  font-size:15px;
 
  color:#00aeef;
 
}
 
h6{
 
  font-size:25px;
 
  color:#00aeef;
 
  padding-bottom:40px;
 
}
 
b{
 
  font-size:17px;
 
  color:#1e1e20;
 
}
 
p{
 
  font-size:17px;
 
  color:#646464;
 
}
 
#toc{
 
  list-style:none;
 
  margin:0 0 15px 0;
 
  padding:0;
 
  border:0;
 
  background:none;
 
}
 
#toc li{
 
  font-size:15px;
 
  color:#00aeef;
 
  margin-bottom:10px;
 
  font-weight:700;
 
}
 
#cont {
 
  list-style:none;
 
  margin:0;
 
  padding:0;
 
  border:0;
 
  background:none;
 
}
 
#cont li {
 
  font-size:13px;
 
  /*color:#00aeef;*/
 
  margin-bottom:0px;
 
  font-weight:700;
 
}
 
#cont2 {
 
  list-style:none;
 
  margin:0;
 
  padding:0;
 
  border:0;
 
  background:none;
 
}
 
#cont2 li {
 
  font-size:13px;
 
  color:#00aeef;
 
  margin-bottom:0px;
 
  font-weight:700;
 
  padding-left:2em;
 
}
 
#att{
 
  margin:0 0 15px 0;
 
  padding:0;
 
  border:0;
 
  background:none;
 
}
 
#att li{
 
  font-size:15px;
 
  color:#646464;
 
  margin-bottom:10px;
 
  font-weight:400;
 
}
 
#hp {
 
  margin:0 0 17px 0;
 
  padding:0;
 
  border:0;
 
  background:none;
 
}
 
#hp li{
 
  list-style:none;
 
  font-size:15px;
 
  color:#646464;
 
  margin-bottom:10px;
 
  font-weight:400;
 
}
 
#hp2 {
 
  margin:0 0 17px 0;
 
  padding:0;
 
  border:0;
 
  background:none;
 
}
 
#hp2 li{
 
  list-style:square;
 
  font-size:15px;
 
  color:#646464;
 
  margin-bottom:10px;
 
  margin-left:2em;
 
  font-weight:400;
 
}
 
 
a:link {
 
  text-decoration:none ;
 
  color: #00aeef;
 
 
 
}
 
a:visited {
 
  color: #00aeef;
 
  font-weight:bold;
 
}
 
a:hover {
 
  color: #00aeef;
 
 
  font-weight:bold;
 
}
 
a:active {
 
  color: #00aeef;
 
  font-weight:bold;
 
}
 
 
  div.keln_container img{
 
  margin-top: 20px;
 
  max-width: 400px;
 
  height: auto;
 
  }
 
 
  img.hpimg{
 
  margin-top: 20px;
 
  max-width: 600px;
 
  height: auto;
 
  }
 
 
 
</style>
 
 
 
 
 
<!--- THIS IS WHERE THE HTML BEGINS --->
 
 
 
<!-- This tells the browser that your page is responsive -->
 
 
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
       
 
 
 
 
 
 
 
 
<script>
 
 
// This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
 
 
$(document).ready(function() {
 
 
$("#HQ_page").attr('id','');
 
 
 
if ( wgPageName.substring( 0,  8) == "Template")  {  // if the page is a template it displays the full name in a single line
 
$("#team_name").html( wgPageName );
 
}
 
 
else if (  ( (wgPageName.match(/\//g) || []).length ) == 0 ) {  // if it is the home page , just print the team's name
 
$("#team_name").html( wgPageName.substring( 5, wgPageName.length ) );
 
}
 
 
else {
 
// this adds the team's name as an h1
 
$("#team_name").html( wgPageName.substring( 5 , wgPageName.indexOf("/")  ) );
 
 
// this adds the page's title as an h4
 
$("#page_name").html (    ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ")  );
 
}
 
 
 
 
 
$('#accordion').find('.menu_item').click(function(){
 
 
//Expand or collapse this panel
 
submenu = $(this).find('.submenu');
 
submenu.toggle();
 
 
icon = $(this).find('.icon');
 
 
if ( !$( submenu ).is(':visible') ) {
 
icon.removeClass("less").addClass("plus");
 
}
 
else {
 
icon.removeClass("plus").addClass("less");
 
}
 
 
//Hide the other panels
 
$(".submenu").not(submenu).hide();
 
$(".icon").not(icon).removeClass("less").addClass("plus");
 
});
 
 
 
$(".collapsable_menu_control").click(function() {
 
$(".menu_item").toggle();
 
});
 
 
$( window ).resize(function() {
 
$(".menu_item").show();
 
});
 
 
 
});
 
 
 
</script>
 
 
 
<script type="text/javascript">
 
    $(function(){
 
      $("#top_btn").fadeOut(500);
 
        $(window).scroll(function(){
 
            var w_height = $(window).height();
 
            var scroll_top = $(document).scrollTop();
 
            if(scroll_top > w_height){
 
                    $("#top_btn").fadeIn(500);
 
                }else{
 
                    $("#top_btn").fadeOut(500);
 
            }
 
        });
 
    $("#top_btn").click(function(e){
 
            e.preventDefault();
 
            $(document.documentElement).animate({
 
                scrollTop: 0
 
                },200);
 
            $(document.body).animate({
 
                scrollTop: 0
 
                },200);
 
        });
 
    })
 
</script>
 
 
<style>
 
 
 
  #background{
 
    position:fixed;
 
    min-width: 1024px;
 
    width:100%;
 
    z-index:-1;
 
  }
 
  #background-image{
 
    width:100%;
 
  }
 
 
        .top_btn{
 
width:55px; 
 
        height:55px; 
 
        background:url(https://static.igem.org/mediawiki/2017/9/9e/To-top.png); 
 
        background-position:0px 0px; 
 
        position:fixed; 
 
        bottom:25px;
 
right:25px;
 
        color:white; 
 
        z-index:20000; 
 
        cursor:pointer; 
 
}
 
.top_btn:hover{ 
 
        background:url(https://static.igem.org/mediawiki/2017/7/7d/To-top-hover.png); 
 
        }
 
 
 
  #topbanner-wrapper{
 
 
 
}
 
  #topbanner{
 
   
 
    height: 80px;
 
    margin:30px 0 0 160px;
 
  line-height:25px
 
  }
 
  #button_wrapper{
 
    width: 1023px;
 
    height: 186px;
 
    margin: 0 auto;
 
    padding: 0;
 
    letter-spacing: -1em;
 
  }
 
  #button_left{
 
    /*float: left;*/
 
    display: inline-block;
 
    width:341px;
 
    height: 186px;
 
    letter-spacing: normal;
 
    border: 1px solid #000;
 
  }
 
  #button_center{
 
    display: inline-block;
 
    width:341px;
 
    height: 186px;
 
    letter-spacing: normal;
 
    border: 1px solid #000;
 
  }
 
  #button_right{
 
    display: inline-block;
 
    width:341px;
 
    height: 186px;
 
    letter-spacing: normal;
 
    border: 1px solid #000;
 
  }
 
  #contents{
 
    background-color:#ffffff;
 
  }
 
 
  .acv_row_wrapper{
 
    width: 1024px;
 
  }
 
  .acv_row_left{
 
    width: 250px;
 
    float: left;
 
    margin-right: 20px;
 
  }
 
  .acv_row_center{
 
    width: 250px;
 
    float: left;
 
    margin-right: 20px;
 
  }
 
  .acv_row_right{
 
    width: 484px;
 
    float: left;
 
  }
 
  .clear{
 
    clear:both;
 
  }
 
  table{
 
    color:#808080;
 
    border-collapse:collapse;
 
    margin-top:30px;
 
    table-layout: fixed;
 
  }
 
  strong{
 
    color:#00aeef;
 
  }
 
  td{
 
    text-align : left;
 
    vertical-align : top;
 
    width: 30%;
 
   
 
    padding:8px 30px 8px 0px;
 
  }
 
 
</style>
 
</style>
 +
</head>
 +
<body>
  
 +
<div id="top_btn" class="top_btn"></div>
 +
<div id="background">
 +
  <img id="background-image" src="https://static.igem.org/mediawiki/2017/7/76/WHU-China-bg0.jpeg"  alt="" />
 +
  </div>
 +
    <div id="header">
 +
      <div id="nav-wrapper">
 +
        <div class="nav">
 +
            <ul class="nv">
 +
            <li id="nv0" style="width:200px"><a href="https://2017.igem.org/Team:WHU-China"></a></li>
 +
            <li id="nv1">
 +
              <a>Project</a>
 +
              <ul>
 +
                <li id="nv11"><a href="#">Overview</a></li>
 +
                <li id="nv12"><a href="#">Background</a></li>
 +
                <li id="nv13"><a href="#">Introduction</a></li>
 +
                <li id="nv14"><a href="#">Designs</a></li>
 +
                <li id="nv15"><a href="#">Experiments</a></li>
 +
                <li id="nv16"><a href="#">Results</a></li>
 +
              </ul>
 +
            </li>
 +
            <li id="nv2"><a href="#">Parts</a>
 +
            <ul>
 +
                <li id="nv21"><a href="#">Description</a></li>
 +
                <li id="nv22"><a href="#">Basic</a></li>
 +
                <li id="nv23">
 +
                <a href="#">Composite</a></li>
 +
               
 +
</ul>
 +
           
 +
            </li>
 +
            <li id="nv3"><a href="#">Interlab</a>
 +
                <ul>
 +
                <li id="nv31"><a href="#">Results</a></li>
 +
                <li id="nv32"><a href="#">Calibration</a></li>
 +
                <li id="nv33">
 +
                <a href="#">CellMeasuremnet</a></li>
 +
               
 +
</ul>
 +
           
 +
            </li>
 +
            <li id="nv4">
 +
            <a>Notebook</a>
 +
            <ul>
 +
            <li id="nv41"><a href="#">DryLab</a></li>
 +
                <li id="nv42"><a href="#">WetLab</a></li>
 +
            </ul>
 +
            </li>
 +
            <li id="nv5">
 +
            <a>Model</a>
 +
            <ul>
 +
            <li id="nv51"><a href="#">Modeling</a></li>
 +
                <li id="nv52"><a href="#">Hardware</a></li>
 +
            </ul>
 +
            </li>
 +
           
 +
            <li id="nv6">
 +
            <a>Human Practice</a>
 +
              <ul>
 +
                <li id="nv61"><a href="#">Silver</a></li>
 +
                <li id="nv62"><a href="#">Gold&Integrated</a></li>
 +
                <li id="nv63"><a href="#">PubilcEngagement</a></li>
 +
              </ul>
 +
            </li>
 +
            <li id="nv7"><a href="#">Safety</a>
 +
            <ul>
 +
                <li id="nv71"><a href="#">ProjectDesign</a></li>
 +
                <li id="nv72"><a href="#">LabWork</a></li>
 +
             
 +
              </ul>
 +
            </li>
 +
            <li id="nv8"><a href="#">Team</a>
 +
            <ul>
 +
                <li id="nv81"><a href="#">Member</a></li>
 +
                <li id="nv82"><a href="#">Attributions</a> </li>
 +
                <li id="nv83"><a href="#">Collaborations</a></li>
 +
             
 +
              </ul>
 +
            </li>
 +
            <li id="nv9"><a href="#">Achievement</a>
 +
              <ul>
 +
                <li id="nv91"><a href="#">JudgingForm </a></li>
 +
                <li id="nv92"><a href="#">AppliedDesign</a> </li>
 +
                <li id="nv93"><a href="#">Enterpreneurship</a></li>
 +
             
 +
              </ul>
 +
              </li>
 +
          </ul>
 +
        </div>
 +
      </div>
 +
    </div>
 +
 
 +
 
 +
</body>
  
 
</html>
 
</html>

Revision as of 15:19, 22 October 2017