Team:Hong Kong HKUST/prealpha index

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
<head>
+
<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) {
+
<link rel="stylesheet" type="text/css" href="indexpage.css">
-
  document.getElementsByClassName("slide_pic")[1].style.width="0px";
+
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
-
  document.getElementsByClassName("slide_pic")[2].style.width="100%";
+
<script>
-
  var slide = document.getElementsByClassName("slide_pic")[0];
+
$(document).ready(function(){
-
  document.getElementById("slide").appendChild(slide);
+
$(window).scroll(function(){
-
  if(i) {
+
var scrollTop = $(window).scrollTop();
-
  on = false;
+
if (scrollTop > 49) {
-
  }
+
$('#menu').addClass('fixed');
-
}
+
} else {
-
function back_slide(i) {
+
$('#menu').removeClass('fixed');
-
  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 { /*-- styling for default menu bar (edit, page,history, etc.) --*/
+
</script>
-
+
-
border: 0 none;
+
-
height: 14px;
+
-
z-index: 100;
+
-
top: 0;
+
-
position: fixed;
+
-
width: 1000px;
+
-
left: 50%;
+
-
margin-left: -487px;
+
-
}
+
-
#globalWrapper, #content { /*-- changes default wiki settings
+
<script>
 +
var on = true;
 +
var myVar = setInterval(function(){ if(on) {slides()}on=true;},3000);
-
--*/
+
function slides(i) {
-
width: 100%;  
+
document.getElementsByClassName("slide_pic")[1].style.width="0px";
-
height: 100%;
+
document.getElementsByClassName("slide_pic")[2].style.width="100%";
-
border: 0px;
+
var slide = document.getElementsByClassName("slide_pic")[0];
-
background-color:#B0F1D2;
+
document.getElementById("slide").appendChild(slide);
-
margin: 0px;
+
if(i) {
-
padding: 0px;
+
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>
-
html, body, .wrapper { /*-- 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{
-
+
border: 0 none;
-
background-color: #FFFFFF;
+
height: 14px;
-
}
+
z-index: 100;
-
+
top: 0;
-
body {
+
position: fixed;
-
width: 100%;
+
width: 1000px;  
-
  padding:0;
+
left: 50%;  
-
  margin:0;
+
margin-left: -487px;
-
  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;
+
-
}
+
-
#menu {
+
-
  padding: 0;
+
-
  text-align: center;
+
-
  text-transform:uppercase;
+
-
}
+
-
h1 {
+
#globalWrapper, #content {
-
  font-family: HelveticaNeue-UltraLight;
+
width: 100%;  
-
  font-size: 32px;
+
height: 100%;
-
  text-align: center;
+
border: 0px;
-
  margin: 0 0 0 0;
+
background-color:#B0F1D2;
-
  padding: 50px 0 0 0 ;
+
margin: 0px;
-
  background: #5E412F;
+
padding: 0px;
-
  color: #fff;
+
}
-
  font-weight:100;
+
-
  letter-spacing: 0.0625em;
+
-
}
+
-
/*----------------------------------drop down ---------------------------------*/
+
html, body, .wrapper {
-
h1 {
+
background-color: #FFFFFF;
-
font-size:60px;
+
}
-
}
+
-
p {
+
body {
-
  font-size:20px;
+
width: 100%;
-
}
+
padding:0;
-
nav {
+
margin:0;
-
margin:0 auto;
+
font: 14px Helvetica;
-
padding: 0 auto;
+
}
-
background-color: orange;
+
#content_container {
-
width:990px;
+
width:950px;
-
display:block;
+
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;
 +
}
 +
#menu {
 +
padding: 0;
 +
text-align: center;
 +
text-transform:uppercase;
 +
}
-
nav ul {
+
h1 {
-
padding:0;
+
font-family: HelveticaNeue-UltraLight;
-
margin:0 auto;
+
font-size: 32px;
-
list-style: none;
+
text-align: center;
-
position: relative;
+
margin: 0 0 0 0;
-
display:block;
+
padding: 50px 0 0 0 ;
-
text-align: center;
+
background: #5E412F;
-
}
+
color: #fff;
-
+
font-weight:100;
-
nav ul li {
+
letter-spacing: 0.0625em;
-
display: inline-block;
+
}
-
float: left;
+
-
display:list-item;
+
-
list-style: none;  
+
-
background-color:#5E412F;
+
-
+
-
}
+
-
nav ul li a {
+
/*----------------------------------drop down ---------------------------------*/
-
display:block;
+
h1 {
-
padding:15px 10px;
+
font-size:60px;
-
+
}
-
color:#FFF;
+
-
font-size:16px;
+
-
text-decoration:none;
+
-
font-family: 'Bree Serif', 'serif';
+
-
}
+
-
li a:hover { background-color: #000000; }
+
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;
-
/* The Dropdown Styles */
+
list-style: none;
-
/* =================== */
+
position: relative;
 +
display:block;
 +
text-align: center;
 +
}
-
/* Hide Dropdowns by Default */
+
nav ul li {
-
nav ul ul {
+
display: inline-block;
-
display: none;
+
float: left;
-
position: absolute;
+
display:list-item;
-
top: 48px;
+
list-style: none;  
-
}
+
background-color:#5E412F;
-
+
-
/* 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{
+
nav ul li a {
-
  width: 100%;
+
display:block;
-
  height: 600px;
+
padding:15px 10px;
-
  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;
+
-
+
-
}
+
-
div.quick_link_container{
+
color:#FFF;
-
padding:50px;
+
font-size:16px;
-
width: 200px;
+
text-decoration:none;
-
height:300px;
+
font-family: 'Bree Serif', 'serif';
-
-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="#">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 -->
+
-
+
li a:hover { background-color: #000000; }
-
<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>
+
/* The Dropdown Styles */
-
+
/* =================== */
-
+
 
-
</body>
+
/* 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;
 +
 
 +
}
 +
 
 +
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="#">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 03:31, 24 August 2014

Main project

pneumosensor

Side Project

Cis-repressive/ Trans-activating riboregulator

Project

can here have some description about project?

Parts

Characterization

Data

Human Practice

Achievement

Home

  • Team
  • Project
  • WetLab
  • Achievement
  • Human Practice
  • Side Project

Team

  • Member
  • Advisor
  • Instructor
  • Attribution
  • Acknowledgement

Project

  • Overview
  • Advisor
  • Instructor
  • Attribution
  • Acknowledgement

WetLab

Achievement

Human Practice

Side Project

Retrieved from "http://2014.igem.org/Team:Hong_Kong_HKUST/prealpha_index"