Team:CityU HK/HumanPractice/Presentation
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | |||
- | |||
<html> | <html> | ||
<html lang="en"> | <html lang="en"> | ||
<head> | <head> | ||
- | + | <meta charset="utf-8"> | |
- | + | <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> |
- | # | + | |
- | + | <!-- 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'> | ||
+ | |||
+ | <!-- 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.) --*/ |
- | + | 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; | ||
+ | } | ||
+ | |||
+ | #igem_logo { | ||
+ | position: relative; | ||
+ | top:0; | ||
+ | left:0; | ||
} | } | ||
</style> | </style> | ||
- | < | + | <!--=================================== CSS for this page =====================================--> |
- | < | + | <style> /*CSS fot this page*/ |
+ | #header { | ||
+ | margin:20px; | ||
+ | } | ||
- | + | #header h1 { | |
- | + | font-family: 'Lobster', cursive; | |
+ | float: left; | ||
+ | margin: 0 auto; | ||
+ | padding-left: 60px; | ||
+ | font-size: 4em; | ||
+ | } | ||
- | + | .carousel-caption { | |
- | + | text-align: left; | |
+ | } | ||
- | + | #abstract { | |
- | + | padding-left: 100px; | |
- | + | padding-right: 100px; | |
+ | line-height: 2.5em; | ||
+ | } | ||
+ | p { | ||
+ | text-align: justify; | ||
+ | } | ||
- | + | #nav { | |
- | + | margin-bottom: 50px; | |
- | + | margin-top: 20px; | |
- | + | 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; | |
- | + | } | |
- | <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> | ||
- | < | + | <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--> |
- | + | ||
- | </ | + | |
- | + | ||
- | + | ||
- | < | + | |
- | + | ||
- | + | ||
- | + | ||
+ | <!-- 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