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

 
(59 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>
  
−
<!-- Functionallity and behaviour JS -->
 
−
  <script>
 
  
−
    $(document).ready(function(){
 
−
 
−
      //Loading screen functionallity
 
−
      $('.loading').animate(
 
−
          {opacity:0},
 
−
          500,
 
−
          function(){
 
−
            $('.loading').attr("style", "display:none");
 
−
          }
 
−
      );
 
−
 
−
      //Height responsiveness
 
−
      $(window).resize(function() {
 
−
          wheight = $(window).height();
 
−
          $('.container').attr("style","height:"+(wheight)+"px;background-size:cover;");
 
−
          $('.team-member-container').attr("style","height:"+wheight/2.7+"px;");
 
−
      });
 
−
 
−
      $(window).trigger('resize');
 
−
 
−
      //Menu moveto container on item click functionallity
 
−
      $('.menu-item').on('click', function(){
 
−
          $('.menu-item').removeClass('subselected');
 
−
          $(this).addClass('subselected');
 
−
          if($(this).attr("data")=="#top"){
 
−
              $('html, body').animate({
 
−
                  scrollTop: 0
 
−
              }, 1000);
 
−
          }else{
 
−
              $('html, body').animate({
 
−
                  scrollTop: $($(this).attr("data")).offset().top-70
 
−
              }, 1000);
 
−
          }
 
−
      });
 
−
   
 
−
  </script>
 
 
   <style>
 
   <style>
  
Line 55: Line 18:
 
#sideMenu, #top_title {display:none;}
 
#sideMenu, #top_title {display:none;}
 
#content { padding:0px; width:90%; margin-top:-15px; margin-left:5%;, margin-right: 5%}
 
#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; }
 
−
 
−
<style>
 
−
 
−
 
−
#sideMenu, #top_title {display:none;}
 
−
#content { padding:0px; width:90%; margin-top:-7px; margin-left:5%;, margin-right: 5%}
 
 
body {background-color:white; }
 
body {background-color:white; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
Line 71: Line 26:
 
       margin: 0;
 
       margin: 0;
 
       padding:0;
 
       padding:0;
−
       font-family: font-family: 'Yanone Kaffeesatz', sans-serif;
+
       font-size: 12px;
 +
      font-weight: 500;
 +
      font-family: 'Quicksand', sans-serif;
 
     }
 
     }
  
Line 79: Line 36:
 
     }
 
     }
 
     #top-section{
 
     #top-section{
−
       background:#48af5d;
+
       background:#000000;
 
       margin-left:0 !important;
 
       margin-left:0 !important;
 
       width:100%;
 
       width:100%;
Line 96: Line 53:
 
       z-index:5;
 
       z-index:5;
  
−
       background-color:#555;
+
       background-color:#000000;
−
       color:#fff;
+
       color:#000000;
 
       text-align: center;
 
       text-align: center;
 
     }
 
     }
Line 112: Line 69:
 
       position:fixed;
 
       position:fixed;
 
       width:100%;
 
       width:100%;
−
       height:56px;
+
       height:110px;
−
       top:14px;
+
       top:10px;
−
       background-color: #47a3da;
+
       background-color: #000000;
  
 
       z-index:4;
 
       z-index:4;
Line 122: Line 79:
 
     }
 
     }
 
     .menu tr td{
 
     .menu tr td{
−
       text-align: center;
+
       text-align: middle;
 
       vertical-align: middle;
 
       vertical-align: middle;
  
−
       font-weight: 700;
+
       font-weight: 500;
−
       font-size:16px;
+
       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:#258ecd;
+
       background-color:#FFFFFF;
 
       cursor: pointer;
 
       cursor: pointer;
 
     }
 
     }
 
     .subselected{
 
     .subselected{
−
       background-color: #258ecd;
+
       background-color: #FFFFFF;
 
     }
 
     }
  
Line 142: Line 99:
 
       position:relative;
 
       position:relative;
 
       width:100%;
 
       width:100%;
−
       top:50px;
+
       top:60px;
 
     }
 
     }
 
     .container .subcontainer{
 
     .container .subcontainer{
Line 156: Line 113:
 
       overflow:hidden;
 
       overflow:hidden;
 
     }
 
     }
 +
  
 
body {  
 
body {  
−
     padding-top: 110px;  
+
     padding-top: 100px;  
 
}
 
}
  
Line 172: 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 225: Line 230:
  
 
.faceBot{
 
.faceBot{
−
   background: #EFFBF5;
+
   background: #000000;
 
}
 
}
  
 
@font-face {
 
@font-face {
−
   font-family: 'Source Sans Pro', sans-serif;;
+
   font-family: 'Roboto', sans-serif;
 
  }
 
  }
  
 
body
 
body
 
{
 
{
−
    font-family: 'Source Sans Pro', 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 245: 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 252: Line 257:
  
 
h2 {
 
h2 {
−
   color:green;
+
   color:black;
 
}
 
}
  
 
h4 {
 
h4 {
 
     font-weight: bold;
 
     font-weight: bold;
 +
}
 +
h1 {
 +
    text-align: center;
 
}
 
}
  
 
.menu-item{
 
.menu-item{
−
   height: 75px;
+
   height: 100px;
 
}
 
}
  
Line 268: Line 276:
  
  
 +
.logo {
 +
margin-top: 10px;
  
−
.green-effect{
 
−
  display: none;
 
−
  background-color: #E0F8EC;
 
−
  opacity: 1;
 
−
  color: #FFF;
 
−
  transition-property: all;
 
−
  transition-duration: 0.3s;
 
−
  transition-timing-function: ease-out;
 
−
  transition-delay: 0s;
 
−
  border-color: #288D30;
 
−
  position: absolute;
 
−
  bottom: 0px;
 
−
  width: 100%;
 
−
  height: 2px;
 
−
  right: 0px;
 
 
}
 
}
−
 
−
.logo {
 
−
margin-top: 100px;
 
  
 
}
 
}
  
−
a:hover .green-effect{
 
−
  display: inherit;
 
−
}
 
  
−
.invertir:hover {
 
−
  -webkit-filter: invert(100%);
 
 
}
 
}
  
Line 304: Line 291:
  
 
    
 
    
−
}
 
−
 
−
/********************************* 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 375: 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 415: 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 422: 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 459: 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