Difference between revisions of "Team:ASTWS-China/test"

 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
     <head>
 
     <head>
−
         <meta charset="utf-8">
+
         <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
−
          
+
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
         <style>
 
         <style>
 
              
 
              
Line 27: Line 27:
 
                 width:80%;
 
                 width:80%;
 
                 margin-top: 38px;
 
                 margin-top: 38px;
 +
                margin-left: auto;
 
             }
 
             }
 
              
 
              
Line 45: Line 46:
 
                 box-shadow: 0 0 50px 0 rgba(0,0,0,0.35);
 
                 box-shadow: 0 0 50px 0 rgba(0,0,0,0.35);
 
                 text-align: center;
 
                 text-align: center;
 +
                z-index: 3;
 
             }
 
             }
 
              
 
              
Line 58: Line 60:
 
                 height: 100%;
 
                 height: 100%;
 
                 font-size: 18px;
 
                 font-size: 18px;
−
                font-weight: bold;
 
 
                 text-align: center;
 
                 text-align: center;
 
             }
 
             }
 
              
 
              
−
             #menu {
+
             .menu {
 
                 list-style-image: none;
 
                 list-style-image: none;
 
             }
 
             }
−
/*
 
−
            .menu::before {
 
−
                float:left;
 
−
                position: relative;
 
−
                content:"";
 
−
                width: 250px;
 
−
                height: 100px;
 
−
            }
 
−
*/
 
 
              
 
              
 
             /* Button */
 
             /* Button */
Line 134: Line 126:
 
             .menu li ul li a:hover {
 
             .menu li ul li a:hover {
 
                 background-color: rgb(152,193,147);
 
                 background-color: rgb(152,193,147);
 +
            }
 +
            .menu .icon {
 +
                display: none;
 
             }
 
             }
 
              
 
              
−
             #logo {
+
             @media screen and (max-width: 1000px) {
−
                 height: 30%
+
                 .menu li{
−
                 width: 30%;
+
                    display: block;
 +
                 }
 +
               
 +
                .menu li ul li a.icon {
 +
                    float: right;
 +
                    display: block;
 +
                }
 
             }
 
             }
 
              
 
              
−
             #QR {
+
             @media screen and (max-width: 1000px) {
−
                 height: 30%
+
                 .menu.responsive li {position: relative;}
−
                 width: 30%;
+
                 .menu.responsive li ul li a.icon {
 +
                    position: absolute;
 +
                    right: 0;
 +
                    top: 0;
 +
                }
 +
                .menu.responsive li a {
 +
                    float: none;
 +
                    display: block;
 +
                    text-align: center;
 +
                }
 +
               
 +
                .menu.responsive li {
 +
                    float: none;
 +
                }
 +
                .menu.responsive li ul {
 +
                    position: relative;
 +
                }
 +
                .menu.responsive li ul li a{
 +
                    display: block;
 +
                    width: 100%;
 +
                    text-align: center;
 +
                }
 
             }
 
             }
 
              
 
              
 
         </style>
 
         </style>
 +
       
 +
        <script>
 +
            function myFunction() {
 +
                var x = document.getElementById("mymenu");
 +
                if (x.className === "menu li") {
 +
                    x.className += " responsive";
 +
                }
 +
                else {
 +
                    x.className = "menu li";
 +
                }
 +
            }
 +
        </script>
 
          
 
          
 
     </head>
 
     </head>
Line 154: Line 188:
 
             <div id="burger"></div>
 
             <div id="burger"></div>
 
             <div class="menu_wrapper">
 
             <div class="menu_wrapper">
−
                 <ul class="menu" id="menu">
+
                 <ul class="menu" id="mymenu">
−
                     <li id="team_name"><a href="#">ASTWS-China</a></li>
+
                     <li id="team_name"><a href="https://2018.igem.org/Team:ASTWS-China">ASTWS-China</a></li>
 
                     <li><a href="#">Project▾</a>
 
                     <li><a href="#">Project▾</a>
 
                         <ul>
 
                         <ul>
 
                             <li><a href="https://2018.igem.org/Team:ASTWS-China/Attributions">Attributions</a></li>
 
                             <li><a href="https://2018.igem.org/Team:ASTWS-China/Attributions">Attributions</a></li>
 
                             <li><a href="https://2018.igem.org/Team:ASTWS-China/Demonstrate">Demonstrate</a></li>
 
                             <li><a href="https://2018.igem.org/Team:ASTWS-China/Demonstrate">Demonstrate</a></li>
−
                             <li><a href="#">Description</a></li>
+
                             <li><a href="https://2018.igem.org/Team:ASTWS-China/Description">Description</a></li>
 
                             <li><a href="https://2018.igem.org/Team:ASTWS-China/Design">Design</a></li>
 
                             <li><a href="https://2018.igem.org/Team:ASTWS-China/Design">Design</a></li>
 +
                            <li><a href="https://2018.igem.org/Team:ASTWS-China/Improve">Improve</a></li>
 
                             <li><a href="https://2018.igem.org/Team:ASTWS-China/InterLab">InterLab</a></li>
 
                             <li><a href="https://2018.igem.org/Team:ASTWS-China/InterLab">InterLab</a></li>
 
                             <li><a href="https://2018.igem.org/Team:ASTWS-China/Model">Modeling</a></li>
 
                             <li><a href="https://2018.igem.org/Team:ASTWS-China/Model">Modeling</a></li>
Line 176: Line 211:
 
                     <li><a href="#">Awards▾</a>
 
                     <li><a href="#">Awards▾</a>
 
<ul>
 
<ul>
−
<li><a href="#">Applied Design</a></li>
+
<li><a href="https://2018.igem.org/Team:ASTWS-China/Applied_Design">Applied Design</a></li>
−
<li><a href="#">Entrepreneurship</a></li>
+
<li><a href="https://2018.igem.org/Team:ASTWS-China/Measurement">Measurement</a></li>
−
<li><a href="#">Hardware</a></li>
+
−
<li><a href="#">Measurement</a></li>
+
−
<li><a href="#">Model</a></li>
+
−
<li><a href="#">Software</a></li>
+
 
</ul>
 
</ul>
 
</li>
 
</li>
Line 187: Line 218:
 
                     <li><a href="https://2018.igem.org/Team:ASTWS-China/Safety">Safety</a></li>
 
                     <li><a href="https://2018.igem.org/Team:ASTWS-China/Safety">Safety</a></li>
 
                      
 
                      
−
                     <li><a href="https://2018.igem.org/Team:ASTWS-China/Human_Practices">Human Practices▾</a>
+
                     <li><a href="#">Human Practices▾</a>
 
                         <ul>
 
                         <ul>
−
                             <li><a href="https://2018.igem.org/Team:ASTWS-China/Human_Practices">Human Practices</a></li>
+
                             <li><a href="https://2018.igem.org/Team:ASTWS-China/Human_Practices">Silver</a></li>
−
                             <li><a href="https://2018.igem.org/Team:ASTWS-China/Integrated_Human_Practice">Integrated Human Practices</a></li>
+
                             <li><a href="https://2018.igem.org/Team:ASTWS-China/Human_Practices#gold">Gold Integrated</a></li>
 
                         </ul>
 
                         </ul>
 
                     </li>
 
                     </li>
 
                      
 
                      
 
                     <li><a href="https://igem.org/2018_Judging_Form?team=ASTWS-China">Judging Form</a></li>
 
                     <li><a href="https://igem.org/2018_Judging_Form?team=ASTWS-China">Judging Form</a></li>
 +
                   
 +
                    <li><a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a></li>
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 +
       
 +
    <h1>This is a test case.</h1>
 
     </body>
 
     </body>
−
   
 
−
    <footer id="footer" class="clearfix" style="color: lightgrey">
 
−
        <div class="padding-wrapper">
 
−
            <p class="alignleft">Copyright &#169; 2018 Team:ASTWS-China All Rights Reserved.</p>
 
−
            <img id="logo" src="https://static.igem.org/mediawiki/2018/d/df/T--ASTWS-China--Team_Logo.jpg">
 
−
            <img id="QR" src="https://static.igem.org/mediawiki/2018/0/00/T--ASTWS-China--QR_Code.jpg">
 
−
        </div>
 
−
    </footer>
 
  
 
</html>
 
</html>

Latest revision as of 00:17, 18 October 2018

This is a test case.