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

 
(64 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 39: Line 43:
  
  
−
/* Button class */
+
    /* LOADING SCREEN */
 +
    .loading{
 +
      position:fixed;
 +
      width:100%;
 +
      height:100%;
 +
      top:0;
 +
      left:0;
  
−
.button_click {
+
      z-index:5;
−
  margin: 10px auto;
+
−
  padding: 15px;
+
−
  width: 12%;
+
−
  text-align: center;
+
−
  font-weight: bold;
+
−
  background-color: #72c9b6;
+
−
  cursor: pointer;
+
−
  -webkit-transition: all 0.4s ease;
+
−
  -moz-transition: all 0.4s ease;
+
−
  -ms-transition: all 0.4s ease;
+
−
  -o-transition: all 0.4s ease;
+
−
  transition: all 0.4s ease;
+
−
}
+
  
−
 
+
      background-color:#000000;
−
/* button class on hover */
+
      color:#000000;
−
 
+
      text-align: center;
−
.button_click:hover {
+
    }
−
  background-color: #000000;
+
    .loading p{
−
  color: #72c9b6;
+
      position: relative;
−
}
+
      width:100%;
−
 
+
      height:10%;
−
.top-pad {
+
      top:45%;
−
  padding: 35px;
+
      left:0;
−
}
+
    }
  
 
     /* MENU STYLING */
 
     /* MENU STYLING */
 
     .menu{
 
     .menu{
−
       position:centre;
+
       position:fixed;
 
       width:100%;
 
       width:100%;
−
       height:100px;
+
       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 85: 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 102: Line 99:
 
       position:relative;
 
       position:relative;
 
       width:100%;
 
       width:100%;
−
       top:50px;
+
       top:60px;
 
     }
 
     }
 
     .container .subcontainer{
 
     .container .subcontainer{
 
       position:absolute;
 
       position:absolute;
 
       width:95%;
 
       width:95%;
−
       height:100%;
+
       height:90%;
 
       top:5%;
 
       top:5%;
 
       left:2.5%;
 
       left:2.5%;
Line 134: Line 131:
  
 
}
 
}
 +
 +
.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 {
 
.dropdown-menu li:hover .sub-menu {
Line 156: 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 190: 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 199: 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 219: 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 231: Line 262:
 
h4 {
 
h4 {
 
     font-weight: bold;
 
     font-weight: bold;
 +
}
 +
h1 {
 +
    text-align: center;
 
}
 
}
  
Line 240: Line 274:
 
   background: transparent !important;
 
   background: transparent !important;
 
}
 
}
−
 
−
 
  
  
 
.logo {
 
.logo {
−
margin-top: 100px;
+
margin-top: 10px;
  
 
}
 
}
 +
 +
}
 +
 +
 
}
 
}
  
Line 253: Line 289:
 
width: 10%;
 
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;
+
−
  }
+
 
}
 
}
  
−
 
−
/* 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 321: Line 301:
 
<body>
 
<body>
  
−
<div class="navbar navbar-fixed-top" style="margin-top:0px; padding-left: 15px;">
+
 
−
  <div class="container-fluid">
+
<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" style="margin-top:20px"><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>
  
  
−
    <li><div id="navbar" class="navbar-collapse collapse">
+
 
−
        <ul class="nav navbar-nav navbar-right" style="margin-top: 15px; margin-right: 80px;">
+
<li><div id="navbar" class="navbar-collapse collapse">
 
           <li class="dropdown">
 
           <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" style="left:0;">
+
                    <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/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/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/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 361: 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 368: Line 357:
  
  
−
 
+
<li><div id="navbar" class="navbar-collapse collapse">
−
 
+
−
        <li><div id="navbar" class="navbar-collapse collapse">
+
 
           <li class="dropdown">
 
           <li class="dropdown">
−
<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" style="left:0;">
+
                    <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><div id="navbar" class="navbar-collapse collapse">
 
           <li class="dropdown">
 
           <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" style="left:0;">
+
                    <ul class="dropdown-menu multi-level">
−
                         <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/HP/Gold_Integrated">Integrated 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/Engagement">Engagement+Education</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>
+
    <li> <a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Collaborations">Collaboration</a></li>
−
 
+
 
                        
 
                        
 
                     </ul>
 
                     </ul>
Line 405: Line 390:
 
                 Team<b class="caret"></b>             
 
                 Team<b class="caret"></b>             
 
</a>
 
</a>
−
              <ul class="dropdown-menu" style="left:0;">
+
                    <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/Team">About Us </a></li>
 
                         <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Attributions">Attributions </a></li>
 
                         <li><a href="https://2017.igem.org/Team:Hong_Kong-CUHK/Attributions">Attributions </a></li>

Latest revision as of 16:21, 24 October 2017