Difference between revisions of "Team:UNOTT/Template/NavBarTest"

Line 1: Line 1:
−
<html>
+
 
 +
<html >
 
<head>
 
<head>
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <link href="https://2017.igem.org/Team:UNOTT/Bootstrap?action=raw&ctype=text/css" rel="stylesheet">
 
   <link href="https://2017.igem.org/Team:UNOTT/Bootstrap?action=raw&ctype=text/css" rel="stylesheet">
−
  <link rel="stylesheet" href="css/style.css">
+
−
<link href="https://2017.igem.org/Team:UNOTT/CSS?action=raw&ctype=text/css" rel="stylesheet">
+
 
 +
<style>
 +
nav{
 +
height: 71px;
 +
 
 +
width: 100%;
 +
color: black;
 +
background: #ffff;
 +
font-family: 'Karla';
 +
text-transform:uppercase;
 +
 
 +
filter: none !important;
 +
box-shadow: 0 2px 15px rgba(0,0,0,0.25);
 +
-moz-box-shadow: 0 2px 15px rgba(0,0,0,0.25);
 +
-webkit-box-shadow: 0 2px 15px rgba(0,0,0,0.25);
 +
border-bottom: 1px solid rgba(0,0,0,0.2);
 +
 
 +
}
 +
 
 +
.navbar-default {
 +
  background-color: #ffff;
 +
  border-color: rgba(255, 255, 255, 0.3);
 +
  font-family: 'Karla', sans-serif;
 +
  font-weight: 300;
 +
  -webkit-transition: all 0.35s;
 +
  -moz-transition: all 0.35s;
 +
  transition: all 0.35s;
 +
  margin : 0 !important;
 +
}
 +
 
 +
.navbar-default .navbar-header .navbar-brand {
 +
  color: #white;
 +
  font-family: 'Karla', sans-serif;
 +
  font-weight: none;
 +
  font-size: 22px;
 +
  display: inline-block;
 +
  background: black
 +
}
 +
.navbar-default .navbar-header .navbar-toggle {
 +
  font-family: 'Karla', sans-serif;
 +
  font-weight: 400; bold;
 +
  font-size: 14px;
 +
  color: #white;
 +
  text-transform: uppercase;
 +
}
 +
 
 +
/* FONT */
 +
.navbar-default .nav > li > a,
 +
.navbar-default .nav > li > a:focus {
 +
  text-transform: uppercase;
 +
  font-family: 'Karla', sans-serif;
 +
  font-weight: bold;
 +
  font-size: 14px;
 +
  color: #white;
 +
}
 +
 
 +
.navbar-default .nav > li > a:hover,
 +
.navbar-default .nav > li > a:focus:hover {
 +
  color: #white;
 +
}
 +
 
 +
/*Navbar background colour*/
 +
 
 +
.navbar-default .nav > li.active > a,
 +
.navbar-default .nav > li.active > a:focus {
 +
  color: #CF5435 !important;
 +
  background-color: black;
 +
}
 +
 
 +
.navbar-default .nav > li.active > a:hover,
 +
.navbar-default .nav > li.active > a:focus:hover {
 +
  background-color: black;
 +
  border-left-color: black; border-top-color: black;
 +
}
 +
 
 +
.navbar-default .navbar-toggle {
 +
  border: none;
 +
}
 +
/*dropdown menu colours*/
 +
.navbar-default .dropdown-menu > li > a:hover,
 +
.navbar-default .dropdown-menu > li > a:focus {
 +
  background-color: #CDD7B6;
 +
  color: #blue;
 +
}
 +
 
 +
.navbar-default .dropdown-menu {
 +
  border: none;
 +
  outline: none;
 +
  font-family: 'Karla', sans-serif;
 +
  text-transform: uppercase;
 +
  font-weight: bold;
 +
  font-size: 14.2px !important;
 +
  color: #CF5435;
 +
}
 +
 
 +
.dropdown-header { font-size: 16px; color: black; padding-bottom: 1px;}
 +
.dropdown-menu {padding-bottom: 1px; padding-top: 0px;}
 +
/* Default Font and Sizing of Website */
 +
 
 +
@media screen and (max-width: 760px) {
 +
  /*Make dropdown links appear inline*/
 +
 
 +
 
 +
 
 +
nav ul {
 +
    position: static;
 +
    display: flex;
 +
    float: right;
 +
    margin: 0px;
 +
    margin-top:0px;
 +
    padding: 0px 0px;
 +
    justify-content:space-around;
 +
 
 +
}
 +
 
 +
  /*Create vertical spacing*/
 +
  li {
 +
    margin-bottom: 1px;
 +
  }
 +
  /*Make all menu links full width*/
 +
  ul li,
 +
  li a {
 +
    width: 100%;
 +
  }
 +
}
 +
 
 +
 
 +
/* Visiting Links */
 +
 
 +
 
 +
a:visited {
 +
  color: #333A56;
 +
}
 +
 
 +
.content {
 +
margin-top:50px;
 +
}
 +
 
 +
 
 +
 
 +
.red {
 +
  color: #EA3923;
 +
}
 +
 
 +
.blue {
 +
  color: #0C68E6;
 +
}
 +
 
 +
.darkblue {
 +
  color: #52658F;
 +
}
 +
 
 +
.yellow {
 +
  color: #FFDF1E;
 +
}
 +
 
 +
.green {
 +
  color: #32BE01;
 +
}
 +
 
 +
.cream {
 +
  color: #F7F5E6;
 +
}
 +
 
 +
.grey {
 +
  color: #E8E8E8;
 +
}
 +
 
 +
.darkgrey {
 +
  color: #8C8C8C;
 +
}
 +
 
 +
 
 +
 
 +
 
  
 +
.container {
 +
  margin-top:10px;
 +
}
  
 
</style>
 
</style>
Line 98: Line 276:
 
   </div>
 
   </div>
 
</div>
 
</div>
−
    
+
   <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
−
 
+
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
 
</nav>
 
</nav>
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 11:59, 25 August 2017