Team:Hong Kong HKUST/alfipage

From 2014.igem.org

(Difference between revisions)
(Created page with "<html> <head> <style> element.style { margin-top: 50px; opacity: 1; } #content { color: #000000; line-height: 1.5em; } #globalWrapper { font-size: 127%; } ...")
 
Line 1: Line 1:
<html>
<html>
-
<head>
+
<head>
-
 
+
<style>
-
<style>
+
      .pull-right{
-
 
+
      float: right}
-
 
+
 
-
element.style {
+
  .thumbnail {
-
     margin-top: 50px;
+
     border: 1px solid #ddd;
-
     opacity: 1;
+
    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;
}
}
-
#content {
+
     img {
-
     color: #000000;
+
     vertical-align: middle;}
-
    line-height: 1.5em;
+
-
}
+
element.style {
-
#globalWrapper {
+
     text-align: justify;
-
     font-size: 127%;
+
     width: 450px;
-
}
+
-
body, input {
+
-
    font-family: Arial,Helvetica,sans-serif;
+
-
}
+
-
body {
+
-
     color: #1E272B;
+
-
}
+
-
body, input {
+
-
    font-family: Arial,Helvetica,sans-serif;
+
-
}
+
-
body {
+
-
     color: #1E272B;
+
-
}
+
-
body {
+
-
    color: #000000;
+
-
    font: x-small sans-serif;
+
}
}
-
 
+
.pull-left {
 +
    float: left;}
 +
</style>
</style>
-
<style type="text/css">
 
-
div.content {
 
-
/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
 
-
display: none;
 
-
float: right;
 
-
width: 620px;
 
-
/*border: 3px solid rgb(46,43,52);*/
 
-
}
 
-
div.content a:focus, div.content a:hover, div.content a:active, div.content a, div.navigation a {
 
-
text-decoration: none;
 
-
color:rgb(46,43,52);
 
-
}
 
-
div.controls {
 
-
margin-top: 5px;
 
-
height: 23px;
 
-
line-height: 1.4em;
 
-
font-size: 17px;
 
-
}
 
-
div.controls a {
 
-
padding: 5px;
 
-
}
 
-
div.ss-controls {
 
-
float: left;
 
-
}
 
-
div.nav-controls {
 
-
float: right;
 
-
}
 
-
div.slideshow-container {
 
-
position: relative;
 
-
clear: both;
 
-
height: 240px; /* This should be set to be at least the height of the largest image in the slideshow */
 
-
}
 
-
div.gloader {
 
-
display:none;
 
-
position: absolute;
 
-
top: 0;
 
-
left: 0;
 
-
background-image: url('loader.gif');
 
-
background-repeat: no-repeat;
 
-
background-position: center;
 
-
width: 620px;
 
-
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
 
-
}
 
-
div.slideshow {
 
-
}
 
-
div.slideshow span.image-wrapper {
 
-
display: block;
 
-
}
 
-
div.slideshow a.advance-link {
 
-
display: block;
 
-
width: 620px;
 
-
height: 240px; /* This should be set to be at least the height of the largest image in the slideshow */
 
-
line-height: 240px; /* This should be set to be at least the height of the largest image in the slideshow */
 
-
text-align: center;
 
-
}
 
-
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
 
-
text-decoration: none;
 
-
}
 
-
div.slideshow img {
 
-
vertical-align: middle;
 
-
border: 1px solid #ccc;
 
-
}
 
-
div.caption-container {
 
-
position: relative;
 
-
clear: left;
 
-
height: 330px;
 
-
}
 
-
span.image-caption {
 
-
display: block;
 
-
position: absolute;
 
-
width: 620px;
 
-
top: 0;
 
-
left: 0;
 
-
}
 
-
div.caption {
 
-
padding: 12px;
 
-
margin-top:10px;
 
-
}
 
-
div.image-title {
 
-
font-weight: bold;
 
-
font-size: 25px;
 
-
text-align:center;
 
-
}
 
-
div.affiliation {
 
-
/*font-weight: bold;*/
 
-
font-style: italic;
 
-
margin-top: 7px;
 
-
font-size: 17px;
 
-
}
 
-
div.image-desc {
 
-
line-height: 1.4em;
 
-
font-size: 15px;
 
-
padding-top: 12px;
 
-
text-align: justify;
 
-
}
 
-
div.navigation {
 
-
/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
 
-
}
 
-
ul.thumbs {
 
-
clear: both;
 
-
margin: 0;
 
-
padding: 0;
 
-
width: 470px;
 
-
}
 
-
ul.thumbs li {
 
-
float: left;
 
-
padding: 0;
 
-
margin: 5px 10px 5px 0;
 
-
list-style: none;
 
-
}
 
-
a.thumb {
 
-
padding: 2px;
 
-
display: block;
 
-
border: 1px solid #ccc;
 
-
}
 
-
ul.thumbs li.selected a.thumb {
 
-
background:rgb(46,43,52);
 
-
}
 
-
a.thumb:focus {
 
-
outline: none;
 
-
}
 
-
ul.thumbs img {
 
-
border: none;
 
-
display: block;
 
-
}
 
-
div.pagination {
 
-
clear: both;
 
-
line-height: 1.4em;
 
-
font-size: 17px;
 
-
}
 
-
div.navigation div.top {
 
-
margin-bottom: 12px;
 
-
height: 11px;
 
-
}
 
-
div.navigation div.bottom {
 
-
margin-top: 12px;
 
-
}
 
-
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
 
-
display: block;
 
-
float: left;
 
-
margin-right: 2px;
 
-
padding: 4px 7px 2px 7px;
 
-
border: 1px solid #ccc;
 
-
}
 
-
div.pagination a:hover {
 
-
background-color: rgb(46,43,52);
 
-
text-decoration: none;
 
-
}
 
-
div.pagination span.current {
 
-
font-weight: bold;
 
-
background-color:rgb(46,43,52);
 
-
border-color:rgb(46,43,52);
 
-
color: #fff;
 
-
}
 
-
div.pagination span.ellipsis {
 
-
border: none;
 
-
padding: 5px 0 3px 2px;
 
-
}
 
-
div.who-container{
 
-
}
 
-
.titlebox {
 
-
font-size:45px;
 
-
margin-left:20px;
 
-
font-family: 'Archivo Narrow', sans-serif;
 
-
position:absolute;
 
-
font-weight:bold;
 
-
}
 
-
</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>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
-
<script>
+
 
 +
 +
 
 +
<script>
$(document).ready(function(){
$(document).ready(function(){
  $(window).scroll(function(){
  $(window).scroll(function(){
Line 219: Line 45:
</script>
</script>
-
+
 
 +
 
 +
 
 +
 
 +
 
 +
 
<script>
<script>
var on = true;
var on = true;
Line 244: Line 75:
}
}
</script>
</script>
-
</head>
+
</head>
-
<body>
+
 
-
<div id='nav_container'>
+
<body>
 +
<div id='nav_container'>
<nav>
<nav>
Line 316: Line 148:
</div>
</div>
-
<!-- ================Up to this point are Banner and columns =========================-->
+
 
-
+
<!DOCTYPE html>
-
<div id="" style="width:1100px">
+
<html>
-
<div id="who-container">
+
<head>
-
<div style="float:left">
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
-
<div class="titlebox" style="top:600px">Students</div>
+
<meta charset=utf-8 />
-
<div id="thumbs" style="margin-top: 50px; opacity: 1;">
+
<title>HTML5 jQuery Tabs</title>
-
<div class="top pagination"></div>
+
<style id="jsbin-css">
-
<ul class="thumbs">
+
.tabs a{
-
<li class="" style="opacity: 0.67;">
+
  cursor: pointer;
-
<a class="thumb" title="Idonnya Aghoghogbe" href="#Idonnya Aghoghogbe" rel="history">
+
  padding: 4px;
-
<img height="100px" width="100px" alt="Idonnya Aghoghogbe" src="https://static.igem.org/mediawiki/2013/3/3f/PB_Idonnyascuared.JPG">
+
  background: #fff;
 +
  color: #000;
 +
  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{
 +
  background:#fff;
 +
  border: 1px solid #fff;
 +
  margin: 1px 0;
 +
  padding-left: 30px;
 +
  padding-right: 30px;
 +
  padding-top: 10px;
 +
  padding-bottom: 10px;
 +
}
 +
 
 +
</style>
 +
</head>
 +
<body>
 +
  <div class="tabs">
 +
    <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">
 +
<table>
 +
<col width="50%">
 +
<col width="50%">
 +
 
 +
<tr><td colspan=2>
 +
    <h2>HKUST</h2></td></tr>
 +
<tr><td>
 +
    <p style="font-size:16px"; align="justify">
 +
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 at 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>
-
<div class="caption">
+
<a href="">
-
<div class="image-title">Idonnya Aghoghogbe
+
<img title="Twitter" alt="Twitter" src="https://static.igem.org/mediawiki/2013/b/b6/1380788385_twitter_square.png">
-
  <div class="affiliation">
+
-
    2<sup>nd</sup> year AIV Master student at Université Paris Descartes.
+
-
  </div>
+
-
</div>
+
-
<div class="image-desc">I obtained my Bsc in Biochemistry at the University of Birmingham, UK. I am deeply interested in biomedical studies and medicine. During the AIV’s first year master programme, I was afforded the opportunity to study synthetic, computational and systems biology. This allowed me to discover that new approaches in medicine can be taken using the principles of synthetic and systems biology. Such approaches are evident in our iGEM project, which I am very excited to be a part of.  Using synthetic biology, we are trying to address an age old medical problem in an innovative yet plausible way.</div>
+
-
              </div>
+
-
    </li>
+
-
</li>
+
-
<li style="opacity: 0.67;" class="">
+
-
<a class="thumb" title="Iva Atanasković" href="#Iva Atanasković" rel="history">
+
-
<img height="100px" width="100px" alt="Iva Atanasković" src="https://static.igem.org/mediawiki/2013/b/bf/PB_Ivascuared.JPG">
+
</a>
</a>
-
</li>
+
<a href="">
-
<li style="opacity: 1;" class="selected">
+
<img title="Youtube" alt="Youtube" src="https://static.igem.org/mediawiki/2013/e/ea/1380788439_youtube_square_color.png">
-
<a class="thumb" title="Camelia Bancherif" href="#Camelia Bencherif" rel="history">
+
-
<img height="100px" width="100px" alt="Camelia Bancherif" src="https://static.igem.org/mediawiki/2013/a/aa/PB_Cameliascuared.JPG">
+
</a>
</a>
-
</li>
+
<a href="">
-
<li style="opacity: 0.67;">
+
<img title="Instagram" alt="Instagram" src="https://static.igem.org/mediawiki/2013/5/5f/1380788401_instagram_square_color.png">
-
<a class="thumb" title="Clovis Basier" href="#Clovis Basier" rel="history">
+
-
<img height="100px" width="100px" alt="Clovis Basier" src="https://static.igem.org/mediawiki/2013/0/0e/PB_Clovisscuared.JPG">
+
</a>
</a>
-
</li>
+
<br>
-
<li style="opacity: 0.67;">
+
<br>
-
<a class="thumb" title="Marguerite Benony" href="#Marguerite Benony" rel="history">
+
If you want to contact us, become a sponsor or you liked the idea, please address us using the button below:
-
<img height="100px" width="100px" alt="Marguerite Benony" src="https://static.igem.org/mediawiki/2013/a/a9/PB_Margueritescuared.JPG">
+
<br>
-
</a>
+
 
-
</li>
+
<a class="btn btn-primary btn-large" href="mailto:vlc.biocampus.igem@gmail.com?subject='Contact from iGEM'">Contact us</a>
-
<li style="opacity: 0.67;" class="">
+
 
-
<a class="thumb" title="Aude Bernheim" href="#Aude Bernheim" rel="history">
+
</p></td>
-
<img height="100px" width="100px" alt="Aude Bernheim" src="https://static.igem.org/mediawiki/2013/3/38/PB_Audescuared.JPG">
+
<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>
-
</a>
+
</tr></table>
-
</li>
+
 
-
<li style="opacity: 0.67;" class="">
+
<div id="thumbs" class="navigation">
-
<a class="thumb" title="Matthew Deyell" href="#Matthew Deyell" rel="history">
+
<ul class="thumbs noscript">
-
<img height="100px" width="100px" alt="Matthew Deyell" src="https://static.igem.org/mediawiki/2013/d/d2/PB_Mattscuared.JPG">
+
<li>
-
</a>
+
<a class="thumb" name="leaf" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
-
</li>
+
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" />
-
<li style="opacity: 0.67;">
+
</a>
-
<a class="thumb" title="Sebastian Jaramillo-Riveri" href="#Sebastian Jaramillo-Riveri" rel="history">
+
<div class="caption">
-
<img height="100px" width="100px" alt="Sebastian Jaramillo-Riveri" src="https://static.igem.org/mediawiki/2013/2/25/PB_Sebastienscuared.JPG">
+
-
</a>
+
<div class="image-title">Title #0</div>
-
</li>
+
<div class="image-desc">Description</div>
-
<li style="opacity: 0.67;">
+
</div>
-
<a class="thumb" title="Nicolas Koutsoubelis" href="#Nicolas Koutsoubelis" rel="history">
+
  </div>
-
<img height="100px" width="100px" alt="Nicolas Koutsoubelis" src="https://static.igem.org/mediawiki/2013/6/61/PB_Nicoscuared.JPG">
+
 
-
</a>
+
<div id="tab2">
-
</li>
+
 
-
<li style="opacity: 0.67;">
+
<div id="thumbs" class="navigation">
-
<a class="thumb" title="Vincent Libis" href="#Vincent Libis" rel="history">
+
<ul class="thumbs noscript">
-
<img height="100px" width="100px" alt="Vincent Libis" src="https://static.igem.org/mediawiki/2013/b/b5/PB_YellowsquaredVincent.JPG">
+
<li>
-
</a>
+
<a class="thumb" name="leaf" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
-
</li>
+
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" />
-
<li style="opacity: 0.67;">
+
</a>
-
<a class="thumb" title="Anne Löchner" href="#Anne Löchner" rel="history">
+
<div class="caption">
-
<img height="100px" width="100px" alt="Anne Löchner" src="https://static.igem.org/mediawiki/2013/3/34/PB_Annesquared.JPG">
+
-
</a>
+
<div class="image-title">Title #0</div>
-
</li>
+
<div class="image-desc">Description</div>
-
<li style="opacity: 0.67;" class="">
+
</div>
-
<a class="thumb" title="Sarah Zahra" href="#Sarah Zahra" rel="history">
+
 
-
<img height="100px" width="100px" alt="Sarah Zahra" src="https://static.igem.org/mediawiki/2013/0/07/PB_Sarahscuared.JPG">
+
  </div>
-
</a>
+
 
-
</li>
+
  <div id="tab3">
-
<li style="opacity: 0.67;" class="">
+
    <table width="100%" height="171" border="10" align="center" cellpadding="0" cellspacing="0" class="curvedEdges">
-
<a class="thumb" title="Sarah Zahra" href="#Sarah Zahra" rel="history">
+
<tr><td>Advisers<br><br>Hello!</td></tr>
-
<img height="100px" width="100px" alt="Sarah Zahra" src="https://static.igem.org/mediawiki/2013/0/07/PB_Sarahscuared.JPG">
+
</table>
-
</a>
+
  </div>
-
</li>
+
 
-
<li style="opacity: 0.67;" class="">
+
 
-
<a class="thumb" title="Sarah Zahra" href="#Sarah Zahra" rel="history">
+
 
-
<img height="100px" width="100px" alt="Sarah Zahra" src="https://static.igem.org/mediawiki/2013/0/07/PB_Sarahscuared.JPG">
+
-
</a>
+
-
</li>
+
-
<li style="opacity: 0.67;" class="">
+
-
<a class="thumb" title="Sarah Zahra" href="#Sarah Zahra" rel="history">
+
-
<img height="100px" width="100px" alt="Sarah Zahra" src="https://static.igem.org/mediawiki/2013/0/07/PB_Sarahscuared.JPG">
+
-
</a>
+
-
</li>
+
-
<li style="opacity: 0.67;" class="">
+
-
<a class="thumb" title="Sarah Zahra" href="#Sarah Zahra" rel="history">
+
-
<img height="100px" width="100px" alt="Sarah Zahra" src="https://static.igem.org/mediawiki/2013/0/07/PB_Sarahscuared.JPG">
+
-
</a>
+
-
</li>
+
-
<li style="opacity: 0.67;" class="">
+
-
<a class="thumb" title="Sarah Zahra" href="#Sarah Zahra" rel="history">
+
-
<img height="100px" width="100px" alt="Sarah Zahra" src="https://static.igem.org/mediawiki/2013/0/07/PB_Sarahscuared.JPG">
+
-
</a>
+
-
</li>
+
-
<li style="opacity: 0.67;" class="">
+
-
<a class="thumb" title="Sarah Zahra" href="#Sarah Zahra" rel="history">
+
-
<img height="100px" width="100px" alt="Sarah Zahra" src="https://static.igem.org/mediawiki/2013/0/07/PB_Sarahscuared.JPG">
+
-
</a>
+
-
</li>
+
-
<li style="opacity: 0.67;" class="">
+
-
<a class="thumb" title="Sarah Zahra" href="#Sarah Zahra" rel="history">
+
-
<img height="100px" width="100px" alt="Sarah Zahra" src="https://static.igem.org/mediawiki/2013/0/07/PB_Sarahscuared.JPG">
+
-
</a>
+
-
</li>
+
-
<li style="opacity: 0.67;" class="">
+
-
<a class="thumb" title="Sarah Zahra" href="#Sarah Zahra" rel="history">
+
-
<img height="100px" width="100px" alt="Sarah Zahra" src="https://static.igem.org/mediawiki/2013/0/07/PB_Sarahscuared.JPG">
+
-
</a>
+
-
</li>
+
-
</ul>
+
-
<div class="bottom pagination"></div>
+
</div>
</div>
-
</div>
+
<script id="jsbin-javascript">
-
 
+
;(function($){
 +
  $.fn.html5jTabs = function(options){
 +
    return this.each(function(index, value){
 +
      var obj = $(this),
 +
      objFirst = obj.eq(index),
 +
      objNotFirst = obj.not(objFirst);
 +
     
 +
      $("#" +  objNotFirst.attr("data-toggle")).hide();
 +
      $(this).eq(index).addClass("active");
 +
     
 +
      obj.click(function(evt){
 +
       
 +
        toggler = "#" + obj.attr("data-toggle");
 +
        togglerRest = $(toggler).parent().find("div");
 +
       
 +
        togglerRest.hide().removeClass("active");
 +
        $(toggler).show().addClass("active");
 +
       
 +
        $(this).parent("div").find("a").removeClass("active");
 +
$(this).addClass("active");
 +
        return false;
 +
      });
 +
    });
 +
  };
 +
}(jQuery));
 +
$(function() {
 +
  $(".tabs a").html5jTabs();
 +
});
 +
</script>
</body>
</body>
</html>
</html>

Latest revision as of 10:20, 28 September 2014

HTML5 jQuery Tabs
HKUST Students Advisers

HKUST

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 at 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.

You can follow our activity in the most common social networks:
Facebook Twitter Youtube Instagram

If you want to contact us, become a sponsor or you liked the idea, please address us using the button below:
Contact us

The team
Advisers

Hello!

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