Team:CityU HK/Template

From 2014.igem.org

(Difference between revisions)
 
(40 intermediate revisions not shown)
Line 14: Line 14:
  }
  }
-
#footer {
+
/*
-
background: rgba(0,0,0,0.8);
+
Back to top button
-
background-size:cover;
+
*/
-
height: 200px;
+
#back-top {
-
        width: 100%;
+
position: fixed;
-
clear: both;
+
bottom: 30px;
-
bottom: 0;
+
         right:30px;
-
         margin: 0;
+
         z-index:50;
-
         padding: 20px 20px 0px 20px;
+
-
        border-top: solid 1px #e0e0e0;
+
-
        position: absolute;
+
}
}
-
 
+
#back-top a {
-
#footer h4 {
+
width: 50px;
-
color: #fff;
+
display: block;
-
}
+
-
 
+
-
#footer p {
+
-
color: #fff;
+
text-align: center;
text-align: center;
-
}
+
font: 11px/100% Arial, Helvetica, sans-serif;
-
 
+
text-transform: uppercase;
-
#footer a {
+
-
color: #fff;
+
text-decoration: none;
text-decoration: none;
 +
color: #bbb;
 +
/* background color transition */
 +
-webkit-transition: 1s;
 +
-moz-transition: 1s;
 +
transition: 1s;
 +
        border-radius: 2px;
}
}
-
 
+
#back-top a:hover {
-
#footer a:hover {
+
color: #000;
-
color: #3cc;
+
}
}
-
 
+
/* arrow icon (span tag) */
-
#footer img {
+
#back-top span {
-
margin-left: 40px;
+
width: 50px;
-
margin-top: 30px;
+
height: 50px;
-
margin-bottom: 10px;
+
display: block;
 +
background: #ddd url(https://static.igem.org/mediawiki/2014/5/57/Backtotop_BU14.png) no-repeat center center;
 +
/* background color transition */
 +
-webkit-transition: 1s;
 +
-moz-transition: 1s;
 +
transition: 1s;
 +
}
 +
#back-top a:hover span {
 +
background-color: #F68F52;
}
}
Line 66: Line 70:
        
        
       <a class="navbar-brand">
       <a class="navbar-brand">
-
           <a class="navbar-brand" href="https://2014.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"">City University of Hong Kong 2014</a>
+
           <a class="navbar-brand" id="igem"  href="https://2014.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2014/d/d8/Team_Berlin_igem_logo.png" width="80px" height="70px"></a><a class="navbar-brand" href="https://2014.igem.org/Team:CityU_HK">City University of Hong Kong 2014</a>
     </div>
     </div>
Line 76: Line 80:
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team Members</a>
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team Members</a>
           <ul class="dropdown-menu" role="menu">
           <ul class="dropdown-menu" role="menu">
-
             <li><a href="https://2014.igem.org/Team:CityU_HK/Team/Member">Students</a></li>
+
             <li><a href="https://2014.igem.org/Team:CityU_HK/TeamMember">Students</a></li>
-
            <li><a href="https://2014.igem.org/Team:CityU_HK/Team/advisors">Advisors</a></li>
+
             <li><a href="https://2014.igem.org/Team:CityU_HK/Team/instructors">Instructors & Advisors</a></li>
-
             <li><a href="https://2014.igem.org/Team:CityU_HK/Team/instructors">Instructors</a></li>
+
             <li><a href="https://2014.igem.org/Team:CityU_HK/Team/attribution">Attribution</a></li>
             <li><a href="https://2014.igem.org/Team:CityU_HK/Team/attribution">Attribution</a></li>
             <li><a href="https://2014.igem.org/Team:CityU_HK/Acknowledgement">Acknowledgement</a></li>
             <li><a href="https://2014.igem.org/Team:CityU_HK/Acknowledgement">Acknowledgement</a></li>
Line 86: Line 89:
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project</a>
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project</a>
           <ul class="dropdown-menu" role="menu">
           <ul class="dropdown-menu" role="menu">
-
             <li><a href="#">Overview</a></li>
+
             <li><a href="https://2014.igem.org/Team:CityU_HK/project/overview">Overview</a></li>
-
             <li><a href="#">Modules description</a></li>
+
             <li><a href="https://2014.igem.org/Team:CityU_HK/project/module_fad">Modules description</a></li>
-
             <li><a href="#">Results</a></li>
+
             <li><a href="https://2014.igem.org/Team:CityU_HK/project/result">Results</a></li>
-
             <li><a href="#">Future Plan</a></li>
+
             <li><a href="https://2014.igem.org/Team:CityU_HK/project/futureplan">Future Plan</a></li>
           </ul>
           </ul>
         </li>
         </li>
Line 97: Line 100:
             <li><a href="https://2014.igem.org/Team:CityU_HK/notebook/lablog">Lab Log</a></li>
             <li><a href="https://2014.igem.org/Team:CityU_HK/notebook/lablog">Lab Log</a></li>
             <li><a href="https://2014.igem.org/Team:CityU_HK/notebook/protocols">Protocol</a></li>
             <li><a href="https://2014.igem.org/Team:CityU_HK/notebook/protocols">Protocol</a></li>
-
             <li><a href="#">Safety</a></li>
+
             <li><a href="https://2014.igem.org/Team:CityU_HK/notebook/safety">Safety</a></li>
           </ul>
           </ul>
         </li>
         </li>
Line 103: Line 106:
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Achievement</a>
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Achievement</a>
           <ul class="dropdown-menu" role="menu">
           <ul class="dropdown-menu" role="menu">
-
             <li><a href="https://2014.igem.org/Team:CityU_HK/achievement/medal_requirement">Medal Requirements</a></li>
+
             <li><a href="https://2014.igem.org/Team:CityU_HK/achievement/medal_requirement">Medal Fulfillment</a></li>
-
             <li><a href="#">New Biobricks</a></li>
+
             <li><a href="https://2014.igem.org/Team:CityU_HK/achievement/new_biobrick">New Biobricks</a></li>
 +
          </ul>
 +
        </li>
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Human Practice</a>
 +
          <ul class="dropdown-menu" role="menu">
 +
            <li><a href="https://2014.igem.org/Team:CityU_HK/HumanPractice">Outreach</a></li>
 +
            <li><a href="https://2014.igem.org/Team:CityU_HK/collaboration">Collaborations</a></li>
           </ul>
           </ul>
         </li>
         </li>
-
        <li><a href="https://2014.igem.org/Team:CityU_HK/HumanPractice">Human Practice</a></li>
 
       </ul>
       </ul>
     </div><!-- /.navbar-collapse -->
     </div><!-- /.navbar-collapse -->
Line 113: Line 122:
</nav>
</nav>
-
<!--==================== footer ===========================-->
+
<p id="back-top">
-
<div id="footer" class="row">
+
<a href="#top"><span></span></a>
-
<div class="col-md-7">
+
</p>
-
      <h4>Sponsors</h3>
+
 
-
      <a href="http://www.cityu.edu.hk/" target="_blank"><img src="https://static.igem.org/mediawiki/2014/9/9c/CityU_HK_citylogo.png" width="95"></a>
+
-
    <a href="http://www6.cityu.edu.hk/bhdbapp/deptweb/index.html" target="_blank"><img src="https://static.igem.org/mediawiki/2014/9/98/CityU_HK_bchlogo.png" width="80"></a>
+
-
</div> <!-- end of col-md-7-->
+
-
<div class="col-md-5">
+
-
      <h4>Stay connected!</h4>
+
-
      <p>email: <a href="#">cityuhk.igem@gmail.com</a></p>
+
-
      <a href="#"><img src="https://s3.amazonaws.com/sbweb/images/icon-facebook-grey-150x150.png" width="50" height="48"></a>
+
-
      <a href="#"><img src="http://ibo2014.org/wordpress/wp-content/themes/ibo2014/img/navbar/twitter_icon.png" width="49" height="51"></a>
+
-
      <a href="#"><img src="http://3.bp.blogspot.com/-zNUyQIVgA8Q/Ue8USlgr8II/AAAAAAAAl1w/6ZCWqhS59Ts/s1600/youtube.png" width="52" height="50"></a>
+
-
</div> <!--end of col-md-5-->
+
-
</div> <!-- end of #footer -->
+
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
Line 137: Line 135:
     <script>
     <script>
       $(document).ready(function() {
       $(document).ready(function() {
-
       $('.btn-custom').click(function() {
+
       $('#btn-custom').click(function() {
         $('html,body').animate({
         $('html,body').animate({
           scrollTop:$($.attr(this,'href')).offset().top},500);
           scrollTop:$($.attr(this,'href')).offset().top},500);
Line 151: Line 149:
     });
     });
     </script>
     </script>
 +
 +
<!--//back to top arrow-->
 +
<script type="text/javascript">
 +
$(document).ready(function(){
 +
 +
// hide #back-top first
 +
$("#back-top").hide();
 +
 +
// fade in #back-top
 +
$(function () {
 +
$(window).scroll(function () {
 +
if ($(this).scrollTop() > 100) {
 +
$('#back-top').fadeIn();
 +
} else {
 +
$('#back-top').fadeOut();
 +
}
 +
});
 +
 +
// scroll body to 0px on click
 +
$('#back-top a').click(function () {
 +
$('body,html').animate({
 +
scrollTop: 0
 +
}, 800);
 +
return false;
 +
});
 +
});
 +
 +
});
 +
</script>
   </body>
   </body>
</html>
</html>

Latest revision as of 08:15, 17 October 2014

Bootstrap 101 Template