Team:Hong Kong HKUST/team
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
<html> | <html> | ||
- | + | <head> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <link rel="stylesheet" type="text/css" href="indexpage.css"> | |
+ | <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script> | ||
+ | <script> | ||
+ | $(document).ready(function(){ | ||
+ | $(window).scroll(function(){ | ||
+ | var scrollTop = $(window).scrollTop(); | ||
+ | if (scrollTop > 49) { | ||
+ | $('#menu').addClass('fixed'); | ||
+ | } else { | ||
+ | $('#menu').removeClass('fixed'); | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
- | + | </script> | |
- | + | <script> | |
+ | var on = true; | ||
+ | var myVar = setInterval(function(){ if(on) {slides()}on=true;},3000); | ||
- | + | function slides(i) { | |
- | + | document.getElementsByClassName("slide_pic")[1].style.width="0px"; | |
- | + | document.getElementsByClassName("slide_pic")[2].style.width="100%"; | |
- | + | var slide = document.getElementsByClassName("slide_pic")[0]; | |
- | + | document.getElementById("slide").appendChild(slide); | |
- | + | if(i) { | |
- | + | on = false; | |
- | + | } | |
- | + | } | |
- | + | function back_slide(i) { | |
- | + | document.getElementsByClassName("slide_pic")[1].style.width="0px"; | |
+ | document.getElementsByClassName("slide_pic")[0].style.width="100%"; | ||
+ | var slide = document.getElementsByClassName("slide_pic")[4]; | ||
+ | var slide2 = document.getElementsByClassName("slide_pic")[0]; | ||
+ | document.getElementById("slide").insertBefore(slide,slide2); | ||
+ | if(i) { | ||
+ | on = false; | ||
+ | } | ||
+ | } | ||
+ | </script> | ||
- | + | <style type= "text/css"> | |
+ | #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear{ | ||
+ | display:none; | ||
+ | } /*-- hides default wiki settings --*/ | ||
- | + | #top-section{ | |
- | + | border: 0 none; | |
- | + | height: 20px; | |
- | + | z-index: 100; | |
- | + | top: 0; | |
- | + | position: fixed; | |
- | + | width: 900px; | |
- | + | left: 50%; | |
+ | margin-left: -487px; | ||
+ | background-color:black; | ||
+ | } | ||
- | + | #globalWrapper, #content { | |
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | border: 0px; | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | } | ||
- | + | html, body, .wrapper { | |
- | + | background-color: #FFFFFF; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | body { | |
- | + | width: 100%; | |
- | + | padding:0; | |
- | + | margin:0; | |
- | + | font: 14px Helvetica; | |
+ | } | ||
+ | #content_container { | ||
+ | width:950px; | ||
+ | margin: 0 auto; | ||
+ | -webkit-box-shadow: 0px 6px 6px 0px rgba(50, 50, 50, 0.64); | ||
+ | -moz-box-shadow: 0px 6px 6px 0px rgba(50, 50, 50, 0.64); | ||
+ | box-shadow: 0px 6px 6px 0px rgba(50, 50, 50, 0.64); | ||
+ | } | ||
+ | a { | ||
+ | color: #c0392b; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | a:hover { | ||
+ | color: #e74c3c; | ||
+ | } | ||
+ | nav a:visited{ | ||
+ | color: #FFF; | ||
+ | } | ||
+ | #menu { | ||
+ | padding: 0; | ||
+ | text-align: center; | ||
+ | text-transform:uppercase; | ||
+ | } | ||
- | + | h1 { | |
- | + | font-family: HelveticaNeue-UltraLight; | |
- | + | font-size: 100px; | |
- | + | text-align: center; | |
- | + | margin: 0 0 0 0; | |
- | + | padding: 50px 0 0 0 ; | |
+ | background: #5E412F; | ||
+ | color: #fff; | ||
+ | font-weight:100; | ||
+ | letter-spacing: 0.0625em; | ||
+ | } | ||
- | + | /*----------------------------------drop down ---------------------------------*/ | |
- | + | h1 { | |
- | + | font-size:60px; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | p { | |
- | + | font-size:20px; | |
- | + | } | |
- | + | nav { | |
- | + | margin:0 auto; | |
- | + | padding: 0 auto; | |
- | + | background-color: orange; | |
+ | width:990px; | ||
+ | display:block; | ||
+ | } | ||
- | + | nav ul { | |
- | + | padding:0; | |
- | + | margin:0 auto; | |
- | + | list-style: none; | |
- | + | position: relative; | |
- | + | display:block; | |
- | + | text-align: center; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | nav ul li { | |
- | + | display: inline-block; | |
+ | float: left; | ||
+ | display:list-item; | ||
+ | list-style: none; | ||
+ | background-color:#5E412F; | ||
- | + | } | |
- | + | ||
- | + | nav ul li a { | |
- | + | display:block; | |
- | + | padding:20px 10px 0px 10px; | |
- | + | ||
+ | color:#FFF; | ||
+ | font-size:16px; | ||
+ | text-decoration:none; | ||
+ | font-family: 'Bree Serif', 'serif'; | ||
+ | } | ||
+ | |||
+ | li a:hover { background-color: #000000; } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /* The Dropdown Styles */ | ||
+ | /* =================== */ | ||
+ | |||
+ | /* Hide Dropdowns by Default */ | ||
+ | nav ul ul { | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | top: 48px; | ||
+ | } | ||
+ | |||
+ | /* Display Dropdowns on Hover */ | ||
+ | nav ul li:hover > ul { | ||
+ | display:list-item; | ||
+ | } | ||
+ | |||
+ | /* Fisrt Tier Dropdown */ | ||
+ | nav ul ul li { | ||
+ | width:180px; | ||
+ | position: relative; | ||
+ | border-bottom:none; | ||
+ | list-style-type: none; | ||
+ | } | ||
+ | |||
+ | /* Second, Third and more Tiers */ | ||
+ | nav ul ul ul li { | ||
+ | position: absolute relative; | ||
+ | top:-5px; | ||
+ | } | ||
+ | .fixed { | ||
+ | position: fixed; | ||
+ | z-index: 10; | ||
+ | top: 0; | ||
+ | width: 100%; | ||
+ | } | ||
+ | .fixed ul ul ul li a { | ||
+ | color: #fff; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | div#nav_container{ | ||
+ | text-align: center; | ||
+ | width:1000px; | ||
+ | padding:0 auto; | ||
+ | margin:0 auto; | ||
+ | max-width:700px; | ||
+ | z-index:100000; | ||
+ | } | ||
+ | |||
+ | #slide{ | ||
+ | width: 100%; | ||
+ | height: 600px; | ||
+ | overflow:hidden; | ||
+ | margin: 30px auto; | ||
+ | box-shadow: 0 8px 6px -6px rgba(0,0,0,1); | ||
+ | } | ||
+ | #slide div{ | ||
+ | display:block; | ||
+ | width:0; | ||
+ | float: left; | ||
+ | -webkit-transition: all 0.75s; | ||
+ | -moz-transition: all 0.75s; | ||
+ | -o-transition:all 0.75s; | ||
+ | transition: all 0.75s; | ||
+ | } | ||
+ | img.picture { | ||
+ | width:960px; | ||
+ | } | ||
+ | button.prev, button.next { | ||
+ | position: absolute; | ||
+ | z-index: 999; | ||
+ | display: block; | ||
+ | padding:0 10px; | ||
+ | width: auto; | ||
+ | height:350px; | ||
+ | background: rgba(0,0,0,0); | ||
+ | color: #ffffff; | ||
+ | font-size:26px; | ||
+ | cursor: pointer; | ||
+ | border:none; | ||
+ | outline:none; | ||
+ | } | ||
+ | button.prev:hover, button.next:hover { | ||
+ | background: rgba(0,0,0,0.8); | ||
+ | } | ||
+ | button.next { | ||
+ | margin-left:926px; | ||
+ | } | ||
+ | |||
+ | |||
+ | div.project_area{ | ||
+ | margin:0 auto; | ||
+ | border: 1px solid black; | ||
+ | background-color:black; | ||
+ | } | ||
+ | .project_area h4, .project_area p{ | ||
+ | color:white; | ||
+ | } | ||
+ | div.project_box{ | ||
+ | border: 1px solid gray; | ||
+ | width: 450px; | ||
+ | height: 150px; | ||
+ | text-align: center; | ||
+ | background-color:black; | ||
+ | |||
+ | } | ||
+ | |||
+ | div.quick_link_container{ | ||
+ | padding:50px; | ||
+ | width: 200px; | ||
+ | height:300px; | ||
+ | -webkit-box-shadow: 0px 5px 2px 0px rgba(50, 50, 50, 0.69); | ||
+ | -moz-box-shadow: 0px 5px 2px 0px rgba(50, 50, 50, 0.69); | ||
+ | box-shadow: 0px 5px 2px 0px rgba(50, 50, 50, 0.69); | ||
+ | |||
+ | } | ||
+ | table.site_map_table{ | ||
+ | background-color: black; | ||
+ | width: 100%; | ||
+ | } | ||
+ | .site_map_table h4, .site_map_table p, .site_map_table ul{ | ||
+ | color: white; | ||
+ | } | ||
+ | div.banner_area{ | ||
+ | width:100%; | ||
+ | margin:0 auto; | ||
+ | padding:0 auto; | ||
+ | } | ||
+ | div.banner_area img{ | ||
+ | width:100%; | ||
+ | height: 550px; | ||
+ | } | ||
+ | div.content_1{ | ||
+ | width:100%; | ||
+ | |||
+ | } | ||
+ | div.content_1 h3{ | ||
+ | font-size:30px; | ||
+ | color:#5E412F; | ||
+ | border-bottom: 2px solid black; | ||
+ | |||
+ | } | ||
+ | table.content_table td{ | ||
+ | width:50%; | ||
+ | } | ||
+ | table.content_table p { | ||
+ | font-size: 18px; | ||
+ | font-family: "helvetica" ,"Open Sans", "Vollkorn", "Fedra Sans"; | ||
+ | line-height: 2em; | ||
+ | } | ||
+ | div.content_area{ | ||
+ | padding:0 20px 0 20px; | ||
+ | background-color:#FCEBB6; | ||
+ | border-radius: 2px; | ||
+ | height:600px; | ||
+ | } | ||
+ | td.content_cell img{ | ||
+ | width:100%; | ||
+ | display:inline; | ||
+ | } | ||
+ | td.content_cell h5{ | ||
+ | font-size: 19px; | ||
+ | font-family:"helvetica" ,"Open Sans", "Vollkorn", "Fedra Sans"; | ||
+ | font-weight:bold; | ||
+ | display:inline; | ||
+ | } | ||
+ | td.content_cell h6{ | ||
+ | font-size: 15px; | ||
+ | font-family:"helvetica" ,"Open Sans", "Vollkorn", "Fedra Sans"; | ||
+ | font-weight:normal; | ||
+ | display:inline; | ||
+ | } | ||
+ | div#description_area h2 { | ||
+ | text-align:center; | ||
+ | font-size: 30px; | ||
+ | font-family:"helvetica" ,"Open Sans", "Vollkorn", "Fedra Sans"; | ||
+ | font-weight:900; | ||
+ | display:block; | ||
+ | text-decoration:underline; | ||
+ | } | ||
+ | div#description_area{ | ||
+ | padding: 20px; | ||
+ | border-bottom: 2px dotted black; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | <div id='nav_container'> | ||
+ | <nav> | ||
+ | |||
+ | <ul id="menu"> | ||
+ | <li><a href="#">Home</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team">Team</a> | ||
+ | <!-- First Tier Drop Down --> | ||
+ | <ul> | ||
+ | <li><a href="#">Members</a></li> | ||
+ | <li><a href="#">Advisers</a></li> | ||
+ | <li><a href="#">Instructor</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="#">Project</a> | ||
+ | <!-- First Tier Drop Down --> | ||
+ | <ul> | ||
+ | <li><a href="#">Main Project</a> | ||
+ | <ul> | ||
+ | <li><a href="#">Overview</a></li> | ||
+ | <li><a href="#">module one </a></li> | ||
+ | <li><a href="#">module two</a></li> | ||
+ | <li><a href="#">data</a></li> | ||
+ | <li><a href="#">characterization</a></li> | ||
+ | </ul></li> | ||
+ | <li><a href="#">Side Project</a> | ||
+ | <ul> | ||
+ | <li><a href="#">overview</a></li> | ||
+ | <li><a href="#">part</a></li> | ||
+ | <li><a href="#">catalogue</a></li> | ||
+ | <li><a href="#">feature pages</a></li> | ||
+ | </ul></li> | ||
+ | |||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="#">Human Practice</a> | ||
+ | <ul> | ||
+ | <li><a href="#">overview</a></li> | ||
+ | <li><a href="#">Start up kit</a> | ||
+ | <ul> | ||
+ | <li><a href="#">interview</a></li> | ||
+ | <li><a href="#">Report</a></li> | ||
+ | <li><a href="#">Database</a></li> | ||
+ | </ul></li> | ||
+ | <li><a href="#">Talks</a></li> | ||
+ | <li><a href="#">Outreach</a></li> | ||
+ | </ul></li> | ||
+ | <li><a href="#">wetlab</a> | ||
+ | <ul> | ||
+ | <li><a href="#">Protocol</a></li> | ||
+ | <li><a href="#">Notebook</a></li> | ||
+ | <li><a href="#">safety</a></li> | ||
+ | </ul></li> | ||
+ | <li><a href="#">Achievement</a> | ||
+ | <ul> | ||
+ | <li><a href="#">Medal Requirement</a></li> | ||
+ | <li><a href="#">deliverable</a></li> | ||
+ | </ul></li> | ||
+ | </ul> | ||
+ | |||
+ | </nav> | ||
+ | </div> | ||
+ | <h1> </h1> | ||
+ | <div id="content_container"> | ||
+ | <div class= "banner_area"> | ||
+ | <img src= 'banner_mod.png' /> | ||
+ | |||
+ | </div> | ||
+ | <hr> | ||
+ | <section id="slide"> | ||
+ | <button onclick="back_slide(true)" class="prev">«</button> | ||
+ | <button onclick="slides(true)" class="next">»</button> | ||
+ | <div class="slide_pic"> | ||
+ | <img class="picture" src="Photos/1.jpg"/> | ||
+ | </div> | ||
+ | <div class="slide_pic"> | ||
+ | <img src="Photos/2.jpg"/> | ||
+ | </div> | ||
+ | <div class="slide_pic"> | ||
+ | <img src="Photos/3.jpg"/> | ||
+ | </div> | ||
+ | <div class="slide_pic"> | ||
+ | <img src="Photos/4.jpg"/> | ||
+ | </div> | ||
+ | <div class="slide_pic"> | ||
+ | <img src="Photos/5.jpg"/> | ||
+ | </div> | ||
+ | </section> | ||
+ | <!-- Work of Juston Cheney --> | ||
+ | |||
+ | |||
+ | <hr> | ||
+ | |||
+ | |||
+ | <div class= "project_area"> | ||
+ | <table class = "project_table" align= "center"> | ||
+ | <tr> | ||
+ | <td><div class = 'project_box'> | ||
+ | <h4>Main project</h4> | ||
+ | <p>pneumosensor</p> | ||
+ | </div></td> | ||
+ | |||
+ | <td><div class= 'project_box'> | ||
+ | <h4>Side Project</h4> | ||
+ | <p>Cis-repressive/ Trans-activating riboregulator</p> | ||
+ | </td> | ||
+ | |||
+ | </div> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </div> | ||
+ | <hr> | ||
+ | <table class= 'quick_link_area' align= "center"> | ||
+ | <tr class= "quick_link_row"> | ||
+ | <td class= "quick_link_button"> | ||
+ | <div class= "quick_link_container"> | ||
+ | <h4>Project</h4> | ||
+ | <p>can here have some description about project?</p> | ||
+ | </div> | ||
+ | </td> | ||
+ | <td class= "quick_link_button"> | ||
+ | <div class= "quick_link_container"> | ||
+ | <h4>Parts</h4> | ||
+ | <p></p> | ||
+ | </div> | ||
+ | </td> | ||
+ | <td class= "quick_link_button"> | ||
+ | <div class= "quick_link_container"> | ||
+ | <h4>Characterization</h4> | ||
+ | <p></p> | ||
+ | </div> | ||
+ | </td> | ||
+ | |||
+ | </tr> | ||
+ | <tr class= "quick_link_row"> | ||
+ | <td class= "quick_link_button"> | ||
+ | <div class= "quick_link_container"> | ||
+ | <h4>Data</h4> | ||
+ | <p></p> | ||
+ | </div> | ||
+ | </td> | ||
+ | <td class= "quick_link_button"> | ||
+ | <div class= "quick_link_container"> | ||
+ | <h4>Human Practice</h4> | ||
+ | <p></p> | ||
+ | </div> | ||
+ | </td> | ||
+ | <td class= "quick_link_button"> | ||
+ | <div class= "quick_link_container"> | ||
+ | <h4>Achievement</h4> | ||
+ | <p></p> | ||
+ | </div> | ||
+ | </td> | ||
+ | |||
+ | </tr> | ||
+ | |||
+ | </table> | ||
+ | <hr> | ||
+ | |||
+ | <table class= "site_map_table" align= "center"> | ||
+ | <tr> | ||
+ | <td class= 'site_map_column'><h4>Home</h4> | ||
+ | <ul class= 'site_list'> | ||
+ | <li class='site_link'>Team</li> | ||
+ | <li class='site_link'>Project</li> | ||
+ | <li class='site_link'>WetLab</li> | ||
+ | <li class='site_link'>Achievement</li> | ||
+ | <li class='site_link'>Human Practice</li> | ||
+ | <li class='site_link'>Side Project</li> | ||
+ | </ul> | ||
+ | |||
+ | </td> | ||
+ | <td class= 'site_map_column'><h4>Team</h4> | ||
+ | <ul class= 'site_list'> | ||
+ | <li class='site_link'>Member</li> | ||
+ | <li class='site_link'>Advisor</li> | ||
+ | <li class='site_link'>Instructor</li> | ||
+ | <li class='site_link'>Attribution</li> | ||
+ | <li class='site_link'>Acknowledgement</li> | ||
+ | </ul> | ||
+ | </td> | ||
+ | <td class= 'site_map_column'><h4>Project</h4> | ||
+ | <ul class= 'site_list'> | ||
+ | <li class='site_link'>Overview</li> | ||
+ | <li class='site_link'>Advisor</li> | ||
+ | <li class='site_link'>Instructor</li> | ||
+ | <li class='site_link'>Attribution</li> | ||
+ | <li class='site_link'>Acknowledgement</li> | ||
+ | </ul> | ||
+ | </td> | ||
+ | <td class= 'site_map_column'><h4>WetLab</h4> | ||
+ | </td> | ||
+ | <td class= 'site_map_column'><h4>Achievement</h4> | ||
+ | </td> | ||
+ | <td class= 'site_map_column'><h4>Human Practice</h4> | ||
+ | </td> | ||
+ | <td class= 'site_map_column'><h4>Side Project</h4> | ||
+ | </td> | ||
+ | |||
+ | </tr> | ||
+ | |||
+ | </table> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | </body> | ||
</html> | </html> |
Revision as of 09:18, 24 August 2014
Main projectpneumosensor |
Side ProjectCis-repressive/ Trans-activating riboregulator |
Projectcan here have some description about project? |
Parts |
Characterization |
Data |
Human Practice |
Achievement |
Home
|
Team
|
Project
|
WetLab |
Achievement |
Human Practice |
Side Project |