Team:Hong Kong HKUST/astrid

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
<head>
+
<head>
-
<style>
+
<link rel="stylesheet" href="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/anti-main.css&action=raw&ctype=text/css" type="text/css" >
-
      .pull-right{
+
<link rel="stylesheet" href="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/indexpage.css&action=raw&ctype=text/css" type="text/css" >
-
      float: right}
+
<link rel="stylesheet" href="https://2014.igem.org/wiki/index.php?title=Team:Hong_Kong_HKUST/Achievements_page.css&action=raw&ctype=text/css" type="text/css" >
-
 
+
 
-
  .thumbnail {
+
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
-
    border: 1px solid #ddd;
+
<script src="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/access-menu.js&action=raw&ctype=text/css"></script>
-
    border-radius: 4px;
+
-
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
+
-
    display: block;
+
-
    line-height: 20px;
+
-
    padding: 4px;
+
-
    transition: all 0.2s ease-in-out 0s;
+
-
}
+
-
    img {
+
-
    vertical-align: middle;}
+
-
element.style {
+
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
-
    text-align: justify;
+
<link rel="stylesheet" href="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/team_basic.css&action=raw&ctype=text/css" type="text/css" />
-
    width: 450px;
+
<link rel="stylesheet" href="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/galleriffic-2.css&action=raw&ctype=text/css" type="text/css" />
-
}
+
<script type="text/javascript" src="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/jquery-1.3.2.js&action=raw&ctype=text/css"></script>
-
.pull-left {
+
<script type="text/javascript" src="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/jquery.galleriffic.js&action=raw&ctype=text/css"></script>
-
    float: left;}
+
<script type="text/javascript" src="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/jquery.opacityrollover.js&action=raw&ctype=text/css"></script>
 +
<!-- We only want the thunbnails to display when javascript is disabled -->
 +
<script type="text/javascript">
 +
document.write('<style>.noscript { display: none; }</style>');
 +
</script>
-
 
-
</style>
 
-
 
<link rel="stylesheet" href="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/indexpage.css&action=raw&ctype=text/css" type="text/css" >
<link rel="stylesheet" href="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/indexpage.css&action=raw&ctype=text/css" type="text/css" >
-
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
+
</head>
-
 
+
 +
<body>
 +
<nav role="navigation">
 +
<ul class="access-menu">
 +
<li><a href="#">Home</a></li>
 +
<li>
 +
<a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor">Pneumosensor</a>
 +
<ul class="access-submenu">
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/module_one">Sensing</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/module_two">Expressing</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/parts">Parts</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/data">Data</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/characterization">Characterization</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/results">Results</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/pneumosensor/future_work">Future Work</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator">Riboregulator</a>
 +
<ul class="access-submenu">
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/CR_TA_Feature_Page">Feature Page</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/RNA_devices_catalog">Catalog Page</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/parts">Parts</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/data">Data</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/characterization">Characterization</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/results">Results</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/riboregulator/future_work">Future Work</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice">Human Practice</a>
 +
<ul class="access-submenu">
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/start-up_kit">Start-up Kit</a></li>
 +
<li class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/start-up_kit/handbook" >--Handbook</a></li>
 +
<li class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/start-up_kit/report" >--Report</a></li>
 +
<li class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/start-up_kit/database" >--Database</a></li>
 +
<li class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/start-up_kit/interview" >--Interview</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/outreach">Outreach</a></li>
 +
<li class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/outreach/Workshop" >--Workshop</a></li>
 +
<li class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/outreach/talks" >--Talk</a></li>
 +
<li class= "indent_list"><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/outreach/isf_academy" >--ISF Academy</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/human_practice/safety_and_ethics">Safety and Ethics</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team">Team</a>
 +
<ul class="access-submenu">
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team/members">Members</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team/advisors">Advisors</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team/instructors">Instructors</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team/attribution">Attributions</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team/acknowledgement">Acknowledgement</a></li>
 +
<li><a href="https://igem.org/Team.cgi?year=2014">Official Team Profile</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a href="https://2014.igem.org/Team:Hong_Kong_HKUST/wetlab">Wetlab</a>
 +
<ul class="access-submenu">
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/wetlab/notebook">Notebook</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/wetlab/protocols">Protocols</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/wetlab/safety">Safety</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a href="https://2014.igem.org/Team:Hong_Kong_HKUST/Achievements">Achievements</a>
 +
<ul class="access-submenu">
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/acheivement/medal_requirement">Medal Requirements</a></li>
 +
<li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/acheivement/deliverable">Deliverable</a></li>
 +
</ul>
 +
</li>
 +
<li class="access_logo">
 +
<a href="https://2014.igem.org/Main_Page"><img src= "https://static.igem.org/mediawiki/2014/5/55/Hkust_logo.gif"></a>
 +
</li>
 +
<li class="access_logo">
 +
<a href="http://www.ust.hk/"><img src= "https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png"></a>
 +
</li>
 +
-
<script>
+
</ul>
-
$(document).ready(function(){
+
</nav>
-
  $(window).scroll(function(){
+
<!-- ================ do not touch any thing above this, dont even think about it =========================-->
-
var scrollTop = $(window).scrollTop();
+
<div id="content_container">
-
if (scrollTop > 49) {
+
<div class= "banner_area">
-
$('#menu').addClass('fixed');
+
<img src= 'banner_mod.png' />
-
} else {
+
<div id="page">
-
$('#menu').removeClass('fixed');
+
<div id="container">
-
}
+
-
  });
+
<div id="gallery" class="content">
-
});
+
 +
<div class="slideshow-container">
 +
<div id="loading" class="loader"></div>
 +
<div id="slideshow" class="slideshow"></div>
 +
</div>
 +
<div id="caption" class="caption-container"></div>
 +
</div>
 +
<div id="thumbs" class="navigation">
 +
<ul class="thumbs noscript">
 +
<li>
 +
<a class="thumb" name="leaf"    href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
 +
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #0</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
-
</script>
+
<li>
 +
<a class="thumb" name="drop" href="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9.jpg" title="Title #1">
 +
<img src="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9_s.jpg" alt="Title #1" />
 +
</a>
 +
<div class="caption">
 +
Any html can be placed here ...
 +
</div>
 +
</li>
 +
<li>
 +
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
 +
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
 +
</a>
 +
<div class="caption">
 +
 +
<div class="image-title">Title #2</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
<li>
 +
<a class="thumb" name="lizard" href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" title="Title #3">
 +
<img src="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_s.jpg" alt="Title #3" />
 +
</a>
 +
<div class="caption">
 +
<div class="download">
 +
<a href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_b.jpg">Download Original</a>
 +
</div>
 +
<div class="image-title">Title #3</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
<li>
 +
<a class="thumb" href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" title="Title #4">
 +
<img src="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_s.jpg" alt="Title #4" />
 +
</a>
 +
<div class="caption">
 +
<div class="download">
 +
<a href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_b.jpg">Download Original</a>
 +
</div>
 +
<div class="image-title">Title #4</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
<li>
 +
<a class="thumb" href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg" title="Title #5">
 +
<img src="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_s.jpg" alt="Title #5" />
 +
</a>
 +
<div class="caption">
 +
<div class="download">
 +
<a href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_b.jpg">Download Original</a>
 +
</div>
 +
<div class="image-title">Title #5</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
 +
<li>
 +
<a class="thumb" href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b.jpg" title="Title #6">
 +
<img src="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_s.jpg" alt="Title #6" />
 +
</a>
 +
<div class="caption">
 +
<div class="download">
 +
<a href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_b.jpg">Download Original</a>
 +
</div>
 +
<div class="image-title">Title #6</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
-
<script>
+
<li>
-
var on = true;
+
<a class="thumb" href="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23.jpg" title="Title #7">
-
var myVar = setInterval(function(){ if(on) {slides()}on=true;},3000);
+
<img src="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23_s.jpg" alt="Title #7" />
 +
</a>
 +
<div class="caption">
 +
<div class="download">
 +
<a href="http://farm4.static.flickr.com/3205/2538164270_c7d1646ecf_o.jpg">Download Original</a>
 +
</div>
 +
<div class="image-title">Title #7</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
-
function slides(i) {
+
<li>
-
  document.getElementsByClassName("slide_pic")[1].style.width="0px";
+
<a class="thumb" href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2.jpg" title="Title #8">
-
  document.getElementsByClassName("slide_pic")[2].style.width="100%";
+
<img src="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_s.jpg" alt="Title #8" />
-
  var slide = document.getElementsByClassName("slide_pic")[0];
+
</a>
-
  document.getElementById("slide").appendChild(slide);
+
<div class="caption">
-
  if(i) {
+
<div class="download">
-
  on = false;
+
<a href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_b.jpg">Download Original</a>
-
  }
+
</div>
-
}
+
<div class="image-title">Title #8</div>
-
function back_slide(i) {
+
<div class="image-desc">Description</div>
-
  document.getElementsByClassName("slide_pic")[1].style.width="0px";
+
</div>
-
  document.getElementsByClassName("slide_pic")[0].style.width="100%";
+
</li>
-
  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>
+
-
</head>
+
-
<body>
+
<li>
-
<div id='nav_container'>
+
<a class="thumb" href="http://farm3.static.flickr.com/2315/2537343449_f933be8036.jpg" title="Title #9">
-
<nav>
+
<img src="http://farm3.static.flickr.com/2315/2537343449_f933be8036_s.jpg" alt="Title #9" />
-
+
</a>
-
<ul id="menu">
+
<div class="caption">
-
<li><a href="#">Home</a></li>
+
<div class="download">
-
        <li><a href="#">Team</a>
+
<a href="http://farm3.static.flickr.com/2315/2537343449_f933be8036_b.jpg">Download Original</a>
-
        <!-- First Tier Drop Down -->
+
</div>
-
        <ul>
+
<div class="image-title">Title #9</div>
-
            <li><a href="#">Members</a></li>
+
<div class="image-desc">Description</div>
-
            <li><a href="#">Advisers</a></li>
+
</div>
-
            <li><a href="#">Instructor</a></li>
+
</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="#">Parts</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>
+
-
<!-- ================ do not touch any thing above this, dont even think about it =========================-->
+
-
+
-
<div id="content_container">
+
<li>
-
<div class= "banner_area">
+
<a class="thumb" href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280.jpg" title="Title #10">
-
<img src= 'banner_mod.png' />
+
<img src="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_s.jpg" alt="Title #10" />
 +
</a>
 +
<div class="caption">
 +
<div class="download">
 +
<a href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_b.jpg">Download Original</a>
 +
</div>
 +
<div class="image-title">Title #10</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
-
</div>
+
<li>
 +
<a class="thumb" href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e.jpg" title="Title #11">
 +
<img src="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_s.jpg" alt="Title #11" />
 +
</a>
 +
<div class="caption">
 +
<div class="download">
 +
<a href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_b.jpg">Download Original</a>
 +
</div>
 +
<div class="image-title">Title #11</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
-
<!DOCTYPE html>
+
<li>
-
<html>
+
<a class="thumb" href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba.jpg" title="Title #12">
-
<head>
+
<img src="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_s.jpg" alt="Title #12" />
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+
</a>
-
<meta charset=utf-8 />
+
<div class="caption">
-
<title>HTML5 jQuery Tabs</title>
+
<div class="download">
-
<style id="jsbin-css">
+
<a href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_b.jpg">Download Original</a>
-
.tabs a{
+
</div>
-
  cursor: pointer;
+
<div class="image-title">Title #12</div>
-
  padding: 4px;
+
<div class="image-desc">Description</div>
-
  background: #fff;
+
</div>
-
  color: #000;
+
</li>
-
  border: 1px solid #fff;
+
-
  border-bottom: 1px;
+
-
  border-top-left-radius: 15px;   
+
-
  border-top-right-radius: 15px;
+
-
  margin-right: 3px;
+
-
  padding-left: 20px;
+
-
  padding-right: 20px;
+
-
}
+
-
.tabs a:hover, .tabs a.active{
+
-
  background: #666;
+
-
  color: #fff;
+
-
}
+
-
.tabContent{
+
<li>
-
  background:#fff;
+
<a class="thumb" href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60.jpg" title="Title #13">
-
  border: 1px solid #fff;
+
<img src="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_s.jpg" alt="Title #13" />
-
  margin: 1px 0;
+
</a>
-
  padding-left: 30px;
+
<div class="caption">
-
  padding-right: 30px;
+
<div class="download">
-
  padding-top: 10px;
+
<a href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_b.jpg">Download Original</a>
-
  padding-bottom: 10px;
+
</div>
-
}
+
<div class="image-title">Title #13</div>
 +
<div class="image-desc">Description</div>
 +
</div>
 +
</li>
-
</style>
+
<li>
-
</head>
+
<a class="thumb" href="http://farm3.static.flickr.com/2041/2083498578_114e117aab.jpg" title="Title #14">
-
<body>
+
<img src="http://farm3.static.flickr.com/2041/2083498578_114e117aab_s.jpg" alt="Title #14" />
-
  <div class="tabs">
+
</a>
-
    <a data-toggle="tab1">HKUST</a>
+
<div class="caption">
-
    <a data-toggle="tab2">Students</a>
+
<div class="download">
-
    <a data-toggle="tab3">Advisers</a>
+
<a href="http://farm3.static.flickr.com/2041/2083498578_114e117aab_b.jpg">Download Original</a>
-
  </div>
+
</div>
-
<div class="tabContent">
+
<div class="image-title">Title #14</div>
-
 
+
<div class="image-desc">Description</div>
-
<div id="tab1">
+
</div>
-
<table>
+
</li>
-
<col width="50%">
+
<li>
-
<col width="50%">
+
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
-
 
+
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
-
<tr><td colspan=2>
+
</a>
-
    <h2>HKUST</h2></td></tr>
+
<div class="caption">
-
<tr><td>
+
-
    <p style="font-size:16px"; align="justify">
+
<div class="image-title">Title #2</div>
-
The Hong Kong University of Science and Technology is an international research university. Founded
+
<div class="image-desc">Description</div>
-
in 1991, HKUST is an international research university with strong ties to global thought leaders,
+
</div>
-
whilst having wide-ranging connections with Mainland China. It promotes interdisciplinary studies,
+
</li>
-
dedicated to educating well-rounded students to acquire a strong entrepreneurial spirit and innovative
+
<li>
-
thinking at the necessary foundation and skills for the changing world. The University is housed in a
+
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
-
hillside and waterfront complex overlooking the Clear Water Bay peninsula, less than 30 minutes' driving
+
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
-
time from Central Hong Kong.  
+
</a>
-
<br>
+
<div class="caption">
-
<br>
+
-
You can follow our activity in the most common social networks:
+
<div class="image-title">Title #2</div>
-
<br>
+
<div class="image-desc">Description</div>
-
<a href="">
+
</div>
-
<img title="Facebook" alt="Facebook" src="https://static.igem.org/mediawiki/2013/9/91/1380788391_facebook_square.png">
+
</li>
-
</a>
+
<li>
-
<a href="">
+
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
-
<img title="Twitter" alt="Twitter" src="https://static.igem.org/mediawiki/2013/b/b6/1380788385_twitter_square.png">
+
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
-
</a>
+
</a>
-
<a href="">
+
<div class="caption">
-
<img title="Youtube" alt="Youtube" src="https://static.igem.org/mediawiki/2013/e/ea/1380788439_youtube_square_color.png">
+
-
</a>
+
<div class="image-title">Title #2</div>
-
<a href="">
+
<div class="image-desc">Description</div>
-
<img title="Instagram" alt="Instagram" src="https://static.igem.org/mediawiki/2013/5/5f/1380788401_instagram_square_color.png">
+
</div>
-
</a>
+
</li>
-
<br>
+
                        <li>
-
<br>
+
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
-
If you want to contact us, become a sponsor or you liked the idea, please address us using the button below:
+
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
-
<br>
+
</a>
-
 
+
<div class="caption">
-
<a class="btn btn-primary btn-large" href="mailto:vlc.biocampus.igem@gmail.com?subject='Contact from iGEM'">Contact us</a>
+
-
 
+
<div class="image-title">Title #2</div>
-
</p></td>
+
<div class="image-desc">Description</div>
-
<td valign="top"><img class="thumbnail pull-right" style="width:400px" alt="The team" src="https://www.ab.ust.hk/hro/PubDoc/careers/common/photos/hkust.jpg"></td>
+
</div>
-
</tr></table>
+
</li>
-
  </div>
+
                        <li>
-
 
+
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
-
<div id="tab2">
+
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
-
  </div>
+
</a>
-
 
+
<div class="caption">
-
  <div id="tab3">
+
-
    <table width="100%" height="171" border="10" align="center" cellpadding="0" cellspacing="0" class="curvedEdges">
+
<div class="image-title">Title #2</div>
-
<tr><td>Advisers<br><br>Hello!</td></tr>
+
<div class="image-desc">Description</div>
-
</table>
+
</div>
-
  </div>
+
</li>
-
 
+
                       
-
 
+
                        <li>
-
 
+
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
-
</div>
+
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
-
<script id="jsbin-javascript">
+
</a>
-
;(function($){
+
<div class="caption">
-
  $.fn.html5jTabs = function(options){
+
-
    return this.each(function(index, value){
+
<div class="image-title">Title #2</div>
-
      var obj = $(this),
+
<div class="image-desc">Description</div>
-
      objFirst = obj.eq(index),
+
</div>
-
      objNotFirst = obj.not(objFirst);
+
</li>
-
     
+
                       
-
      $("#" +  objNotFirst.attr("data-toggle")).hide();
+
</ul>
-
      $(this).eq(index).addClass("active");
+
</div>
-
     
+
<div style="clear: both;"></div>
-
      obj.click(function(evt){
+
</div>
-
       
+
</div>
-
        toggler = "#" + obj.attr("data-toggle");
+
<div id="footer">&copy; 2009 Trent Foley</div>
-
        togglerRest = $(toggler).parent().find("div");
+
<script type="text/javascript">
-
       
+
jQuery(document).ready(function($) {
-
        togglerRest.hide().removeClass("active");
+
// We only want these styles applied when javascript is enabled
-
        $(toggler).show().addClass("active");
+
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
-
       
+
$('div.content').css('display', 'block');
-
        $(this).parent("div").find("a").removeClass("active");
+
-
$(this).addClass("active");
+
-
        return false;
+
-
      });
+
-
    });
+
-
  };
+
-
}(jQuery));
+
-
$(function() {
+
// Initially set opacity on thumbs and add
-
  $(".tabs a").html5jTabs();
+
// additional styling for hover effect on thumbs
-
});
+
var onMouseOutOpacity = 0.67;
-
</script>
+
$('#thumbs ul.thumbs li').opacityrollover({
-
</body>
+
mouseOutOpacity:  onMouseOutOpacity,
 +
mouseOverOpacity:  1.0,
 +
fadeSpeed:        'fast',
 +
exemptionSelector: '.selected'
 +
});
 +
 +
// Initialize Advanced Galleriffic Gallery
 +
var gallery = $('#thumbs').galleriffic({
 +
delay:                    2500,
 +
numThumbs:                21,
 +
preloadAhead:              10,
 +
enableTopPager:            true,
 +
enableBottomPager:        true,
 +
maxPagesToShow:            7,
 +
imageContainerSel:        '#slideshow',
 +
controlsContainerSel:      '#controls',
 +
captionContainerSel:      '#caption',
 +
loadingContainerSel:      '#loading',
 +
renderSSControls:          true,
 +
renderNavControls:        true,
 +
playLinkText:              'Play Slideshow',
 +
pauseLinkText:            'Pause Slideshow',
 +
prevLinkText:              '&lsaquo; Previous Photo',
 +
nextLinkText:              'Next Photo &rsaquo;',
 +
nextPageLinkText:          'Next &rsaquo;',
 +
prevPageLinkText:          '&lsaquo; Prev',
 +
enableHistory:            false,
 +
autoStart:                false,
 +
syncTransitions:          true,
 +
defaultTransitionDuration: 900,
 +
onSlideChange:            function(prevIndex, nextIndex) {
 +
// 'this' refers to the gallery, which is an extension of $('#thumbs')
 +
this.find('ul.thumbs').children()
 +
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
 +
.eq(nextIndex).fadeTo('fast', 1.0);
 +
},
 +
onPageTransitionOut:      function(callback) {
 +
this.fadeTo('fast', 0.0, callback);
 +
},
 +
onPageTransitionIn:        function() {
 +
this.fadeTo('fast', 1.0);
 +
}
 +
});
 +
});
 +
</script>
 +
    </body>
</html>
</html>

Revision as of 11:33, 30 September 2014