Difference between revisions of "Team:HZAU-China/Demonstrate"

(Replaced content with "{{HZAU-China}} <html> </html>")
Line 1: Line 1:
 
{{HZAU-China}}
 
{{HZAU-China}}
 
<html>
 
<html>
 +
<html lang="en">
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <title>body</title>
 +
    <style>
 +
        *{margin: 0;padding: 0;}
 +
        .content_wrapper {
 +
            position: absolute;
 +
            top: 88px;
 +
            width: 100%;
 +
            height: 1800px;
 +
            background-color: white;
 +
        }
 +
        .main_part{
 +
            width: 80%;
 +
            height: 100%;
 +
            float: left;
 +
        }
 +
        .article{
 +
            width: 60%;
 +
            height: auto;
 +
            position: absolute;
 +
            top: 0;
 +
            left: 13%;
 +
            padding:0 2% 2% 2%;
 +
            background-color: white;
 +
        }
 +
              .content_part{
 +
            width: 20%;
 +
            height: auto;
 +
            position: fixed;
 +
            right: 0%;
 +
            background-color:white;
 +
            border-radius: 50%;
 +
        }
 +
        .content_part>a{
 +
            text-decoration: none;
 +
            color: white;
 +
            font-weight: bold;
 +
            font-size: 20px;
 +
            display: block;
 +
            padding-left: 10% ;
 +
            padding-top: 5px;
 +
            height: 25px;
 +
            width: 70%;
 +
            background-color: #0e5386;
 +
            float: left;
 +
            margin-bottom: 5px;
 +
            transition: 0.3s;
 +
        }
 +
        .menutitle{
 +
            height: 25px;
 +
            background-color: #0e5386;
 +
            cursor:pointer;
 +
            padding-top: 5px;
 +
            margin-bottom: 5px;
 +
            width:20%;
 +
            color: white;
 +
            float: right;
 +
        }
 +
        .little{
 +
            content: "";
 +
            float: left;
 +
            margin-top: 6px;
 +
            margin-left: 18px;
 +
            border-left: 6px solid transparent;
 +
            border-right: 6px solid transparent;
 +
            border-bottom: 6px solid #fff955;
 +
            opacity: 1;
 +
        }
 +
        .my_submenu{
 +
            margin:0 !important;
 +
            padding:0;
 +
            border:0;
 +
            margin-bottom: 0.5em;
 +
            text-align: center;
 +
            list-style: none;
 +
        }
 +
        .my_submenu a{
 +
            display: block;
 +
            padding-left: 10%;
 +
            background-image: linear-gradient(white, #efefef);
 +
            text-decoration: none;
 +
            background-color:white;
 +
            font-size: 20px;
 +
            color: #4b4a5e;
 +
        }
 +
        .menutitle:hover {
 +
            opacity: 0.2;
 +
        }
 +
        .content_part >a:hover{
 +
            background-color: rgba(14, 83, 134, 0.38);
 +
            color: #0e5386;
 +
        }
 +
        .my_submenu a:hover{
 +
            color: #e7376d;
 +
        }
 +
        .random{
 +
            position: relative ;
 +
        }
 +
        .random a{
 +
            position: absolute;
 +
            top: -88px;
 +
        }
 +
        .article p{
 +
            text-align:justify;
 +
            font-family: Verdana;
 +
            font-size: 18px !important;
 +
            line-height: 190%;
 +
            z-index:-1;
 +
        }
 +
        .article h2{
 +
            font-size: 50px;
 +
            font-family: Arial;
 +
            color: #1e6ed0;
 +
        }
 +
        .article h3{
 +
            line-height:120%;
 +
            display: block;
 +
            background-color:white;
 +
            padding-top:20px;
 +
            font-size: 30px;
 +
            font-family: Helvetica;
 +
            color: #0783d6;
 +
 +
        }
 +
        .article h4{
 +
            display: block;
 +
            padding-top: 18px;
 +
            background-color: white;
 +
            font-size: 25px;
 +
            font-family: Calibri;
 +
            color: #0f9ad6;
 +
        }
 +
        .article img{
 +
            display:block;
 +
            margin:0 auto;
 +
        }
 +
        .article video{
 +
            display:block;
 +
            margin:0 auto;
 +
        }
 +
        .pointer1{
 +
            position: absolute;
 +
            top: 37.5%;
 +
            left: 5%;
 +
            z-index: 100;
 +
        }
 +
        .pointer2{
 +
            position: absolute;
 +
            top: 68%;
 +
            left: 5%;
 +
            z-index: 100;
 +
        }
 +
        .pointer3{
 +
            position: absolute;
 +
            top: 77%;
 +
            left: 5%;
 +
            z-index: 100;
 +
        }
 +
        .pointer4{
 +
            position: absolute;
 +
            top: 84.5%;
 +
            left: 5%;
 +
            z-index: 100;
 +
        }
 +
    </style>
 +
 +
    <script type="text/javascript"
 +
            src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
 +
    </script>
 +
 +
    <script type="text/javascript">
 +
        if (document.getElementById){
 +
            document.write('<style type="text/css">\n')
 +
            document.write('.my_submenu{display: block;}\n')
 +
            document.write('</style>\n')
 +
        }
 +
 +
        function SwitchMenu(obj){
 +
            if(document.getElementById){
 +
                var el = document.getElementById(obj);
 +
                var ar = document.getElementById("masterdiv").getElementsByTagName("span");
 +
                if(el.style.display != "block"){
 +
                    for (var i=0; i<ar.length; i++){
 +
                        if (ar[i].className=="my_submenu") //DynamicDrive.com change
 +
                            ar[i].style.display = "none";
 +
                    }
 +
                    el.style.display = "block";
 +
                }else{
 +
                    el.style.display = "none";
 +
                }
 +
            }
 +
        }
 +
    </script>
 +
</head>
 +
 +
 +
<body>
 +
<div class="content_wrapper">
 +
 +
    <div class="content_part" id="masterdiv">
 +
        <a href="#A1">motility dynamic model</a>
 +
        <div class="menutitle" onclick="SwitchMenu('sub1')">
 +
            <div class="little"></div>
 +
        </div>
 +
        <ul class="my_submenu" id="sub1" style="display: block">
 +
            <li><a href="#A11">Optogenetics</a></li>
 +
            <li><a href="#A12">Motility</a></li>
 +
            <li><a href="#A13">Riboswitch</a></li>
 +
            <li><a href="#A14">Gene knockout</a></li>
 +
        </ul>
 +
 +
        <a href="#A2">Multiply model</a>
 +
        <div class="menutitle" onclick="SwitchMenu('sub2')">
 +
            <div class="little"></div>
 +
        </div>
 +
        <ul class="my_submenu" id="sub2" style="display: block">
 +
            <li><a href="#A21">models</a></li>
 +
            <li><a href="#A22">Software</a></li>
 +
            <li><a href="#A23">Hardware</a></li>
 +
        </ul>
 +
 +
        <a href="#A3">Human Practice</a>
 +
        <div class="menutitle" onclick="SwitchMenu('sub3')" >
 +
            <div class="little"></div>
 +
        </div>
 +
 +
 +
        <a href="#A4">Art Designer</a>
 +
        <div class="menutitle" onclick="SwitchMenu('sub4')">
 +
            <div class="little"></div>
 +
        </div>
 +
 +
 +
        <a href="#A5">Acknowledgement</a>
 +
        <div class="menutitle" onclick="SwitchMenu('sub5')">
 +
            <div class="little"></div>
 +
        </div>
 +
 +
    </div>
 +
 +
    <div class="main_part">
 +
        <img src="https://static.igem.org/mediawiki/2016/2/2b/Hzau16_team_paper_main_picture.png"  width="168px" height="2503px">
 +
        <div class="pointer1"> <img src="pointer3.png"></div>
 +
        <div class="pointer2"> <img src="pointer2.png"></div>
 +
        <div class="pointer3"> <img src="pointer4.png"></div>
 +
        <div class="pointer4"> <img src="pointer1.png"></div>
 +
 +
        <div class="article">
 +
           
 +
    </div>
 +
</div>
 +
 +
</body>
 +
  
  
  
 
</html>
 
</html>

Revision as of 13:47, 16 October 2016

body
motility dynamic model
Multiply model
Human Practice
Art Designer
Acknowledgement