Difference between revisions of "Team:Shanghaitech"

(Replaced content with "{{Shanghaitech/custom}} {{Shanghaitech/css}} {{Shanghaitech/js}} <html lang="en"> <body> <div id="main-content-wrapper" style="width:100%"> <div id="content-block" style...")
Line 1: Line 1:
{{Shanghaitech}}
+
{{Shanghaitech/custom}}
 +
{{Shanghaitech/css}}
 +
{{Shanghaitech/js}}
 
<html lang="en">
 
<html lang="en">
  
<head>
+
<body>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
    <title>Shanghaitech</title>
+
    <meta name="description" content="">
+
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+
    <!-- 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 type="text/css">
+
<div id="main-content-wrapper" style="width:100%">
    #menu-bar {
+
<div id="content-block" style="width:100%">
        width: 100%;
+
        margin: -1px 0px 0px -6px;
+
        padding: 1.5px 0px 10px 260px;
+
        height: 30px;
+
        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);
+
  
 +
<img src="https://static.igem.org/mediawiki/2017/0/0b/T--Shanghaitech--Home-Homepage-story.png" alt="homepage-story" style="width:100%;height:auto" />
  
        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="https://2017.igem.org/Team:Shanghaitech">Home</a></li>
 
        <li><a href="https://2017.igem.org/Team:Shanghaitech/Project">Project</a>
 
            <ul>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Overview">Overview</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Background">Background</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Experiment_and_Modeling">Experiment and Modeling</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Device">Device</a></li>
 
            </ul>
 
        </li>
 
        <li><a href="#">Drylab</a>
 
            <ul>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Hardware">Hardware</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Software">Software</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Drylab">Drylab</a></li>
 
            </ul>
 
        </li>
 
        <li><a href="https://2017.igem.org/Team:Shanghaitech/Modeling">Modeling</a>
 
            <ul>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Introduction">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="#">HumanPractice</a>
 
            <ul>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Overview">Overview</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Public_Education">Public Education</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Workshop">Workshop</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Interview">Interview</a></li>
 
            </ul>
 
        </li>
 
        <li><a href="#">Collaboration</a>
 
            <ul>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Safety">Safety</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Library">Library</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Meet-Up">Meet-Up</a></li>
 
            </ul>
 
        </li>
 
        <li><a href="#">Notebook</a>
 
            <ul>
 
                <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="#">Notebook</a>
 
            <ul>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Calendar">Calendar</a></li>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Pro">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="#">Team</a>
 
              <ul>
 
            <li><a href="https://2017.igem.org/Team:Shanghaitech/TeamMeber">Team Member</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">Ackknowledgement</a></li>
 
        </ul>
 
          </li>
 
        <li><a href="https://2017.igem.org/Team:Shanghaitech/Achievement">Achievement</a>
 
            <ul>
 
                <li><a href="https://2017.igem.org/Team:Shanghaitech/Achievement">Achievement</a></li>
 
            </ul>
 
        </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>
 
<br>
 
<iframe src="https://shtusist.github.io/%E7%94%B5%E8%B7%AF1.2.4/protocol(basic).html" width="1600" height="600"></iframe>
 
    <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>
 
    <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;
 
    }
 
 
    .sidenav a {
 
    /*侧边栏调整字体距离框的距离*/
 
        padding: 10px 50px 15px 100px;
 
        text-decoration: none;
 
        font-size: 20px;
 
        color: #818181;
 
        display: block;
 
        transition: 0.3s;
 
    }
 
 
    .sidenav a:hover {
 
        color: #f1f1f1;
 
    }
 
 
    .sidenav .closebtn {
 
        position: absolute;
 
        top: -15px;
 
        right: -30px;
 
        font-size: 36px;
 
        margin-left: 50px;
 
    }
 
 
    @media screen and (max-height: 450px) {
 
        .sidenav {
 
            padding-top: 15px;
 
        }
 
        .sidenav a {
 
            font-size: 18px;
 
        }
 
    }
 
    </style>
 
 
    
 
    
 
</html>
 
</html>

Revision as of 13:51, 30 October 2017

homepage-story