Team:CityU HK/HumanPractice/Presentation

From 2014.igem.org

(Difference between revisions)
 
(125 intermediate revisions not shown)
Line 1: Line 1:
 +
{{:Template:Team:CityU_HK/CSS}}
 +
<html>
<html>
<html lang="en">
<html lang="en">
-
 
   <head>
   <head>
-
    <meta charset="utf-8">
+
body {
-
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
margin: 0;
-
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
-
    <title>Bootstrap 101 Template</title>
+
-
 
+
-
    <!-- Bootstrap -->
+
-
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+
-
   
+
-
    <!-- font -->
+
-
    <link href='http://fonts.googleapis.com/css?family=Lobster' 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=Oswald' 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 -->
+
-
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+
-
    <!--[if lt IE 9]>
+
-
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+
-
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+
-
    <![endif]-->
+
-
 
+
-
 
+
-
<style type="text/css">
+
-
 
+
-
/* Removing wiki-like stuff */
+
-
/****************************/
+
-
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;}
+
-
 
+
-
#top-section {    /*-- styling for default menu bar (edit, page, history, etc.) --*/
+
-
background-color: none;
+
-
        color: transparent;
+
-
border: 0 none;
+
-
height: 1px;
+
-
z-index: 100;
+
-
top: 0;
+
-
position: fixed;
+
-
width: 975px;
+
-
left: 50%;
+
-
margin-left: 0;
+
-
}
+
-
 
+
-
#top-section:hover {
+
-
background-color: #383838;
+
-
border: 0 none;
+
-
height: 14px;
+
-
z-index: 100;
+
-
top: 0;
+
-
position: fixed;
+
-
width: 975px;
+
-
left: 50%;
+
-
margin-left: -487px;
+
-
}
+
-
 
+
-
#top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/
+
-
background-color: #383838;
+
-
height: 14px;
+
-
display: block;
+
-
z-index: 10;
+
-
position: fixed;
+
-
width: 100%;
+
-
top: 0;
+
-
}
+
-
 
+
-
#menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { /*-- styling for default menu bar links (edit, page, history, etc.) --*/
+
-
color: #727272;
+
-
text-decoration: none;
+
-
background-color: transparent;
+
-
}
+
-
 
+
-
body {  
+
-
background-color: transparent;
+
-
}
+
-
 
+
-
#globalWrapper, #content { /*-- changes default wiki settings --*/
+
-
width: 100%;
+
-
height: 100%;
+
-
border: 0px;
+
-
background-color: transparent;
+
-
margin: 0px;
+
-
padding: 0px;
+
-
}
+
-
 
+
-
html, body, .wrapper { /*-- changes default wiki settings --*/
+
-
width: 100%;
+
-
height: 100%;
+
-
background-color: transparent;
+
-
}
+
-
 
+
-
h2 {border-bottom: none;}
+
-
h1 {border-bottom: none;}
+
-
h3 {border-bottom: none;}
+
-
 
+
-
 
+
-
</style>
+
-
 
+
-
 
+
-
    <style>
+
-
.navbar {
+
-
border-bottom: solid 3px #e0e0e0;
+
-
margin-bottom:0;
+
-
background-color: #EBEDEC;
+
-
}
+
-
+
-
.navbar-brand {
+
-
font-family: 'Lobster', cursive;
+
-
font-size: 3em;
+
-
padding-top: 40px;
+
-
padding-left: 40px;
+
-
padding-bottom: 70px;
+
-
}
+
-
       
+
-
        .nav .navbar-brand a:link {          /*overwrite igem default style*/
+
-
                color: #2c4762;
+
-
        }
+
-
 
+
-
.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;
+
-
font-family:'Dosis', sans-serif;
+
-
}
+
-
    .nav.navbar-nav.navbar-right a:link {    /*overwrite igem default style*/
+
-
        color:#357385;
+
-
    }
+
-
 
+
-
    .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: #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;
+
}
}
Line 159: Line 17:
font-family: 'Oswald', sans-serif;
font-family: 'Oswald', sans-serif;
font-size: 20px;
font-size: 20px;
-
}
 
-
 
-
.btn-custom:link {                      /*overwrite igem default style*/
 
-
        color: #fff;
 
-
}
 
-
 
-
.btn-custom:hover {
 
-
color: #3CC;
 
-
border: solid 2.5px #3cc;
 
-
}
 
-
 
-
body {
 
-
margin: 0;
 
}
}
Line 187: Line 32:
font-family: 'Pacifico', cursive;  
font-family: 'Pacifico', cursive;  
font-size: 80px;
font-size: 80px;
-
padding-bottom:20px;
+
padding-bottom:10px;
 +
}
 +
 
 +
.carousel-inner .carousel-caption h3 {
 +
font-size: 60px;
 +
font-family: 'Oswald', sans-serif;
 +
        padding-bottom: 5px;
 +
}
 +
 
 +
.btn-custom:link {                      /*overwrite igem default style*/
 +
        color: #fff;
 +
}
 +
 
 +
.btn-custom:hover {
 +
color: #3CC;
 +
border: solid 2.5px #3cc;
 +
        background-color: rgba(255,255,255,0.2);
 +
}
 +
 
 +
#feature-icon img {
 +
        max-width: 100%;
 +
        max-height: 100%;
}
}
Line 193: Line 59:
background: #CBEBE3;
background: #CBEBE3;
-
}
 
-
 
-
#abstract h1{
 
-
font-family: 'Pacifico', cursive;
 
-
font-size: 40px;
 
-
color: #fff;
 
}
}
Line 204: Line 64:
text-align: center;
text-align: center;
color: #069;
color: #069;
-
font-family: 'Lobster', cursive;
+
font-family: 'Josefin Sans', sans-serif;
text-shadow:0 0 1px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.3);
text-shadow:0 0 1px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.3);
padding-top: 50px;
padding-top: 50px;
 +
        border-bottom: solid 1px #a9b2bb;
 +
        margin-left:300px;
 +
        margin-right:300px;
}
}
#abstract p {
#abstract p {
 +
        color: #666;
 +
        font-weight: 100;
 +
        font-family: 'Source Sans Pro', sans-serif;
line-height: 2em;
line-height: 2em;
text-align: justify;
text-align: justify;
Line 216: Line 82:
padding-top: 30px;
padding-top: 30px;
padding-bottom: 100px;
padding-bottom: 100px;
-
         font-size: 14px;
+
         font-size: 18px;
}
}
-
#footer {
+
@media screen and (max-width: 480px) {
-
background: #333;
+
        .navbar-default {
-
background-size:cover;
+
        height: auto;}
-
height: 150px;
+
-
clear: both;
+
-
position: relative;
+
-
bottom: 0;
+
-
}
+
-
#footer h4 {
+
        /*.navbar-brand span{
-
color: #fff;
+
        display: none;}*/
-
}
+
 +
        .carousel-inner {
 +
        height:auto;}
-
#footer p {
+
        #abstract h2 {
-
color: #fff;
+
        margin-left: 30px;
-
text-align: center;
+
        margin-right: 30px;}
-
}
+
 +
        #abstract p {
 +
        padding-left: 10px;
 +
        padding-right: 10px;
 +
        font-size: 14px;}
-
#footer a {
+
        #footer img {
-
color: #fff;
+
        width: 30px;  
-
text-decoration: none;
+
        height: 30px;}
}
}
-
#footer a:hover {
+
@media screen and (max-width: 800px){
-
color: #3cc;
+
        #navbar-brand {
-
}
+
        Font-size:25px;}
 +
 +
 
     </style>
     </style>
Line 251: Line 120:
   <!--========================== navbar =================================-->
   <!--========================== navbar =================================-->
    
    
-
   <nav class="navbar" role="navigation">
+
   <nav class="navbar navbar-default" role="navigation">
   <div class="container-fluid">
   <div class="container-fluid">
     <!-- Brand and toggle get grouped for better mobile display -->
     <!-- Brand and toggle get grouped for better mobile display -->
-
     <div class="navbar-header">
+
     <div class="navbar-header" id="header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
       <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="sr-only">Toggle navigation</span>
Line 262: Line 131:
       </button>
       </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>
+
       <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"><span>City University of Hong Kong 2014</span></a>
     </div>
     </div>
Line 270: Line 139:
         <li class="active"><a href="#">Home</a></li>
         <li class="active"><a href="#">Home</a></li>
         <li class="dropdown">
         <li class="dropdown">
-
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project<span class="caret"></span></a>
+
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project</a>
           <ul class="dropdown-menu" role="menu">
           <ul class="dropdown-menu" role="menu">
-
             <li><a href="#">Action</a></li>
+
             <li><a href="#">Overview</a></li>
-
             <li><a href="#">Another action</a></li>
+
             <li><a href="#">Module Description</a></li>
-
             <li><a href="#">Something else here</a></li>
+
             <li><a href="#">Characterisation</a></li>
-
             <li><a href="#">Separated link</a></li>
+
             <li><a href="#">Data Page</a></li>
           </ul>
           </ul>
         </li>
         </li>
         <li class="dropdown">
         <li class="dropdown">
-
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team<span class="caret"></span></a>
+
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Achievements</a>
 +
          <ul class="dropdown-menu" role="menu">
 +
            <li><a href="#">Result</a></li>
 +
            <li><a href="#">Medal</a></li>
 +
          </ul>
 +
        </li>
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team</a>
           <ul class="dropdown-menu" role="menu">
           <ul class="dropdown-menu" role="menu">
             <li><a href="#">Team members</a></li>
             <li><a href="#">Team members</a></li>
Line 285: Line 161:
           </ul>
           </ul>
         </li>
         </li>
 +
        <li><a href="#">Human Practice</a></li>
       </ul>
       </ul>
     </div><!-- /.navbar-collapse -->
     </div><!-- /.navbar-collapse -->
Line 307: Line 184:
         <h3>Our Project</h3>
         <h3>Our Project</h3>
         <h1>Fit.coli</h1>
         <h1>Fit.coli</h1>
-
         <p><a class="btn btn-custom" href="#Lower">ABSTRACT</a></p>
+
         <p><a class="btn btn-custom" href="#Lower" id="#Lower class="anchorLink">ABSTRACT</a></p>
       </div>
       </div>
     </div>
     </div>
Line 314: Line 191:
     </div>
     </div>
     <div class="item">
     <div class="item">
-
       <img src="http://www.berklee.edu/sites/default/files/MUSIC_PROD.jpg" width="1400" height="500">
+
       <img src="https://static.igem.org/mediawiki/2014/0/05/Team_CityUHK_Jamboreebanner.png"/>
       <div class="carousel-caption">
       <div class="carousel-caption">
         <h3>1400 x 500</h3>
         <h3>1400 x 500</h3>
Line 329: Line 206:
     <span class="glyphicon glyphicon-chevron-right"></span>
     <span class="glyphicon glyphicon-chevron-right"></span>
   </a>
   </a>
 +
</div>
 +
 +
<!--==================== feature-icon list =================-->
 +
<div id="feature-icon">
 +
    <img src="https://static.igem.org/mediawiki/2014/2/2b/Team_CityU_HK_feature-icon.png"/>
</div>
</div>
Line 338: Line 220:
     <h2>Abstract</h2>
     <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>
     <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>
</div>  
</div>  
-
+
 
 +
 
<!--==================== footer ===========================-->
<!--==================== footer ===========================-->
Line 350: Line 234:
       <h4>Stay connected!</h4>
       <h4>Stay connected!</h4>
       <p>email: <a href="#">xxxxx@gmail.com</a></p>
       <p>email: <a href="#">xxxxx@gmail.com</a></p>
 +
      <a href="#"><img src="https://s3.amazonaws.com/sbweb/images/icon-facebook-grey-150x150.png" width="50" height="48"></a>
 +
      <a href="#"><img src="http://ibo2014.org/wordpress/wp-content/themes/ibo2014/img/navbar/twitter_icon.png" width="49" height="51"></a>
 +
      <a href="#"><img src="http://3.bp.blogspot.com/-zNUyQIVgA8Q/Ue8USlgr8II/AAAAAAAAl1w/6ZCWqhS59Ts/s1600/youtube.png" width="52" height="50"></a>
   </div> <!--end of col-md-5-->
   </div> <!--end of col-md-5-->
</div> <!-- end of #footer -->
</div> <!-- end of #footer -->
Line 359: Line 246:
     <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>
-
// Smooth scroll for in page links     
+
<!--// Smooth scroll for in page links-->    
     <script>
     <script>
       $(document).ready(function() {
       $(document).ready(function() {
 +
      $('.btn-custom').click(function() {
         $('html,body').animate({
         $('html,body').animate({
           scrollTop:$($.attr(this,'href')).offset().top},500);
           scrollTop:$($.attr(this,'href')).offset().top},500);
Line 367: Line 255:
         });
         });
       });
       });
-
 
+
   
 +
// bootstrap navbar hover dropdown
 +
    $(function(){
 +
        $('.dropdown').hover(function() {
 +
            $(this).toggleClass('open');
 +
            });
 +
    });
     </script>
     </script>
   </body>
   </body>
</html>
</html>

Latest revision as of 05:11, 7 September 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.