Team:CityU HK/HumanPractice/Presentation

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{Template:Team:CityU_HK/CSS}}
 
-
 
<html>
<html>
<html lang="en">
<html lang="en">
<head>
<head>
-
  <!--CSS-->
+
    <meta charset="utf-8">
-
  <link href="https://2013.igem.org/Team:Dundee/bootstrap?action=raw&ctype=text/css" rel="stylesheet">
+
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
 
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
-
<style>
+
    <title>Team:CityU HK-Achievement</title>
-
#slider {
+
 
-
    position: relative;
+
    <!-- Latest compiled and minified CSS -->
-
    top:100px;
+
    <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'>
 +
 
 +
    <!-- 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;
}
}
-
#row_description {
+
#top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/
-
    position: relative;
+
background-color: #383838;
-
    top: 150px;
+
height: 14px;
-
    background-color: #d9d9d9;
+
display: block;
-
    margin: 0 auto;
+
z-index: 10;
-
    padding-left: 100px;
+
position: fixed;
-
    padding-right: 100px;
+
width: 100%;
-
    padding-top: 20px;
+
top: 0;
-
    padding-bottom: 20px;
+
-
    text-align: left;
+
}
}
-
/* Initial body */
+
#menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { /*-- styling for default menu bar links (edit, page, history, etc.) --*/
-
body {
+
color: #727272;  
-
  left: 0;
+
text-decoration: none;  
-
  margin: 0;
+
background-color: transparent;
-
  overflow: hidden;
+
-
  position: relative;
+
}
}
-
/* Initial menu */
+
body {  
-
.menu {
+
background-color: #fff;
-
  background: #202024 url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
+
}
-
  left: -285px; /* start off behind the scenes */
+
 
-
  height: 100%;
+
#globalWrapper, #content { /*-- changes default wiki settings --*/
-
  position: fixed;
+
width: 100%;  
-
  width: 285px;
+
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;
 +
}
 +
 
 +
#igem_logo {
 +
        position: relative;
 +
        top:0;
 +
        left:0;
}
}
</style>
</style>
-
</head>  
+
<!--=================================== CSS for this page =====================================-->
-
<body>
+
<style> /*CSS fot this page*/
 +
#header {
 +
        margin:20px;
 +
}
-
<!--Header-->
+
#header h1 {
-
<div class="header">
+
        font-family: 'Lobster', cursive;
 +
        float: left;
 +
        margin: 0 auto;
 +
        padding-left: 60px;
 +
        font-size: 4em;
 +
}
-
<!--CityU iGEM Title-->
+
.carousel-caption {
-
<div class="title"><a href="https://2014.igem.org/Team:CityU_HK"><img src=" " width="728" height="51"></a></div>
+
        text-align: left;
 +
}
-
<!--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>
+
        padding-left: 100px;
-
</div>
+
        padding-right: 100px;
 +
        line-height: 2.5em;
 +
}
 +
p {
 +
  text-align: justify;
 +
}
-
<!--Navibar-->
+
#nav {
-
<ul id="nav">
+
margin-bottom: 50px;
-
        <li><a href="https://2014.igem.org/Team:CityU_HK">HOME</a>
+
        margin-top: 20px;
-
<li><a href="#">TEAM</a>
+
        margin-right: 30px;
-
            <ul>
+
}
-
        <li><a href="#">Team Members</a></li>
+
/*main nav*/
-
<li><a href="#">Advisors</a></li>
+
#nav li{
-
                <li><a href="#">Instructors</a></li>
+
position:relative;
-
                <li><a href="#">Attribution</a></li>
+
float:right;
-
                <li><a href="#">Acknowledgement</a></li>
+
list-style:none;
-
    </ul>
+
z-index:999;
-
         </li>
+
}
-
<li><a href="">PROJECT</a>
+
#nav li a{
-
            <ul>  
+
color:#666;
-
<li><a href="#">Abstract</a></li>
+
text-decoration:none;
-
                <li><a href="#">Modules Description</a></li>  
+
padding-left:15px;
-
                <li><a href="#">Data Pages</a></li> 
+
padding-right: 15px;
-
                <li><a href="#">Characterization</a></li>
+
display:block;
-
                <li><a href="#">Results</a></li>
+
text-align:center;
-
                <li><a href="#">Future Work</a></li>
+
font-family:'Open Sans Condensed', sans-serif;
-
    </ul>
+
font-size: 13px;
-
        </li>  
+
}
-
         <li><a href="#">NOTEBOOK</a>  
+
 
 +
#nav a:hover{
 +
background: rgba(255,255,255,0.9);
 +
color: #3cc;
 +
font-weight: bolder;
 +
}
 +
 
 +
#nav .main_nav:hover{
 +
        border-bottom: solid 3px #3cc;
 +
        z-index: 1000;
 +
}
 +
 
 +
#nav .active {
 +
border-bottom: solid 3px #3cc;
 +
}
 +
 
 +
/*dropsown navbar*/
 +
#nav li ul{
 +
    /*display:none;*/
 +
position:absolute;
 +
text-align:center;
 +
         margin: 0 auto;
 +
padding-left: 0;
 +
        background-color: rgba(255,255,255,0.9);
 +
}
 +
#nav li:hover ul{
 +
display:block;
 +
        background-color: rgba(255,255,255,0.9)
 +
}
 +
 
 +
ul#nav li ul li a {
 +
margin-top: 5px;
 +
padding: 0;
 +
align: center;
 +
width: 150px;
 +
}
 +
</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>  
    <ul>  
       <li><a href="#">Lab Log</a></li>  
       <li><a href="#">Lab Log</a></li>  
Line 87: Line 209:
    </ul>
    </ul>
         </li>
         </li>
-
<li><a href="">ACHIEVEMENTS</a>
+
<li class="main_nav"><a href="">ACHIEVEMENTS</a>
             <ul>
             <ul>
        <li><a href="#">Medal Requirements</a></li>
        <li><a href="#">Medal Requirements</a></li>
Line 93: Line 215:
         </li>
         </li>
-
<li><a href="">HUMAN PRACTICE</a>
+
<li class="main_nav"><a href="">HUMAN PRACTICE</a>
             <ul>  
             <ul>  
                 <li><a href="#">Blog</a></li>
                 <li><a href="#">Blog</a></li>
Line 100: Line 222:
             </ul>
             </ul>
         </li>
         </li>
-
</ul>
+
        <li class="main_nav"><a href="#">PROJECT</a>
-
 
+
            <ul>
-
 
+
<li><a href="#">Abstract</a></li>  
-
<div id="slider" class="carousel slide">
+
                 <li><a href="#">Modules Description</a></li>  
-
 
+
                <li><a href="#">Data Pages</a></li> 
-
              <div class="carousel-inner">
+
                <li><a href="#">Characterization</a></li>
-
                 <div class="item active"><!-- add the active class to any slider you want shown first -->
+
                 <li><a href="#">Results</a></li>
-
                  <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>
+
                <li><a href="#">Future Work</a></li>
-
                </div>
+
    </ul>
-
 
+
        </li>  
-
                 <div class="item"><!-- add the active class to any slider you want shown first -->
+
    <li class="main_nav"><a href="#">TEAM</a>
-
                  <img src="https://static.igem.org/mediawiki/2014/1/14/Team_CityU_HK_banner.jpg" style="width:100%;height:100%">
+
            <ul>
-
                </div>
+
        <li><a href="#">Team Members</a></li>
-
              </div> <!-- end of .carousel-inner -->
+
<li><a href="#">Advisors</a></li>
-
 
+
                <li><a href="#">Instructors</a></li>
-
              <!-- the controls for our sliders -->
+
                <li><a href="#">Attribution</a></li>
-
              <a class="left carousel-control " href="#slider" data-slide="prev">&lsaquo;</a>
+
                <li><a href="#">Acknowledgement</a></li>
-
              <a class="right carousel-control " href="#slider" data-slide="next">&rsaquo;</a>
+
    </ul>
-
           
+
        </li>  
-
</div> <!--end of .carousel slide-->
+
        <li class="active"><a href="https://2014.igem.org/Team:CityU_HK">HOME</a>
-
 
+
  </ul>
-
 
+
</div> <!--end of col-md-12 -->
-
<div id="row_description">
+
</div> <!--end of row-->
-
    <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 -->
+
-
    <script src="http://code.jquery.com/jquery-latest.js"></script>
+
-
    <script src="http://www.kyleharrison.co.uk/igem/js/bootstrap.min.js"></script>
+
-
 
+
 +
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 +
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 +
    <!-- Latest compiled and minified JavaScript -->
 +
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 +
    <!-- essential javascript for navbar -->
 +
    <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>
</body>
</body>
</html>
</html>

Revision as of 02:29, 23 August 2014

Team:CityU HK-Achievement

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