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