Team:CityU HK/HumanPractice/Presentation

From 2014.igem.org

(Difference between revisions)
 
(175 intermediate revisions not shown)
Line 1: Line 1:
-
{{Template:Team:CityU_HK/CSS}}
+
{{:Template:Team:CityU_HK/CSS}}
<html>
<html>
<html lang="en">
<html lang="en">
-
<head>
+
  <head>
-
  <!--CSS-->
+
body {
-
  <link href="https://2013.igem.org/Team:Dundee/bootstrap?action=raw&ctype=text/css" rel="stylesheet">
+
margin: 0;
-
 
+
-
<style>
+
-
#slider {
+
-
    position: relative;
+
-
    top:100px;
+
}
}
-
#row_description {
+
.btn-custom {
-
    /*position: relative;
+
padding: 8px 30px 8px 30px;
-
    top: 170px;*/
+
background: none;
-
    background-color: #d9d9d9;
+
-moz-box-shadow: 3px 3px 5px 6px #000;
-
    margin: 0 auto;
+
  -webkit-box-shadow: 3px 3px 5px 6px #000;
-
    padding-left: 100px;
+
  box-shadow: 3px 3px 5px 6px #000;
-
    padding-right: 100px;
+
border: solid 2.5px #fff;
-
    padding-top: 20px;
+
font-family: 'Oswald', sans-serif;
-
    padding-bottom: 20px;
+
font-size: 20px;
-
    text-align: left;
+
}
}
-
/* Initial body */
+
.carousel-inner {
-
body {
+
-webkit-box-shadow: 0 8px 6px -6px black;
-
  left: 0;
+
-moz-box-shadow: 0 8px 6px -6px black;
-
  margin: 0;
+
box-shadow: 0 8px 6px -6px black;
-
  overflow: hidden;
+
-
  position: relative;
+
}
}
-
/* Initial menu */
+
.carousel-inner .carousel-caption {
-
.menu {
+
padding-top: 100px;
-
  background: #202024 url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
+
padding-bottom: 100px;
-
  left: -285px;  /* start off behind the scenes */
+
}
-
  height: 100%;
+
.carousel-inner .carousel-caption h1 {
-
  position: fixed;
+
font-family: 'Pacifico', cursive;  
-
  width: 285px;
+
font-size: 80px;
 +
padding-bottom:10px;
}
}
-
</style>
+
.carousel-inner .carousel-caption h3 {
-
</head> 
+
font-size: 60px;
 +
font-family: 'Oswald', sans-serif;
 +
        padding-bottom: 5px;
 +
}
-
<body>
+
.btn-custom:link {                      /*overwrite igem default style*/
 +
        color: #fff;
 +
}
-
<!--Header-->
+
.btn-custom:hover {
-
<div class="header">
+
color: #3CC;
 +
border: solid 2.5px #3cc;
 +
        background-color: rgba(255,255,255,0.2);
 +
}
-
<!--CityU iGEM Title-->
+
#feature-icon img {
-
<div class="title"><a href="https://2014.igem.org/Team:CityU_HK"><img src=" " width="728" height="51"></a></div>
+
        max-width: 100%;
 +
        max-height: 100%;
 +
}
-
<!--iGEM Logo-->
+
#abstract {
-
  <div class="igemlogo"> <a href="https://2014.igem.org/Main_Page" target="_blank"><img src="https://static.igem.org/mediawiki/2014/9/9e/IGEMLogo_bu14.gif" width="147" height="120"></a></div>
+
background: #CBEBE3;
-
</div>
+
 +
}
 +
 +
#abstract h2{
 +
text-align: center;
 +
color: #069;
 +
font-family: 'Josefin Sans', sans-serif;
 +
text-shadow:0 0 1px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.3);
 +
padding-top: 50px;
 +
        border-bottom: solid 1px #a9b2bb;
 +
        margin-left:300px;
 +
        margin-right:300px;
 +
}
 +
#abstract p {
 +
        color: #666;
 +
        font-weight: 100;
 +
        font-family: 'Source Sans Pro', sans-serif;
 +
line-height: 2em;
 +
text-align: justify;
 +
padding-left: 200px;
 +
padding-right:200px;
 +
padding-top: 30px;
 +
padding-bottom: 100px;
 +
        font-size: 18px;
 +
}
 +
 +
@media screen and (max-width: 480px) {
 +
        .navbar-default {
 +
        height: auto;}
 +
 +
        /*.navbar-brand span{
 +
        display: none;}*/
 +
 +
        .carousel-inner {
 +
        height:auto;}
 +
 +
        #abstract h2 {
 +
        margin-left: 30px;
 +
        margin-right: 30px;}
 +
 +
        #abstract p {
 +
        padding-left: 10px;
 +
        padding-right: 10px;
 +
        font-size: 14px;}
 +
 +
        #footer img {
 +
        width: 30px;
 +
        height: 30px;}
 +
}
 +
 +
@media screen and (max-width: 800px){
 +
        #navbar-brand {
 +
        Font-size:25px;}
 +
 +
 +
    </style>
 +
 +
  </head>
 +
  <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>
-
<!--Navibar-->
+
    <!-- Collect the nav links, forms, and other content for toggling -->
-
<ul id="nav">
+
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-
        <li><a href="https://2014.igem.org/Team:CityU_HK">HOME</a>
+
      <ul class="nav navbar-nav navbar-right">
-
<li><a href="#">TEAM</a>
+
        <li class="active"><a href="#">Home</a></li>
-
            <ul>
+
         <li class="dropdown">
-
        <li><a href="#">Team Members</a></li>
+
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project</a>
-
<li><a href="#">Advisors</a></li>
+
          <ul class="dropdown-menu" role="menu">
-
                <li><a href="#">Instructors</a></li>
+
            <li><a href="#">Overview</a></li>
-
                <li><a href="#">Attribution</a></li>
+
            <li><a href="#">Module Description</a></li>
-
                <li><a href="#">Acknowledgement</a></li>
+
            <li><a href="#">Characterisation</a></li>
-
    </ul>
+
            <li><a href="#">Data Page</a></li>
-
         </li>
+
          </ul>
-
<li><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><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>
-
<li><a href="">ACHIEVEMENTS</a>
+
        <li class="dropdown">
-
            <ul>
+
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Achievements</a>
-
        <li><a href="#">Medal Requirements</a></li>
+
          <ul class="dropdown-menu" role="menu">
-
    </ul>
+
            <li><a href="#">Result</a></li>
 +
            <li><a href="#">Medal</a></li>
 +
          </ul>
         </li>
         </li>
-
+
        <li class="dropdown">
-
<li><a href="">HUMAN PRACTICE</a>
+
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team</a>
-
            <ul>
+
          <ul class="dropdown-menu" role="menu">
-
                <li><a href="#">Blog</a></li>
+
            <li><a href="#">Team members</a></li>
-
                <li><a href="#">Video</a></li>
+
            <li><a href="#">Instructors</a></li>
-
                <li><a href="#">Presentation</a></li>
+
          </ul>
-
            </ul>
+
         </li>
         </li>
-
</ul>
+
        <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>
 +
  <!-- 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" 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>
-
<div id="slider" class="carousel slide">
+
  <!-- 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>
-
              <div class="carousel-inner">
+
<!--==================== feature-icon list =================-->
-
                <div class="item active"><!-- add the active class to any slider you want shown first -->
+
<div id="feature-icon">
-
                  <a href="https://2014.igem.org/Team:CityU_HK"><img src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/10441948_768218456562336_6205322581075245538_n.jpg" style="width:100%;height:100%"></a>
+
    <img src="https://static.igem.org/mediawiki/2014/2/2b/Team_CityU_HK_feature-icon.png"/>
-
                </div>
+
</div>
-
                <div class="item"><!-- add the active class to any slider you want shown first -->
+
<!--===================== Abstract =========================-->
-
                  <img src="https://static.igem.org/mediawiki/2014/1/14/Team_CityU_HK_banner.jpg" style="width:100%;height:100%">
+
-
                </div>
+
-
              </div> <!-- end of .carousel-inner -->
+
-
              <!-- the controls for our sliders -->
+
<div class="anchor" id="Lower"></div>
-
              <a class="left carousel-control " href="#slider" data-slide="prev">&lsaquo;</a>
+
<div class="row" id="abstract">
-
              <a class="right carousel-control " href="#slider" data-slide="next">&rsaquo;</a>
+
  <div class="col-sm-12 col-md-12">
-
           
+
    <h2>Abstract</h2>
-
</div> <!--end of .carousel slide-->
+
    <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 id="row_description">
 
-
    <p>Globally, the prevalence of obesity has reached epidemic proportions and is now one of the most pressing health  problems worldwide. Because obesity is closely associated with chronic diseases such as diabetes, hypertension, stroke and cardiovascular diseases, the rise in obesity corresponds to a significant increase in mortality. According to the World Health Organization (WHO) 2014 report, the number of obese people has doubled since 1980. In 2008, 35% of adults were overweight and 11% were obese; and in 2012, more than 40 million children were overweight or obese. Because of the rising cost in healthcare and the associated social and economic problems related to obesity, various strategies to control and prevent obesity have been tested in recent years. </p>
 
-
</div> <!--end of #row_description-->
 
-
<!-- the neccessary javascript for carousel -->
+
<!--==================== footer ===========================-->
-
    <script src="http://code.jquery.com/jquery-latest.js"></script>
+
<div id="footer" class="row">
-
    <script src="http://www.kyleharrison.co.uk/igem/js/bootstrap.min.js"></script>
+
<div class="col-md-7">
 +
      <h4>Sponsors</h3>
 +
  </div> <!-- end of col-md-7-->
 +
  <div class="col-md-5">
 +
      <h4>Stay connected!</h4>
 +
      <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 #footer -->
 +
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 +
    <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>
-
</body>
+
<!--// Smooth scroll for in page links-->   
 +
    <script>
 +
      $(document).ready(function() {
 +
      $('.btn-custom').click(function() {
 +
        $('html,body').animate({
 +
          scrollTop:$($.attr(this,'href')).offset().top},500);
 +
            return false;
 +
        });
 +
      });
 +
   
 +
// bootstrap navbar hover dropdown
 +
    $(function(){
 +
        $('.dropdown').hover(function() {
 +
            $(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.