Difference between revisions of "Team:Duesseldorf/Test2"

Line 1: Line 1:
 
<html>
 
<html>
 
 
<head>
 
<head>
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=no">
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=no">
 +
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:TU-Munich/TUM13_normalize.css?action=raw&ctype=text/css" />
 +
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:TU-Munich/TUM13_reset.css?action=raw&ctype=text/css" />
 
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
 
/***** Wiki CSS ******/
 
 
#sideMenu,
 
#top_title {display: none;}
 
body    {min-width: 1024px;padding: 0;margin: 0;background-color: red;}
 
                #content {width: 100%;;padding: 0; margin: 0; margin-top: -9px; background-color: blue;}
 
  
/***** Normalize *****/
 
html {
 
  -ms-text-size-adjust: 100%;
 
  -webkit-text-size-adjust: 100%;
 
}
 
/***** Page CSS ******/
 
 
* {
 
  -webkit-box-sizing: border-box;
 
  -moz-box-sizing: border-box;
 
  box-sizing: border-box
 
}
 
  
/* Nützliche Klassen*/
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+
<!-- Img Swap -->
.middle {
+
<script type="text/javascript">
  margin: auto;
+
$(document).ready(function() {
}
+
$('.sg-container').on('click', function() {
+
$(this).toggleClass('active');
.width {
+
});
  width: 80%;
+
});
margin: auto;
+
</script>
}
+
+
.top-padding {
+
  padding-top: 15px;
+
}
+
  
img {
 
  max-width: 100%;
 
  height: auto
 
}
 
/***** Navigation ****/
 
nav {width: 100%; padding: 0; margin-left: -21px;}
 
 
nav ul {
 
    list-style-type: none;
 
    list-style-image: none;
 
    margin: 0;
 
    padding: 0;
 
    overflow: hidden;
 
}
 
 
nav li {
 
    float: left;
 
}
 
 
nav li a, .dropbtn {
 
    display: inline-block;
 
    color: black;
 
    text-align: center;
 
    padding: 14px 16px;
 
    text-decoration: none;
 
}
 
 
nav li a:hover, .dropdown:hover .dropbtn {
 
    background-color: red;
 
}
 
 
nav li.dropdown {
 
    display: inline-block;
 
}
 
 
.dropdown-content {
 
    display: none;
 
    position: absolute;
 
    background-color: #f9f9f9;
 
    min-width: 160px;
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 
}
 
 
.dropdown-content a {
 
    color: black;
 
    padding: 12px 16px;
 
    text-decoration: none;
 
    display: block;
 
    text-align: left;
 
}
 
 
.dropdown-content a:hover {background-color: #f1f1f1}
 
 
.dropbox-content ul {
 
list-style-image: none;
 
}
 
 
.dropdown:hover .dropdown-content {
 
    display: block;
 
}
 
 
/******* Page *******/
 
.page {
 
  background-color: #ffffff;
 
  margin-bottom: 6%;
 
  padding-top: 4%;
 
  padding-bottom: 2%;
 
  overflow-x: auto;
 
}
 
 
.border {
 
  border-radius: 10px;
 
}
 
 
.shadow {
 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
 
}
 
/******* Banner *****/
 
 
.banner {
 
  background-color: #e6e6e6;
 
margin-bottom: 2%
 
}
 
 
</style>
 
 
</head>
 
</head>
 
<div id="Banner" class="banner middle width"><img src="https://static.igem.org/mediawiki/2016/9/9d/Optoptosis_logo_800x300_px.png">
 
</div>
 
<div class="page border shadow width">
 
<div class="width">
 
<nav>
 
<ul>
 
  <li><a href="#home">Home</a></li>
 
  <li><a href="#news">Project</a></li>
 
  <li class="dropdown"><a href="#" class="dropbtn">Achievements</a>
 
    <div class="dropdown-content">
 
      <a href="#">Results</a>
 
      <a href="#">Medal Fulfilment</a>
 
      <a href="#">Parts</a>
 
    </div>
 
  </li>
 
  <li><a href="#news">Cooperations</a></li>
 
  <li class="dropdown"><a href="#" class="dropbtn">Outreach</a>
 
    <div class="dropdown-content">
 
      <a href="#">Results</a>
 
      <a href="#">Medal Fulfilment</a>
 
      <a href="#">Parts</a>
 
    </div>
 
  </li>
 
  <li><a href="#news">Lab book</a></li>
 
  <li><a href="#news">Safety</a></li>
 
  <li class="dropdown"><a href="#" class="dropbtn">Team</a>
 
    <div class="dropdown-content">
 
      <a href="#">Results</a>
 
      <a href="#">Medal Fulfilment</a>
 
      <a href="#">Parts</a>
 
    </div>
 
  </li>
 
</ul>
 
</nav>
 
<h1> Öptogänätik </h1>
 
</div>
 
</div>
 
</html>
 

Revision as of 10:30, 3 October 2016