Team:CityU HK/Template

From 2014.igem.org

(Difference between revisions)
 
(129 intermediate revisions not shown)
Line 3: Line 3:
<html>
<html>
<html lang="en">
<html lang="en">
 +
 +
<style>
 +
body {
 +
      /*background-color: #FFFFCC;*/
 +
background-size:contain;
 +
background-repeat: no-repeat;
 +
background-position:left;
 +
background-attachment: fixed;
 +
        background-size: cover
 +
}
 +
 +
/*
 +
Back to top button
 +
*/
 +
#back-top {
 +
position: fixed;
 +
bottom: 30px;
 +
        right:30px;
 +
        z-index:50;
 +
}
 +
#back-top a {
 +
width: 50px;
 +
display: block;
 +
text-align: center;
 +
font: 11px/100% Arial, Helvetica, sans-serif;
 +
text-transform: uppercase;
 +
text-decoration: none;
 +
color: #bbb;
 +
/* background color transition */
 +
-webkit-transition: 1s;
 +
-moz-transition: 1s;
 +
transition: 1s;
 +
        border-radius: 2px;
 +
}
 +
#back-top a:hover {
 +
color: #000;
 +
}
 +
/* arrow icon (span tag) */
 +
#back-top span {
 +
width: 50px;
 +
height: 50px;
 +
display: block;
 +
background: #ddd url(https://static.igem.org/mediawiki/2014/5/57/Backtotop_BU14.png) no-repeat center center;
 +
/* background color transition */
 +
-webkit-transition: 1s;
 +
-moz-transition: 1s;
 +
transition: 1s;
 +
}
 +
#back-top a:hover span {
 +
background-color: #F68F52;
 +
}
 +
 +
</style>
<body>
<body>
Line 16: Line 69:
       </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"><span>City University of Hong Kong 2014</span></a>
+
       <a class="navbar-brand">
 +
          <a class="navbar-brand" id="igem"  href="https://2014.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2014/d/d8/Team_Berlin_igem_logo.png" width="80px" height="70px"></a><a class="navbar-brand" href="https://2014.igem.org/Team:CityU_HK">City University of Hong Kong 2014</a>
     </div>
     </div>
     <!-- Collect the nav links, forms, and other content for toggling -->
     <!-- Collect the nav links, forms, and other content for toggling -->
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-
      <ul class="nav navbar-nav navbar-right">
+
        <ul class="nav navbar-nav navbar-right">
-
         <li class="active"><a href="#">Home</a></li>
+
         <li class="active"><a href="https://2014.igem.org/Team:CityU_HK">Home</a></li>
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team Members</a>
 +
          <ul class="dropdown-menu" role="menu">
 +
            <li><a href="https://2014.igem.org/Team:CityU_HK/TeamMember">Students</a></li>
 +
            <li><a href="https://2014.igem.org/Team:CityU_HK/Team/instructors">Instructors & Advisors</a></li>
 +
            <li><a href="https://2014.igem.org/Team:CityU_HK/Team/attribution">Attribution</a></li>
 +
            <li><a href="https://2014.igem.org/Team:CityU_HK/Acknowledgement">Acknowledgement</a></li>
 +
          </ul>
 +
        </li>
         <li class="dropdown">
         <li class="dropdown">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project</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="#">Overview</a></li>
+
             <li><a href="https://2014.igem.org/Team:CityU_HK/project/overview">Overview</a></li>
-
             <li><a href="#">Module Description</a></li>
+
             <li><a href="https://2014.igem.org/Team:CityU_HK/project/module_fad">Modules description</a></li>
-
             <li><a href="#">Characterisation</a></li>
+
             <li><a href="https://2014.igem.org/Team:CityU_HK/project/result">Results</a></li>
-
             <li><a href="#">Data Page</a></li>
+
             <li><a href="https://2014.igem.org/Team:CityU_HK/project/futureplan">Future Plan</a></li>
           </ul>
           </ul>
         </li>
         </li>
         <li class="dropdown">
         <li class="dropdown">
-
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Achievements</a>
+
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Notebook</a>
           <ul class="dropdown-menu" role="menu">
           <ul class="dropdown-menu" role="menu">
-
             <li><a href="#">Result</a></li>
+
             <li><a href="https://2014.igem.org/Team:CityU_HK/notebook/lablog">Lab Log</a></li>
-
             <li><a href="#">Medal</a></li>
+
             <li><a href="https://2014.igem.org/Team:CityU_HK/notebook/protocols">Protocol</a></li>
 +
            <li><a href="https://2014.igem.org/Team:CityU_HK/notebook/safety">Safety</a></li>
           </ul>
           </ul>
         </li>
         </li>
         <li class="dropdown">
         <li class="dropdown">
-
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team</a>
+
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Achievement</a>
           <ul class="dropdown-menu" role="menu">
           <ul class="dropdown-menu" role="menu">
-
             <li><a href="#">Team members</a></li>
+
             <li><a href="https://2014.igem.org/Team:CityU_HK/achievement/medal_requirement">Medal Fulfillment</a></li>
-
             <li><a href="#">Instructors</a></li>
+
            <li><a href="https://2014.igem.org/Team:CityU_HK/achievement/new_biobrick">New Biobricks</a></li>
 +
          </ul>
 +
        </li>
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Human Practice</a>
 +
          <ul class="dropdown-menu" role="menu">
 +
            <li><a href="https://2014.igem.org/Team:CityU_HK/HumanPractice">Outreach</a></li>
 +
             <li><a href="https://2014.igem.org/Team:CityU_HK/collaboration">Collaborations</a></li>
           </ul>
           </ul>
         </li>
         </li>
-
        <li><a href="#">Human Practice</a></li>
 
       </ul>
       </ul>
     </div><!-- /.navbar-collapse -->
     </div><!-- /.navbar-collapse -->
   </div><!-- /.container-fluid -->
   </div><!-- /.container-fluid -->
</nav>
</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 -->
+
<p id="back-top">
-
  <div class="carousel-inner">
+
<a href="#top"><span></span></a>
-
    <div class="item active">
+
</p>
-
      <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>
+
-
 
+
-
  <!-- 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>
+
-
 
+
-
<!--==================== feature-icon list =================-->
+
-
<div id="feature-icon">
+
-
    <img src="https://static.igem.org/mediawiki/2014/2/2b/Team_CityU_HK_feature-icon.png"/>
+
-
</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>
+
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
-
</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>
+
-
      <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>
     <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 -->
     <!-- Include all compiled plugins (below), or include individual files as needed -->
Line 134: Line 135:
     <script>
     <script>
       $(document).ready(function() {
       $(document).ready(function() {
-
       $('.btn-custom').click(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 148: Line 149:
     });
     });
     </script>
     </script>
 +
 +
<!--//back to top arrow-->
 +
<script type="text/javascript">
 +
$(document).ready(function(){
 +
 +
// hide #back-top first
 +
$("#back-top").hide();
 +
 +
// fade in #back-top
 +
$(function () {
 +
$(window).scroll(function () {
 +
if ($(this).scrollTop() > 100) {
 +
$('#back-top').fadeIn();
 +
} else {
 +
$('#back-top').fadeOut();
 +
}
 +
});
 +
 +
// scroll body to 0px on click
 +
$('#back-top a').click(function () {
 +
$('body,html').animate({
 +
scrollTop: 0
 +
}, 800);
 +
return false;
 +
});
 +
});
 +
 +
});
 +
</script>
   </body>
   </body>
</html>
</html>

Latest revision as of 08:15, 17 October 2014

Bootstrap 101 Template

Retrieved from "http://2014.igem.org/Team:CityU_HK/Template"