Difference between revisions of "Template:British Columbia/Header"

 
(47 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<head>
+
<meta charset="UTF-8">
−
  <title>Cascading Menus</title>
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
<style>
  
−
  <style>
+
html,body {font-family: GeosansLight; margin-top:-1.5px !important; border:0 !important;}
−
  * {
+
−
      margin: 0px;
+
−
      padding: 0px;
+
−
    }
+
−
 
+
−
  body {
+
−
      font-family: GeosansLight;
+
−
      background-color: #D9EDEB;
+
−
      padding: 50px;
+
−
      }
+
−
+
−
  h1 {
+
−
      text-align: center;
+
−
      border-bottom: 2px solid #009;
+
−
      margin-bottom: 50px;
+
−
      }
+
  
−
  /* rules for navigation menu */
+
.dropbtn {
−
  /* ==================================== */
+
    background-color: #D9EDEB;
−
+
    color: #808080;
−
  ul#navmenu, ul.sub1 {
+
    padding: 30px 20px;
−
      list-style-type: none;
+
    font-family:GeosansLight;
−
      }
+
    font-size: 18px;
 +
    letter-spacing: 1.5px;
 +
    -webkit-text-stroke: 0.9px;
 +
    border: 0;
 +
    margin-top: -1.5px;
 +
    height: 80px;
 +
}
  
−
  ul#navmenu li {
+
.dropdown {
−
    width: 125px;
+
    position: relative;
−
    text-align: center;
+
    display: inline-block;
−
    position: relative;
+
    float: right;
−
    float: left;
+
}
−
  }
+
  
−
  ul#navmenu a{
+
.dropdown-content {
−
    text-decoration: none;
+
    display: none;
−
    display: block;
+
    position: absolute;
−
    width: 125px;
+
    background-color: #45827A;
−
    height: 25px;
+
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
−
    line-height: 25px;
+
}
−
    background-color: #D9EDEB;
+
−
    }
+
  
−
  </style>
+
.dropdown-content a {
−
</head>
+
    color: white !important;
 +
    font-family: GeosansLight;
 +
    font-size: 17px;
 +
    letter-spacing: 1px;
 +
    padding: 6px 16px;
 +
    text-decoration: none !important;
 +
    display: block;
 +
    width:160px;
 +
    font-weight:normal !important;
 +
}
 +
 
 +
.dropdown-content a:hover {background-color: #22645B; -webkit-text-stroke: 0.8px;}
 +
 
 +
.dropdown:hover .dropdown-content {
 +
    display: block;
 +
}
 +
 
 +
.dropdown:hover .dropbtn {
 +
    background-color: #C4DFDD; color: black;
 +
} 
 +
 
 +
 
 +
</style>
 
<body>
 
<body>
  
−
<ul id="navmenu">
+
 
−
  <li><a href="#">hyperlink 1</a></li>
+
 
−
      <ul class="sub1">
+
<div class="dropdown">
−
          <li><a href="#">hyperlink 1.1</a></li>
+
  <button class="dropbtn">ACHIEVEMENTS</button>
−
          <li><a href="#">hyperlink 1.2</a></li>
+
</div>
−
          <li><a href="#">hyperlink 1.3</a></li>
+
 
−
          <li><a href="#">hyperlink 1.4</a></li>
+
<div class="dropdown">
−
      </ul>
+
  <button class="dropbtn">NOTEBOOK&#9662;</button>
−
  </li>
+
<div class="dropdown-content">
−
  <li><a href="#">hyperlink 2</a></li>
+
    <a href="#">PROTOCOLS</a>
−
  <li><a href="#">hyperlink 3</a></li>
+
    <a href="#">LAB BOOK</a>
−
      <ul class="sub1">
+
  </div>
−
          <li><a href="#">hyperlink 3.1</a></li>
+
</div>
−
          <li><a href="#">hyperlink 3.2</a></li>
+
 
−
          <li><a href="#">hyperlink 3.3</a></li>
+
<div class="dropdown">
−
          <li><a href="#">hyperlink 3.4</a></li>
+
  <button class="dropbtn">TEAM&#9662;</button>
−
      </ul>
+
  <div class="dropdown-content">
−
  </li>
+
    <a href="#">MEMBERS</a>
−
  <li><a href="#">hyperlink 4</a></li>
+
    <a href="#">ATTRIBUTIONS</a>
−
      <ul class="sub1">
+
    <a href="#">SPONSORS</a>
−
          <li><a href="#">hyperlink 4.1</a></li>
+
  </div>
−
          <li><a href="#">hyperlink 4.2</a></li>
+
</div>
−
          <li><a href="#">hyperlink 4.3</a></li>
+
 
−
          <li><a href="#">hyperlink 4.4</a></li>
+
<div class="dropdown">
−
      </ul>
+
  <button class="dropbtn"><img src=""/>HUMAN PRACTICES&#9662;</button>
−
  </li>
+
  <div class="dropdown-content">
−
  <li><a href="#">hyperlink 5</a></li>
+
    <a href="#">SILVER</a>
−
      <ul class="sub1">
+
    <a href="#">GOLD</a>
−
          <li><a href="#">hyperlink 5.1</a></li>
+
    <a href="#">EDUCATION & ENGAGEMENT</a>
−
          <li><a href="#">hyperlink 5.2</a></li>
+
    <a href="#">COLLABORATIONS</a>
−
          <li><a href="#">hyperlink 5.3</a></li>
+
  </div>
−
          <li><a href="#">hyperlink 5.4</a></li>
+
</div>
−
      </ul>
+
 
−
  </li>
+
<div class="dropdown">
−
</ul>
+
  <button class="dropbtn">MODEL</button>
 +
</div>
 +
 
 +
 
 +
<div class="dropdown">
 +
  <button class="dropbtn">PROJECT&#9662;</button>
 +
  <div class="dropdown-content">
 +
    <a href="https://2018.igem.org/Team:British_Columbia/Description">DESCRIPTION</a>
 +
    <a href="https://2018.igem.org/Team:British_Columbia/Naringenin">NARINGENIN</a>
 +
    <a href="https://2018.igem.org/Team:British_Columbia/Biosensor">BIOSENSOR</a>
 +
    <a href="https://2018.igem.org/Team:British_Columbia/Kaempferol">KAEMPFEROL</a>
 +
    <a href="https://2018.igem.org/Team:British_Columbia/Parts">PARTS</a>
 +
  </div>
 +
</div>
 +
 
 +
<div class="dropdown">
 +
  <button class="dropbtn"><img src="https://2018.igem.org/File:T--British_Columbia--general_logo.png" height=300px/></button>
 +
</div>
 +
 
 +
 
 +
 
 +
 
  
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 15:43, 20 August 2018

PROTOCOLS LAB BOOK
MEMBERS ATTRIBUTIONS SPONSORS
SILVER GOLD EDUCATION & ENGAGEMENT COLLABORATIONS
DESCRIPTION NARINGENIN BIOSENSOR KAEMPFEROL PARTS