Team:CityU HK/HumanPractice/Presentation

<html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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: #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: #fff;
}

#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;
	}
        
        .navbar-brand a {
                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 {     /*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;
}

.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;
	border: solid 2.5px #fff;
	font-family: 'Oswald', sans-serif;
	font-size: 20px;
}

.btn-custom a {
        color: #fff;
}

.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 {
	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;
}

#abstract p {
	line-height: 2em;
	text-align: justify;
	padding-left: 200px;
	padding-right:200px;
	padding-top: 30px;
	padding-bottom: 100px;
        font-size: 14px;
}

#footer {
	background: #333;
	background-size:cover;
	height: 150px;
	clear: both;
	position: relative;
	bottom: 0;
}

#footer h4 {
	color: #fff;
}

#footer p {
	color: #fff;
	text-align: center;
}

#footer a {
	color: #fff;
	text-decoration: none;
}

#footer a:hover {
	color: #3cc;
}
    </style>

  </head>
  <body>
  <!--========================== navbar =================================-->
  
  <nav class="navbar" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <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 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>
      </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 ===========================-->
<div id="footer" class="row">
<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>
  </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>

// Smooth scroll for in page links    
    <script>
      $(document).ready(function() {
        $('html,body').animate({
           scrollTop:$($.attr(this,'href')).offset().top},500);
            return false;
        });
      });

    </script>
  </body>
</html>