Difference between revisions of "Template:BIT-China"

(Prototype team template page)
 
 
(38 intermediate revisions by the same user not shown)
Line 6: Line 6:
 
<!-- Start of CSS-->
 
<!-- Start of CSS-->
 
<style type="text/css">
 
<style type="text/css">
−
 
+
                /*Font*/
 +
                      @font-face {
 +
                      font-family: 'Calibri';
 +
                      src: url('Calibri.ttf');
 +
                              url('https://static.igem.org/mediawiki/2015/0/09/Calibri.ttf') format('truetype');
 +
                        }
 +
 
 
/* PAGE LAYOUT */
 
/* PAGE LAYOUT */
 +
                      *{
 +
                              padding:0px;
 +
                              margin:0px;
 +
                        }
  
 
/* Change Background color*/
 
/* Change Background color*/
−
body {  
+
body{
−
background-color: #fff;
+
                              margin:0 auto;
−
}
+
                              background-image: url("https://static.igem.org/mediawiki/2015/c/c3/BIT_China_grid_background.jpg");
−
 
+
                              background-repeat:repeat;
 +
                        }
 +
                /* Set #content to place the main body in the middle */
 +
                        #content{
 +
                              width:100%;
 +
                              padding:0px;
 +
                              background-color:transparent;
 +
                              border:0px;
 +
                        }
 
/* Creates a container that will wrap all of the content inside your wiki pages. */
 
/* Creates a container that will wrap all of the content inside your wiki pages. */
 
#mainContainer {   
 
#mainContainer {   
−
width: 978px;
+
width:100%;
−
overflow:hidden;
+
                                margin:0px;
−
float:left;
+
                                border:0px;
−
margin-left:20px;
+
                                background-color:transparent;
−
margin-bottom: 10px;
+
                                font-size: 17px;
−
background-color: #fff;  
+
                                line-height: 1.5em;
−
border-bottom: 14px solid #565656;
+
font-family: Calibri, Arial;
−
border-right: 2px solid #565656;
+
−
border-left: 2px solid #565656;
+
−
border-top: 2px solid #565656;
+
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
 
}
 
}
  
−
/* Creates the container for the menu */
+
 
−
#menuContainer  {
+
−
float:left;
+
−
width: 134px;
+
−
padding: 20px 0px;
+
−
border-top: 14px solid #565656;
+
−
background-color: #E8E8E9;
+
−
}
+
  
 
/* Creates the container for the content */
 
/* Creates the container for the content */
−
#contentContainer {
+
#contentContainer{
−
padding-top:20px;
+
                                width:100%;
−
padding-right:10px;
+
                                border:0px;
−
margin-bottom: 20px;
+
                                margin:0px;
−
width: 814px;
+
                                padding:0px;
−
padding-left: 20px;
+
                                background-color:transparent;
−
float: left;
+
                        }
−
background-color: #fff;
+
−
border-top: 14px solid #565656;
+
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
−
}
+
  
 
/*Set up height place holder for the banner*/
 
/*Set up height place holder for the banner*/
 
#bannerContainer {
 
#bannerContainer {
−
height:200px;
+
display:none;
−
margin:auto;
+
−
text-align:center;
+
−
color: #24B694;
+
 
}
 
}
  
Line 63: Line 63:
 
/*Change the styling of text for everything inside main container*/
 
/*Change the styling of text for everything inside main container*/
 
#mainContainer p {  
 
#mainContainer p {  
−
font-size: 13px;
+
font-size: 17px;
 
color: #000000;
 
color: #000000;
 
}
 
}
Line 69: Line 69:
 
/*This changes the color and font family */
 
/*This changes the color and font family */
 
#contentContainer h1, h2, h3, h4, h5, h6 {  
 
#contentContainer h1, h2, h3, h4, h5, h6 {  
−
color: #565656;
+
color:#1c73a6;
 
border-bottom: none;
 
border-bottom: none;
 
font-weight: bold;
 
font-weight: bold;
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
font-family: Helvetica, sans-serif;
−
margin-top:10px;
+
 
}
 
}
 +
                      sup,sub{
 +
                                line-height: 10px;
 +
                        }
  
 
/*Style of the links - links are different inside the menu */
 
/*Style of the links - links are different inside the menu */
Line 84: Line 86:
 
  /* Styling links on hover- links are different inside the menu */
 
  /* Styling links on hover- links are different inside the menu */
 
#contentContainer a:hover {  
 
#contentContainer a:hover {  
−
color: #59bf92;
+
color: #f5a107;
 
}
 
}
 +
  
−
/*Change the styling of tables */
+
−
        #contentContainer table {
+
−
    border: 1px solid #565656;
+
−
    border-collapse: collapse;
+
−
    width: 90%
+
−
    margin: auto;
+
−
    margin-bottom: 15px;
+
−
    margin-top: 15px;
+
−
    margin-right: 10px;
+
−
    margin-left: 10px;
+
−
    }
+
−
 
+
−
/*Change the styling of table cells*/
+
−
    #contentContainer  td {
+
−
    padding: 10px;
+
−
    border: 1px solid #565656;
+
−
    border-collapse: collapse;
+
−
    vertical-align: text-top;
+
−
    }
+
−
 
+
−
/*Change the styling of table headers */
+
−
    #contentContainer th {
+
−
    background-color: #E8E8E9;
+
−
    padding: 10px;
+
−
    border: 1px solid #565656;
+
−
    border-collapse: collapse;
+
−
    vertical-align: text-top;
+
−
    }
+
−
 
+
−
 
+
−
 
+
−
/*MENU STYLING */
+
−
 
+
−
/*Styling for the links in the menu */
+
−
#menuContainer a {
+
−
color: #565656;
+
−
text-decoration:none;
+
−
font-weight: bold;
+
−
}
+
−
 
+
−
/* Sets the style for lists inside menuContainer  */
+
−
#menuContainer ul {
+
−
list-style: none;
+
−
margin-left:0px;
+
−
}
+
−
 
+
−
/*Styles the list items to become menu buttons */
+
−
#menuContainer ul li {
+
−
text-align: center;
+
−
display: block;
+
−
width: 100%;
+
−
height:30px;
+
−
padding-top:10px;
+
−
}
+
−
 
+
−
/*For the menu buttons, changes the color when hovering*/
+
−
#menuContainer li:hover {
+
−
color:  #FFF;
+
−
background-color: #24B694;
+
−
}
+
−
 
+
−
/*Submenus are not displayed as default*/
+
−
#menuContainer li ul {
+
−
display: none;
+
−
padding-top:15px;
+
−
margin-left: -19px;
+
−
}
+
−
 
+
−
/*Submenus are displayed when hovering the menu button */
+
−
#menuContainer li:hover ul {
+
−
/*display: inline-block; */
+
−
display: block;
+
−
position: absolute;
+
−
float:right;
+
−
margin-left: 134px;
+
−
margin-top:-42px;
+
−
}
+
−
 
+
−
/*Style the submenu buttons*/
+
−
#menuContainer li ul li{
+
−
background-color: #59BF92;
+
−
padding-left:20px;
+
−
padding-right:20px;
+
−
height:30px;
+
−
padding-top:10px;
+
−
margin-top:-2px;
+
−
color: #565656;
+
−
width: 150px;
+
−
}
+
  
 
/*CLASSES */
 
/*CLASSES */
Line 196: Line 111:
 
padding-top: 5px;
 
padding-top: 5px;
 
     }
 
     }
 +
 
  
 +
 +
                /*MENU STYLING */
 +
  #menuContainer{
 +
width:100%;
 +
height:95px;
 +
background-color:#106f9c;
 +
background-position:bottom;
 +
        background-image:url("https://static.igem.org/mediawiki/2015/8/8e/BIT_China_nav_bg.png");
 +
position:fixed;
 +
top:18px;
 +
padding-top:5px;
 +
z-index: 100;
 +
        background-repeat: no-repeat;
 +
 +
  }
 +
#menuContainer p{
 +
color:#ffffff;
 +
}
 +
  /* 背景绿色background-color:#c9e77f;*/
 +
  #top_nav{
 +
width:1100px;
 +
height:90px;
 +
margin:0 auto;
 +
  }
 +
  #top_nav div{
 +
    float:left;
 +
text-align:center;
 +
font-size:20px;
 +
line-height:30px;
 +
font-family:"Comic Sans MS";
 +
  }
 +
  #top_nav div:hover .top_nav_icon{
 +
animation: bounce 1s ;
 +
-webkit-animation: bounce 1s;
 +
  }
 +
 
 +
  .top_nav_icon{
 +
width:60px;
 +
height:60px;
 +
margin:0 27px;
 +
  }
 +
 +
 +
  #taiji{
 +
    margin:5px 8px;
 +
width:80px;
 +
height:80px;
 +
  }
 +
  #top_nav_bulge{
 +
        position:fixed;
 +
top:118px;
 +
width:100%;
 +
height:45px;
 +
        background-color: #106f9c;
 +
        background-image:url("https://static.igem.org/mediawiki/2015/d/d6/BIT_China_nav_bg2.png");
 +
        background-position:top;
 +
        background-repeat: no-repeat;
 +
  }
 +
#top_nav li{
 +
    float:left;
 +
    list-style: none;
 +
position:relative;
 +
text-align:center;
 +
font-size:18px;
 +
line-height:30px;
 +
font-family:"Comic Sans MS";
 +
}
 +
#top_nav span{
 +
float:left;
 +
position:absolute;
 +
left:0px;
 +
top:90px;
 +
width:1024px;
 +
display: none;
 +
}
 +
#top_nav span a{
 +
float:left;
 +
padding:10px;
 +
line-height:20px;
 +
border-left:3px dashed;
 +
display: inline;
 +
text-decoration:none;
 +
}
 +
#top_nav li:hover span {
 +
display: block;
 +
}
 +
#top_nav li:hover #top_nav_bulge{
 +
visibility:visible;
 +
}
 +
#menuContainer a p{
 +
text-decoration:none;
 +
}
 +
#menuContainer a:link, #menuContainer a:visited{
 +
    color:#eeeeee;
 +
}
 +
#menuContainer a:active{
 +
color:#ff0000;
 +
}
 +
#top_nav li:hover a{
 +
color:#f5a107;
 +
}
 +
#top_nav li:hover span a{
 +
color:#cccccc;
 +
}
 +
#menuContainer a:hover p{
 +
color:#f5a107;
 +
}
 +
#top_nav li span a:hover{
 +
color:#f5a107;
 +
border-left:3px dashed #eeeeee;
 +
}
 +
#menuContainer{
 +
                z-index:999;
 +
  }
 +
@media screen and (max-width:1260px){
 +
  #top_nav{
 +
width:1000px;
 +
  }
 +
  .top_nav_icon{
 +
width:60px;
 +
height:60px;
 +
margin:0 23px;
 +
 +
  }
 +
}
 +
 +
@media screen and (max-width:960px){
 +
#top_nav{
 +
width:95%;
 +
}
 +
.top_nav_icon{
 +
width:50px;
 +
height:50px;
 +
margin:0 20px;
 +
}
 +
}
 +
@media screen and (max-width:910px){
 +
#top_nav{
 +
width: 97%;
 +
}
 +
.top_nav_icon{
 +
width:40px;
 +
height:40px;
 +
margin:0 17px;
 +
}
 +
  #top_nav div{
 +
  font-size: 15px;
 +
  }
 +
  #top_nav span{
 +
  font-size: 15px;
 +
  top:70px;
 +
  }
 +
}
 +
 +
 +
.rotating{
 +
animation: rotating linear 5s infinite;
 +
-webkit-animation: rotating linear 5s infinite;
 +
 +
}
 +
@keyframes rotating {
 +
0% {
 +
transform: rotate(0deg);
 +
}
 +
 +
100% {
 +
transform: rotate(-360deg);
 +
}
 +
}
 +
 +
@-webkit-keyframes rotating {
 +
0% {
 +
-webkit-transform: rotate(0deg);
 +
}
 +
100% {
 +
-webkit-transform: rotate(-360deg);
 +
}
 +
}
 +
 +
.bounce {
 +
animation: bounce 0.75s cubic-bezier(0.680, -0.550, 0.265, 1.550);
 +
-webkit-animation: bounce 0.75s cubic-bezier(0.680, -0.550, 0.265, 1.550);
 +
 +
transform-origin: 50% 100%;
 +
-ms-transform-origin: 50% 100%;
 +
-webkit-transform-origin: 50% 100%;
 +
}
 +
 +
@keyframes bounce {
 +
0% {
 +
transform: translateY(0%) scaleY(0.6)
 +
}
 +
 +
60% {
 +
transform: translateY(-100%) scaleY(1.1)
 +
}
 +
 +
70% {
 +
transform: translateY(0%) scaleY(0.95) scaleX(1.05)
 +
}
 +
 +
80% {
 +
transform: translateY(0%) scaleY(1.05) scaleX(1)
 +
}
 +
 +
90% {
 +
transform: translateY(0%) scaleY(0.95) scaleX(1)
 +
}
 +
 +
100% {
 +
transform: translateY(0%) scaleY(1) scaleX(1)
 +
}
 +
}
 +
 +
@-webkit-keyframes bounce {
 +
0% {
 +
-webkit-transform: translateY(0%) scaleY(0.8)
 +
}
 +
 +
60% {
 +
-webkit-transform: translateY(-50%) scaleY(1.05)
 +
}
 +
 +
70% {
 +
-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05)
 +
}
 +
 +
80% {
 +
-webkit-transform: translateY(0%) scaleY(1.05) scaleX(1)
 +
}
 +
 +
90% {
 +
-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1)
 +
}
 +
 +
100% {
 +
-webkit-transform: translateY(0%) scaleY(1) scaleX(1)
 +
}
 +
}
  
 
</style>
 
</style>
 
<!-- End of CSS -->
 
<!-- End of CSS -->
−
 
+
<script>
 +
$(document).ready(function () {
 +
$('#top_nav_bulge').hide();
 +
$('#menuContainer').mouseover(function(){
 +
$('#top_nav_bulge').show();
 +
})
 +
$('#menuContainer').mouseout(function(){
 +
$('#top_nav_bulge').hide();
 +
})
 +
})
 +
</script>
  
 
<!-- Start of the template html elements. -->
 
<!-- Start of the template html elements. -->
Line 216: Line 381:
 
<!-- Start of menu -->
 
<!-- Start of menu -->
 
<div id="menuContainer">
 
<div id="menuContainer">
−
 
+
                                <div id="top_nav_bulge" >
 +
                </div>
 
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
 
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
−
<ul>
+
                                        <div id="top_nav">
−
<a href="https://2015.igem.org/Team:BIT-China"><li>HOME</li></a>
+
                                            <ul>
 +
<li>
 +
  <a href="#"><div>
 +
<img src="https://static.igem.org/mediawiki/2015/f/fc/BIT_China_icon_project.png" class="top_nav_icon" />
 +
<p>Project</p>
 +
</div></a>
 +
<span id="nav_second_level">
 +
<a href="https://2015.igem.org/Team:BIT-China/Description">Description</a>
 +
<a href="https://2015.igem.org/Team:BIT-China/Design">Design</a>
 +
<a href="https://2015.igem.org/Team:BIT-China/project_Basic_circuits.html">Basic circuits</a>
 +
<a href="https://2015.igem.org/Team:BIT-China/project_Fine-regulation_circuits.html">Fine-regulation circuits</a>
 +
</span>
 +
</li>
 +
<li>
 +
<a href="#"><div>
 +
<img src="https://static.igem.org/mediawiki/2015/c/c6/BIT_China_icon_modeling.png" class="top_nav_icon" id="shiyishi2"/>
 +
<p>Modeling</p>
 +
</div></a>
 +
<span id="nav_second_level">
 +
<a href="https://2015.igem.org/Team:BIT-China/modeling_Basic_circuits.html">Basic circuits</a>
 +
<a href="https://2015.igem.org/Team:BIT-China/modeling_Fine-regulation_circuits.html">Fine-regulation circuits</a>
 +
</span> 
 +
</li>
 +
<li>
 +
<a href="#" id="active"><div>
 +
<img src="https://static.igem.org/mediawiki/2015/3/33/BIT_China_icon_notebook.png" class="top_nav_icon"/>
 +
<p>Notebook</p>
 +
</div></a>
 +
<span id="nav_second_level">
 +
<a href="https://2015.igem.org/Team:BIT-China/Notebook">Laboratory Notes</a>
 +
<a href="https://2015.igem.org/Team:BIT-China/Experiments">Protocols</a>
 +
</span> 
 +
</li>
 +
<li>
 +
<a href="#"><div>
 +
<img src="https://static.igem.org/mediawiki/2015/8/8f/BIT_China_icon_judging.png" class="top_nav_icon"/>
 +
<p>Judging</p>
 +
</div></a>
 +
<span id="nav_second_level">
 +
<a href="https://2015.igem.org/Team:BIT-China/Parts">Parts Submission</a>
 +
<a href="https://2015.igem.org/Team:BIT-China/Achievements">Achievements</a>
 +
</span> 
 +
</li>
 +
<li>
 +
<div>
 +
<a href="https://2015.igem.org/Team:BIT-China"><img src="https://static.igem.org/mediawiki/2015/f/f2/BIT_China_logo_project.png" id="taiji" class="rotating"/></a>
 +
</div>
 +
</li>
 +
<li>
 +
<a href="" ><div id="active">
 +
<img src="https://static.igem.org/mediawiki/2015/7/76/BIT_China_icon_team.png" class="top_nav_icon"/>
 +
<p>Team</p>
 +
</div></a>
 +
<span id="nav_second_level">
 +
<a href="https://2015.igem.org/Team:BIT-China/Team">Team</a>
 +
<a href="https://2015.igem.org/Team:BIT-China/gallery">Gallery</a>
 +
</span> 
 +
 +
</li>
 +
<li>
 +
<a href=""><div>
 +
<img src="https://static.igem.org/mediawiki/2015/7/75/BIT_China_icon_practice.png" class="top_nav_icon" />
 +
<p>Practice</p>
 +
</div></a>
 +
                                                        <span id="nav_second_level">
 +
<a href="https://2015.igem.org/Team:BIT-China/Practices">Human Practice</a>
 +
<a href="https://2015.igem.org/Team:BIT-China/Collaborations">Collaboration </a>
 +
</span> 
 +
</li>
 +
<li>
 +
<a href=""><div>
 +
<img src="https://static.igem.org/mediawiki/2015/b/ba/BIT_China_icon_safety.png" class="top_nav_icon"/>
 +
<p>Safety</p>
 +
</div></a>
 +
<span id="nav_second_level">
 +
<a href="https://2015.igem.org/Team:BIT-China/Safety">Safety</a>
 +
<a href="https://2015.igem.org/Team:BIT-China/Questions_and_answers">Q/A</a>
 +
</span> 
 +
</li>
 +
<li>
 +
<a href="#"><div>
 +
<img src="https://static.igem.org/mediawiki/2015/2/21/BIT_China_icon_sponsor.png" class="top_nav_icon" />
 +
<p>Attributions</p>
 +
</div></a>
 +
                                                        <span id="nav_second_level" style="margin-left:-100px;">
 +
<a href="https://2015.igem.org/Team:BIT-China/Attributions">Attributions</a>
 +
<a href="https://2015.igem.org/Team:BIT-China/Sponsors">Sponsors</a>
 +
</span> 
 +
</li>
 +
</ul>
 +
                                    </div>
  
−
<a href="https://2015.igem.org/Team:BIT-China/Team"><li>TEAM</li></a>
+
−
 
+
−
<a href="#"><li>PROJECT
+
−
            <ul>
+
−
<a href="https://2015.igem.org/Team:BIT-China/Description"><li>Description</li></a>
+
−
<a href="https://2015.igem.org/Team:BIT-China/Experiments"><li>Experiments &amp; Protocols</li></a> 
+
−
<a href="https://2015.igem.org/Team:BIT-China/Results"><li>Results</li></a> 
+
−
<a href="https://2015.igem.org/Team:BIT-China/Design"><li>Design</li></a>
+
−
</ul>
+
−
</li></a>
+
−
 
+
−
<a href="#"><li>PARTS
+
−
            <ul>
+
−
<a href="https://2015.igem.org/Team:BIT-China/Parts"><li>Team Parts</li></a>
+
−
<a href="https://2015.igem.org/Team:BIT-China/Basic_Part"><li>Basic Parts</li></a> 
+
−
<a href="https://2015.igem.org/Team:BIT-China/Composite_Part"><li>Composite Parts</li></a>
+
−
<a href="https://2015.igem.org/Team:BIT-China/Part_Collection"><li>Part Collection</li></a> 
+
−
</ul>
+
−
</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:BIT-China/Notebook"><li>NOTEBOOK</li></a>
+
−
     
+
−
<a href="https://2015.igem.org/Team:BIT-China/Attributions"><li>ATTRIBUTIONS</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:BIT-China/Collaborations"><li>COLLABORATIONS</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:BIT-China/Practices"><li>HUMAN PRACTICES</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:BIT-China/Safety"><li>SAFETY</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:BIT-China/Modeling"><li>MODELING</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:BIT-China/Measurement"><li>MEASUREMENT</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:BIT-China/Software"><li>SOFTWARE</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:BIT-China/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a>
+
−
 
+
−
</ul>
+
 
</div>
 
</div>
 
<!-- End of menu  -->
 
<!-- End of menu  -->

Latest revision as of 04:21, 20 October 2015