|
|
(63 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 type="text/css">
| + | |
− | #menu-bar { | + | |
− | 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); | + | |
− | | + | |
− | | + | |
− | border: solid 0px #6D6D6D; | + | |
− | position: fixed;
| + | |
− | z-index: 999;
| + | |
| } | | } |
− | | + | #home-button:hover #home-button-bg{ |
− | #menu-bar li { | + | 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; |
− | margin: 0px 0px 10px 0px; | + | |
− | padding: 5px 5px 0px 6px;
| + | |
− | float: left;
| + | |
− | position: relative;
| + | |
− | list-style: none;
| + | |
| } | | } |
| | | |
− | #menu-bar a {
| + | </style> |
− | font-weight: bolder;
| + | </head> |
− | font-family: arial;
| + | <body> |
− | font-style: normal;
| + | <img src="https://static.igem.org/mediawiki/2017/7/7e/T--Shanghaitech--Home-Homepage-button-flat.png" style="display:none"/> |
− | font-size: 15px;
| + | <div id="main-content-wrapper" style="max-width:none;"> |
− | color: #000000;
| + | <div id="content-block" style="max-width:none;padding:0px"> |
− | text-decoration: none;
| + | <a href="https://2017.igem.org/Team:Shanghaitech/Awards" style=" |
− | display: block;
| + | color: #607D6F; |
− | padding: 4px 19px 6px 16px;
| + | display: block; |
− | margin: 0;
| + | max-width: 600px; |
− | margin-bottom: 10px;
| + | margin: 0 auto; |
− | border-radius: 50px;
| + | "><h1 style=" |
− | -webkit-border-radius: 50px;
| + | ">奖项及致谢(Click me to see our awards and our special thanks)</h1></a> |
− | -moz-border-radius: 50px;
| + | |
− | text-shadow: 2px 2px 25px #3E17FF;
| + | |
− | }
| + | |
| | | |
− | #menu-bar li ul li a {
| + | <div id="home-story-wrapper" style="position:relative;"> |
− | margin: 0;
| + | |
− | }
| + | |
| | | |
− | #menu-bar .active a, | + | <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/> |
− | #menu-bar li:hover>a {
| + | </div> |
| | | |
| + | <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> |
| | | |
− | /*菜单悬浮颜色*/
| |
− | 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,
| + | </div></div> |
− | #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</a>
| |
− | <ul>
| |
− | <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="#">Drylab</a>
| |
− | <ul>
| |
− | <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">Modeling</a>
| |
− | <ul>
| |
− | <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="#">HumanPractice</a>
| |
− | <ul>
| |
− | <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="#">Collaboration</a>
| |
− | <ul>
| |
− | <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="#">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/">Protocol</a></li>
| |
− | <li><a href="https://2017.igem.org/Team:Shanghaitech/">Parts</a></li>
| |
− | <li><a href="https://2017.igem.org/Team:Shanghaitech/">Raw Material</a></li>
| |
− | </ul>
| |
− | </li>
| |
− | <li><a href="#">Team</a></li>
| |
− | <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/Ackknowledgement">Ackknowledgement</a></li>
| |
− | </ul>
| |
− | </ul>
| |
− | <div id="mySidenav" class="sidenav">
| |
− | <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</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()">☰ 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">©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> |