(98 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
+ | |||
<html> | <html> | ||
− | < | + | <head> |
− | + | <!-- External scripts --> | |
− | + | <link href="https://fonts.googleapis.com/css?family=Architects+Daughter|Caveat+Brush|Indie+Flower|Permanent+Marker|Quicksand|Roboto|Schoolbell|Sedgwick+Ave" rel="stylesheet"> | |
+ | <link href="https://fonts.googleapis.com/css?family=Quicksand:400,500" rel="stylesheet"> | ||
+ | <link href="https://fonts.googleapis.com/css?family=Bangers|Boogaloo|Josefin+Sans|Luckiest+Guy|Magra|News+Cycle|Oswald" rel="stylesheet"> | ||
+ | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> | ||
+ | <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> | ||
+ | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> | ||
− | |||
− | + | <style> | |
− | |||
− | |||
− | |||
+ | #sideMenu, #top_title {display:none;} | ||
+ | #content { padding:0px; width:90%; margin-top:-15px; margin-left:5%;, margin-right: 5%} | ||
+ | body {background-color:white; } | ||
+ | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | ||
− | + | body, | |
− | + | html{ | |
+ | margin: 0; | ||
+ | padding:0; | ||
+ | font-size: 12px; | ||
+ | font-weight: 500; | ||
+ | font-family: 'Quicksand', sans-serif; | ||
+ | } | ||
− | + | /* REMOVE UNWANTED ELEMENTS AND STYLE OTHERS */ | |
− | + | .firstHeading{ | |
+ | display:none; | ||
+ | } | ||
+ | #top-section{ | ||
+ | background:#000000; | ||
+ | margin-left:0 !important; | ||
+ | width:100%; | ||
+ | left:0; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /* LOADING SCREEN */ | |
− | + | .loading{ | |
− | + | position:fixed; | |
− | + | width:100%; | |
+ | height:100%; | ||
+ | top:0; | ||
+ | left:0; | ||
− | + | z-index:5; | |
− | + | ||
− | + | ||
+ | background-color:#000000; | ||
+ | color:#000000; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .loading p{ | ||
+ | position: relative; | ||
+ | width:100%; | ||
+ | height:10%; | ||
+ | top:45%; | ||
+ | left:0; | ||
+ | } | ||
− | + | /* MENU STYLING */ | |
− | + | .menu{ | |
+ | position:fixed; | ||
+ | width:100%; | ||
+ | height:110px; | ||
+ | top:10px; | ||
+ | background-color: #000000; | ||
− | + | z-index:4; | |
− | + | ||
− | + | border-collapse: collapse; | |
− | + | text-align:center; | |
− | + | } | |
− | + | .menu tr td{ | |
− | + | text-align: middle; | |
− | + | vertical-align: middle; | |
+ | font-weight: 500; | ||
+ | font-size:25px; | ||
+ | color:#fff; | ||
+ | width:7%; | ||
+ | } | ||
+ | .menu tr td.menu-item:hover{ | ||
+ | background-color:#FFFFFF; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | .subselected{ | ||
+ | background-color: #FFFFFF; | ||
+ | } | ||
+ | /* CONTAINERS STYLING */ | ||
+ | .container{ | ||
+ | position:relative; | ||
+ | width:100%; | ||
+ | top:60px; | ||
+ | } | ||
+ | .container .subcontainer{ | ||
+ | position:absolute; | ||
+ | width:95%; | ||
+ | height:90%; | ||
+ | top:5%; | ||
+ | left:2.5%; | ||
+ | } | ||
+ | #top{ | ||
+ | background-size: cover; | ||
+ | |||
+ | overflow:hidden; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | body { | |
− | + | padding-top: 100px; | |
+ | } | ||
− | + | .center-block { | |
− | + | display: block; | |
− | + | margin-left: auto; | |
+ | margin-right: auto; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | + | .navbar-fixed-top { | |
− | + | background: #fff; | |
− | + | filter: none !important; | |
− | + | ||
− | + | ||
+ | } | ||
− | + | .navbar-nav a{ | |
+ | color: black !important; | ||
+ | } | ||
+ | .navbar-default { | ||
+ | background-color: #ffffff; | ||
+ | border-color: #ffffff; | ||
+ | } | ||
− | |||
+ | .navbar-default { | ||
+ | background-color: #ffffff; | ||
+ | border-color: #000000; | ||
+ | } | ||
+ | .dropdown-menu > li > a:hover, | ||
+ | .dropdown-menu > li > a:focus { | ||
+ | color: #000000; | ||
+ | text-decoration: none; | ||
+ | background-color: #CEF6F5; /*change color of links in drop down here*/ | ||
+ | } | ||
+ | .nav > li > a:hover, | ||
+ | .nav > li > a:focus { | ||
+ | text-decoration: none; | ||
+ | background-color: #E0F2F7; /*Change rollover cell color here*/ | ||
+ | } | ||
− | + | .navbar-default .navbar-nav > li > a { | |
+ | color: white; /*Change active text color here*/ | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .dropdown-menu li:hover .sub-menu { | |
− | + | visibility: visible; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | .dropdown:hover .dropdown-menu { | ||
+ | display: block; | ||
+ | } | ||
− | + | .navbar-nav .dropdown-menu, | |
− | + | .navbar .dropdown-menu { | |
− | + | margin-top: 0; | |
− | + | } | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | .dropdown-submenu { | ||
+ | position: relative; | ||
+ | } | ||
− | + | .dropdown-submenu>.dropdown-menu { | |
− | + | top: 0; | |
− | + | left: 100%; | |
− | + | margin-top: -6px; | |
− | + | margin-left: 0px; | |
+ | -webkit-border-radius: 0 6px 6px 6px; | ||
+ | -moz-border-radius: 0 6px 6px; | ||
+ | border-radius: 0 6px 6px 6px; | ||
+ | } | ||
− | + | .dropdown-submenu:hover>.dropdown-menu { | |
− | + | display: block; | |
− | + | } | |
+ | .dropdown-submenu>a:after { | ||
+ | display: block; | ||
+ | content: " "; | ||
+ | float: centre; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | border-color: transparent; | ||
+ | border-style: solid; | ||
+ | border-width: 5px 0 5px 5px; | ||
+ | border-left-color: #ccc; | ||
+ | margin-top: 5px; | ||
+ | margin-right: 0px; | ||
+ | } | ||
− | + | .dropdown-submenu:hover>a:after { | |
− | + | border-left-color: #fff; | |
− | + | } | |
− | + | ||
− | + | .dropdown-submenu.pull-left { | |
− | + | float: none; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .dropdown-submenu.pull-left>.dropdown-menu { | |
− | + | left: -100%; | |
− | + | margin-left: 10px; | |
− | + | -webkit-border-radius: 6px 0 6px 6px; | |
− | + | -moz-border-radius: 6px 0 6px 6px; | |
+ | border-radius: 6px 0 6px 6px; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .faceBot{ | |
− | + | background: #000000; | |
− | + | } | |
− | + | ||
− | + | @font-face { | |
− | + | font-family: 'Roboto', sans-serif; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | body | |
− | + | { | |
− | + | font-family: 'Roboto', sans-serif; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ul.nav a{ | |
− | + | color: black; | |
− | + | background-color: transparent; | |
+ | height: 100%; | ||
+ | position: relative; | ||
+ | } | ||
+ | ul.nav a:hover{ | ||
+ | color: black; | ||
+ | background-color: transparent; | ||
+ | height: 100%; | ||
+ | position: relative; | ||
+ | } | ||
+ | h2 { | ||
+ | color:black; | ||
+ | } | ||
+ | h4 { | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | h1 { | ||
+ | text-align: center; | ||
+ | } | ||
+ | .menu-item{ | ||
+ | height: 100px; | ||
+ | } | ||
− | + | li.menu-item{ | |
+ | background: transparent !important; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | .logo { | ||
+ | margin-top: 10px; | ||
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | dropdown-toggle { | |
− | + | width: 10%; | |
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | ||
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | </style> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | </head> | ||
− | + | <body> | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | <div class="navbar navbar-fixed-top" style="margin-top:0px; margin-left: -30px"> | |
− | + | <nav class="navbar-inner"> | |
− | + | ||
− | + | <div class="row-sm-height"> | |
+ | |||
+ | <div class="col-sm-2"style="margin-top:20px; margin-bottom:5px"><img class="logo" src="https://static.igem.org/mediawiki/2017/b/ba/Final_logo.png" height="100" width="auto" ></a></div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | <div class="col-md-10" > | ||
+ | <div id="navbar" class="navbar-collapse collapse"> | ||
+ | <ul class="nav navbar-nav navbar-right" " style="margin-top:40px ; margin-right:80px;"> | ||
+ | <li class="menu-item"> | ||
+ | <a href="https://2017.igem.org/Team:Hong_Kong-CUHK"> | ||
+ | <span>Home</span> | ||
+ | <span class="green-effect"></span> | ||
+ | </a> | ||
+ | </li> | ||
− | |||
− | + | <li><div id="navbar" class="navbar-collapse collapse"> | |
− | + | <li class="dropdown"> | |
− | + | <a href="#" class="dropdown-toggle" data-toggle="dropdown"> | |
− | + | Project <b class="caret"></b> | |
− | + | </a> | |
− | + | <ul class="dropdown-menu multi-level"> | |
− | + | <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Description">Description</a></li> | |
− | + | <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Experiments">Experiments</a></li> | |
− | + | <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Results">Results</a></li> | |
− | + | <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Parts">Parts</a></li> | |
+ | <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/InterLab">InterLab</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | <li class="menu-item"> | ||
+ | <a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Model"> | ||
+ | <span>Modelling</span> | ||
+ | <span class="green-effect"></span> | ||
+ | </a> | ||
+ | </li> | ||
− | |||
− | |||
− | |||
− | |||
− | + | <li class="menu-item"> | |
− | + | <a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Software"> | |
− | + | <span>Software</span> | |
− | + | <span class="green-effect"></span> | |
+ | </a> | ||
+ | </li> | ||
− | |||
− | |||
− | |||
− | |||
+ | <li><div id="navbar" class="navbar-collapse collapse"> | ||
+ | <li class="dropdown"> | ||
+ | <a href="#" class="dropdown-toggle" data-toggle="dropdown"> | ||
+ | Notebook <b class="caret"></b> | ||
+ | </a> | ||
+ | <ul class="dropdown-menu multi-level"> | ||
− | + | <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Notebook">Notebook</a></li> | |
− | + | <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Protocol">Protocols</a></li> | |
− | + | </ul> | |
− | + | </li> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <li><div id="navbar" class="navbar-collapse collapse"> | |
− | + | <li class="dropdown"> | |
− | + | <a href="#" class="dropdown-toggle" data-toggle="dropdown"> | |
− | + | ||
− | + | ||
+ | Human Practices<b class="caret"></b> | ||
+ | </a> | ||
+ | <ul class="dropdown-menu multi-level"> | ||
+ | <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/HP/Gold_Integrated">Integrated Human Practices</a></li> | ||
+ | <li> <a href="https://2017.igem.org/Team:Hong_Kong-CUHK/HP/Silver">Engagement and Education</a> </li> | ||
+ | <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Prototype">Prototype</a></li> | ||
+ | <li> <a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Collaborations">Collaboration</a></li> | ||
+ | |||
+ | </ul> | ||
+ | </li> | ||
+ | <li><div id="navbar" class="navbar-collapse collapse"> | ||
+ | <li class="dropdown"> | ||
+ | <a href="#" class="dropdown-toggle" data-toggle="dropdown"> | ||
+ | Team<b class="caret"></b> | ||
+ | </a> | ||
+ | <ul class="dropdown-menu multi-level"> | ||
+ | <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Team">About Us </a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Attributions">Attributions </a></li> | ||
+ | |||
+ | </ul> | ||
+ | </li> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | </ul> | |
− | + | </div> | |
+ | </nav> | ||
+ | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | <html> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + |
Latest revision as of 16:21, 24 October 2017