Difference between revisions of "Template:WHU-China"

 
(71 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<head>
+
<style>
−
<style type="text/css">
+
body{
−
body {
+
  margin:17px 0 0 0;
−
background-image: url(https://static.igem.org/mediawiki/2017/thumb/8/81/HOME%E7%95%8C%E9%9D%A2%E8%83%8C%E6%99%AF%E5%9B%BE.jpg/1600px-HOME%E7%95%8C%E9%9D%A2%E8%83%8C%E6%99%AF%E5%9B%BE.jpg);
+
}
−
background-position: center center;
+
/*DISABLE DEFAULT DESIGN*/
−
    background-repeat: no-repeat;
+
#bodyContent{
−
    background-attachment: fixed;
+
  min-width:1300px;
−
    background-size: cover;
+
  font-family:"Arial Unicode MS";
 +
}
 +
#top_menu_under{
 +
  display:none;
 +
}
 +
#content{
 +
  width: 100%;
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
 
 +
#sideMenu{
 +
  display:none;
 +
}
 +
 
 +
#top_title{
 +
  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: 1300px;
 +
  /*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:auto;
 
    
 
    
 +
  margin: 0 auto;
 
}
 
}
 +
.nav {
 +
  text-align:center;
 +
 
 +
  height:72px;
 +
  position:relative;
 +
  left:20px;
 +
}
 +
.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;
 +
  font-size:13px;
 +
  /*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();}
 +
#nv12  {background-image: url();}
 +
#nv13  {background-image: url();}
 +
#nv14  {background-image: url();}
 +
#nv15  {background-image: url();}
 +
#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();}
 +
 +
 +
#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;
 +
}*/
 +
 +
 +
.”caption”{
 +
  color:#6f89a5;
 +
  font-size: 14.5px;
 +
}
 +
#bodyContent h1{
 +
  font-size:30px;
 +
  color:#00aeef;
 +
  border-bottom:1pt solid #00aeef;
 +
  padding-top:45px;
 +
  padding-bottom:15px;
 +
  margin-bottom:15px;
 +
  line-height:25px;
 +
}
 +
#bodyContent h2{
 +
  font-size:25px;
 +
  color:#00aeef;
 +
  margin-top:30px;
 +
  line-height:25px;
 +
}
 +
h3{
 +
  font-size:20px;
 +
  padding-bottom:8px;
 +
  color:#808080;
 +
    line-height:30px;
 +
}
 +
#bodyContent h4{
 +
  font-size:20px;
 +
  color:#808080;
 +
}
 +
h5{
 +
  font-size:15px;
 +
  color:#00aeef;
 +
}
 +
h6{
 +
  font-size:25px;
 +
  color:#00aeef;
 +
  padding-bottom:10px;
 +
}
 +
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>
 
</style>
  
−
</head>
 
  
 +
 +
 +
<!--- 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>
 +
<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;
 +
  }
 +
 
 +
  strong{
 +
    color:#00aeef;
 +
  }
 +
 
 +
</style>
 +
 +
 +
<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 type="text/css">
 +
 +
table{
 +
border: 1px solid #ccc;
 +
border-collapse: collapse;
 +
margin: auto;
 +
margin-bottom: 15px;
 +
margin-top: 15px;
 +
  table-layout: fixed;
 +
vertical-align : top;
 +
 +
font-size: 100%;
 +
background: white;
 +
color: black;
 +
 +
 +
 +
}
 +
table, th, td {
 +
    border: 1px solid black;
 +
    border-collapse: collapse;
 +
}
 +
 +
 +
th, td {
 +
    padding: 15px;
 +
font-size: 20px;
 +
}
 +
 +
th {
 +
    text-align: left;
 +
}
 +
 +
</style>
 +
 +
<style>
 +
p{
 +
    font-size:20px;
 +
 
 +
  color:#000;
 +
 
 +
}
 +
 +
</style>
 +
  
 
</html>
 
</html>

Latest revision as of 03:49, 2 November 2017