Difference between revisions of "Template:Freiburg/PageTest2"

Line 1: Line 1:
 +
{{Freiburg/CSSTest}}
 +
 
<html>
 
<html>
 
<head>
 
<head>
 +
<link rel="stylesheet" type="text/css"
 +
href="https://2017.igem.org/Template:Team:Freiburg/CSS?action=raw&ctype=text/css"/>
 +
<link rel="stylesheet" type="text/css"
 +
href="https://2017.igem.org/Template:Team:Freiburg/CSS:bootstrap?action=raw&ctype=text/css"/>
 +
<script type="text/javascript" src="https://2017.igem.org/Template:Team:Freiburg/JS:bootstrap?action=raw&ctype=text/javascript"></script>
 
</head>
 
</head>
−
<style type="text/css">
+
 
−
*{
+
 
−
  margin: 0;
+
<nav class="navbar navbar-default navbar-fixed-top">
−
  padding: 0;
+
    <div class="navbar-header">
−
}
+
        <img class="img-responsive" style="max-height: 70px" alt="Logo" src="https://static.igem.org/mediawiki/2017/1/12/T--Freiburg--UNI-LOGO.png.svg">
−
body{
+
    </div>
−
  background: w3-pale-green;
+
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
−
  font-size: 16px;
+
      <ul class="nav navbar-nav">
−
  font-family: sans-serif,arial;
+
 
−
}
+
        <li class="dropdown">
−
header{
+
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-
−
  width: 1000px;
+
          expanded="false">Project <span class="caret"></span></a>
−
  height: 120px;
+
          <ul class="dropdown-menu">
−
  margin: 0 auto;
+
            <li><a href="#">Introduction</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">AND-GATE</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">?</a></li>
 +
          </ul>
 +
        </li>
 +
       
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-
 +
          expanded="false">Results<span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="#">KO</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">CRE</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">HRE</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">CTLA4</a></li>
 +
          </ul>
 +
        </li>
 +
     
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-
 +
          expanded="false">Lab <span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="#">Cloning</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">KO</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">Modeling</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">Cell Culture</a></li>
 +
          </ul>
 +
        </li>
 +
     
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-
 +
          expanded="false">Human Practice <span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="#">Action</a></li>
 +
            <li><a href="#">Another action</a></li>
 +
            <li><a href="#">Something else here</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">Separated link</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">One more separated link</a></li>
 +
          </ul>
 +
        </li>
 +
 
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-
 +
          expanded="false">Team <span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="#">Action</a></li>
 +
            <li><a href="#">Another action</a></li>
 +
            <li><a href="#">Something else here</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">Separated link</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">One more separated link</a></li>
 +
          </ul>
 +
        </li>
 +
 
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-
 +
          expanded="false">? <span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="#">Action</a></li>
 +
            <li><a href="#">Another action</a></li>
 +
            <li><a href="#">Something else here</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">Separated link</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">One more separated link</a></li>
 +
          </ul>
 +
        </li>
 +
 
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-
 +
          expanded="false">?<span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="#">Action</a></li>
 +
            <li><a href="#">Another action</a></li>
 +
            <li><a href="#">Something else here</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">Separated link</a></li>
 +
            <li role="separator" class="divider"></li>
 +
            <li><a href="#">One more separated link</a></li>
 +
          </ul>
 +
        </li>
 +
      </ul>
 +
    </div>
 +
</nav>
 +
 
 +
</head>
 +
<style>
 +
.flex-container {
 +
    display: -webkit-flex;
 +
    display: flex;
 +
    margin: 50px;
 +
    height: 1000px;
 +
    background-color: #F5F5DC;
 
}
 
}
  
 +
.flex-item {
 +
    background-color: white;
 +
    width: 100px;
 +
    height: 100px;
 +
    margin: 10px;
 +
}
 +
</style>
 +
</head>
 
<body>
 
<body>
−
<header>
 
−
<header/>
 
  
−
<nav>
+
 
−
  <ul>
+
<div class="flex-container">
−
      <li><a href="#">Project</a></li>
+
  <div class="flex-item">Test 1</div>
−
      <li><a href="#">Results</a></li>
+
  <div class="flex-item">Test 2</div>
−
      <li><a href="#">Lab</a></li>
+
  <div class="flex-item">Test 3</div>
−
      <li><a href="#">Human Practice</a></li>
+
</div>
−
      <li><a href="#">Safety</a></li>
+
 
−
  </ul>
+
−
</nav>
+
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 13:24, 22 September 2017


Test 1
Test 2
Test 3