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

 
(39 intermediate revisions by 2 users not shown)
Line 4: Line 4:
  
 
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
−
<link href="https://fonts.googleapis.com/css?family=Bellefair" rel="stylesheet">
 
 
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:600" 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>
−
.nav-animation a:before
 
−
{
 
−
    position: absolute;
 
−
    top: 0px;
 
−
    left: 0px;
 
−
    width: 2px;
 
−
    height: 0px;
 
−
    background: #FFF;
 
−
    content: "";
 
−
    opacity: 1;
 
−
    transition: all 0.3s;
 
−
}
 
−
 
−
.nav-animation a:after
 
−
{
 
−
    position: absolute;
 
−
    top: 0px;
 
−
    left: 0px;
 
−
    width: 100%;
 
−
    height: 2px;
 
−
    background: #FFF;
 
−
    content: "";
 
−
    opacity: 1;
 
−
    transition: all 0.3s;
 
−
}
 
−
 
−
.nav-animation a:hover:before
 
−
{
 
−
    height: 100%;
 
−
}
 
−
 
−
.nav-animation a:hover:after
 
−
{
 
−
    opacity: 0;
 
−
    top: 100%;
 
−
}
 
  
 
#navbar  
 
#navbar  
Line 52: Line 16:
 
}
 
}
  
−
#navbar-fill {  
+
#navbar-fill {
 
   width:100%;  
 
   width:100%;  
−
  top: 0px;
 
 
   margin-top: 0px;
 
   margin-top: 0px;
−
   background-color: #142634;
+
   background-color: #333333;
−
  border-bottom-style: solid;
+
−
  border-bottom-color: #565045;
+
−
  border-bottom-width: 1px;
+
 
   z-index: 2;
 
   z-index: 2;
−
 
 
 
}
 
}
  
 
.dropbtn {
 
.dropbtn {
−
     background-color: #142634;
+
     background-color: #333333;
 
     color: white;
 
     color: white;
 
     width: 180px;
 
     width: 180px;
−
     padding: 10px;
+
     padding: 13px;
 
     font-size: 16px;
 
     font-size: 16px;
 
     border: none;
 
     border: none;
 
     cursor: pointer;
 
     cursor: pointer;
−
    font-family: 'Josefin Sans', sans-serif;
+
font-family: 'Montserrat', sans-serif;
  
 
    
 
    
Line 85: Line 44:
 
     position: relative;
 
     position: relative;
 
     display: inline-block;
 
     display: inline-block;
 +
    font-family: 'Montserrat', sans-serif;
 
}
 
}
  
Line 91: Line 51:
 
     position: absolute;
 
     position: absolute;
 
     width: 180px;
 
     width: 180px;
−
     background-color: #142634;
+
     background-color: #333333;
 
     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: 2;
 
     z-index: 2;
 
     text-align: center;
 
     text-align: center;
 +
    font-family: 'Montserrat', sans-serif;
 
}
 
}
  
Line 115: Line 76:
 
}
 
}
  
−
.dropdown-content a:hover {background-color:  #142634}
+
.dropdown-content a:hover {
 +
background-color:  #6e6e6e
 +
}
 +
 
 +
.dropdown:hover .dropdown-content {
 +
    display: block;
 +
}
 +
 
 +
.dropdown:hover .dropbtn {
 +
    background-color: #333333;
 +
}
  
−
.dropbtn a:before
+
div.animation a:before
 
{
 
{
 
     position: absolute;
 
     position: absolute;
 
     top: 0px;
 
     top: 0px;
 
     left: 0px;
 
     left: 0px;
−
     width: 2px;
+
     width: 1px;
 
     height: 0px;
 
     height: 0px;
 
     background: #FFF;
 
     background: #FFF;
Line 130: Line 101:
 
}
 
}
  
−
.dropbtn a:after
+
div.animation a:after
 
{
 
{
 
     position: absolute;
 
     position: absolute;
Line 136: Line 107:
 
     left: 0px;
 
     left: 0px;
 
     width: 100%;
 
     width: 100%;
−
     height: 2px;
+
     height: 1px;
 
     background: #FFF;
 
     background: #FFF;
 
     content: "";
 
     content: "";
Line 143: Line 114:
 
}
 
}
  
−
.dropbtn a:hover:before
+
div.animation a:hover:before
 
{
 
{
 
     height: 100%;
 
     height: 100%;
 
}
 
}
  
−
.dropbtn a:hover:after
+
div.animation a:hover:after
 
{
 
{
 
     opacity: 0;
 
     opacity: 0;
−
     top: 100%;
+
     top: 10%;
 
}
 
}
  
−
.dropdown:hover .dropdown-content {
 
−
    display: block;
 
−
}
 
  
−
.dropdown:hover .dropbtn {
 
−
    background-color:  #142634;
 
−
    background-color:  #142634;
 
−
}
 
 
</style>
 
</style>
 
</head>
 
</head>
Line 175: 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 186: 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/InterLab">Interlab Study</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/Protocols">Protocols</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/MedalCriteria">Medal Criteria</a>
+
<a style="font-family: 'Montserrat', sans-serif;" href="https://2017.igem.org/Team:TP-CC_San_Diego/MedalCriteria">Medal Criteria</a>
−
        <a href="https://2017.igem.org/Team:TP-CC_San_Diego/BrainStorm">Brainstorm</a>
+
 
   </div>
 
   </div>
 
</div>
 
</div>
Line 197: 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 207: 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">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">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>

Latest revision as of 12:57, 1 November 2017