Difference between revisions of "Template:IIT Delhi"

 
(16 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
+
<head>
<script>
+
 
+
 
+
    // allow button on the black menu bar to show/hide the side menu
+
    function hide_show_menu() {
+
 
+
      // in case you preview mode is selected, the menu is hidden for better visibility
+
      if (window.location.href.indexOf("submit") >= 0) {
+
        $(".igem_2017_menu_wrapper").hide();
+
      }
+
 
+
      // if the black menu bar has been loaded
+
        if (document.getElementById('bars_item')) {
+
 
+
        // when the "bars_item" has been clicked
+
        $("#bars_item").click(function() {
+
          $("#sideMenu").hide();
+
 
+
          // show/hide the menu wrapper
+
          $(".igem_2017_menu_wrapper").fadeToggle("100");
+
        }); 
+
        }
+
 
+
      // because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet
+
      else {
+
            setTimeout(hide_show_menu, 15);
+
      }
+
    }
+
 
+
 
+
</script>
+
 
<style>
 
<style>
.navbar {
+
/* ADJUSTS DEFAULT iGEM CONTENT */
position:fixed;/* ie6 will treat this as fixed because of a bug where overflow:auto is set on a parent */
+
.logo_2017, #sideMenu, #firstHeading, #bars_item { /* HIDES SOME UNWANTED STUFF COMPLETELY */
top:0px;
+
display: none;
left:0px;
+
height:50px;
+
width:100%;
+
margin:0;
+
padding:0;
+
z-index:999;
+
background-color: #333;
+
overflow:visible;
+
 
}
 
}
.navbar a:hover, .dropdown:hover .dropbtn {
+
#top_menu_14, #top_menu_inside { /* MAKES BACKGROUND OF iGEM MENU TRANSPARENT */
    background-color: red;
+
background: none;
    z-index: 101;
+
border: none;
 
}
 
}
.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
+
#globalWrapper, #content { /* MAKES BACKGROUND OF MEDIAWIKI TRANSPARENT */
.igem_iitd-hover-opacity {cursor: pointer;}
+
background-color: transparent;
 
+
.igem_iitd-black,.igem_iitd-hover-black:hover{color:#fff!important;background-color:#000!important}
+
.igem_iitd-padding-64{padding-top:64px!important;padding-bottom:64px!important}
+
.igem_iitd-hover-opacity-off:hover{opacity:1}
+
.igem_iitd-button:hover{color:#000!important;background-color:#ccc!important}
+
.igem_iitd-light-grey,.igem_iitd-hover-light-grey:hover,.igem_iitd-light-gray,.igem_iitd-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
+
.igem_iitd-margin-right{margin-right:16px!important}
+
.igem_iitd-button:hover{color:#000!important;background-color:#ccc!important}
+
 
+
.dropdown-content {
+
    display: none;
+
    position: absolute;
+
    background-color: #f9f9f9;
+
    min-width: 160px;
+
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
    z-index: 101;
+
 
}
 
}
.dropdown-content-big {
+
:focus, :active {
    display: none;
+
  outline: 0;
    position: absolute;
+
    background-color: #f9f9f9;
+
    min-width: 200px;
+
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
    z-index: 101;
+
 
}
 
}
.dropdown-content a {
+
body, html, #globalWrapper, #bodyContent, #HQ_page {
    float: none;
+
width: 100%;
    color: black;
+
margin: 0;
    padding: 12px 16px;
+
padding: 0;
    text-decoration: none;
+
height: 100%
    display: block;
+
    text-align: left;
+
    z-index: 101;
+
 
}
 
}
 
+
#content {
.dropdown-content a:hover {
+
width: 100%;
    background-color: #ddd;
+
margin: 0;
    z-index: 101;
+
margin-top: -33px;
 +
padding: 0;
 +
height: 100%
 
}
 
}
.dropdown-content-big a {
+
html {
    float: none;
+
-webkit-font-smoothing: antialiased;
    color: black;
+
    padding: 12px 16px;
+
    text-decoration: none;
+
    display: block;
+
    text-align: left;
+
    z-index: 101;
+
 
}
 
}
 
.dropdown-content-big a:hover {
 
    background-color: #ddd;
 
    z-index: 101;
 
}
 
 
.dropdown:hover .dropdown-content {
 
    display: block;
 
    z-index: 101;
 
}
 
.dropdown:hover .dropdown-content-big {
 
    display: block;
 
    z-index: 101;
 
}
 
.right_menu{
 
    float: right;
 
    text-align: right;
 
    width: auto;
 
    margin-right: 60px;
 
}
 
.backbody {
 
    background-image: url("1.png");
 
    min-height: 800px;
 
    background-attachment: fixed;
 
    background-position: center;
 
    background-repeat: no-repeat;
 
    background-size: cover;
 
    opacity: 0.4;
 
        position: absolute;
 
    left: 0px;
 
    top: 0px;
 
    bottom: 0px;
 
    z-index: -1;
 
}
 
body {
 
    background-color: black;
 
}
 
body.landing #header {
 
background-color: transparent;
 
left: 0;
 
position: absolute;
 
top: 0;
 
}
 
 
</style>
 
</style>
 
<head>
 
 
  <!-- This tells the browser that your page is responsive -->
 
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <!-- This is from CSS templates -->
 
  <!--<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">-->
 
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
 
 
  <!-- Latest compiled and minified CSS -->
 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
  <link rel="stylesheet" href="https://2017.igem.org/Template:Oxford/css/style?action=raw&amp;ctype=text/css">
 
 
  <!-- Latest compiled JavaScript -->
 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
 
 
  <!-- Google Analytics -->
 
  <script>
 
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 
 
  ga('create', 'UA-102136418-1', 'auto');
 
  ga('send', 'pageview');
 
 
  </script>
 
 
 
</head>
 
</head>
 
+
<body>
 
+
<script>
<body class="landing" background-color: black;>
+
</script>
 
+
</body>
<!-- Header -->
+
+
<div class = "navbar ">
+
<a href="index.html">iGEM IIT Delhi</a>
+
<div class = "right_menu">
+
  <div class="dropdown">
+
    <button class="dropbtn">Project
+
    <i class="fa fa-caret-down"></i>
+
    </button>
+
    <div class="dropdown-content">
+
      <a href="#">Description</a>
+
      <a href="#">Results</a>
+
      <a href="#">Proof of Concept</a>
+
      <a href="#">Basic Parts</a>
+
      <a href="#">Composite Parts</a>
+
    </div>
+
  </div>
+
  <div class="dropdown">
+
    <button class="dropbtn">Modelling
+
    <i class="fa fa-caret-down"></i>
+
    </button>
+
    <div class="dropdown-content">
+
      <a href="#">Overview</a>
+
      <a href="#">Logic Assessment</a>
+
      <a href="#">Signalling Tools</a>
+
    </div>
+
  </div>
+
  <div class="dropdown">
+
    <button class="dropbtn">Human Practices
+
    <i class="fa fa-caret-down"></i>
+
    </button>
+
    <div class="dropdown-content-big">
+
      <a href="#">Human Practices</a>
+
      <a href="#">Integrated Practices</a>
+
      <a href="#">Public Engagement</a>
+
      <a href="#">Collaborations</a>
+
    </div>
+
  </div>
+
  <div class="dropdown">
+
    <button class="dropbtn">Notebook
+
    <i class="fa fa-caret-down"></i>
+
    </button>
+
    <div class="dropdown-content">
+
      <a href="#">Lab Records</a>
+
      <a href="#">Protocols</a>
+
      <a href="#">Recipes</a>
+
      <a href="#">Medal Criteria</a>
+
      <a href="#">Recipes</a>
+
    </div>
+
  </div> 
+
  <div class="dropdown">
+
    <button class="dropbtn">Team
+
    <i class="fa fa-caret-down"></i>
+
    </button>
+
    <div class="dropdown-content">
+
      <a href="team.html">The Team</a>
+
      <a href="#">Attributions</a>
+
    </div>
+
  </div> 
+
+
</div>
+
</div>
+

Latest revision as of 16:18, 28 October 2017