Difference between revisions of "Team:Shanghaitech"

 
(67 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
{{Shanghaitech}}
+
{{Shanghaitech/custom}}
 +
{{Shanghaitech/css}}
 +
{{Shanghaitech/js}}
 
<html lang="en">
 
<html lang="en">
−
 
 
<head>
 
<head>
−
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
<style type="text/css">
−
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
     #home-button{height: 210px;width: 225px;left: 50%;    margin-bottom: 30px;
−
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
                display: inline-block;    position: relative;    left: 50%;    transform: translateX(-50%);}
−
     <title>Shanghaitech</title>
+
     #home-button #home-button-bg{
−
    <meta name="description" content="">
+
        background: url("https://static.igem.org/mediawiki/2017/5/5f/T--Shanghaitech--Home-Homepage-botton-thick.png") no-repeat 50% 50%/contain;
−
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+
         width: 336.75px;height: 199.5px;position: absolute;display:block;
−
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+
−
    <!--[if lt IE 9]>
+
−
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+
−
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+
−
    <![endif]-->
+
−
    <link rel="stylesheet" href="css/demo.css">
+
−
    <link rel="stylesheet" href="css/footer-distributed-with-address-and-phones.css">
+
−
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
+
−
    <link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
+
−
    <link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Shanghaitech/CSS/DEMO?action=raw&ctype=text/css ">
+
−
    <style>
+
−
    .sidenav {
+
−
        height: 50%;
+
−
         width: 0;
+
−
        position: fixed;
+
−
        z-index: 1;
+
−
        top: 0;
+
−
        right: 0;
+
−
        background-color: #F4E6CF;
+
−
 
+
−
        overflow-x: hidden;
+
−
        transition: 0.5s;
+
−
        padding-top: 40px;
+
−
        margin: 200px -6px 0 100px;
+
 
     }
 
     }
−
 
+
     #home-button:hover #home-button-bg{
−
     .sidenav a {
+
         background: url("https://static.igem.org/mediawiki/2017/7/7e/T--Shanghaitech--Home-Homepage-button-flat.png") no-repeat 50% 50%/contain;height: 295.5px;width: 424.5px;position: absolute;left: -94.5px;top: -69px;
−
    /*侧边栏调整字体距离框的距离*/
+
−
         padding: 10px 50px 15px 100px;
+
−
        text-decoration: none;
+
−
        font-size: 20px;
+
−
        color: #818181;
+
−
        display: block;
+
−
        transition: 0.3s;
+
 
     }
 
     }
  
−
    .sidenav a:hover {
+
</style>
−
        color: #f1f1f1;
+
</head>
−
     }
+
<body>
 +
<img src="https://static.igem.org/mediawiki/2017/7/7e/T--Shanghaitech--Home-Homepage-button-flat.png" style="display:none"/>
 +
<div id="main-content-wrapper" style="max-width:none;">
 +
<div id="content-block" style="max-width:none;padding:0px">
 +
<a href="https://2017.igem.org/Team:Shanghaitech/Awards" style="
 +
    color: #607D6F;
 +
     display: block;
 +
    max-width: 600px;
 +
    margin: 0 auto;
 +
"><h1 style="
 +
">奖项及致谢(Click me to see our awards and our special thanks)</h1></a>
  
−
    .sidenav .closebtn {
+
<div id="home-story-wrapper" style="position:relative;">
−
        position: absolute;
+
−
        top: -15px;
+
−
        right: -30px;
+
−
        font-size: 36px;
+
−
        margin-left: 50px;
+
−
    }
+
  
−
    @media screen and (max-height: 450px) {
+
     <img src="https://static.igem.org/mediawiki/2017/0/0b/T--Shanghaitech--Home-Homepage-story.png" alt="homepage-story" style="width:100%;height:auto;max-height:none" height=3000 width=2388/>
−
        .sidenav {
+
</div>
−
            padding-top: 15px;
+
−
        }
+
−
        .sidenav a {
+
−
            font-size: 18px;
+
−
        }
+
−
    }
+
−
     </style>
+
−
    <style type="text/css">
+
−
    body {
+
−
        background: url(https://static.igem.org/mediawiki/2017/c/c0/T--Shanghaitech--background4.png);
+
−
    }
+
−
    </style>
+
−
    <style type="text/css">
+
−
    #menu-bar {
+
−
        width: 100%;
+
−
        margin: -1px 0px 0px -6px;
+
−
        padding: 1.5px 0px 10px 260px;
+
−
        height: 20px;
+
−
        line-height: 100%;
+
−
        border-radius: 0px;
+
−
        -webkit-border-radius: 0px;
+
−
        -moz-border-radius: 0px;
+
−
        box-shadow: 0px 2px 3px #666666;
+
−
        -webkit-box-shadow: 0px 2px 3px #666666;
+
−
        -moz-box-shadow: 0px 2px 3px #666666;
+
−
        background: url(https://static.igem.org/mediawiki/2017/thumb/0/07/T--Shanghaitech--nav.png/795px-T--Shanghaitech--nav.png);
+
  
 +
<a href="https://2017.igem.org/Team:Shanghaitech/project" id="home-button"><span id="home-button-bg"></span></a>
 +
<p style="text-align: center"><video height="600" src="https://static.igem.org/mediawiki/2017/1/10/T--Shanghaitech--Hardware--Project.mp4" controls style="max-width:100%" poster="https://static.igem.org/mediawiki/2017/thumb/e/e6/T--Shanghaitech--works363636hop1.jpg/800px-T--Shanghaitech--works363636hop1.jpg"></video>
 +
</p>
  
−
        border: solid 0px #6D6D6D;
 
−
        position: fixed;
 
−
        z-index: 999;
 
−
    }
 
  
−
    #menu-bar li {
+
</div></div>
−
        margin: 0px 0px 10px 0px;
+
−
        padding: 5px 5px 0px 6px;
+
−
        float: left;
+
−
        position: relative;
+
−
        list-style: none;
+
−
    }
+
  
−
    #menu-bar a {
 
−
        font-weight: bolder;
 
−
        font-family: arial;
 
−
        font-style: normal;
 
−
        font-size: 15px;
 
−
        color: #000000;
 
−
        text-decoration: none;
 
−
        display: block;
 
−
        padding: 4px 19px 6px 16px;
 
−
        margin: 0;
 
−
        margin-bottom: 10px;
 
−
        border-radius: 50px;
 
−
        -webkit-border-radius: 50px;
 
−
        -moz-border-radius: 50px;
 
−
        text-shadow: 2px 2px 25px #3E17FF;
 
−
    }
 
−
 
−
    #menu-bar li ul li a {
 
−
        margin: 0;
 
−
    }
 
−
 
−
    #menu-bar .active a,
 
−
    #menu-bar li:hover>a {
 
−
 
−
 
−
        /*菜单悬浮颜色*/
 
−
        background: #D47272;
 
−
        background: linear-gradient(top, #EB672F, #A1A1A1);
 
−
        background: -ms-linear-gradient(top, #EB672F, #A1A1A1);
 
−
        background: -webkit-gradient(linear, left top, left bottom, from(#EB672F), to(#A1A1A1));
 
−
        background: -moz-linear-gradient(top, #EB672F, #A1A1A1);
 
−
        color: #140044;
 
−
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
 
−
        -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
 
−
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
 
−
        text-shadow: 0px 0px 0px #FFFFFF;
 
−
    }
 
−
 
−
    #menu-bar ul li:hover a,
 
−
    #menu-bar li:hover li a {
 
−
        background: none;
 
−
        border: none;
 
−
        color: #666;
 
−
        -box-shadow: none;
 
−
        -webkit-box-shadow: none;
 
−
        -moz-box-shadow: none;
 
−
    }
 
−
 
−
    #menu-bar ul a:hover {
 
−
        /*子菜单悬浮颜色*/
 
−
        background: #0399D4 !important;
 
−
        background: linear-gradient(top, #346BEC, #0186BA) !important;
 
−
        background: -ms-linear-gradient(top, #346BEC, #0186BA) !important;
 
−
        background: -webkit-gradient(linear, left top, left bottom, from(#346BEC), to(#0186BA)) !important;
 
−
        background: -moz-linear-gradient(top, #346BEC, #0186BA) !important;
 
−
        color: #000000 !important;
 
−
        border-radius: 0;
 
−
        -webkit-border-radius: 0;
 
−
        -moz-border-radius: 0;
 
−
        text-shadow: 2px 2px 9px #FFFFFF;
 
−
    }
 
−
 
−
    #menu-bar li:hover>ul {
 
−
        display: block;
 
−
    }
 
−
 
−
    #menu-bar ul {
 
−
        background: #DDDDDD;
 
−
        background: linear-gradient(top, #FFFBC4, #CFCFCF);
 
−
        background: -ms-linear-gradient(top, #FFFBC4, #CFCFCF);
 
−
        background: -webkit-gradient(linear, left top, left bottom, from(#FFFBC4), to(#CFCFCF));
 
−
        background: -moz-linear-gradient(top, #FFFBC4, #CFCFCF);
 
−
        display: none;
 
−
        margin: 0;
 
−
        padding: 0;
 
−
        width: 185px;
 
−
        position: absolute;
 
−
        top: 33px;
 
−
        left: 0;
 
−
        border: solid 1px #B4B4B4;
 
−
        border-radius: 10px;
 
−
        -webkit-border-radius: 10px;
 
−
        -moz-border-radius: 10px;
 
−
        -webkit-box-shadow: 0px 2px 3px #222222;
 
−
        -moz-box-shadow: 0px 2px 3px #222222;
 
−
        box-shadow: 0px 2px 3px #222222;
 
−
    }
 
−
 
−
    #menu-bar ul li {
 
−
        float: none;
 
−
        margin: 0;
 
−
        padding: 0;
 
−
    }
 
−
 
−
    #menu-bar ul a {
 
−
        padding: 10px 0px 10px 15px;
 
−
        color: #424242 !important;
 
−
        font-size: 11px;
 
−
        font-style: normal;
 
−
        font-family: arial;
 
−
        font-weight: bold;
 
−
        text-shadow: 2px 2px 3px #FFFFFF;
 
−
    }
 
−
 
−
    #menu-bar ul li:first-child>a {
 
−
        border-top-left-radius: 10px;
 
−
        -webkit-border-top-left-radius: 10px;
 
−
        -moz-border-radius-topleft: 10px;
 
−
        border-top-right-radius: 10px;
 
−
        -webkit-border-top-right-radius: 10px;
 
−
        -moz-border-radius-topright: 10px;
 
−
    }
 
−
 
−
    #menu-bar ul li:last-child>a {
 
−
        border-bottom-left-radius: 10px;
 
−
        -webkit-border-bottom-left-radius: 10px;
 
−
        -moz-border-radius-bottomleft: 10px;
 
−
        border-bottom-right-radius: 10px;
 
−
        -webkit-border-bottom-right-radius: 10px;
 
−
        -moz-border-radius-bottomright: 10px;
 
−
    }
 
−
 
−
    #menu-bar:after {
 
−
        content: ".";
 
−
        display: block;
 
−
        clear: both;
 
−
        visibility: hidden;
 
−
        line-height: 0;
 
−
        height: 0;
 
−
    }
 
−
 
−
    #menu-bar {
 
−
        display: inline-block;
 
−
    }
 
−
 
−
    html[xmlns] #menu-bar {
 
−
        display: block;
 
−
    }
 
−
 
−
    * html #menu-bar {
 
−
        height: 1%;
 
−
    }
 
−
    </style>
 
−
    <style type="text/css">
 
−
        .content {
 
−
        background-color: rgba(255, 255, 255, 0.90);
 
−
        width: 73%;
 
−
        border: 1px solid #cccccc;
 
−
        border-radius: 10px;
 
−
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);
 
−
        color: #3d3d3d;
 
−
        font-size: 18px;
 
−
        margin-left: 2%;
 
−
        margin-top: 50px;
 
−
        text-align: justify;
 
−
        padding: 10px 70px 30px 70px;
 
−
    </style>
 
−
    <style type="text/css">
 
−
 
−
    </style>
 
−
</head>
 
−
 
−
<body>
 
−
    <ul id="menu-bar">
 
−
        <li class="active"><a href="#">Home</a></li>
 
−
        <li><a href="#">Project</a>
 
−
            <ul>
 
−
                <li><a href="#">Overview</a></li>
 
−
                <li><a href="#">Background</a></li>
 
−
                <li><a href="#">Design</a></li>
 
−
                <li><a href="#">Result</a></li>
 
−
            </ul>
 
−
        </li>
 
−
        <li><a href="#">Drylab</a>
 
−
            <ul>
 
−
                <li><a href="#">Hardware</a></li>
 
−
                <li><a href="#">Software</a></li>
 
−
                <li><a href="#">Co-culture</a></li>
 
−
            </ul>
 
−
        </li>
 
−
        <li><a href="#">HumanPractice</a>
 
−
            <ul>
 
−
                <li><a href="#">Interview</a></li>
 
−
                <li><a href="#">Fablab</a></li>
 
−
                <li><a href="#">Public Education</a></li>
 
−
            </ul>
 
−
        </li>
 
−
        <li><a href="#">Modeling</a>
 
−
            <ul>
 
−
                <li><a href="#">Services Sub Menu 1</a></li>
 
−
                <li><a href="#">Services Sub Menu 2</a></li>
 
−
                <li><a href="#">Services Sub Menu 3</a></li>
 
−
                <li><a href="#">Services Sub Menu 4</a></li>
 
−
            </ul>
 
−
        </li>
 
−
        <li><a href="#">Notebook</a>
 
−
            <ul>
 
−
                <li><a href="#">Services Sub Menu 1</a></li>
 
−
                <li><a href="#">Services Sub Menu 2</a></li>
 
−
                <li><a href="#">Services Sub Menu 3</a></li>
 
−
                <li><a href="#">Services Sub Menu 4</a></li>
 
−
            </ul>
 
−
        </li>
 
−
        <li><a href="#">Team</a></li>
 
−
        <ul>
 
−
            <li><a href="#">Team Member</a></li>
 
−
            <li><a href="#">Attribution</a></li>
 
−
            <li><a href="#">Ackknowledgement</a></li>
 
−
        </ul>
 
−
        <li><a href="#">Judge</a></li>
 
−
    </ul>
 
−
    <div id="mySidenav" class="sidenav">
 
−
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
 
−
        <a href="#">A</a>
 
−
        <a href="#">S</a>
 
−
        <a href="#">Cl</a>
 
−
        <a href="#">Co</a>
 
−
    </div>
 
−
 
−
    <br>
 
−
    <br>
 
−
    <br>
 
−
    <br>
 
−
    <br>
 
−
    <br>
 
−
    <br>
 
−
    <div class="content">
 
−
      <h2>Right-\n</h2>
 
−
    <p>Click on the elavigation menu.</p>
 
−
    <span style="font-size:30px;cursor:pointer" onclick="closeNav()">&#9776; close</span>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
        <p>22333</p>
 
−
    </div>
 
−
    <footer class="footer-distributed">
 
−
        <div class="footer-left">
 
−
            <h3>Company<span>logo</span></h3>
 
−
            <br>
 
−
            <br>
 
−
            <p class="footer-links">
 
−
                <a href="#">Home</a> ·
 
−
                <a href="#">Drylab</a> ·
 
−
                <a href="#">Human Practice</a> ·
 
−
                <a href="#">Modeling</a> ·
 
−
                <a href="#">Team</a> ·
 
−
                <a href="#">Judge</a>
 
−
            </p>
 
−
            <br>
 
−
            <br>
 
−
            <br>
 
−
            <br>
 
−
            <p class="footer-company-name">&copy;Copyright 2017 Shanghaitech_Igem | Made by hyp | All rights reserved</p>
 
−
        </div>
 
−
        <div class="footer-center">
 
−
            <div>
 
−
                <i class="fa fa-map-marker"></i>
 
−
                <p><span>393 Middle Huaxia Road</span> Pudong, Shanghai, 201210</p>
 
−
            </div>
 
−
            <div>
 
−
                <i class="fa fa-phone"></i>
 
−
                <p>+86 189 3077 2686</p>
 
−
            </div>
 
−
            <div>
 
−
                <i class="fa fa-envelope"></i>
 
−
                <p><a href="mailto:sypongoaoeng+igem@gmail.com">sypongoaoeng+igem@gmail.com</a></p>
 
−
            </div>
 
−
        </div>
 
−
        <div class="footer-right">
 
−
            <p class="footer-company-about">
 
−
                <span>About Us</span> Lorem ipsum dolor sit amet, consectateur adispicing elit. Fusce euismod convallis velit, eu auctor lacus vehicula sit amet.
 
−
            </p>
 
−
            <div class="footer-icons">
 
−
                <a href="#"><i class="fa fa-facebook"></i></a>
 
−
                <a href="#"><i class="fa fa-youtube"></i></a>
 
−
                <a href="#"><i class="fa fa-wechat"></i></a>
 
−
                <a href="#"><i class="fa fa-github"></i></a>
 
−
            </div>
 
−
        </div>
 
−
    </footer>
 
 
</body>
 
</body>
−
<script>
 
−
function openNav() {
 
−
    document.getElementById("mySidenav").style.width = "250px";
 
−
}
 
−
openNav()
 
−
 
−
function closeNav() {
 
−
    document.getElementById("mySidenav").style.width = "0";
 
−
}
 
−
</script>
 
  
 
</html>
 
</html>

Latest revision as of 07:34, 6 December 2017

奖项及致谢(Click me to see our awards and our special thanks)
homepage-story