Difference between revisions of "Template:Hong Kong-CUHK"

 
(71 intermediate revisions by 2 users not shown)
Line 5: Line 5:
  
 
   <!-- External scripts -->
 
   <!-- External scripts -->
−
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i" rel="stylesheet">
+
<link href="https://fonts.googleapis.com/css?family=Architects+Daughter|Caveat+Brush|Indie+Flower|Permanent+Marker|Quicksand|Roboto|Schoolbell|Sedgwick+Ave" rel="stylesheet">
−
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
+
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,500" rel="stylesheet">
−
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+
<link href="https://fonts.googleapis.com/css?family=Bangers|Boogaloo|Josefin+Sans|Luckiest+Guy|Magra|News+Cycle|Oswald" rel="stylesheet">
−
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
−
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
+
<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>
 
   <style>
Line 24: Line 26:
 
       margin: 0;
 
       margin: 0;
 
       padding:0;
 
       padding:0;
−
       font-family: 'Roboto', sans-serif;
+
      font-size: 12px;
 +
      font-weight: 500;
 +
       font-family: 'Quicksand', sans-serif;
 
     }
 
     }
  
Line 32: Line 36:
 
     }
 
     }
 
     #top-section{
 
     #top-section{
−
       background:#467a75;
+
       background:#000000;
 
       margin-left:0 !important;
 
       margin-left:0 !important;
 
       width:100%;
 
       width:100%;
Line 38: Line 42:
 
     }
 
     }
  
 +
 +
    /* 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 STYLING */
 
     .menu{
 
     .menu{
−
       position:centre;
+
       position:fixed;
 
       width:100%;
 
       width:100%;
−
       height:80px;
+
       height:110px;
−
       top:24px;
+
       top:10px;
−
       background-color: #47a3da;
+
       background-color: #000000;
  
 
       z-index:4;
 
       z-index:4;
  
 
       border-collapse: collapse;
 
       border-collapse: collapse;
−
       text-align:right;
+
       text-align:center;
 
     }
 
     }
 
     .menu tr td{
 
     .menu tr td{
Line 56: Line 82:
 
       vertical-align: middle;
 
       vertical-align: middle;
  
−
       font-weight: 700;
+
       font-weight: 500;
−
       font-size:30px;
+
       font-size:25px;
 
       color:#fff;
 
       color:#fff;
 
       width:7%;
 
       width:7%;
 
     }
 
     }
 
     .menu tr td.menu-item:hover{
 
     .menu tr td.menu-item:hover{
−
       background-color:#0B4C5F;
+
       background-color:#FFFFFF;
 
       cursor: pointer;
 
       cursor: pointer;
 
     }
 
     }
 
     .subselected{
 
     .subselected{
−
       background-color: #0B4C5F;
+
       background-color: #FFFFFF;
 
     }
 
     }
  
Line 73: Line 99:
 
       position:relative;
 
       position:relative;
 
       width:100%;
 
       width:100%;
−
       top:50px;
+
       top:60px;
 
     }
 
     }
 
     .container .subcontainer{
 
     .container .subcontainer{
Line 90: Line 116:
  
 
body {  
 
body {  
−
     padding-top: 110px;  
+
     padding-top: 100px;  
 
}
 
}
  
Line 104: Line 130:
 
filter: none !important;
 
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;
 
}
 
}
  
Line 114: Line 187:
 
     top: 0;
 
     top: 0;
 
     left: 100%;
 
     left: 100%;
−
     margin-top: 0px;
+
     margin-top: -6px;
 
     margin-left: 0px;
 
     margin-left: 0px;
 
     -webkit-border-radius: 0 6px 6px 6px;
 
     -webkit-border-radius: 0 6px 6px 6px;
Line 148: Line 221:
  
 
.dropdown-submenu.pull-left>.dropdown-menu {
 
.dropdown-submenu.pull-left>.dropdown-menu {
−
     left: 0%;
+
     left: -100%;
−
     margin-left: 0px;
+
     margin-left: 10px;
 
     -webkit-border-radius: 6px 0 6px 6px;
 
     -webkit-border-radius: 6px 0 6px 6px;
 
     -moz-border-radius: 6px 0 6px 6px;
 
     -moz-border-radius: 6px 0 6px 6px;
Line 157: Line 230:
  
 
.faceBot{
 
.faceBot{
−
   background: #EFFBF5;
+
   background: #000000;
 
}
 
}
  
 
@font-face {
 
@font-face {
−
   font-family: 'Roboto', sans-serif;;
+
   font-family: 'Roboto', sans-serif;
 
  }
 
  }
  
 
body
 
body
 
{
 
{
−
    font-family: 'Roboto', sans-serif;
+
  font-family: 'Roboto', sans-serif;
 
}
 
}
  
 
ul.nav a{
 
ul.nav a{
−
   color: #EFFBF5;
+
   color: black;
 
   background-color: transparent;
 
   background-color: transparent;
 
   height: 100%;
 
   height: 100%;
Line 177: Line 250:
  
 
ul.nav a:hover{
 
ul.nav a:hover{
−
   color: #EFFBF5;
+
   color: black;
 
   background-color: transparent;
 
   background-color: transparent;
 
   height: 100%;
 
   height: 100%;
Line 189: Line 262:
 
h4 {
 
h4 {
 
     font-weight: bold;
 
     font-weight: bold;
 +
}
 +
h1 {
 +
    text-align: center;
 
}
 
}
  
 
.menu-item{
 
.menu-item{
−
   height: 75px;
+
   height: 100px;
 
}
 
}
  
Line 198: Line 274:
 
   background: transparent !important;
 
   background: transparent !important;
 
}
 
}
−
 
−
 
  
  
 
.logo {
 
.logo {
−
margin-top: 100px;
+
margin-top: 10px;
  
 
}
 
}
 +
 
}
 
}
  
−
dropdown-toggle {
 
−
width: 10%;
 
  
−
/********************************* RESPONSIVE STYLING ********************************/
 
−
 
−
 
−
/* IF THE SCREEN IS LESS THAN 1000PX */
 
−
 
−
@media only screen and (max-width: 1000px) {
 
−
  #content {
 
−
    width: 100%;
 
−
  }
 
−
  .menu_wrapper {
 
−
    width: 15%;
 
−
  }
 
−
  .content_wrapper {
 
−
    margin-left: 15%;
 
−
  }
 
−
  .menu_item {
 
−
    display: block;
 
−
  }
 
−
  .icon {
 
−
    display: none;
 
−
  }
 
−
  .highlight {
 
−
    padding: 10px 0px;
 
−
  }
 
 
}
 
}
  
 +
dropdown-toggle {
 +
width: 10%;
  
−
/* IF THE SCREEN IS LESS THAN 680PX */
 
  
−
@media only screen and (max-width: 680px) {
+
    
−
   .collapsable_menu_control {
+
−
    display: block;
+
−
  }
+
−
  .menu_item {
+
−
    display: none;
+
−
  }
+
−
  .menu_wrapper {
+
−
    width: 100%;
+
−
    height: 15%;
+
−
    position: relative;
+
−
  }
+
−
  .content_wrapper {
+
−
    width: 100%;
+
−
    margin-left: 0px;
+
−
  }
+
−
  .column.half_size {
+
−
    width: 100%;
+
−
  }
+
−
  .column img {
+
−
    width: 100%;
+
−
    padding: 5px 0px;
+
−
  }
+
−
  .icon {
+
−
    display: block;
+
−
  }
+
−
  .highlight {
+
−
    padding: 15px 5px;
+
−
  }
+
 
}
 
}
 +
  
 
</style>
 
</style>
−
 
  
  
Line 280: Line 302:
  
  
−
<div class="navbar navbar-fixed-top" style="margin-top:20px">
+
<div class="navbar navbar-fixed-top" style="margin-top:0px; margin-left: -30px">
 
   <nav class="navbar-inner">
 
   <nav class="navbar-inner">
 
    
 
    
 
   <div class="row-sm-height">
 
   <div class="row-sm-height">
 
    
 
    
−
   <div class="col-sm-2"><a href="https://2017.igem.org/Team:Hong_Kong-CUHK"><img class="logo" src="https://static.igem.org/mediawiki/2017/c/cf/CUHKteamlogo.jpg" height="80"  width="auto" ></a></div>
+
   <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>
  
−
 
  
−
  <div class="col-md-10" >
+
 
−
      <ul class="nav navbar-nav" style="margin-top:20px">
+
<li><div id="navbar" class="navbar-collapse collapse">
−
    <li>
+
          <li class="dropdown">
 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
−
 
+
Project <b class="caret"></b>             
−
                Project <b class="caret"></b>             
+
 
</a>
 
</a>
 
                     <ul class="dropdown-menu multi-level">
 
                     <ul class="dropdown-menu multi-level">
Line 305: Line 335:
 
       <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/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/Parts">Parts</a></li>
−
      <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Hardware">Hardware</a></li>
 
 
       <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/InterLab">InterLab</a></li>
 
       <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/InterLab">InterLab</a></li>
  
Line 321: Line 350:
  
 
         <li class="menu-item">
 
         <li class="menu-item">
−
           <a href="http://igem.erg.cuhk.edu.hk/">
+
           <a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Software">
 
             <span>Software</span>
 
             <span>Software</span>
 
             <span class="green-effect"></span>
 
             <span class="green-effect"></span>
Line 328: Line 357:
  
  
−
 
+
<li><div id="navbar" class="navbar-collapse collapse">
−
 
+
          <li class="dropdown">
−
        <li>
+
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
−
<a href="#" class="dropdown-toggle" data-toggle="dropdown">  
+
Notebook <b class="caret"></b>             
−
                Notebook<b class="caret"></b>             
+
 
</a>
 
</a>
 
                     <ul class="dropdown-menu multi-level">
 
                     <ul class="dropdown-menu multi-level">
−
                        <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Notebook">Lab Notebook</a></li>
+
 
−
                        <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Protocol">Protocol</a></li>
+
      <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>
+
      </ul>
 
                 </li>
 
                 </li>
  
−
 
+
         <li><div id="navbar" class="navbar-collapse collapse">
−
         <li>
+
          <li class="dropdown">
−
     <a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Human_Practices" class="dropdown-toggle" data-toggle="dropdown">
+
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  
 
                 Human Practices<b class="caret"></b>             
 
                 Human Practices<b class="caret"></b>             
 
</a>
 
</a>
 
                     <ul class="dropdown-menu multi-level">
 
                     <ul class="dropdown-menu multi-level">
−
                         <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Integrated_Practices">Integrated Human Practices</a></li>
+
                         <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/Prototype">Prototype</a></li>
 +
    <li> <a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Collaborations">Collaboration</a></li>
 
                        
 
                        
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
  
−
  <li>
+
  <li><div id="navbar" class="navbar-collapse collapse">
 +
          <li class="dropdown">
 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  

Latest revision as of 16:21, 24 October 2017