Difference between revisions of "Team:TP-CC San Diego/Templates/NavBar"

 
(217 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 +
{{:Team:TP-CC_San_Diego/Templates/MainCSS}}
 
<html>
 
<html>
 
<head>
 
<head>
 +
 +
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
 +
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:600" rel="stylesheet">
 +
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
 +
 
<style>
 
<style>
  
#home_logo, #sideMenu { display:none; }
+
#navbar
#sideMenu, #top_title, .patrollink  {display:none;}
+
{
        #navbar-fill { width:100%; padding:0px;  margin-top:-7px; background-color:#6c6f76;}
+
    margin: auto;
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
+
    width: 100%;
body {background-color:#2E323C; }
+
    text-align: center;
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
}
 +
 
 +
#navbar-fill {
 +
  width:100%;  
 +
  margin-top: 0px;
 +
  background-color: #333333;
 +
  z-index: 2;
 +
}
  
 
.dropbtn {
 
.dropbtn {
     background-color: #25274A;
+
     background-color: #333333;
     color: #ABD0BE;
+
     color: white;
     padding: 16px;
+
    width: 180px;
 +
     padding: 13px;
 
     font-size: 16px;
 
     font-size: 16px;
 
     border: none;
 
     border: none;
 
     cursor: pointer;
 
     cursor: pointer;
 +
font-family: 'Montserrat', sans-serif;
 +
 +
 
 +
}
 +
 +
button.dropbtn:hover
 +
{
 +
  background-color: black;
 
}
 
}
  
Line 22: Line 44:
 
     position: relative;
 
     position: relative;
 
     display: inline-block;
 
     display: inline-block;
 +
    font-family: 'Montserrat', sans-serif;
 
}
 
}
  
Line 27: Line 50:
 
     display: none;
 
     display: none;
 
     position: absolute;
 
     position: absolute;
     right: 0;
+
     width: 180px;
     background-color: #f9f9f9;
+
     background-color: #333333;
    min-width: 160px;
+
 
     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: 2;
 +
    text-align: center;
 +
    font-family: 'Montserrat', sans-serif;
 
}
 
}
  
.dropdown-content a {
 
    color: black;
 
    padding: 12px 16px;
 
    text-decoration: none;
 
    display: block;
 
}
 
  
 
#title
 
#title
 
{
 
{
     color: #ABD0BE;
+
     color: white;
 
     text-decoration: none;
 
     text-decoration: none;
 
}
 
}
  
.dropdown-content a:hover {background-color: #f1f1f1}
+
.dropdown-content a {
 +
  color: white;
 +
  border-bottom-style: solid;
 +
  border-bottom-color: white;
 +
  border-bottom-width: 1px;
 +
  padding: 12px 16px;
 +
  text-decoration: none;
 +
  display: block;
 +
  font-family: 'Raleway', sans-serif;
 +
}
 +
 
 +
.dropdown-content a:hover {
 +
background-color: #6e6e6e
 +
}
  
 
.dropdown:hover .dropdown-content {
 
.dropdown:hover .dropdown-content {
Line 54: Line 85:
  
 
.dropdown:hover .dropbtn {
 
.dropdown:hover .dropbtn {
     background-color: #3e8e41;
+
     background-color: #333333;
 
}
 
}
 +
 +
div.animation a:before
 +
{
 +
    position: absolute;
 +
    top: 0px;
 +
    left: 0px;
 +
    width: 1px;
 +
    height: 0px;
 +
    background: #FFF;
 +
    content: "";
 +
    opacity: 1;
 +
    transition: all 0.3s;
 +
}
 +
 +
div.animation a:after
 +
{
 +
    position: absolute;
 +
    top: 0px;
 +
    left: 0px;
 +
    width: 100%;
 +
    height: 1px;
 +
    background: #FFF;
 +
    content: "";
 +
    opacity: 1;
 +
    transition: all 0.3s;
 +
}
 +
 +
div.animation a:hover:before
 +
{
 +
    height: 100%;
 +
}
 +
 +
div.animation a:hover:after
 +
{
 +
    opacity: 0;
 +
    top: 10%;
 +
}
 +
 +
 
</style>
 
</style>
 
</head>
 
</head>
<div id="navbar-fill">
 
 
<body>
 
<body>
 +
<div id = "navbar">
 +
<div id="navbar-fill">
 +
<div class="dropdown nav-animation">
 +
  <a href = "https://2017.igem.org/Team:TP-CC_San_Diego"> <button class = "dropbtn" class id = "title" style = "color: white"> Home </button> </a>
  
<div class="dropdown">
 
  <button class = "dropbtn" class id = "title" href="https://2017.igem.org/Team:TP-CC_San_Diego">Home </a>
 
 
</div>
 
</div>
  
Line 68: Line 139:
 
   <button class="dropbtn"> Project </button>
 
   <button class="dropbtn"> Project </button>
 
   <div class="dropdown-content" style="left:0;">
 
   <div class="dropdown-content" style="left:0;">
<a href="https://2017.igem.org/Team:TP-CC_San_Diego/Description">Description</a>
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/Description">Description</a>
<a href="https://2017.igem.org/Team:TP-CC_San_Diego/Results">Results</a>
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/Results">Results</a>
        <a href="https://2017.igem.org/Team:TP-CC_San_Diego/Proof">Proof</a>
+
 
         <a href="https://2017.igem.org/Team:TP-CC_San_Diego/BasicParts">Basic Parts</a>
+
         <a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/Model">Modeling</a>
        <a href="https://2017.igem.org/Team:TP-CC_San_Diego/Modelling">Modelling</a>
+
 
   </div>
 
   </div>
 
</div>
 
</div>
Line 79: Line 149:
 
   <button class="dropbtn"> Notebook </button>
 
   <button class="dropbtn"> Notebook </button>
 
   <div class="dropdown-content">
 
   <div class="dropdown-content">
<a href="https://2017.igem.org/Team:TP-CC_San_Diego/LabBook">Lab Notebook</a>
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/LabBook">Lab Notebook</a>
<a href="https://2017.igem.org/Team:TP-CC_San_Diego/Protocols">Protocols</a>
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/InterLab">Interlab Study</a>
<a href="https://2017.igem.org/Team:TP-CC_San_Diego/MedalCriteria">Medal Criteria</a>
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/Protocols">Protocols</a>
        <a href="https://2017.igem.org/Team:TP-CC_San_Diego/BrainStorm">Brainstorm</a>
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/MedalCriteria">Medal Criteria</a>
 
   </div>
 
   </div>
 
</div>
 
</div>
Line 89: Line 159:
 
   <button class="dropbtn"> Human Practices </button>
 
   <button class="dropbtn"> Human Practices </button>
 
   <div class="dropdown-content">
 
   <div class="dropdown-content">
<a href="https://2017.igem.org/Team:TP-CC_San_Diego/HumanPractices">Human Practices</a>
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/HP/Silver">Human Practices</a>
<a href="https://2017.igem.org/Team:TP-CC_San_Diego/IntegratedPractices">Integrated Practices</a>
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/HP/Gold_Integrated">Integrated Practices</a>
<a href="https://2017.igem.org/Team:TP-CC_San_Diego/PublicEngagement">Public Engagement</a>
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/Collaborations">Collaborations</a>
<a href="https://2017.igem.org/Team:TP-CC_San_Diego/Collaborations">Collaborations</a>
+
 
   </div>
 
   </div>
 
</div>
 
</div>
Line 99: Line 168:
 
   <button class="dropbtn"> Team </button>
 
   <button class="dropbtn"> Team </button>
 
   <div class="dropdown-content">
 
   <div class="dropdown-content">
<a href="https://2017.igem.org/Team:TP-CC_San_Diego/Team"></a>Team</a>
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/Team">Team</a>
         <a href="https://2017.igem.org/Team:TP-CC_San_Diego/Attributions"></a>Attributions</a>
+
         <a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/Attributions">Attributions</a>
 
   </div>
 
   </div>
 
</div>
 
</div>
 +
 +
</div>
 +
 +
 
</div>
 
</div>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 12:57, 1 November 2017