Team:Hong Kong HKUST/team

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
<head>
+
<head>
-
+
-
<style type= "text/css">
+
-
+
-
<style type="text/css">
+
-
#contentSub, #footer-box, #catlinks, #search-controls, #p-
+
-
logo, .printfooter, .firstHeading,.visualClear {display:
+
<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');
 +
}
 +
});
 +
});
-
none;} /*-- hides default wiki settings --*/
+
</script>
-
#top-section { /*-- styling for default menu bar (edit, page,  
+
<script>
 +
var on = true;
 +
var myVar = setInterval(function(){ if(on) {slides()}on=true;},3000);
-
history, etc.) --*/
+
function slides(i) {
-
+
document.getElementsByClassName("slide_pic")[1].style.width="0px";
-
border: 0 none;
+
document.getElementsByClassName("slide_pic")[2].style.width="100%";
-
height: 14px;
+
var slide = document.getElementsByClassName("slide_pic")[0];
-
z-index: 100;
+
document.getElementById("slide").appendChild(slide);
-
top: 0;
+
if(i) {
-
position: fixed;
+
on = false;  
-
width: 975px;  
+
}
-
left: 50%;  
+
}
-
margin-left: -487px;
+
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>
-
#globalWrapper, #content { /*-- changes default wiki settings  
+
<style type= "text/css">
 +
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear{
 +
display:none;
 +
} /*-- hides default wiki settings --*/
-
--*/
+
#top-section{
-
width: 100%;  
+
border: 0 none;
-
height: 100%;
+
height: 20px;
-
border: 0px;
+
z-index: 100;
-
background-color:#B0F1D2;
+
top: 0;
-
margin: 0px;
+
position: fixed;
-
padding: 0px;
+
width: 900px;
-
}
+
left: 50%;  
 +
margin-left: -487px;
 +
background-color:black;
 +
}
-
html, body, .wrapper { /*-- changes default wiki settings --
+
#globalWrapper, #content {
 +
width: 100%;
 +
height: 100%;
 +
border: 0px;
 +
margin: 0px;
 +
padding: 0px;
 +
}
-
*/
+
html, body, .wrapper {
-
+
background-color: #FFFFFF;
-
background-image: linear-gradient(#8b9da9, #fff6e4);
+
}
-
box-shadow: inset 0 0 100px hsla(0,0%,0%,.3);
+
-
}
+
-
+
-
+
-
}
+
-
<!-- Below are Eric's cssssssssssssssssssssssssssssssssssssssssss haha-->
+
-
+
-
#body_container{
+
-
+
-
background-color: #B0F1D2;
+
-
width: 1300px;
+
-
margin: 0 auto;
+
-
padding:0 auto;
+
-
border: 1px solid #CE205B;
+
-
}
+
-
+
-
#top_area{
+
-
width: 1200px;
+
-
height: 150px;
+
-
background-color:#FAB6CD;
+
-
margin: 0 auto;
+
-
padding: 0 auto;
+
-
border: 2px dotted black;
+
-
border-radius: 3px;
+
-
}
+
-
+
-
#nav_area{
+
-
background-color:#B0F1D2;
+
-
width: 1200px;
+
-
height: 50px;
+
-
margin: 0 auto;
+
-
padding: 0 ;
+
-
border: 2px solid navy;
+
-
}
+
-
+
-
ul#nav_row li{
+
-
+
-
float: left;
+
-
font-size: 20px;
+
-
line-height:auto;
+
-
margin:0px none;
+
-
padding:auto;
+
-
width:16%;
+
-
list-style: none outside none;
+
-
text-align: center;
+
-
border: 1px solid #F388AC;
+
-
border-left: none;
+
-
border-right: none;
+
-
}
+
-
+
-
+
-
+
-
#body_area{
+
-
width: 1200px;
+
-
margin: 0 auto;
+
-
padding: 0 auto;
+
-
border: 6px solid orange;
+
-
}
+
-
+
-
#info_text{
+
-
border: 1px solid red;
+
-
width: 40%;
+
-
height: 200px;
+
-
padding: 0px 2px;
+
-
margin: 0px;
+
-
}
+
-
+
-
#info_area{
+
-
display:block;
+
-
}
+
-
+
-
+
-
            #h1{
+
-
              font-size: 24px;
+
-
                        }
+
-
            #content-area {
+
body {
-
                clear: both;
+
width: 100%;
-
                padding-top: 20px;
+
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;
 +
}
-
            #content-area-text {
+
h1 {
-
                width: 450px;
+
font-family: HelveticaNeue-UltraLight;
-
                padding: 15px;
+
font-size: 100px;
-
                float: left;
+
text-align: center;
-
                position: relative;
+
margin: 0 0 0 0;
-
}  
+
padding: 50px 0 0 0 ;
 +
background: #5E412F;
 +
color: #fff;
 +
font-weight:100;
 +
letter-spacing: 0.0625em;
 +
}
-
                #content-area-picture {
+
/*----------------------------------drop down ---------------------------------*/
-
float: left;
+
h1 {
-
width: 450px;
+
font-size:60px;
-
height: 250px;
+
}
-
padding: 15px;
+
-
background: green;
+
-
}
+
-
+
p {
-
+
font-size:20px;
-
+
}
-
+
nav {
-
+
margin:0 auto;
-
<!-- end of eric cssssssssssssssssssssssssssssssssssssss haha -->
+
padding: 0 auto;
-
+
background-color: orange;
 +
width:990px;
 +
display:block;
 +
}
-
</style>
+
nav ul {
-
</head>
+
padding:0;
-
+
margin:0 auto;
-
<body>
+
list-style: none;
-
+
position: relative;
-
<div id='body_container'>
+
display:block;
-
<div id = 'nav_area'>
+
text-align: center;
-
+
}
-
<ul id="nav_row">
+
-
<li>Project</li>
+
-
<li>Team</li>
+
-
<li>Human Practice</li>
+
-
<li>Topic3</li>
+
-
<li>Topic4</li>
+
-
<li>Topic5</li>
+
-
</ul>
+
-
</div>
+
-
+
-
<div id= "top_area">
+
-
<div id= 'banner_area'><img src= "2013HKUSTIGEM_BANNER.png" width= 100%></div>
+
-
</div>
+
-
+
-
+
-
<div id="content-area">
+
-
<p>
+
-
<h1> HKUST</h1>
+
-
</p>
+
-
+
-
<div id="content-area-text">
+
-
The Hong Kong University of Science and Technology is an international research university. Founded in 1991, HKUST is an international research university with strong ties to global thought leaders, whilst having wide-ranging connections with Mainland China. It promotes interdisciplinary studies, dedicated to educating well-rounded students to acquire a strong entrepreneurial spirit and innovative thinking – the necessary foundation and skills for the changing world.
+
-
The University is housed in a hillside and waterfront complex overlooking the Clear Water Bay peninsula, less than 30 minutes' driving time from Central Hong Kong.
+
-
</div>
+
-
+
-
<div id="content-area-picture">
+
-
</div>
+
-
+
nav ul li {
-
</div>
+
display: inline-block;
 +
float: left;
 +
display:list-item;
 +
list-style: none;
 +
background-color:#5E412F;
-
+
}
-
+
 
-
+
nav ul li a {
-
+
display:block;
-
</div>
+
padding:20px 10px 0px 10px;
-
</body>
+
 
 +
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">&#171;</button>
 +
<button onclick="slides(true)" class="next">&#187;</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 project

pneumosensor

Side Project

Cis-repressive/ Trans-activating riboregulator



Home

Team

Project

WetLab

Achievement

Human Practice

Side Project