Difference between revisions of "Template:TJU China"

 
(14 intermediate revisions by the same user not shown)
Line 59: Line 59:
 
#sideMenu, #top_title, .patrollink  {display:none;}
 
#sideMenu, #top_title, .patrollink  {display:none;}
 
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
 
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
−
body {
+
body {background-color:white; }
−
        background-color: #1e1e1e;
+
−
        background-size: cover;
+
−
        height: 100vh;
+
−
 
+
−
 
+
−
        font-family: "Raleway", sans-serif;
+
−
        letter-spacing: 1px;
+
−
        }
+
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
Line 502: Line 494:
  
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
−
    ul.drop{
 
−
        padding-left:0;
 
  
−
    }
 
−
    ul {
 
−
        list-style: none;
 
−
    }
 
  
−
    nav {
 
−
        width:100%;
 
−
        height: 40px;
 
−
        margin: 0px auto;
 
−
        position: fixed;
 
−
        top:0px;
 
  
−
        text-align: center;
 
−
        border-radius: 4px;
 
−
    }
 
−
    .main {
 
−
        display: flex;
 
−
        justify-content: space-around;
 
−
    }
 
−
    .main > li {
 
−
        margin: 0%;
 
−
        width: 10%
 
−
    }
 
−
    .main > li a{
 
−
        border-left:1px solid rgba(23, 23, 50, 1);
 
−
    }
 
−
    a {
 
−
        text-decoration: none;
 
−
        color: #ffe;
 
−
        text-transform: capitalize;
 
−
        font-family: monospace;
 
−
        display: block;
 
−
        padding: 10px 15px;
 
−
        font-size: 15px;
 
−
        transition: background-color 0.5s ease-in-out;
 
  
−
        font-family: "Raleway", sans-serif;
 
−
    }
 
  
−
    a:hover {
+
</style>
−
        background-color: #631818;
+
−
    }
+
  
−
    .drop li {
 
−
        opacity: 0;
 
−
        transform-origin: top center;
 
−
    }
 
  
−
    .drop li a {
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<!--- THIS IS WHERE THE HTML BEGINS --->
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
  
−
        background-color: rgba(23, 23, 50, 0.7);
+
<head>
  
−
        padding: 10px 0;
+
<!-- This tells the browser that your page is responsive -->
−
    }
+
<meta name="viewport" content="width=device-width, initial-scale=1">
  
−
    /*------------- menu1 animation---------------*/
+
</head>
−
    .main li:hover .menu1 li:first-of-type {
+
−
        animation: menu1 0s ease-in-out forwards;
+
−
        animation-delay: 0s;
+
−
    }
+
  
−
    .main li:hover .menu1 li:nth-of-type(2) {
 
−
        animation: menu1 0s ease-in-out forwards;
 
−
        animation-delay: 0s;
 
−
    }
 
  
−
    .main li:hover .menu1 li:nth-of-type(3) {
 
−
        animation: menu1 0s ease-in-out forwards;
 
−
        animation-delay: 0s;
 
−
    }
 
−
    .main li:hover .menu1 li:nth-of-type(4) {
 
−
        animation: menu1 0s ease-in-out forwards;
 
−
        animation-delay: 0s;
 
−
    }
 
−
    .main li:hover .menu1 li:nth-of-type(5) {
 
−
        animation: menu1 0s ease-in-out forwards;
 
−
        animation-delay: 0s;
 
−
    }
 
−
    .main li:hover .menu1 li:nth-of-type(6) {
 
−
        animation: menu1 0s ease-in-out forwards;
 
−
        animation-delay: 0s;
 
−
    }
 
−
    .main li:hover .menu1 li:nth-of-type(7) {
 
−
        animation: menu1 0s ease-in-out forwards;
 
−
        animation-delay: 0s;
 
−
    }
 
−
    .main li:hover .menu1 li:nth-of-type(8) {
 
−
        animation: menu1 0s ease-in-out forwards;
 
−
        animation-delay: 0s;
 
−
    }
 
  
−
    .main li:hover .menu1 li:last-of-type {
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
−
        animation: menu1 0s ease-in-out forwards;
+
<!--- Menu --->
−
        animation-delay: 0s;
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
−
    }
+
  
−
    @keyframes menu1 {
 
−
        from {
 
−
            opacity: 0;
 
−
            transform: translateX(30px) rotateY(90deg);
 
−
        }
 
−
        to {
 
−
            opacity: 1;
 
−
            transform: translateX(0) rotateY(0);
 
−
        }
 
−
    }
 
−
    /*------------- menu2 animation -------------------*/
 
  
−
    .main li:hover .menu2 li:first-of-type {
 
−
        animation: menu2 0s ease-in-out forwards;
 
−
        animation-delay: 0s;
 
−
    }
 
  
−
    .main li:hover .menu2 li:nth-of-type(2) {
 
−
        animation: menu2 0s ease-in-out forwards;
 
−
        animation-delay: 0s;
 
−
    }
 
  
−
    .main li:hover .menu2 li:nth-of-type(3) {
+
<div class="igem_2018_team_mobile_bar">
−
        animation: menu2 0s ease-in-out forwards;
+
−
        animation-delay: 0s;
+
<div class="igem_logo_mobile">
−
    }
+
<img src="https://static.igem.org/mediawiki/2018/4/4f/2018_igem_mobile_menu_logo.svg">
−
    .main li:hover .menu2 li:nth-of-type(4) {
+
</div>
−
        animation: menu2 0s ease-in-out forwards;
+
−
        animation-delay: 0s;
+
−
    }
+
  
−
    .main li:hover .menu2 li:last-of-type {
 
−
        animation: menu2 0s ease-in-out forwards;
 
−
        animation-delay: 0s;
 
−
    }
 
  
−
    @keyframes menu2 {
+
<div class="igem_menu_control_mobile">
−
        0% {
+
<img id="menu_control_image" src="https://static.igem.org/mediawiki/igem.org/3/3b/Menu_icon.svg">
−
            opacity: 0;
+
</div>
−
            transform: scale(0.7);
+
−
        }
+
−
        50% {
+
−
            opacity: 0.5;
+
−
            transform: scale(1.1);
+
−
        }
+
−
        100% {
+
−
            opacity: 1;
+
−
            transform: scale(1);
+
−
        }
+
−
    }
+
  
−
    /*------------- menu3 animation -------------------*/
+
</div>
  
−
    .main li:hover .menu3 li:first-of-type {
 
−
        animation: menu3 0s ease-in-out forwards;
 
−
        animation-delay: 0s;
 
−
    }
 
  
−
    .main li:hover .menu3 li:nth-of-type(2) {
 
−
        animation: menu3 0s ease-in-out forwards;
 
−
        animation-delay: 0s;
 
−
    }
 
  
−
    .main li:hover .menu3 li:nth-of-type(3) {
 
−
        animation: menu3 0s ease-in-out forwards;
 
−
        animation-delay: 0s;
 
−
    }
 
−
    .main li:hover .menu3 li:nth-of-type(4) {
 
−
        animation: menu3 0s ease-in-out forwards;
 
−
        animation-delay: 0s;
 
−
    }
 
−
    .main li:hover .menu3 li:nth-of-type(5) {
 
−
        animation: menu3 0s ease-in-out forwards;
 
−
        animation-delay: 0s;
 
−
    }
 
−
    .main li:hover .menu3 li:last-of-type {
 
−
        animation: menu3 0s ease-in-out forwards;
 
−
        animation-delay: 0s;
 
−
    }
 
  
−
    @keyframes menu3 {
+
<div class="igem_2018_team_menu displaying_menu">
−
        0% {
+
−
            opacity: 0;
+
−
            transform: translateX(20px);
+
−
        }
+
−
        100% {
+
−
            opacity: 1;
+
−
            transform: translateX(0);
+
−
        }
+
−
    }
+
  
−
    /*------------- menu4 animation :None--------------*/
 
−
    /*------------- menu5 animation -------------------*/
 
  
−
    .main li:hover .menu5 li:first-of-type {
+
<a href="https://2018.igem.org/Team:TJU_China">
−
        animation: menu5 0s ease-in-out forwards;
+
<img src="http://placehold.it/350x150/e4dede/c4baba">
−
        animation-delay: 0s;
+
</a>
−
    }
+
  
−
    .main li:hover .menu5 li:last-of-type {
 
−
        animation: menu5 0s ease-in-out forwards;
 
−
        animation-delay: 0s;
 
−
    }
 
  
−
    @keyframes menu5 {
 
−
        0% {
 
−
            opacity: 0;
 
−
            transform: translateX(50px) rotate(-90deg);
 
−
        }
 
−
        100% {
 
−
            opacity: 1;
 
−
            transform: translateX(0) rotate(0);
 
−
        }
 
  
−
    }
+
<a href="https://2018.igem.org/Team:TJU_China">
 +
<div class="menu_item direct_link">
 +
HOME
 +
</div>
 +
</a>
  
−
    /*------------- menu6 animation:None-------------------*/
+
<!-- Team -->
−
    /*------------- menu7 animation------------------------*/
+
<div class="menu_item">
−
    .main li:hover .menu7 li:first-of-type {
+
<div class="submenu_control_icon"> </div>
−
        animation: menu7 0s ease-in-out forwards;
+
TEAM
−
        animation-delay: 0s;
+
</div>
−
    }
+
<div class="submenu">
 +
 +
<a href="https://2018.igem.org/Team:TJU_China/Team">
 +
<div class="submenu_item">
 +
Team Members
 +
</div>
 +
</a>
  
−
    .main li:hover .menu7 li:nth-of-type(2) {
+
<a href="https://2018.igem.org/Team:TJU_China/Collaborations">
−
        animation: menu7 0s ease-in-out forwards;
+
<div class="submenu_item">
−
        animation-delay: 0s;
+
Collaborations
−
    }
+
</div>
 +
</a>
 +
</div>
 +
               
  
−
    .main li:hover .menu7 li:last-of-type {
 
−
        animation: menu7 0s ease-in-out forwards;
 
−
        animation-delay: 0s;
 
−
    }
 
  
−
    @keyframes menu7 {
+
<!-- Project -->
−
        0% {
+
<div class="menu_item">
−
            opacity: 0;
+
<div class="submenu_control_icon"> </div>
−
            transform: rotateX(-90deg);
+
PROJECT
−
        }
+
</div>
−
        100% {
+
<div class="submenu">
−
            opacity: 1;
+
−
            transform: rotateX(0);
+
<a href="https://2018.igem.org/Team:TJU_China/Description">
−
        }
+
<div class="submenu_item">
−
    }
+
Description
 +
</div>
 +
</a>
  
 +
<a href="https://2018.igem.org/Team:TJU_China/Design">
 +
<div class="submenu_item">
 +
Design
 +
</div>
 +
</a>
  
 +
<a href="https://2018.igem.org/Team:TJU_China/Experiments">
 +
<div class="submenu_item">
 +
Experiments
 +
</div>
 +
</a>
  
  
 +
<a href="https://2018.igem.org/Team:TJU_China/Notebook">
 +
<div class="submenu_item">
 +
Notebook
 +
</div>
 +
</a>
  
 +
<a href="https://2018.igem.org/Team:TJU_China/InterLab">
 +
<div class="submenu_item">
 +
InterLab
 +
</div>
 +
</a>
  
−
</style>
 
  
 +
<a href="https://2018.igem.org/Team:TJU_China/Model">
 +
<div class="submenu_item">
 +
Model
 +
</div>
 +
</a>
  
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
<a href="https://2018.igem.org/Team:TJU_China/Results">
−
<!--- THIS IS WHERE THE HTML BEGINS --->
+
<div class="submenu_item">
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
Results
 +
</div>
 +
</a>
  
−
<head>
 
  
−
<!-- This tells the browser that your page is responsive -->
+
<a href="https://2018.igem.org/Team:TJU_China/Demonstrate">
−
<meta name="viewport" content="width=device-width, initial-scale=1">  
+
<div class="submenu_item">
 +
Demonstrate
 +
</div>
 +
</a>
  
−
</head>
+
<a href="https://2018.igem.org/Team:TJU_China/Improve">
 +
<div class="submenu_item">
 +
Improve
 +
</div>
 +
</a>
  
 +
<a href="https://2018.igem.org/Team:TJU_China/Attributions">
 +
<div class="submenu_item">
 +
Attributions
 +
</div>
 +
</a>
 +
 +
</div>
 +
 +
 +
<div class="menu_item">
 +
<div class="submenu_control_icon"> </div>
 +
PARTS
 +
</div>
 +
<div class="submenu">
 +
 +
<a href="https://2018.igem.org/Team:TJU_China/Parts">
 +
<div class="submenu_item">
 +
Parts Overview
 +
</div>
 +
</a>
 +
 +
<a href="https://2018.igem.org/Team:TJU_China/Basic_Part">
 +
<div class="submenu_item">
 +
Basic Parts
 +
</div>
 +
</a>
 +
 +
<a href="https://2018.igem.org/Team:TJU_China/Composite_Part">
 +
<div class="submenu_item">
 +
Composite Parts
 +
</div>
 +
</a>
 +
 +
<a href="https://2018.igem.org/Team:TJU_China/Part_Collection">
 +
<div class="submenu_item">
 +
Part Collection
 +
</div>
 +
</a>
 +
</div>
 +
 +
 +
 +
 +
 +
 +
<a href="https://2018.igem.org/Team:TJU_China/Safety">
 +
<div class="menu_item direct_link">
 +
SAFETY
 +
</div>
 +
</a>
 +
 +
 +
 +
 +
 +
 +
<div class="menu_item">
 +
<div class="submenu_control_icon"> </div>
 +
HUMAN PRACTICES
 +
</div>
 +
 +
<div class="submenu">
 +
 +
<a href="https://2018.igem.org/Team:TJU_China/Human_Practices">
 +
<div class="submenu_item">
 +
Human Practices
 +
</div>
 +
</a>
 +
 +
 +
<a href="https://2018.igem.org/Team:TJU_China/Public_Engagement">
 +
<div class="submenu_item">
 +
Education & Engagement
 +
</div>
 +
</a>
 +
 +
</div>
 +
 +
 +
 +
 +
 +
<div class="menu_item">
 +
<div class="submenu_control_icon"> </div>
 +
AWARDS
 +
</div>
 +
 +
<div class="submenu">
 +
 +
<a href="https://2018.igem.org/Team:TJU_China/Applied_Design">
 +
<div class="submenu_item">
 +
Applied Design
 +
</div>
 +
</a>
 +
 +
<a href="https://2018.igem.org/Team:TJU_China/Entrepreneurship">
 +
<div class="submenu_item">
 +
Entrepreneurship
 +
</div>
 +
</a>
 +
 +
<a href="https://2018.igem.org/Team:TJU_China/Hardware">
 +
<div class="submenu_item">
 +
Hardware
 +
</div>
 +
</a>
 +
 +
<a href="https://2018.igem.org/Team:TJU_China/Measurement">
 +
<div class="submenu_item">
 +
Measurement
 +
</div>
 +
</a>
 +
 +
<a href="https://2018.igem.org/Team:TJU_China/Model">
 +
<div class="submenu_item">
 +
Model
 +
</div>
 +
</a>
 +
 +
<a href="https://2018.igem.org/Team:TJU_China/Plant">
 +
<div class="submenu_item">
 +
Plant
 +
</div>
 +
</a>
 +
 +
 +
<a href="https://2018.igem.org/Team:TJU_China/Software">
 +
<div class="submenu_item">
 +
Software
 +
</div>
 +
</a>
 +
 +
</div>
 +
 +
 +
 +
<a href="https://igem.org/2018_Judging_Form?team=TJU_China">
 +
<div class="menu_item direct_link">
 +
JUDGING FORM ⇗
 +
</div>
 +
</a>
  
  
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
−
<!--- Menu --->
 
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
  
−
<nav>
 
−
    <ul class="main">
 
−
        <li>
 
−
            <a href="#">Home</a>
 
−
        </li>
 
−
        <li>
 
−
            <a href="#">Project▼</a>
 
−
            <ul class="drop menu1">
 
−
                <li><a href="#">Description</a></li>
 
−
                <li><a href="#">Design</a></li>
 
−
                <li><a href="#">Experiment</a></li>
 
−
                <li><a href="#">Notebook</a></li>
 
−
                <li><a href="#">Results</a></li>
 
−
                <li><a href="#">Demonstration</a></li>
 
−
                <li><a href="#">Applied Design</a></li>
 
−
                <li><a href="#">Entrepreneur- ship</a></li>
 
−
                <li><a href="#">Measurement</a></li>
 
  
−
            </ul>
 
  
−
        </li>
 
−
        <li><a href="#">Parts▼</a>
 
−
            <ul class="drop menu2">
 
−
                <li><a href="#">Parts Overview</a></li>
 
−
                <li><a href="#">Basic</a></li>
 
−
                <li><a href="#">Composite</a></li>
 
−
                <li><a href="#">Collection</a></li>
 
−
                <li><a href="#">Improve</a></li>
 
−
            </ul>
 
−
        </li>
 
−
        <li><a href="#">Model</a>
 
−
        </li>
 
−
        <li><a href="#">Safety</a>
 
−
        </li>
 
−
        <li><a href="#">HP▼</a>
 
−
            <ul class="drop menu5">
 
−
                <li><a href="#">Human Practise</a></li>
 
−
                <li><a href="#">Education& Engagement</a></li>
 
−
            </ul>
 
−
        </li>
 
−
        <li><a href="#">Team▼</a>
 
−
            <ul class="drop menu7">
 
−
                <li><a href="#">Members</a></li>
 
−
                <li><a href="#">Collaboration</a></li>
 
−
                <li><a href="#">Attribution</a></li>
 
−
            </ul>
 
−
        </li>
 
  
−
    </ul>
+
</div>
−
</nav>
+
  
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

Latest revision as of 13:43, 27 July 2018

HOME
TEAM
Team Members
Collaborations
PROJECT
Description
Design
Experiments
Notebook
InterLab
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts Overview
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Human Practices
Education & Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM ⇗