Team:CityU HK/HumanPractice/Presentation

From 2014.igem.org

(Difference between revisions)
 
(167 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>Team:CityU HK-Achievement</title>
+
-
 
+
-
    <!-- Latest compiled and minified CSS -->
+
-
    <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=Open+Sans+Condensed:300' 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=Dosis:400,700' 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]-->
+
-
 
+
-
    <!--essential javascript for nav-->
+
-
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
+
-
<script type="text/javascript">
+
-
$(document).ready(function() {
+
-
$("#nav > li > ul").hide();
+
-
$("#nav > li").mouseenter(function() {
+
-
$(this).children("li > ul").slideDown(250);
+
-
});
+
-
        $("#nav > li").mouseleave(function() {
+
-
$(this).children("li > ul").slideUp(250);
+
-
});
+
-
});
+
-
</script>
+
-
 
+
-
<style> /*CSS to remove wiki default style*/
+
-
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;} /*-- hides default wiki settings --*/
+
-
 
+
-
#top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/
+
-
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.) --*/
+
.btn-custom {
-
background-color: #383838;
+
padding: 8px 30px 8px 30px;
-
height: 14px;
+
background: none;
-
display: block;
+
-moz-box-shadow: 3px 3px 5px 6px #000;
-
z-index: 10;
+
  -webkit-box-shadow: 3px 3px 5px 6px #000;
-
position: fixed;
+
  box-shadow: 3px 3px 5px 6px #000;
-
width: 100%;
+
border: solid 2.5px #fff;
-
top: 0;
+
font-family: 'Oswald', sans-serif;
 +
font-size: 20px;
}
}
-
#menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { /*-- styling for default menu bar links (edit, page, history, etc.) --*/
+
.carousel-inner {
-
color: #727272;  
+
-webkit-box-shadow: 0 8px 6px -6px black;
-
text-decoration: none;  
+
-moz-box-shadow: 0 8px 6px -6px black;
-
background-color: transparent;
+
box-shadow: 0 8px 6px -6px black;
}
}
-
body {  
+
.carousel-inner .carousel-caption {
-
background-color: #fff;
+
padding-top: 100px;
 +
padding-bottom: 100px;
}
}
-
 
+
.carousel-inner .carousel-caption h1 {
-
#globalWrapper, #content { /*-- changes default wiki settings --*/
+
font-family: 'Pacifico', cursive;  
-
width: 100%;  
+
font-size: 80px;
-
height: 100%;
+
padding-bottom:10px;
-
border: 0px;
+
-
background-color: transparent;
+
-
margin: 0px;
+
-
padding: 0px;
+
}
}
-
html, body, .wrapper { /*-- changes default wiki settings --*/
+
.carousel-inner .carousel-caption h3 {
-
width: 100%;  
+
font-size: 60px;
-
height: 100%;  
+
font-family: 'Oswald', sans-serif;
-
background-color: transparent;
+
        padding-bottom: 5px;
}
}
-
h2 {
+
.btn-custom:link {                       /*overwrite igem default style*/
-
         border-bottom: none;
+
         color: #fff;
}
}
-
h1 {
+
.btn-custom:hover {
-
        border-bottom: none;
+
color: #3CC;
 +
border: solid 2.5px #3cc;
 +
        background-color: rgba(255,255,255,0.2);
}
}
-
h3 {
+
#feature-icon img {
-
         border-bottom: none;
+
         max-width: 100%;
 +
        max-height: 100%;
}
}
-
#igem_logo {
+
#abstract {
-
        position: relative;
+
background: #CBEBE3;
-
        top:0;
+
-
        left:0;
+
}
}
-
 
+
-
</style>
+
#abstract h2{
-
<!--=================================== CSS for header =====================================-->
+
text-align: center;
-
 
+
color: #069;
-
<style>
+
font-family: 'Josefin Sans', sans-serif;
-
#header {
+
text-shadow:0 0 1px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.3);
-
         margin:20px;
+
padding-top: 50px;
-
         border-bottom: solid 2px #e0e0e0;
+
        border-bottom: solid 1px #a9b2bb;
 +
         margin-left:300px;
 +
         margin-right:300px;
}
}
-
#header h1 {
+
#abstract p {
-
         font-family: 'Lobster', cursive;
+
        color: #666;
-
        float: left;
+
        font-weight: 100;
-
        margin: 0 auto;
+
         font-family: 'Source Sans Pro', sans-serif;
-
        padding-left: 60px;
+
line-height: 2em;
-
         font-size: 4em;
+
text-align: justify;
 +
padding-left: 200px;
 +
padding-right:200px;
 +
padding-top: 30px;
 +
padding-bottom: 100px;
 +
         font-size: 18px;
}
}
-
.carousel-caption {
+
@media screen and (max-width: 480px) {
-
         text-align: left;
+
         .navbar-default {
-
}
+
        height: auto;}
-
#abstract {
+
        /*.navbar-brand span{
-
         padding-left: 100px;
+
         display: none;}*/
-
         padding-right: 100px;
+
-
         line-height: 2.5em;
+
         .carousel-inner {
-
}
+
         height:auto;}
-
p {
+
        #abstract h2 {
-
  text-align: justify;
+
        margin-left: 30px;
-
}
+
        margin-right: 30px;}
 +
 +
        #abstract p {
 +
        padding-left: 10px;
 +
        padding-right: 10px;
 +
        font-size: 14px;}
-
#nav {
+
        #footer img {
-
margin-bottom: 50px;
+
         width: 30px;  
-
         margin-top: 20px;
+
         height: 30px;}
-
         margin-right: 30px;
+
-
}
+
-
/*main nav*/
+
-
#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{
+
@media screen and (max-width: 800px){
-
background: rgba(255,255,255,0.9);
+
        #navbar-brand {
-
color: #3cc;
+
        Font-size:25px;}
-
font-weight: bolder;
+
-
}
+
-
#nav .main_nav:hover{
+
    </style>
-
        border-bottom: solid 3px #008080;
+
-
        z-index: 1000;
+
-
}
+
-
#nav .active {
+
  </head>
-
border-bottom: solid 3px #3cc;
+
  <body>
-
}
+
  <!--========================== navbar =================================-->
 +
 
 +
  <nav class="navbar navbar-default" role="navigation">
 +
  <div class="container-fluid">
 +
    <!-- Brand and toggle get grouped for better mobile display -->
 +
    <div class="navbar-header" id="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"><span>City University of Hong Kong 2014</span></a>
 +
    </div>
-
/*dropsown navbar*/
+
    <!-- Collect the nav links, forms, and other content for toggling -->
-
#nav li ul{
+
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-
    /*display:none;*/
+
      <ul class="nav navbar-nav navbar-right">
-
position:absolute;
+
        <li class="active"><a href="#">Home</a></li>
-
text-align:center;
+
        <li class="dropdown">
-
         margin: 0 auto;
+
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project</a>
-
padding-left: 0;
+
          <ul class="dropdown-menu" role="menu">
-
         background-color: rgba(255,255,255,0.9);
+
            <li><a href="#">Overview</a></li>
-
}
+
            <li><a href="#">Module Description</a></li>
-
#nav li:hover ul{
+
            <li><a href="#">Characterisation</a></li>
-
display:block;
+
            <li><a href="#">Data Page</a></li>
-
         background-color: rgba(255,255,255,0.9)
+
          </ul>
-
}
+
         </li>
 +
        <li class="dropdown">
 +
          <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">
 +
            <li><a href="#">Team members</a></li>
 +
            <li><a href="#">Instructors</a></li>
 +
          </ul>
 +
        </li>
 +
         <li><a href="#">Human Practice</a></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>
-
ul#nav li ul li a {
+
  <!-- Wrapper for slides -->
-
margin-top: 5px;
+
  <div class="carousel-inner">
-
padding: 0;
+
    <div class="item active">
-
align: center;
+
      <img src="http://targetgroup.dk/wp-content/uploads/EG_1400x500.jpg" width="1400" height="500">
-
width: 150px;
+
<div class="carousel-caption">
-
}
+
        <h3>Our Project</h3>
-
</style>
+
        <h1>Fit.coli</h1>
 +
        <p><a class="btn btn-custom" href="#Lower" id="#Lower class="anchorLink">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="https://static.igem.org/mediawiki/2014/0/05/Team_CityUHK_Jamboreebanner.png"/>
 +
      <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>
-
<!--=================================== CSS for main-content =====================================-->
+
  <!-- Controls -->
-
<style>
+
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
-
#main-content {
+
    <span class="glyphicon glyphicon-chevron-left"></span>
-
padding-left: 100px;
+
  </a>
-
padding-right: 100px;
+
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
-
}
+
    <span class="glyphicon glyphicon-chevron-right"></span>
 +
  </a>
 +
</div>
-
.pagetitle {
+
<!--==================== feature-icon list =================-->
-
color: #3cc;
+
<div id="feature-icon">
-
text-align: center;
+
    <img src="https://static.igem.org/mediawiki/2014/2/2b/Team_CityU_HK_feature-icon.png"/>
-
font-family: font-family: 'Dosis', sans-serif;
+
</div>
-
}
+
-
.subtitle {
+
<!--===================== Abstract =========================-->
-
color: #3cc;
+
-
text-align: center;
+
-
font-family: font-family: 'Dosis', sans-serif;
+
-
}
+
-
#main-content p {
+
<div class="anchor" id="Lower"></div>
-
text-align: justify;
+
<div class="row" id="abstract">
-
color: #bbbbbb;
+
  <div class="col-sm-12 col-md-12">
-
line-height: 2em;
+
    <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>
-
#footer {
+
  </div>
-
background: #e0e0e0;
+
</div>
-
height: 150px;
+
-
clear: both;
+
-
}
+
-
#footer h4 {
 
-
color: #fff;
 
-
}
 
-
 
-
#footer p {
 
-
color: #bbbbbb;
 
-
text-align: center;
 
-
}
 
-
 
-
#footer a:hover {
 
-
color: #008080;
 
-
}
 
-
</style>
 
-
</head>
 
-
 
-
<body>
 
-
<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>
 
-
<!--===================== nav start ===========================-->
 
-
<div class="row">
 
-
<div id="header" class="col-sm-12 col-md-12">
 
-
  <h1>Fit.coli</h1>
 
-
  <ul id="nav">
 
-
        <li class="main_nav"><a href="#">NOTEBOOK</a>
 
-
    <ul>
 
-
      <li><a href="#">Lab Log</a></li>
 
-
<li><a href="#">Protocols</a></li>
 
-
                <li><a href="#">Safety</a></li>
 
-
    </ul>
 
-
        </li>
 
-
<li class="main_nav"><a href="">ACHIEVEMENTS</a>
 
-
            <ul>
 
-
        <li><a href="#">Medal Requirements</a></li>
 
-
    </ul>
 
-
        </li>
 
-
 
-
<li class="main_nav"><a href="">HUMAN PRACTICE</a>
 
-
            <ul>
 
-
                <li><a href="#">Blog</a></li>
 
-
                <li><a href="#">Video</a></li>
 
-
                <li><a href="#">Presentation</a></li>
 
-
            </ul>
 
-
        </li>
 
-
        <li class="main_nav"><a href="#">PROJECT</a>
 
-
            <ul>
 
-
<li><a href="#">Abstract</a></li>
 
-
                <li><a href="#">Modules Description</a></li>
 
-
                <li><a href="#">Data Pages</a></li> 
 
-
                <li><a href="#">Characterization</a></li>
 
-
                <li><a href="#">Results</a></li>
 
-
                <li><a href="#">Future Work</a></li>
 
-
    </ul>
 
-
        </li>
 
-
    <li class="main_nav"><a href="#">TEAM</a>
 
-
            <ul>
 
-
        <li><a href="#">Team Members</a></li>
 
-
<li><a href="#">Advisors</a></li>
 
-
                <li><a href="#">Instructors</a></li>
 
-
                <li><a href="#">Attribution</a></li>
 
-
                <li><a href="#">Acknowledgement</a></li>
 
-
    </ul>
 
-
        </li>
 
-
        <li class="active"><a href="https://2014.igem.org/Team:CityU_HK">HOME</a>
 
-
  </ul>
 
-
</div> <!--end of col-md-12 -->
 
-
</div> <!--end of row-->
 
-
<!--===================== Main Content =====================-->
 
-
<div id="main-content" class"row">
 
-
<div class="col-sm-12 col-me-12">
 
-
  <h2 class="pagetitle">PAGE TITLE</h2>
 
-
  <h3 class="subtitle">Subtitle</h3>
 
-
  <p>this is the paraphraph.</p>
 
-
</div> <!--end of col-->
 
-
</div> <!-- end of #main-content -->
 
<!--==================== footer ===========================-->
<!--==================== footer ===========================-->
Line 309: Line 233:
   <div class="col-md-5">
   <div class="col-md-5">
       <h4>Stay connected!</h4>
       <h4>Stay connected!</h4>
-
       <a href="#"><p>email: xxxxx@gmail.com</p></a>
+
       <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 -->
 +
     <!-- 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>
-
    <!-- essential javascript for navbar -->
+
<!--// Smooth scroll for in page links-->  
-
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
+
     <script>
-
    <script type="text/javascript">
+
      $(document).ready(function() {
-
    $(document).ready(function() {
+
      $('.btn-custom').click(function() {
-
$("#nav > li > ul").hide();
+
        $('html,body').animate({
-
$("#nav > li").mouseenter(function() {
+
          scrollTop:$($.attr(this,'href')).offset().top},500);
-
$(this).children("li > ul").slideDown(250);
+
            return false;
-
});
+
        });
-
         $("#nav > li").mouseleave(function() {
+
      });
-
$(this).children("li > ul").slideUp(250);
+
   
-
});
+
// bootstrap navbar hover dropdown
-
    });
+
    $(function(){
-
</script>
+
         $('.dropdown').hover(function() {
-
</body>
+
            $(this).toggleClass('open');
 +
            });
 +
    });
 +
    </script>
 +
  </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.