Difference between revisions of "Template:Linkoping Sweden/Header"

Line 1: Line 1:
−
{{Linkoping_Sweden/Style}} 
 
−
 
 
<html>
 
<html>
 +
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
</head>
  
 +
<body>
  
 +
<div class="header-outfill">
 +
</div>
 +
<!---------------Logo and social media------------------------------->
 +
<div class="logo-container">
 +
<div class="liu_igem_logo">
 +
<a href="https://2017.igem.org/Team:Linkoping_Sweden">
 +
<img alt="LiU iGEM" id="liu_igem_logo" src="https://static.igem.org/mediawiki/2017/c/c3/T--Linkoping_Sweden--Logo.jpg"/>
 +
</a>
 +
</div> <!--class="liu_igem_logo"-->
 +
 +
<div class="social-container">
 +
<a href="https://twitter.com/liuigem" target="_blank" title="Follow us on Twitter!">
 +
<img src="https://static.igem.org/mediawiki/2017/b/b9/T--Linkoping_Sweden--social_tweet_icon.png"/>
 +
</a>
 +
<a href="https://www.facebook.com/LiuIgem" target="_blank" title="Go give us a thumbs-up on Facebook!">
 +
<img src="https://static.igem.org/mediawiki/2017/d/d8/T--Linkoping_Sweden--social_fb_icon.png"/>
 +
</a>
 +
<a href="https://www.instagram.com/liu_igem/" target="_blank" title="Follow us on Instagram!">
 +
<img src="https://static.igem.org/mediawiki/2017/0/06/T--Linkoping_Sweden--social_insta_icon.png"/>
 +
</a>
 +
</div> <!--class="social-container"-->
 +
</div> <!--class="logo-container"-->
  
−
<!--------------------------------What's on top of the page---------------------------------------------->
+
<!------------------------------Navigation Bar----------------------------------------------------------->
−
  <div class="header"> <!-- Denna ser till att överdelen har max 1100px bredd -->
+
<div class="topnav" id="myTopnav"> <!-- For the entire menu bar, with the borders -->
−
    <div class="head-container">
+
−
      <a href="https://2017.igem.org/Team:Linkoping_Sweden">
+
<div class="mobile-menu">
−
      <img alt="Liu iGEM" id="liu_igem_logo" src="https://static.igem.org/mediawiki/2017/c/c3/T--Linkoping_Sweden--Logo.jpg"/>
+
−
      </a>
+
<center> <!-- Center the following dropdown-buttons -->
−
   
+
−
    <div class="social-container">    
+
<div class="topnav-bottom-content">  
−
      <div id="social-media">
+
−
          <a href="https://twitter.com/liuigem" target="_blank" title="Follow us on Twitter!">
+
<!-- Home! -->
−
          <img src="https://static.igem.org/mediawiki/2017/b/b9/T--Linkoping_Sweden--social_tweet_icon.png"/>
+
<div class="dropdown">
−
          </a>
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden">Home</a>
−
          <a href="https://www.facebook.com/LiuIgem" target="_blank" title="Go give us a thump-up on Facebook!">
+
</div>  
−
          <img src="https://static.igem.org/mediawiki/2017/d/d8/T--Linkoping_Sweden--social_fb_icon.png"/>
+
−
          </a>
+
−
          <a href="https://www.instagram.com/liu_igem/" target="_blank" title="Follow us on Instagram!">
+
−
          <img src="https://static.igem.org/mediawiki/2017/0/06/T--Linkoping_Sweden--social_insta_icon.png"/>
+
−
          </a>
+
−
      </div>
+
−
    </div>
+
−
  </div>
+
  
−
<!------------------------------Navigation Bar----------------------------------------------------------->
+
<!-- The Team! -->
−
<div class="menu_container">
+
<div class="dropdown">
−
 
+
<span>Team</span>
−
  <div class="topnav" id="myTopnav">
+
<div class="dropdown-content">
−
 
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Team">Team</a>
−
<div class="dropdown" >
+
<!-- <a href="https://2017.igem.org/Team:Linkoping_Sweden/Collaborations">Collaborations</a> -->
−
<span>The Project</span>
+
</div>
−
<div class="dropdown-content">
+
</div>
−
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Project">The Project</a>
+
−
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Description">Project Description</a>
+
<!-- The Project! -->
−
<a href="https://2017.igem.org/Team:Linkoping_Sweden/construct">Constructs</a>
+
<div class="dropdown">
−
                        <!--<a href="https://2017.igem.org/Team:Linkoping_Sweden/Protocols>Protocols</a>-->
+
<span>Project</span>
 +
<div class="dropdown-content">
 +
<!--FEL LÄNKNAMN!!! <a href="https://2017.igem.org/Team:Linkoping_Sweden/Modeling">Model</a> -->
 +
<!--INGEN STANDARDLÄNK <a href="https://2017.igem.org/Team:Linkoping_Sweden/Project">The Project</a> -->
 +
<!--<a href="https://2017.igem.org/Team:Linkoping_Sweden/Protocols>Protocols</a>-->
 +
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Description">Description</a>
 +
<!-- <a href="https://2017.igem.org/Team:Linkoping_Sweden/Design">Design</a> -->
 +
<!-- <a href="https://2017.igem.org/Team:Linkoping_Sweden/Experiments">Experiments</a> -->
 +
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Notebook">Notebook</a>
 +
<!-- <a href="https://2017.igem.org/Team:Linkoping_Sweden/Contribution">Contribution</a> -->
 +
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Model">Model</a>
 +
<!-- <a href="https://2017.igem.org/Team:Linkoping_Sweden/Results">Results</a> -->
 +
<!-- <a href="https://2017.igem.org/Team:Linkoping_Sweden/Demonstrate">Demonstrate</a> -->
 +
<!-- <a href="https://2017.igem.org/Team:Linkoping_Sweden/Improve">Improve</a> -->
 +
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Attributions">Attributions</a>
 +
 +
</div>
 +
</div>
 +
 +
<!-- Parts! -->
 +
<div class="dropdown">
 +
<span>Parts</span>
 +
<div class="dropdown-content">
 +
<!--<a href="https://2017.igem.org/Team:Linkoping_Sweden/construct">Constructs</a>-->
 +
<!--CONSTRUCTS SHALL BE INCLUDED IN ANY OF THE FOLLOWING LINKS BELOW!-->
 +
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Parts">Parts</a>
 +
<!-- <a href="https://2017.igem.org/Team:Linkoping_Sweden/Basic_Part">Basic Parts</a> -->
 +
<!-- <a href="https://2017.igem.org/Team:Linkoping_Sweden/Composite_Part">Composite Parts</a> -->
 +
<!-- <a href="https://2017.igem.org/Team:Linkoping_Sweden/Part_Collection">Part Collection</a> -->
 +
</div>
 
</div>
 
</div>
−
</div>
 
  
−
<div class="dropdown" >
+
<!-- Safety!
−
<span>The Team</span>
+
<div class="dropdown">
−
<div class="dropdown-content">
+
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Safety">Safety</a>
−
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Team">About us</a>
+
</div> -->
 +
 +
<!-- Human Practices! -->
 +
<div class="dropdown">
 +
<span>Human Practices</span>
 +
<div class="dropdown-content">
 +
<a href="https://2017.igem.org/Team:Linkoping_Sweden/Human_Practices">Overview</a>
 +
<a href="https://2017.igem.org/Team:Linkoping_Sweden/HP/Silver">Silver HP</a>
 +
<!-- <a href="https://2017.igem.org/Team:Linkoping_Sweden/HP/Gold_Integrated">Integrated and Gold</a> -->
 +
<!-- <a href="https://2017.igem.org/Team:Linkoping_Sweden/HP/Engagement">Public Engagement</a> -->
 +
</div>
 
</div>
 
</div>
−
</div>
+
 +
<!-- Contact us! -->
 +
<div class="dropdown">
 +
<a href="#">Contact us</a>
 +
</div>
 +
 +
<!-- JavaScript that is placed after all class="dropdown"! -->
 +
<a href="javascript:void(0);" style="font-size:2em;" class="icon" onclick="menuButton()">&#9776;</a> <!-- font-size gives the size of the three bar -->
 +
</center>
  
−
<div class="dropdown" >
 
−
          <span>Modeling</span>
 
−
          <div class="dropdown-content">
 
−
          <a href="https://2017.igem.org/Team:Linkoping_Sweden/Modeling">What</a>
 
−
          </div>
 
−
</div>
 
  
−
<div class="dropdown" >
+
</div> <!-- <div class="mobile-menu" -->
−
          <span>Human Practices</span>
+
</div> <!-- <div class="topnav" id="myTopnav"> -->
−
          <div class="dropdown-content">
+
−
          <a href="https://2017.igem.org/Team:Linkoping_Sweden/Human_Practices">Events</a>
+
−
          </div>
+
−
        </div>
+
−
  </div>
+
−
</div>  
+
 
</div>
 
</div>
−
<!------------JAVASCRIPT FÖR NAVIGATION BAR------------------------------>
 
−
 
−
<script>
 
−
 
−
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
 
−
function myFunction() {
 
−
    var x = document.getElementById("myTopnav");
 
−
    if (x.className === "topnav") {
 
−
        x.className += " responsive";
 
−
 
−
    } else {
 
−
        x.className = "topnav";
 
−
    }
 
−
}
 
−
 
−
</script>
 
−
</div> <!-- class="menu_container" -->
 
−
 
−
 
−
<!--------------------------------------------------------------------------------------------------------------->
 
−
 
−
<!--
 
−
<div class="col-2 sidenav">
 
−
<h3>Sidebar</h3>
 
−
</div> --->
 
−
 
−
</div> <!-- class="menu" -->
 
−
 
−
 
−
 
 
</html>
 
</html>

Revision as of 07:22, 3 August 2017