Difference between revisions of "Template:TJU China"

Line 496: Line 496:
  
  
−
body {
 
−
        background-color: #1e1e1e;
 
−
        background-size: cover;
 
−
        height: 100vh;
 
  
  
−
        font-family: "Raleway", sans-serif;
 
−
        letter-spacing: 1px;
 
−
    }
 
  
 +
</style>
  
  
−
    ul.drop{
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
−
        padding-left:0;
+
<!--- THIS IS WHERE THE HTML BEGINS --->
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
  
−
    }
+
<head>
−
    ul {
+
−
        list-style: none;
+
−
    }
+
  
−
    nav {
+
<!-- This tells the browser that your page is responsive -->
−
        width:100%;
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
        height: 40px;
+
−
        margin: 0px auto;
+
−
        position: fixed;
+
−
        top:0px;
+
  
−
        text-align: center;
+
</head>
−
        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 {
 
−
        background-color: #631818;
 
−
    }
 
  
−
    .drop li {
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
−
        opacity: 0;
+
<!--- Menu --->
−
        transform-origin: top center;
+
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
−
    }
+
  
−
    .drop li a {
 
  
−
        background-color: rgba(23, 23, 50, 0.7);
 
  
−
        padding: 10px 0;
 
−
    }
 
  
−
    /*------------- menu1 animation---------------*/
+
<div class="igem_2018_team_mobile_bar">
−
    .main li:hover .menu1 li:first-of-type {
+
−
        animation: menu1 0s ease-in-out forwards;
+
<div class="igem_logo_mobile">
−
        animation-delay: 0s;
+
<img src="https://static.igem.org/mediawiki/2018/4/4f/2018_igem_mobile_menu_logo.svg">
−
    }
+
</div>
  
−
    .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) {
+
<div class="igem_menu_control_mobile">
−
        animation: menu1 0s ease-in-out forwards;
+
<img id="menu_control_image" src="https://static.igem.org/mediawiki/igem.org/3/3b/Menu_icon.svg">
−
        animation-delay: 0s;
+
</div>
−
    }
+
−
    .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 {
+
</div>
−
        animation: menu1 0s ease-in-out forwards;
+
−
        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_menu displaying_menu">
−
        animation: menu2 0s ease-in-out forwards;
+
−
        animation-delay: 0s;
+
−
    }
+
−
    .main li:hover .menu2 li:nth-of-type(4) {
+
−
        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 {
+
<a href="https://2018.igem.org/Team:TJU_China">
−
        0% {
+
<img src="http://placehold.it/350x150/e4dede/c4baba">
−
            opacity: 0;
+
</a>
−
            transform: scale(0.7);
+
−
        }
+
−
        50% {
+
−
            opacity: 0.5;
+
−
            transform: scale(1.1);
+
−
        }
+
−
        100% {
+
−
            opacity: 1;
+
−
            transform: scale(1);
+
−
        }
+
−
    }
+
  
−
    /*------------- menu3 animation -------------------*/
 
  
−
    .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) {
+
<a href="https://2018.igem.org/Team:TJU_China">
−
        animation: menu3 0s ease-in-out forwards;
+
<div class="menu_item direct_link">
−
        animation-delay: 0s;
+
HOME
−
    }
+
</div>
 +
</a>
  
−
    .main li:hover .menu3 li:nth-of-type(3) {
+
<!-- Team -->
−
        animation: menu3 0s ease-in-out forwards;
+
<div class="menu_item">
−
        animation-delay: 0s;
+
<div class="submenu_control_icon"> </div>
−
    }
+
TEAM
−
    .main li:hover .menu3 li:nth-of-type(4) {
+
</div>
−
        animation: menu3 0s ease-in-out forwards;
+
<div class="submenu">
−
        animation-delay: 0s;
+
−
    }
+
<a href="https://2018.igem.org/Team:TJU_China/Team">
−
    .main li:hover .menu3 li:nth-of-type(5) {
+
<div class="submenu_item">
−
        animation: menu3 0s ease-in-out forwards;
+
Team Members
−
        animation-delay: 0s;
+
</div>
−
    }
+
</a>
−
    .main li:hover .menu3 li:last-of-type {
+
−
        animation: menu3 0s ease-in-out forwards;
+
−
        animation-delay: 0s;
+
−
    }
+
  
−
    @keyframes menu3 {
+
<a href="https://2018.igem.org/Team:TJU_China/Collaborations">
−
        0% {
+
<div class="submenu_item">
−
            opacity: 0;
+
Collaborations
−
            transform: translateX(20px);
+
</div>
−
        }
+
</a>
−
        100% {
+
</div>
−
            opacity: 1;
+
               
−
            transform: translateX(0);
+
−
        }
+
−
    }
+
  
−
    /*------------- menu4 animation :None--------------*/
 
−
    /*------------- menu5 animation -------------------*/
 
  
−
    .main li:hover .menu5 li:first-of-type {
+
<!-- Project -->
−
        animation: menu5 0s ease-in-out forwards;
+
<div class="menu_item">
−
        animation-delay: 0s;
+
<div class="submenu_control_icon"> </div>
−
    }
+
PROJECT
 +
</div>
 +
<div class="submenu">
 +
 +
<a href="https://2018.igem.org/Team:TJU_China/Description">
 +
<div class="submenu_item">
 +
Description
 +
</div>
 +
</a>
  
−
    .main li:hover .menu5 li:last-of-type {
+
<a href="https://2018.igem.org/Team:TJU_China/Design">
−
        animation: menu5 0s ease-in-out forwards;
+
<div class="submenu_item">
−
        animation-delay: 0s;
+
Design
−
    }
+
</div>
 +
</a>
  
−
    @keyframes menu5 {
+
<a href="https://2018.igem.org/Team:TJU_China/Experiments">
−
        0% {
+
<div class="submenu_item">
−
            opacity: 0;
+
Experiments
−
            transform: translateX(50px) rotate(-90deg);
+
</div>
−
        }
+
</a>
−
        100% {
+
−
            opacity: 1;
+
−
            transform: translateX(0) rotate(0);
+
−
        }
+
  
−
    }
 
  
−
    /*------------- menu6 animation:None-------------------*/
+
<a href="https://2018.igem.org/Team:TJU_China/Notebook">
−
    /*------------- menu7 animation------------------------*/
+
<div class="submenu_item">
−
    .main li:hover .menu7 li:first-of-type {
+
Notebook
−
        animation: menu7 0s ease-in-out forwards;
+
</div>
−
        animation-delay: 0s;
+
</a>
−
    }
+
  
−
    .main li:hover .menu7 li:nth-of-type(2) {
+
<a href="https://2018.igem.org/Team:TJU_China/InterLab">
−
        animation: menu7 0s ease-in-out forwards;
+
<div class="submenu_item">
−
        animation-delay: 0s;
+
InterLab
−
    }
+
</div>
 +
</a>
  
−
    .main li:hover .menu7 li:last-of-type {
 
−
        animation: menu7 0s ease-in-out forwards;
 
−
        animation-delay: 0s;
 
−
    }
 
  
−
    @keyframes menu7 {
+
<a href="https://2018.igem.org/Team:TJU_China/Model">
−
        0% {
+
<div class="submenu_item">
−
            opacity: 0;
+
Model
−
            transform: rotateX(-90deg);
+
</div>
−
        }
+
</a>
−
        100% {
+
−
            opacity: 1;
+
−
            transform: rotateX(0);
+
−
        }
+
−
    }
+
  
 +
<a href="https://2018.igem.org/Team:TJU_China/Results">
 +
<div class="submenu_item">
 +
Results
 +
</div>
 +
</a>
  
  
 +
<a href="https://2018.igem.org/Team:TJU_China/Demonstrate">
 +
<div class="submenu_item">
 +
Demonstrate
 +
</div>
 +
</a>
  
 +
<a href="https://2018.igem.org/Team:TJU_China/Improve">
 +
<div class="submenu_item">
 +
Improve
 +
</div>
 +
</a>
  
−
</style>
+
<a href="https://2018.igem.org/Team:TJU_China/Attributions">
 +
<div class="submenu_item">
 +
Attributions
 +
</div>
 +
</a>
  
 +
</div>
  
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
−
<!--- THIS IS WHERE THE HTML BEGINS --->
 
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
  
−
<head>  
+
<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>
  
−
<!-- This tells the browser that your page is responsive -->
+
<a href="https://2018.igem.org/Team:TJU_China/Basic_Part">
−
<meta name="viewport" content="width=device-width, initial-scale=1">  
+
<div class="submenu_item">
 +
Basic Parts
 +
</div>
 +
</a>
  
−
</head>
+
<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>
  
  
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
−
<!--- Menu --->
 
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
  
 +
<a href="https://igem.org/2018_Judging_Form?team=TJU_China">
 +
<div class="menu_item direct_link">
 +
JUDGING FORM ⇗
 +
</div>
 +
</a>
  
−
<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>
 
−
</nav>
 
  
  
 +
</div>
  
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

Revision as of 11:55, 29 June 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 ⇗