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

Line 1: Line 1:
 +
<html>
 +
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<style>
 
<style>
/* Style The Dropdown Button */
 
 
.dropbtn {
 
.dropbtn {
     background-color: #4CAF50;
+
     background-color: #D9EDEB;
     color: white;
+
     color: grey;
 
     padding: 16px;
 
     padding: 16px;
     font-size: 16px;
+
    font-family:GeosansLight;
 +
     font-size: 20px;
 +
    letter-spacing: 1.5px;
 +
    -webkit-text-stroke: 1px;
 
     border: none;
 
     border: none;
     cursor: pointer;
+
     text-align: center;
 
}
 
}
  
/* The container <div> - needed to position the dropdown content */
 
 
.dropdown {
 
.dropdown {
 
     position: relative;
 
     position: relative;
 
     display: inline-block;
 
     display: inline-block;
 +
    text-align: center;
 
}
 
}
  
/* Dropdown Content (Hidden by Default) */
 
 
.dropdown-content {
 
.dropdown-content {
 
     display: none;
 
     display: none;
     position: absolute;
+
     position: inline-block;
     background-color: #f9f9f9;
+
     background-color: #45827A;
     min-width: 160px;
+
     width: 120px;
 
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 
     z-index: 1;
 
     z-index: 1;
 +
    text-align: center;
 
}
 
}
  
/* Links inside the dropdown */
 
 
.dropdown-content a {
 
.dropdown-content a {
     color: black;
+
     color: white;
 +
    font-family:GeosansLight;
 +
    font-size: 15px;
 +
    letter-spacing: 1px;
 +
    -webkit-text-stroke: 0.5px;
 
     padding: 12px 16px;
 
     padding: 12px 16px;
 
     text-decoration: none;
 
     text-decoration: none;
 
     display: block;
 
     display: block;
 +
    text-align: center;
 
}
 
}
  
/* Change color of dropdown links on hover */
+
.dropdown-content a:hover {background-color: #ddd;}
.dropdown-content a:hover {background-color: #f1f1f1}
+
  
/* Show the dropdown menu on hover */
+
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropdown-content {
+
 
    display: block;
+
.dropdown:hover .dropbtn {background-color: #3e8e41;}
 +
 
 +
.sticky {
 +
  position: fixed;
 +
  top: 0;
 +
  width: 100%;
 
}
 
}
  
/* Change the background color of the dropdown button when the dropdown content is shown */
+
.sticky + .content {
.dropdown:hover .dropbtn {
+
  padding-top: 60px;
    background-color: #3e8e41;
+
 
}
 
}
 +
 
</style>
 
</style>
 +
</head>
 +
<body>
 +
  
 
<div class="dropdown">
 
<div class="dropdown">
   <button class="dropbtn">Dropdown</button>
+
   <button class="dropbtn">Project</button>
 
   <div class="dropdown-content">
 
   <div class="dropdown-content">
     <a href="#">https://2018.igem.org/Team:British_Columbia</a>
+
     <a href="https://2018.igem.org/Team:British_Columbia/Description"><center>Description</center></a>
     <a href="#">https://2018.igem.org/Team:British_Columbia</a>
+
     <a href="https://2018.igem.org/Team:British_Columbia/Biosensor"><center>Biosensor</center></a>
    <a href="#">https://2018.igem.org/Team:British_Columbia</a>
+
 
   </div>
 
   </div>
 
</div>
 
</div>
 +
 +
</body>
 +
</html>

Revision as of 20:16, 18 August 2018