Team:CityU HK/HumanPractice/Presentation
From 2014.igem.org
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> | + | <title>Bootstrap 101 Template</title> |
- | <!-- | + | <!-- 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= | + | <link href='http://fonts.googleapis.com/css?family=Dosis' 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= | + | <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> | |
- | < | + | .navbar { |
- | + | border-bottom: solid 3px #e0e0e0; | |
- | + | margin-bottom:0; | |
- | + | background-color: #EBEDEC; | |
- | + | } | |
- | + | ||
- | + | .navbar-brand { | |
- | } | + | font-family: 'Lobster', cursive; |
- | + | font-size: 4em; | |
- | + | padding-top: 40px; | |
- | + | padding-left: 40px; | |
- | + | padding-bottom:70px; | |
- | + | color: #069; | |
- | + | } | |
- | + | .navbar-brand:hover { | |
- | + | color:#3cc; | |
- | + | } | |
- | + | ||
- | + | .navbar .container-fluid #bs-example-navbar-collapse-1 .nav.navbar-nav.navbar-right { | |
- | + | margin-top: 20px; | |
- | + | font-size: 16px; | |
- | + | font-weight: bold; | |
- | top: | + | font-family:'Dosis', sans-serif; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .nav.navbar-nav.navbar-right .active a { | |
- | + | border-bottom-width: 3px; | |
- | + | border-bottom-style: solid; | |
- | + | border-bottom-color: #3cc; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | nav ul li a:hover { | |
- | + | font-weight: bolder; | |
- | color: # | + | color: #3cc; |
- | + | border-bottom-width: 3px; | |
- | + | border-bottom-style: solid; | |
+ | border-bottom-color: rgba(51,204,204,.3); | ||
} | } | ||
- | + | .dropdown-menu li a:hover { | |
- | + | border: none; | |
- | + | color: #3cc; | |
+ | font-weight: bold; | ||
} | } | ||
- | + | .btn-custom { | |
- | + | padding: 8px 30px 8px 30px; | |
- | + | background: none; | |
- | + | -moz-box-shadow: 3px 3px 5px 6px #000; | |
- | + | -webkit-box-shadow: 3px 3px 5px 6px #000; | |
- | + | box-shadow: 3px 3px 5px 6px #000; | |
- | + | color: #fff; | |
+ | border: solid 2.5px #fff; | ||
+ | font-family: 'Oswald', sans-serif; | ||
+ | font-size: 20px; | ||
} | } | ||
- | + | .btn-custom:hover { | |
- | + | color: #3CC; | |
- | + | border: solid 2.5px #3cc; | |
- | + | ||
} | } | ||
- | + | body { | |
- | + | margin: 0; | |
} | } | ||
- | + | .carousel-inner { | |
- | + | -webkit-box-shadow: 0 8px 6px -6px black; | |
+ | -moz-box-shadow: 0 8px 6px -6px black; | ||
+ | box-shadow: 0 8px 6px -6px black; | ||
} | } | ||
- | + | .carousel-inner .carousel-caption { | |
- | + | padding-top: 100px; | |
+ | padding-bottom: 100px; | ||
} | } | ||
- | + | .carousel-inner .carousel-caption h1 { | |
- | + | font-family: 'Pacifico', cursive; | |
- | + | font-size: 80px; | |
- | + | padding-bottom:20px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
#abstract { | #abstract { | ||
- | + | background: #CBEBE3; | |
- | + | ||
- | + | ||
} | } | ||
- | + | #abstract h1{ | |
- | + | font-family: 'Pacifico', cursive; | |
+ | font-size: 40px; | ||
+ | color: #fff; | ||
} | } | ||
- | + | ||
- | # | + | #abstract h2{ |
- | + | text-align: center; | |
- | + | color: #069; | |
- | + | font-family: 'Lobster', cursive; | |
- | + | text-shadow:0 0 1px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.3); | |
- | + | padding-top: 50px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | text-align:center | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | color: # | + | |
- | font- | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | text- | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | padding | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | #abstract p { |
- | text-align: justify; | + | line-height: 2em; |
- | + | text-align: justify; | |
- | + | padding-left: 200px; | |
+ | padding-right:200px; | ||
+ | padding-top: 30px; | ||
+ | padding-bottom: 100px; | ||
} | } | ||
#footer { | #footer { | ||
- | background: # | + | background: #333; |
- | height: 150px; | + | background-size:cover; |
- | clear: both; | + | height: 150px; |
- | position: | + | clear: both; |
- | bottom: 0 | + | position: relative; |
- | + | bottom: 0; | |
} | } | ||
#footer h4 { | #footer h4 { | ||
- | color: # | + | color: #fff; |
} | } | ||
#footer p { | #footer p { | ||
- | color: # | + | color: #fff; |
- | text-align: center; | + | text-align: center; |
} | } | ||
#footer a { | #footer a { | ||
- | color: # | + | color: #fff; |
- | text-decoration: none; | + | text-decoration: none; |
} | } | ||
#footer a:hover { | #footer a:hover { | ||
- | color: # | + | color: #3cc; |
} | } | ||
- | </style | + | </style> |
- | + | ||
- | < | + | </head> |
- | < | + | <body> |
- | <!--===================== | + | <!--========================== navbar =================================--> |
- | <div class=" | + | |
- | + | <nav class="navbar" role="navigation"> | |
- | + | <div class="container-fluid"> | |
- | + | <!-- Brand and toggle get grouped for better mobile display --> | |
- | <li class=" | + | <div class="navbar-header"> |
- | + | <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> | |
- | + | <span class="sr-only">Toggle navigation</span> | |
- | + | <span class="icon-bar"></span> | |
- | + | <span class="icon-bar"></span> | |
- | + | <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="dropdown"> | |
- | + | <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team<span class="caret"></span></a> | |
- | + | <ul class="dropdown-menu" role="menu"> | |
- | + | <li><a href="#">Team members</a></li> | |
- | + | <li><a href="#">Instructors</a></li> | |
- | + | </ul> | |
- | + | ||
- | + | ||
</li> | </li> | ||
- | + | </ul> | |
- | + | </div><!-- /.navbar-collapse --> | |
- | + | </div><!-- /.container-fluid --> | |
- | + | </nav> | |
- | + | ||
- | + | <!--========================== carousel ===============================--> | |
- | + | ||
- | + | <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> | |
- | + | <!-- Indicators --> | |
- | + | <ol class="carousel-indicators"> | |
- | + | <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> | |
- | + | <li data-target="#carousel-example-generic" data-slide-to="1"></li> | |
- | + | <li data-target="#carousel-example-generic" data-slide-to="2"></li> | |
- | + | </ol> | |
- | + | ||
- | + | <!-- Wrapper for slides --> | |
- | + | <div class="carousel-inner"> | |
- | + | <div class="item active"> | |
- | + | <img src="http://targetgroup.dk/wp-content/uploads/EG_1400x500.jpg" width="1400" height="500"> | |
- | + | <div class="carousel-caption"> | |
- | + | <h3>Our Project</h3> | |
- | + | <h1>Fit.coli</h1> | |
- | </ | + | <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> | ||
+ | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
<!--==================== 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> | ||
- | <!-- | + | <!-- 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; | ||
- | + | $("a[href*=#]:not([href=#])").on("click", function(e) { | |
- | + | if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { | |
- | + | target = $(this.hash); | |
- | + | target = target.length ? target : $("[id=" + this.hash.slice(1) + "]"); | |
- | + | ||
- | + | if (target.length) { | |
- | + | if (typeof document.body.style.transitionProperty === 'string') { | |
- | + | e.preventDefault(); | |
- | + | ||
- | + | 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
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.