Team:CityU HK/HumanPractice/Presentation

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<html lang="en">
<html lang="en">
-
<head>
+
 
 +
  <head>
     <meta charset="utf-8">
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
     <title>Team:CityU HK-Achievement</title>
+
     <title>Bootstrap 101 Template</title>
-
     <!-- Latest compiled and minified CSS -->
+
     <!-- Bootstrap -->
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
-
 
+
   
     <!-- font -->
     <!-- font -->
     <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css>
     <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css>
-
     <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
+
     <link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>  
-
    <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200' rel='stylesheet' type='text/css'>
+
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
-
     <link href='http://fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>
+
     <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
Line 22: Line 23:
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
     <![endif]-->
-
 
+
     <style>
-
     <!--essential javascript for nav-->
+
.navbar {
-
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
+
border-bottom: solid 3px #e0e0e0;
-
<script type="text/javascript">
+
margin-bottom:0;
-
$(document).ready(function() {
+
background-color: #EBEDEC;
-
$("#nav > li > ul").hide();
+
}
-
$("#nav > li").mouseenter(function() {
+
-
$(this).children("li > ul").slideDown(250);
+
.navbar-brand {
-
});
+
font-family: 'Lobster', cursive;
-
        $("#nav > li").mouseleave(function() {
+
font-size: 4em;
-
$(this).children("li > ul").slideUp(250);
+
padding-top: 40px;
-
});
+
padding-left: 40px;
-
});
+
padding-bottom:70px;
-
</script>
+
color: #069;
-
 
+
}
-
<style> /*CSS to remove wiki default style*/
+
.navbar-brand:hover {
-
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;} /*-- hides default wiki settings --*/
+
color:#3cc;
-
 
+
}
-
#top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/
+
-
background-color: #383838;
+
    .navbar .container-fluid #bs-example-navbar-collapse-1 .nav.navbar-nav.navbar-right {
-
border: 0 none;
+
margin-top: 20px;
-
height: 14px;
+
font-size: 16px;
-
z-index: 100;
+
font-weight: bold;
-
top: 0;
+
font-family:'Dosis', sans-serif;
-
position: fixed;
+
-
width: 975px;  
+
-
left: 50%;
+
-
margin-left: -487px;
+
}
}
-
 
+
    .nav.navbar-nav.navbar-right .active a {
-
#top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/
+
border-bottom-width: 3px;
-
background-color: #383838;
+
border-bottom-style: solid;
-
height: 14px;
+
border-bottom-color: #3cc;
-
display: block;
+
-
z-index: 10;
+
-
position: fixed;
+
-
width: 100%;
+
-
top: 0;
+
}
}
-
 
+
nav ul li a:hover {
-
#menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { /*-- styling for default menu bar links (edit, page, history, etc.) --*/
+
font-weight: bolder;
-
color: #727272;  
+
color: #3cc;
-
text-decoration: none;  
+
border-bottom-width: 3px;
-
background-color: transparent;
+
border-bottom-style: solid;
 +
border-bottom-color: rgba(51,204,204,.3);
}
}
-
 
+
.dropdown-menu li a:hover {
-
body {  
+
border: none;
-
background-color: #fff;
+
color: #3cc;
 +
font-weight: bold;
}
}
-
#globalWrapper, #content { /*-- changes default wiki settings --*/
+
.btn-custom {
-
width: 100%;  
+
padding: 8px 30px 8px 30px;
-
height: 100%;
+
background: none;
-
border: 0px;
+
-moz-box-shadow: 3px 3px 5px 6px #000;
-
background-color: transparent;
+
  -webkit-box-shadow: 3px 3px 5px 6px #000;
-
margin: 0px;
+
  box-shadow: 3px 3px 5px 6px #000;
-
padding: 0px;
+
color: #fff;
 +
border: solid 2.5px #fff;
 +
font-family: 'Oswald', sans-serif;
 +
font-size: 20px;
}
}
-
html, body, .wrapper { /*-- changes default wiki settings --*/
+
.btn-custom:hover {
-
width: 100%;
+
color: #3CC;
-
height: 100%;  
+
border: solid 2.5px #3cc;
-
background-color: transparent;
+
}
}
-
h2 {
+
body {
-
        border-bottom: none;
+
margin: 0;
}
}
-
h1 {
+
.carousel-inner {
-
        border-bottom: none;
+
-webkit-box-shadow: 0 8px 6px -6px black;
 +
-moz-box-shadow: 0 8px 6px -6px black;
 +
box-shadow: 0 8px 6px -6px black;
}
}
-
h3 {
+
.carousel-inner .carousel-caption {
-
        border-bottom: none;
+
padding-top: 100px;
 +
padding-bottom: 100px;
}
}
-
 
+
.carousel-inner .carousel-caption h1 {
-
#igem_logo {
+
font-family: 'Pacifico', cursive;  
-
        position: relative;
+
font-size: 80px;
-
        top:0;
+
padding-bottom:20px;
-
        left:0;
+
-
}
+
-
 
+
-
</style>
+
-
<!--=================================== CSS for header =====================================-->
+
-
 
+
-
<style>
+
-
#header {
+
-
        margin:20px;
+
-
        border-bottom: solid 2px #e0e0e0;
+
-
}
+
-
 
+
-
#header h1 {
+
-
        font-family: 'Lobster', cursive;
+
-
        float: left;
+
-
        margin: 0 auto;
+
-
        padding-left: 60px;
+
-
        font-size: 4em;
+
-
}
+
-
 
+
-
.carousel-caption {
+
-
        text-align: left;
+
}
}
#abstract {
#abstract {
-
        padding-left: 100px;
+
background: #CBEBE3;
-
        padding-right: 100px;
+
-
        line-height: 2.5em;
+
}
}
-
p {
+
#abstract h1{
-
  text-align: justify;
+
font-family: 'Pacifico', cursive;
 +
font-size: 40px;
 +
color: #fff;
}
}
-
 
+
-
#nav {
+
#abstract h2{
-
margin-bottom: 50px;
+
text-align: center;
-
        margin-top: 20px;
+
color: #069;
-
        margin-right: 30px;
+
font-family: 'Lobster', cursive;
-
}
+
text-shadow:0 0 1px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.3);
-
/*main nav*/
+
padding-top: 50px;
-
#nav li{
+
-
position:relative;
+
-
float:right;
+
-
list-style:none;
+
-
z-index:999;
+
-
}
+
-
#nav li a{
+
-
color:#666;
+
-
text-decoration:none;
+
-
padding-left:15px;
+
-
padding-right: 15px;
+
-
display:block;
+
-
text-align:center;
+
-
font-family:'Open Sans Condensed', sans-serif;
+
-
font-size: 13px;
+
-
}
+
-
 
+
-
#nav a:hover{
+
-
background: rgba(255,255,255,0.9);
+
-
color: #3cc;
+
-
font-weight: bolder;
+
-
}
+
-
 
+
-
#nav .main_nav:hover{
+
-
        border-bottom: solid 3px #008080;
+
-
        z-index: 1000;
+
-
}
+
-
 
+
-
#nav #achievement:hover{
+
-
        border-bottom: solid 3px rgba(96,223,229,0.2);
+
-
}
+
-
 
+
-
#nav .active {
+
-
border-bottom: solid 3px #3cc;
+
-
}
+
-
 
+
-
/*dropsown navbar*/
+
-
#nav li ul{
+
-
    /*display:none;*/
+
-
position:absolute;
+
-
text-align:center;
+
-
        margin: 0 auto;
+
-
padding-left: 0;
+
-
        background-color: rgba(255,255,255,0.9);
+
-
        box-shadow: gray 0.33em 0.25em 0.25em;
+
-
}
+
-
#nav li:hover ul{
+
-
display:block;
+
-
        background-color: rgba(255,255,255,0.9)
+
-
}
+
-
 
+
-
ul#nav li ul li a {
+
-
margin-top: 5px;
+
-
padding: 0;
+
-
align: center;
+
-
width: 150px;
+
-
}
+
-
</style>
+
-
 
+
-
<!--=================================== CSS for main-content =====================================-->
+
-
<style>
+
-
#main-content {
+
-
padding-left: 100px;
+
-
padding-right: 100px;
+
-
}
+
-
 
+
-
.pagetitle {
+
-
color: #3cc;
+
-
text-align: center;
+
-
font-family: font-family: 'Dosis', sans-serif;
+
-
}
+
-
 
+
-
.subtitle {
+
-
color: #3cc;
+
-
text-align: center;
+
-
font-family: font-family: 'Dosis', sans-serif;
+
}
}
-
#main-content p {
+
#abstract p {
-
text-align: justify;
+
line-height: 2em;
-
color: #4d4d4d;
+
text-align: justify;
-
line-height: 2em;
+
padding-left: 200px;
 +
padding-right:200px;
 +
padding-top: 30px;
 +
padding-bottom: 100px;
}
}
#footer {
#footer {
-
background: #e0e0e0;
+
background: #333;
-
height: 150px;
+
background-size:cover;
-
clear: both;
+
height: 150px;
-
position: absolute;
+
clear: both;
-
bottom: 0;
+
position: relative;
-
width: 100%;
+
bottom: 0;
}
}
#footer h4 {
#footer h4 {
-
color: #4d4d4d;
+
color: #fff;
}
}
#footer p {
#footer p {
-
color: #4d4d4d;
+
color: #fff;
-
text-align: center;
+
text-align: center;
}
}
#footer a {
#footer a {
-
color: #4d4d4d;
+
color: #fff;
-
text-decoration: none;
+
text-decoration: none;
}
}
#footer a:hover {
#footer a:hover {
-
color: #008080;
+
color: #3cc;
}
}
-
</style>
+
    </style>
-
</head>
+
-
<body>
+
  </head>
-
<a id="igem_logo" href="https://igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/thumb/7/7c/80px-Eth_igem_logo.png/50px-80px-Eth_igem_logo.png"/ alt="igem logo"></a>
+
  <body>
-
<!--===================== nav start ===========================-->
+
  <!--========================== navbar =================================-->
-
<div class="row">
+
 
-
<div id="header" class="col-sm-12 col-md-12">
+
  <nav class="navbar" role="navigation">
-
  <h1>Fit.coli</h1>
+
  <div class="container-fluid">
-
  <ul id="nav">
+
    <!-- Brand and toggle get grouped for better mobile display -->
-
         <li class="main_nav"><a href="#">NOTEBOOK</a>  
+
    <div class="navbar-header">
-
    <ul>  
+
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-
      <li><a href="#">Lab Log</a></li>  
+
        <span class="sr-only">Toggle navigation</span>
-
<li><a href="#">Protocols</a></li>  
+
        <span class="icon-bar"></span>
-
                <li><a href="#">Safety</a></li>  
+
        <span class="icon-bar"></span>
-
    </ul>
+
        <span class="icon-bar"></span>
 +
      </button>
 +
     
 +
      <a class="navbar-brand" href="#"> <img src="https://static.igem.org/mediawiki/2013/thumb/7/7c/80px-Eth_igem_logo.png/50px-80px-Eth_igem_logo.png">Fit.coli</a>
 +
    </div>
 +
 
 +
    <!-- Collect the nav links, forms, and other content for toggling -->
 +
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 +
      <ul class="nav navbar-nav navbar-right">
 +
         <li class="active"><a href="#">Home</a></li>
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project<span class="caret"></span></a>
 +
          <ul class="dropdown-menu" role="menu">
 +
            <li><a href="#">Action</a></li>
 +
            <li><a href="#">Another action</a></li>
 +
            <li><a href="#">Something else here</a></li>
 +
            <li><a href="#">Separated link</a></li>
 +
          </ul>
         </li>
         </li>
-
<li class="main_nav" id="achievement"><a href="https://2014.igem.org/Team:CityU_HK/Achievement">ACHIEVEMENTS</a></li>
+
        <li class="dropdown">
-
+
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team<span class="caret"></span></a>
-
<li class="main_nav"><a href="">HUMAN PRACTICE</a>
+
          <ul class="dropdown-menu" role="menu">
-
            <ul>
+
            <li><a href="#">Team members</a></li>
-
                <li><a href="#">Blog</a></li>
+
            <li><a href="#">Instructors</a></li>
-
                <li><a href="#">Video</a></li>
+
          </ul>
-
                <li><a href="#">Presentation</a></li>
+
-
            </ul>
+
         </li>
         </li>
-
        <li class="main_nav"><a href="#">PROJECT</a>
+
      </ul>
-
            <ul>  
+
    </div><!-- /.navbar-collapse -->
-
<li><a href="#">Abstract</a></li>  
+
  </div><!-- /.container-fluid -->
-
                <li><a href="#">Modules Description</a></li>  
+
</nav>
-
                <li><a href="#">Data Pages</a></li>
+
 
-
                <li><a href="#">Characterization</a></li>
+
  <!--========================== carousel ===============================-->
-
                <li><a href="#">Results</a></li>
+
 
-
                <li><a href="#">Future Work</a></li>
+
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
-
    </ul>
+
  <!-- Indicators -->
-
        </li>  
+
  <ol class="carousel-indicators">
-
    <li class="main_nav"><a href="#">TEAM</a>
+
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
-
            <ul>
+
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
-
        <li><a href="#">Team Members</a></li>
+
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
-
<li><a href="#">Advisors</a></li>
+
  </ol>
-
                <li><a href="#">Instructors</a></li>
+
 
-
                <li><a href="#">Attribution</a></li>
+
  <!-- Wrapper for slides -->
-
                <li><a href="#">Acknowledgement</a></li>
+
  <div class="carousel-inner">
-
    </ul>
+
    <div class="item active">
-
        </li>  
+
      <img src="http://targetgroup.dk/wp-content/uploads/EG_1400x500.jpg" width="1400" height="500">
-
        <li class="active"><a href="https://2014.igem.org/Team:CityU_HK">HOME</a>
+
<div class="carousel-caption">
-
  </ul>
+
        <h3>Our Project</h3>
-
</div> <!--end of col-md-12 -->
+
        <h1>Fit.coli</h1>
-
</div> <!--end of row-->
+
        <p><a class="btn btn-custom" href="#Lower">ABSTRACT</a></p>
 +
      </div>
 +
    </div>
 +
    <div class="item">
 +
    <img src="http://www.southerncharmwear.com/v/vspfiles/templates/SouthernCharmWear/images/homepage/slide4.jpg " width="1400" height="500">  
 +
    </div>
 +
    <div class="item">
 +
      <img src="http://www.berklee.edu/sites/default/files/MUSIC_PROD.jpg" width="1400" height="500">
 +
      <div class="carousel-caption">
 +
        <h3>1400 x 500</h3>
 +
        <p>Are you fed up with the tiring busy life? Let's listen your favorite music and relax.</p>
 +
      </div>
 +
    </div>
 +
  </div>
 +
 
 +
  <!-- Controls -->
 +
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
 +
    <span class="glyphicon glyphicon-chevron-left"></span>
 +
  </a>
 +
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
 +
    <span class="glyphicon glyphicon-chevron-right"></span>
 +
  </a>
 +
</div>
 +
 
 +
<!--===================== Abstract =========================-->
 +
 
 +
<div class="anchor" id="Lower"></div>
 +
<div class="row" id="abstract">
 +
  <div class="col-sm-12 col-md-12">
 +
    <h2>Abstract</h2>
 +
    <p>Obesity has now reached epidemic proportions worldwide, which has serious consequences because obesity is associated with various chronic human diseases such as diabetes, hypertension and cardiovascular diseases. With the aim to protect oneself against obesity and debilitating diseases caused by a high-fat diet, we are using a synthetic biology approach to design an Escherichia coli strain (called Fit Coli) that has an enhanced ability to uptake and convert excess fatty acids from fatty foods into a-linolenic acid (ALA). The strategy is to engineer the fadL and fadD genes along with three desaturase genes to facilitate the uptake of long-chain fatty acids and their biotransformation to ALA by the “Fit Coli” strain. It is predicted that the ALA converted from excess fatty acids by Fit Coli is converted to docosahexaenoic acid (DHA), an omega-3-fatty acid, in the human gut, which is well known to have many positive health benefits.</p>
 +
  </div>
 +
</div>
 +
-
<!--===================== Main Content =====================-->
 
-
<div class="container">
 
-
<div id="main-content" class"row">
 
-
<div class="col-sm-12 col-me-12">
 
-
  <h2 class="pagetitle">PAGE TITLE</h2>
 
-
  <h4 class="subtitle">Subtitle</h4>
 
-
  <p>this is the paraphraph.</p>
 
-
</div> <!--end of col-->
 
-
</div> <!-- end of #main-content -->
 
-
</div> <!-- end of container -->
 
<!--==================== footer ===========================-->
<!--==================== footer ===========================-->
<div id="footer" class="row">
<div id="footer" class="row">
Line 322: Line 264:
   </div> <!--end of col-md-5-->
   </div> <!--end of col-md-5-->
</div> <!-- end of #footer -->
</div> <!-- end of #footer -->
-
 
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-
     <!-- Latest compiled and minified JavaScript -->
+
     <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 +
   
 +
    <script>
 +
// Smooth scroll for in page links
 +
$(function(){
 +
    var target, scroll;
-
     <!-- essential javascript for navbar -->
+
     $("a[href*=#]:not([href=#])").on("click", function(e) {
-
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
+
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
-
    <script type="text/javascript">
+
            target = $(this.hash);
-
    $(document).ready(function() {
+
            target = target.length ? target : $("[id=" + this.hash.slice(1) + "]");
-
$("#nav > li > ul").hide();
+
 
-
$("#nav > li").mouseenter(function() {
+
            if (target.length) {
-
$(this).children("li > ul").slideDown(250);
+
                if (typeof document.body.style.transitionProperty === 'string') {
-
});
+
                    e.preventDefault();
-
        $("#nav > li").mouseleave(function() {
+
                 
-
$(this).children("li > ul").slideUp(250);
+
                    var avail = $(document).height() - $(window).height();
-
});
+
 
 +
                    scroll = target.offset().top;
 +
                 
 +
                    if (scroll > avail) {
 +
                        scroll = avail;
 +
                    }
 +
 
 +
                    $("html").css({
 +
                        "margin-top" : ( $(window).scrollTop() - scroll ) + "px",
 +
                        "transition" : "1s ease-in-out"
 +
                    }).data("transitioning", true);
 +
                } else {
 +
                    $("html, body").animate({
 +
                        scrollTop: scroll
 +
                    }, 1000);
 +
                    return;
 +
                }
 +
            }
 +
        }
     });
     });
-
</script>
+
 
-
</body>
+
    $("html").on("transitionend webkitTransitionEnd msTransitionEnd oTransitionEnd", function (e) {
 +
        if (e.target == e.currentTarget && $(this).data("transitioning") === true) {
 +
            $(this).removeAttr("style").data("transitioning", false);
 +
            $("html, body").scrollTop(scroll);
 +
            return;
 +
        }
 +
    });
 +
});
 +
</script>
 +
  </body>
</html>
</html>

Revision as of 07:30, 24 August 2014

Bootstrap 101 Template

Abstract

Obesity has now reached epidemic proportions worldwide, which has serious consequences because obesity is associated with various chronic human diseases such as diabetes, hypertension and cardiovascular diseases. With the aim to protect oneself against obesity and debilitating diseases caused by a high-fat diet, we are using a synthetic biology approach to design an Escherichia coli strain (called Fit Coli) that has an enhanced ability to uptake and convert excess fatty acids from fatty foods into a-linolenic acid (ALA). The strategy is to engineer the fadL and fadD genes along with three desaturase genes to facilitate the uptake of long-chain fatty acids and their biotransformation to ALA by the “Fit Coli” strain. It is predicted that the ALA converted from excess fatty acids by Fit Coli is converted to docosahexaenoic acid (DHA), an omega-3-fatty acid, in the human gut, which is well known to have many positive health benefits.

Retrieved from "http://2014.igem.org/Team:CityU_HK/HumanPractice/Presentation"