Team:Hong Kong HKUST/astrid

From 2014.igem.org

(Difference between revisions)
 
(58 intermediate revisions not shown)
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;
+
             
-
    width: 450px;
+
<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" />
-
}
+
<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" />
-
.pull-left {
+
<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>
-
    float: 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>
 +
<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();
+
-
if (scrollTop > 49) {
+
-
$('#menu').addClass('fixed');
+
<div id="content_container">
-
} else {
+
<div class= "banner_area">
-
$('#menu').removeClass('fixed');
+
<img src= 'https://static.igem.org/mediawiki/2014/archive/3/3c/20140930022303!HKUST_2014_pneumosensor_banner.jpg' />
-
}
+
<!--banner should be larger and height should be more than 400px-->
-
  });
+
</div>
-
});
+
<div id="page">
 +
<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">Haemin Cho</div>
 +
                              <div class="title" style="margin-top:0px">Team Leader</div>
 +
<div class="image-desc" style="font-size:15px; margin-top: -10px;">Haemin is a second year student majoring in Biotechnology. She is one of the two leaders of this year's HKUST iGEM Team. In the lab, she works diligently and is very helpful when needed. But most of the times, she looks blank-minded and often makes small careless mistakes. Her trademark quote is "What did I just do? *blank face*" </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">
 +
                            <div class="image-title">BONGSO, Nadia Benedicta</div>
 +
"She is one of the rare team member that does not major in Life Science, she is a year 2 student majoring Chemical and Biomolecular Engineering(but still, Bio is involved). She is one of the 3-man Indonesian gang, which contributes to most of the noise in lab. She is indeed very helpful in the lab, such as helping to fill boxes of tips just after a few hours she landed in HK. She also helped much in Human Practice work.
 +
She is quite absent-minded about her iPad, luckily she does not forget her lab work. She LOVES people calling her surname, and she really likes Hong Kong Disneyland."
 +
</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">Jordy Evan Sulaiman</div>
 +
<div class="image-desc">Jordy is a year two student majoring in chemical and bimolecular engineering. He is hard-working, diligent, and creative. He also likes to eat, play basketball, and play computer games. Above all, he likes Doyle the most. Though Jordy is very funny, sometimes he can be extremely serious when doing something. The scary part of Jordy is that he is good at everything, even arts. Everyone likes Jordy. </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="image-title">WIDJAJA, Angeline</div>
 +
<div class="image-desc">Angeline a.k.a Angie is the angel of iGEM. She is a cheerful lady who likes to work but also have fun at the same time. She loves to play basketball and play games with other people. She is excellent in making friends with other people. There's nothing bad about her except for her spontaneous randomness. But that characteristic of her is what makes iGEM fun in some way or another. Interesting and unique people are the ones who everyone should cherish. </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="image-title" style="margin-left: auto;margin-right: auto;width: 70%;background-color: #b0e0e6>Haemin Cho</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="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="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="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) {
+
-
  on = false;
+
<div class="image-title">Title #8</div>
-
  }
+
<div class="image-desc">Description</div>
-
}
+
</div>
-
function back_slide(i) {
+
</li>
-
  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>
+
-
</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>
+
-
        <li><a href="#">Team</a>
+
<div class="image-title">Title #9</div>
-
        <!-- First Tier Drop Down -->
+
<div class="image-desc">Description</div>
-
        <ul>
+
</div>
-
            <li><a href="#">Members</a></li>
+
</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="#">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="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="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>
+
-
<style id="jsbin-css">
+
<div class="image-title">Title #12</div>
-
.tabs a{
+
<div class="image-desc">Description</div>
-
  cursor: pointer;
+
</div>
-
  padding: 5px;
+
</li>
-
  background: #fff;
+
-
  color: #000;
+
-
  border: 1px solid #666;
+
-
  border-bottom: 0;
+
-
}
+
-
.tabs a:hover, .tabs a.active{
+
-
  background: #666;
+
-
  color: #fff;
+
-
}
+
-
.tabContent{
+
<li>
-
  border: 1px solid #aaa;
+
<a class="thumb" href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60.jpg" title="Title #13">
-
  margin: 4px 0;
+
<img src="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_s.jpg" alt="Title #13" />
-
  padding: 5px;
+
</a>
-
}
+
<div class="caption">
-
#tab1,#tab2,#tab3,
+
-
{margin-left:10px;
+
<div class="image-title">Title #13</div>
-
}
+
<div class="image-desc">Description</div>
-
</style>
+
</div>
-
</head>
+
</li>
-
<body>
+
-
  <div class="tabs">
+
-
    <a data-toggle="tab0"></a>
+
-
    <a data-toggle="tab1">HKUST</a>
+
-
    <a data-toggle="tab2">Students</a>
+
-
    <a data-toggle="tab3">Advisers</a>
+
-
  </div>
+
-
<div class="tabContent"> 
+
-
 
+
-
<div id="tab1">
+
-
    <h5>HKUST</h5>
+
-
    <p>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.
+
-
<br>
+
-
<br>
+
-
You can follow our activity in the most common social networks:
+
-
<br>
+
-
<a href="">
+
-
<img title="Facebook" alt="Facebook" src="https://static.igem.org/mediawiki/2013/9/91/1380788391_facebook_square.png">
+
-
</a>
+
-
<a href="">
+
-
<img title="Twitter" alt="Twitter" src="https://static.igem.org/mediawiki/2013/b/b6/1380788385_twitter_square.png">
+
-
</a>
+
-
<a href="">
+
-
<img title="Youtube" alt="Youtube" src="https://static.igem.org/mediawiki/2013/e/ea/1380788439_youtube_square_color.png">
+
-
</a>
+
-
<a href="">
+
-
<img title="Instagram" alt="Instagram" src="https://static.igem.org/mediawiki/2013/5/5f/1380788401_instagram_square_color.png">
+
-
</a>
+
-
<br>
+
<li>
-
If you want to contact us, become a sponsor or you liked the idea, please address us using the button below:
+
<a class="thumb" href="http://farm3.static.flickr.com/2041/2083498578_114e117aab.jpg" title="Title #14">
-
<br>
+
<img src="http://farm3.static.flickr.com/2041/2083498578_114e117aab_s.jpg" alt="Title #14" />
-
 
+
</a>
-
<a class="btn btn-primary btn-large" href="mailto:vlc.biocampus.igem@gmail.com?subject='Contact from iGEM'">Contact us</a>
+
<div class="caption">
-
 
+
-
<img class="thumbnail pull-right" style="width:450px" alt="The team" src="https://www.ab.ust.hk/hro/PubDoc/careers/common/photos/hkust.jpg"> </p>
+
<div class="image-title">Title #14</div>
-
  </div>
+
<div class="image-desc">Description</div>
-
 
+
</div>
-
  <div id="tab2">
+
</li>
-
   
+
<li>
-
    <h5>Tab2</h5>
+
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
-
    <p>Donec pellentesque sapien neque, ac lobortis erat facilisis quis. Praesent faucibus arcu eros. Proin id tortor euismod, vulputate neque id, placerat nunc.</p>
+
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
-
  </div>
+
</a>
-
 
+
<div class="caption">
-
  <div id="tab3">
+
-
    <h5>Tab3</h5>
+
<div class="image-title">Title #2</div>
-
    <p>Duis justo mi, egestas euismod placerat a, eleifend vitae lacus. Integer non odio nec libero lacinia vulputate. Phasellus ante lectus, congue vel volutpat vitae, dictum quis est. </p>
+
<div class="image-desc">Description</div>
-
  </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>
-
     
+
<li>
-
      $("#" +  objNotFirst.attr("data-toggle")).hide();
+
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
-
      $(this).eq(index).addClass("active");
+
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
-
     
+
</a>
-
      obj.click(function(evt){
+
<div class="caption">
-
       
+
-
        toggler = "#" + obj.attr("data-toggle");
+
<div class="image-title">Title #2</div>
-
        togglerRest = $(toggler).parent().find("div");
+
<div class="image-desc">Description</div>
-
       
+
</div>
-
        togglerRest.hide().removeClass("active");
+
</li>
-
        $(toggler).show().addClass("active");
+
                        <li>
-
       
+
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
-
        $(this).parent("div").find("a").removeClass("active");
+
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
-
$(this).addClass("active");
+
</a>
-
        return false;
+
<div class="caption">
-
      });
+
-
    });
+
<div class="image-title">Title #2</div>
-
  };
+
<div class="image-desc">Description</div>
-
}(jQuery));
+
</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="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>
 +
                       
 +
</ul>
 +
</div>
 +
<div style="clear: both;"></div>
 +
</div>
 +
</div>
 +
<div id="footer">&copy; 2009 Trent Foley</div>
 +
<script type="text/javascript">
 +
jQuery(document).ready(function($) {
 +
// We only want these styles applied when javascript is enabled
 +
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
 +
$('div.content').css('display', 'block');
-
$(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>

Latest revision as of 18:03, 30 September 2014

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