Difference between revisions of "Team:Shanghaitech/Device"

(Created page with "{{Shanghaitech}}")
 
m (test)
Line 1: Line 1:
 
{{Shanghaitech}}
 
{{Shanghaitech}}
 +
<head>
 +
<style>.dev *{opacity:0.9}body{margin:0px;padding:0px;background:#f8f5ec}header{display:block;position:relative;margin:0px;padding:0px}.background{position:absolute}.container{position:relative}.normalized{margin:0px;padding:0px;list-style-type:none}.horizontal>li{float:left}.link-btn{text-decoration:none;color:black;display:block}#top-header{height:100px;position:fixed;width:100%;top:18px}#header-container{height:100px;position:absolute;width:100%}#header-bg{background:url("header-bg.png");background-size:contain;background-repeat:repeat-x;height:120%;width:100%;z-index:-1}#bg-casual{position:absolute;background:url("casual.png");background-size:contain;background-repeat:no-repeat;top:100px;left:-8px;height:194px;width:100%;z-index:-2}#header-bg-opacity{opacity:0.7}#logo-container{float:left;height:100px;top:0px}.img-contain{max-height:100%;max-width:100%;height:auto;width:auto}#menu-bar{top:0px;padding:0px;margin:auto;margin-right:100px;width:1200px;height:100px}#menu-bar>li{padding:auto;width:150px;text-align:center}#menu-bar ul{margin:0px;padding:0px;list-style-type:none}#menu-bar a{text-decoration:none;color:black;display:block}#menu-bar>li>a{height:100px;text-align:center;vertical-align:middle;font-size:large;position:relative}#menu-bar>li>a>span{position:absolute;top:50%;transform:translate(-50%, -50%)}#menu-bar>li:hover>a{background:rgba(255,100,100,0.5);box-shadow:1px,1px,1px,#000}#menu-bar>li:hover>a:hover{background:rgba(255,150,100,0.5)}.dropdown-list{display:none}.dropdown-list a{padding:15px 8px;background:rgba(255,100,100,0.5)}.dropdown-list a:hover{background:rgba(255,150,100,0.5)}#menu-bar>li:hover{box-shadow:3px 3px 3px black}#menu-bar>li:hover .dropdown-list{display:block}@media screen and (max-width: 1500px){.expanded #menu-bar{margin:0px;float:right}}@media screen and (max-width: 1400px){.expanded #logo-container{display:none}}@media screen and (max-width: 1200px){.expanded #menu-bar{float:none;width:100%}.expanded #menu-bar>li{width:12.5%}.expanded #menu-bar>li>a{font-size:medium}}.condensed#top-header{top:-37px}.condensed#top-header #logo-container{top:55px;height:45px}.condensed#top-header #menu-bar{top:55px;height:45px;width:800px}.condensed#top-header #menu-bar>li{width:100px}.condensed#top-header #menu-bar>li>a{height:45px;font-size:small}.condensed#top-header #menu-bar>li .dropdown-list{font-size:small}#top-header{top:8px;transition:top 0.3s ease-out;will-change:top}#logo-container,#menu-bar,#menu-bar>li,#menu-bar>li>a{transition:top 0.3s ease-out, height 0.3s ease-out, width 0.3s ease-out;will-change:top, height, width}
 +
</style>
 +
<body class='dev'>
 +
<div id="bg-casual" class="background"></div>
 +
<header id="top-header" class='expanded'>
 +
<div id='header-container' class='normalized'>
 +
    <div-- id="header-bg" class="background"><!--div id="header-bg-opacity"></div--></div>
 +
    <div id="logo-container" class="container"><img src="logo.png" alt="logo" class="img-contain" /></div>
 +
    <ul class="container horizontal normalized" id="menu-bar">
 +
        <li><a href="https://2017.igem.org/Team:Shanghaitech/"><span>Home</span></a></li>
 +
        <li><a href="https://2017.igem.org/Team:Shanghaitech/"><span>Project</span></a>
 +
            <ul class="dropdown-list">
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Overview</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Background</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Experiment and Modeling</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Device</a></li>
 +
            </ul>
 +
        </li>
 +
        <li><a href="#"><span>Drylab</span></a>
 +
            <ul class="dropdown-list">
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Hardware</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Software</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Drylab</a></li>
 +
            </ul>
 +
        </li>
 +
        <li><a href="https://2017.igem.org/Team:Shanghaitech/Modeling"><span>Modeling</span></a>
 +
            <ul class="dropdown-list">
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Introduction</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Model of parameter filling and simulation</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Theoretical Calculation of Modeling</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Model for Our Project</a></li>
 +
            </ul>
 +
        </li>
 +
        <li><a href="#"><span>Human Practice</span></a>
 +
            <ul class="dropdown-list">
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Overview</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Public Education</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Workshop</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Interview</a></li>
 +
            </ul>
 +
        </li>
 +
        <li><a href="#"><span>Collaboration</span></a>
 +
            <ul class="dropdown-list">
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Safety</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Library</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/">Meet-Up</a></li>
 +
            </ul>
 +
        </li>
 +
        <li><a href="#"><span>Notebook</span></a>
 +
            <ul class="dropdown-list">
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Calendar">Calendar</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Protocol">Protocol</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Parts">Parts</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/RawMaterial">Raw Material</a></li>
 +
            </ul>
 +
        </li>
 +
        <li><a href="#"><span>Team</span></a>
 +
            <ul class="dropdown-list">
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/TeamMember">Team Members</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Attributions">Attribution</a></li>
 +
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Acknowledgement">Acknowledgement</a></li>
 +
            </ul>
 +
        </li>
 +
    </ul></div>
 +
</header>
 +
<div style="position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%);z-index: 999;"><a href="javascript:change()" style="padding: 100px; display:block;">change header layout</a><a href="javascript:change2()" style="padding: 100px;  display:block;">change opacity</a>
 +
</div>
 +
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<p>This is a following paragraph.</p>
 +
<script>
 +
    var a = document.getElementById('top-header');
 +
    var b = document.body;
 +
    function change(){
 +
        if (a.className == "expanded") {
 +
            a.className='condensed';
 +
        } else {
 +
            a.className='expanded';
 +
        }
 +
    }
 +
    function change2(){
 +
        if (b.className == "dev") {
 +
            b.className='';
 +
        } else {
 +
            b.className='dev';
 +
        }
 +
    }
 +
</script>
 +
</body>

Revision as of 12:32, 27 October 2017

<head> <style>.dev *{opacity:0.9}body{margin:0px;padding:0px;background:#f8f5ec}header{display:block;position:relative;margin:0px;padding:0px}.background{position:absolute}.container{position:relative}.normalized{margin:0px;padding:0px;list-style-type:none}.horizontal>li{float:left}.link-btn{text-decoration:none;color:black;display:block}#top-header{height:100px;position:fixed;width:100%;top:18px}#header-container{height:100px;position:absolute;width:100%}#header-bg{background:url("header-bg.png");background-size:contain;background-repeat:repeat-x;height:120%;width:100%;z-index:-1}#bg-casual{position:absolute;background:url("casual.png");background-size:contain;background-repeat:no-repeat;top:100px;left:-8px;height:194px;width:100%;z-index:-2}#header-bg-opacity{opacity:0.7}#logo-container{float:left;height:100px;top:0px}.img-contain{max-height:100%;max-width:100%;height:auto;width:auto}#menu-bar{top:0px;padding:0px;margin:auto;margin-right:100px;width:1200px;height:100px}#menu-bar>li{padding:auto;width:150px;text-align:center}#menu-bar ul{margin:0px;padding:0px;list-style-type:none}#menu-bar a{text-decoration:none;color:black;display:block}#menu-bar>li>a{height:100px;text-align:center;vertical-align:middle;font-size:large;position:relative}#menu-bar>li>a>span{position:absolute;top:50%;transform:translate(-50%, -50%)}#menu-bar>li:hover>a{background:rgba(255,100,100,0.5);box-shadow:1px,1px,1px,#000}#menu-bar>li:hover>a:hover{background:rgba(255,150,100,0.5)}.dropdown-list{display:none}.dropdown-list a{padding:15px 8px;background:rgba(255,100,100,0.5)}.dropdown-list a:hover{background:rgba(255,150,100,0.5)}#menu-bar>li:hover{box-shadow:3px 3px 3px black}#menu-bar>li:hover .dropdown-list{display:block}@media screen and (max-width: 1500px){.expanded #menu-bar{margin:0px;float:right}}@media screen and (max-width: 1400px){.expanded #logo-container{display:none}}@media screen and (max-width: 1200px){.expanded #menu-bar{float:none;width:100%}.expanded #menu-bar>li{width:12.5%}.expanded #menu-bar>li>a{font-size:medium}}.condensed#top-header{top:-37px}.condensed#top-header #logo-container{top:55px;height:45px}.condensed#top-header #menu-bar{top:55px;height:45px;width:800px}.condensed#top-header #menu-bar>li{width:100px}.condensed#top-header #menu-bar>li>a{height:45px;font-size:small}.condensed#top-header #menu-bar>li .dropdown-list{font-size:small}#top-header{top:8px;transition:top 0.3s ease-out;will-change:top}#logo-container,#menu-bar,#menu-bar>li,#menu-bar>li>a{transition:top 0.3s ease-out, height 0.3s ease-out, width 0.3s ease-out;will-change:top, height, width} </style> <body class='dev'>

<header id="top-header" class='expanded'>

<div-- id="header-bg" class="background">
<img src="logo.png" alt="logo" class="img-contain" />
</div>

</header>

<a href="javascript:change()" style="padding: 100px; display:block;">change header layout</a><a href="javascript:change2()" style="padding: 100px; display:block;">change opacity</a>

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

This is a following paragraph.

<script> 

   var a = document.getElementById('top-header');
   var b = document.body;
   function change(){
       if (a.className == "expanded") {
           a.className='condensed';
       } else {
           a.className='expanded';
       }
   }
   function change2(){
       if (b.className == "dev") {
           b.className=;
       } else {
           b.className='dev';
       }
   }

</script> </body>