Difference between revisions of "Team:Oxford/Templates/Navi"

 
(554 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
<!DOCTYPE html>
+
{{Oxford/bootstrap}}
−
<html>
+
 
 +
<html lang="en">
 
<head>
 
<head>
 +
  <title>iGEM Oxford 2016 - Cure for Copper</title>
 +
  <meta charset="utf-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
−
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
−
<style type="text/css">
+
 
−
.bs-example{
+
 
−
margin: 20px;
+
 
−
     }
+
 
 +
<script type='text/javascript'>//<![CDATA[
 +
$(window).load(function(){
 +
$('a').click(function(){
 +
    $('html, body').animate({
 +
        scrollTop: $( $(this).attr('href') ).offset().top
 +
    }, 500);
 +
    return false;
 +
});
 +
});//]]>
 +
 
 +
</script>
 +
 
 +
<script type="text/javascript">
 +
$('body').scrollspy({
 +
    target: '.bs-docs-sidebar',
 +
    offset: 130
 +
});
 +
</script>
 +
 
 +
 
 +
<script type='text/javascript'>//<![CDATA[
 +
$(window).load(function(){
 +
$('a').click(function(){
 +
    $('html, body').animate({
 +
        scrollTop: $( $(this).attr('href') ).offset().top
 +
    }, 500);
 +
    return false;
 +
});
 +
});//]]>
 +
 
 +
</script>
 +
 
 +
<script type="text/javascript">
 +
$('body').scrollspy({
 +
    target: '.bs-docs-sidebar',
 +
    offset: 130
 +
});
 +
</script>
 +
 
 +
<style>
 +
 
 +
.row {
 +
background-color:#eef;
 +
}
 +
 
 +
figcaption {
 +
padding-top:10px;
 +
font-size:14px;
 +
font-style: italic;
 +
}
 +
 
 +
.navbar  {
 +
    margin-top: 16px;
 +
    position: fixed;
 +
    font-size: 13px;
 +
    background-color: #fff;
 +
    margin-bottom: 15;
 +
}
 +
 
 +
.navbar-toggle {
 +
  position: relative;
 +
  float: right;
 +
  padding: 9px 10px;
 +
  margin-top: 8px;
 +
  margin-right: 15px;
 +
  margin-bottom: 8px;
 +
  background-color: #fff;
 +
  background-image: none;
 +
  border: 1px solid #fff;
 +
  border-radius: 4px;
 +
}
 +
 
 +
.navbar-right li {
 +
    font-family: "Avenir",sans-serif;
 +
    color: #2800D7;
 +
}
 +
 
 +
.navbar-nav > li > a {
 +
    padding-left: 10px;
 +
    padding-right: 10px;
 +
}
 +
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav> .active > a:hover {
 +
    background-color: #fff;
 +
    color:#2800D7;
 +
}
 +
 
 +
.navbar-default .navbar-nav > .active {
 +
    background-color: #fff;
 +
 
 +
}
 +
 
 +
.navbar-default .navbar-brand {
 +
    font-weight: bold;
 +
    color: #2800D7;
 +
    /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2800D7));
 +
    -webkit-background-clip: text;
 +
    -webkit-text-fill-color: transparent;*/
 +
}
 +
 
 +
.navbar-default .navbar-brand:hover {
 +
    font-weight: bold;
 +
    color: #fa1e64;
 +
    /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2800D7));
 +
    -webkit-background-clip: text;
 +
    -webkit-text-fill-color: transparent;*/
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
section {padding-top: 100px; margin-top:-100px;}
 +
 
 +
.popover h2, .popover h3 {
 +
margin-top: 5px;
 +
padding-top: 0px;
 +
}
 +
 
 +
table {
 +
margin: auto;
 +
/*text-align: center;*/
 +
}
 +
 
 +
#banner {
 +
text-align: center;
 +
background-size: 100%; 
 +
margin-bottom:0px; padding-bottom:0px;
 +
background-repeat: no-repeat; padding-top:50px;
 +
text-align: center; height:350px;
 +
}
 +
 
 +
@media (max-width: 1200px) {
 +
  #banner {
 +
  margin-top: 70px;
 +
  height:250px;
 +
  }
 +
}
 +
 
 +
@media (max-width: 750px) {
 +
  #banner {
 +
  margin-top: 70px;
 +
  height:150px;
 +
  margin-bottom: -60px;
 +
  }
 +
}
 +
 
 +
.content-main {
 +
padding-top:0px;
 +
margin-top:0px;
 +
text-align: center;
 +
background-color: #eef !important;
 +
}
 +
 
 +
.content-right {
 +
padding-left: 60px; padding-right: 80px; padding-bottom: 50px;
 +
}
 +
 
 +
@media (min-width: 640px) {
 +
.div33 {width: 31%; float: left; margin-left: 1%; margin-right: 1%;}
 +
}
 +
@media (min-width: 640px) {
 +
.div50 {width: 48%; float: left; margin-left: 1%; margin-right: 1%;}
 +
}
 +
 
 +
#sidebar.affix {
 +
    top: 120px;
 +
}
 +
 
 +
@media (max-width: 910px) {
 +
  #sidebar {
 +
  display: none;
 +
  }
 +
}
 +
 
 +
 
 +
 
 +
/* sidebar */
 +
.bs-docs-sidebar {
 +
    margin-top: 20px;
 +
     margin-left: 0px;
 +
    padding-left: 0px;
 +
font-family:Arial, Avenir !important;
 +
text-align: left;
 +
}
 +
 
 +
/* all links */
 +
 
 +
.bs-docs-sidebar .nav>li {
 +
line-height:100%;     
 +
}
 +
 
 +
.bs-docs-sidebar .nav>li>a {
 +
    color: #555;
 +
    border-left: 2px solid transparent;
 +
    padding: 4px 10px;
 +
    font-size: 13px;
 +
}
 +
 
 +
/* nested links */
 +
.bs-docs-sidebar .nav .nav>li>a {
 +
    padding-top: 1px;
 +
    padding-bottom: 1px;
 +
    padding-left: 20px;
 +
    font-size: 12px;
 +
}
 +
 
 +
/* active & hover links */
 +
.bs-docs-sidebar .nav>.active>a,
 +
.bs-docs-sidebar .nav>li>a:hover,
 +
.bs-docs-sidebar .nav>li>a:focus {
 +
    color: #005;               
 +
    text-decoration: none;       
 +
    background-color: #fff;
 +
}
 +
/* all active links */
 +
.bs-docs-sidebar .nav>.active>a,
 +
.bs-docs-sidebar .nav>.active:hover>a,
 +
.bs-docs-sidebar .nav>.active:focus>a {
 +
    font-size: 15px;
 +
}
 +
/* nested active links */
 +
.bs-docs-sidebar .nav .nav>.active>a,
 +
.bs-docs-sidebar .nav .nav>.active:hover>a,
 +
.bs-docs-sidebar .nav .nav>.active:focus>a {
 +
    font-size: 12px;
 +
}
 +
 
 +
/* hide inactive nested list */
 +
.bs-docs-sidebar .nav ul.nav {
 +
    display: none;         
 +
}
 +
/* show active nested list */
 +
.bs-docs-sidebar .nav>.active>ul.nav {
 +
    display: block;         
 +
}
 +
 
 +
 
 
#sideMenu, #top_title {
 
#sideMenu, #top_title {
 
display: none;
 
display: none;
 
}
 
}
 +
body {
 +
font-family:Avenir !important;
 +
text-align: center;
 +
}
 +
 +
#content {
 +
width: 100%;
 +
margin: 0px;
 +
padding: 0px;
 +
background: #none;
 +
}
 +
.container-fluid img {
 +
margin: 5px;
 +
}
 +
 +
.pageTitle {
 +
font-size:80px;
 +
line-height: 100%;
 +
font-weight:bold;
 +
font-family:Avenir, Calibri, Arial !important;
 +
padding-top:60px;
 +
padding-bottom:20px;
 +
}
 +
 +
@media (max-width: 720px) {
 +
.pageTitle {
 +
font-size: 40px;
 +
}
 +
}
 +
 +
.pageTitleOrange
 +
{
 +
color: #ED7D31;
 +
}
 +
 +
.pageTitleBlue
 +
{
 +
color: #00B0F0;
 +
}
 +
 +
.pageTitleGreen
 +
{
 +
color: #3FC24A;
 +
}
 +
 +
 +
.pageTitlePurple
 +
{
 +
color: #D397E3;
 +
}
 +
 +
 +
.pageTitleNavy
 +
{
 +
color: #203A77;
 +
}
 +
 +
.pageTitleGold
 +
{
 +
color: #FFC935;
 +
}
 +
 +
.pageTitleSilver
 +
{
 +
color: #BFBEC0;
 +
}
 +
 +
 +
.container-fluid h1 {
 +
font-weight:bold;
 +
font-size:70px;
 +
font-family:Avenir, Calibri, Arial !important;
 +
padding-top: 100px; margin-top:-75px;
 +
padding-bottom:20px;
 +
}
 +
.container-fluid h2 {
 +
color: #A7689B;
 +
font-weight:bold;
 +
font-family:Avenir, Calibri, Arial !important;
 +
text-align:left;
 +
font-size:38px;
 +
padding-top: 100px; margin-top:-75px;
 +
padding-bottom:20px;
 +
}
 +
.container-fluid h3 {
 +
color: #BF78AE;
 +
text-decoration: bold;
 +
text-align:left;
 +
font-size:25px;
 +
font-family:Avenir, Calibri, Arial !important;
 +
padding-top: 100px; margin-top:-75px;
 +
padding-bottom:10px;
 +
}
 +
 +
@media (max-width: 600px) {
 +
.container-fluid h1 {
 +
font-size:40px;
 +
}
 +
.container-fluid h2 {
 +
font-size:30px;
 +
}
 +
.container-fluid h3 {
 +
font-size:24px;
 +
}
 +
}
 +
 +
 +
.h4Purple {
 +
color: #BF78AE;
 +
text-decoration: bold;
 +
font-style:italic;
 +
text-align:left;
 +
font-size:20px;
 +
font-family:Avenir, Calibri, Arial !important;
 +
line-height:170%;
 +
}
 +
 +
.container-fluid b {
 +
text-decoration: bold;
 +
font-family:Avenir, Calibri, Arial !important;
 +
}
 +
@media (max-width: 1150px) {
 +
  .caret {
 +
  display: none;
 +
  }
 +
}
 +
 +
 +
 +
#parent-banner {
 +
margin: 0px; padding: 15px 0px 30px;
 +
}
 +
 +
#parent-banner img {
 +
width: 100%;
 +
margin: 0px;
 +
}
 +
 +
#banner-discription {
 +
margin-left: 25px;
 +
margin-right: 25px;
 +
  border-radius: 10px;
 +
  background-color: #005;
 +
  padding-bottom: 10px;
 +
}
 +
 +
 +
#banner-discription h2 {
 +
color: #fff;
 +
border-color: #fff;
 +
}
 +
 +
/* #banner-discription p {
 +
color: #fff;
 +
} */
 +
#child-discription div {
 +
padding: 10px;
 +
}
 +
 +
#child-discription div div {
 +
border-radius: 10px;
 +
border: 2px solid #ddd;
 +
background-color: #ccc;
 +
}
 +
 +
#child-discription h2 {
 +
margin-top: -10px;
 +
color: #fff;
 +
text-align: center;
 +
border-color: #fff;
 +
}
 +
 +
/*
 +
#child-discription p {
 +
color: #fff;
 +
}
 +
*/
 +
 +
#child-discription a {
 +
text-decoration: none;
 +
}
 +
 +
 +
@media (min-width: 900px) {
 +
#parent-banner {
 +
position: relative;
 +
}
 +
#banner-discription {
 +
  margin: 50px 25px 50px;
 +
  padding: 20px;
 +
  position: absolute;
 +
  bottom: 0;
 +
  left: 0;
 +
  opacity: 0.7;
 +
}
 +
 +
#banner-discription h2 {
 +
color: #fff;
 +
opacity: 5.0;
 +
font-size: 24px;
 +
margin: 0px 0px 10px;
 +
padding: 0px;
 +
}
 +
/*
 +
#banner-discription p {
 +
color: #fff;
 +
opacity: 5.0;
 +
}
 +
*/
 +
 +
p
 +
{
 +
font-family:Avenir, Calibri, Arial !important;
 +
font-size: 18px !important;
 +
color: #3F3F3F;
 +
line-height:200%;
 +
margin-top:20px;
 +
margin-bottom:20px;
 +
}
 +
 +
.footnote
 +
{
 +
font-family:Avenir, Calibri, Arial !important;
 +
font-size: 12px !important;
 +
color: #3F3F3F;
 +
line-height:200%;
 +
margin-top:20px;
 +
margin-bottom:20px;
 +
}
 +
 +
.container-fluid li {
 +
font-family:Avenir, Calibri, Arial !important;
 +
list-style-type: square;
 +
text-align: left; !important;
 +
line-height:180%;
 +
font-size:16px !important;
 +
 +
}
 +
 +
.navFont
 +
{
 +
font-size:20px !important;
 +
}
 +
 +
.textLiFont
 +
{
 +
font-size:16px !important;
 +
font-family:Avenir, Calibri, Arial !important;
 +
color: #3F3F3F;
 +
line-height:200%;
 +
list-style-type: square;
 +
}
 +
 +
.container-fluid li li {
 +
list-style-type: circle;
 +
}
 +
 +
.nav li {
 +
list-style-type: none;
 +
font-size:20px !important;
 +
}
 +
 +
.nav li li {
 +
list-style-type: none;
 +
}
 +
 +
.navbar-header {
 +
background-color:#FFF;
 +
}
 +
 +
.references
 +
{
 +
font-size:8px !important;
 +
line-height:200% !important;
 +
}
 +
 +
</style>
 
</head>
 
</head>
 
<body>
 
<body>
  
−
<div class="container">
+
<nav class="navbar navbar-default navbar-fixed-top" style="margin-top: 10px; padding-top: 14px; height:80px; font-size:22px !important;">
−
  <h2>Dropdown Example</h2>
+
  <div class="container-fluid">
−
  <div class="dropdown">
+
    <div class="navbar-header">
−
    <button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">Dropdown Example
+
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
−
    <span class="caret"></span></button>
+
        <span class="icon-bar"></span>
−
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
+
        <span class="icon-bar"></span>
−
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
+
        <span class="icon-bar"></span>
−
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
+
      </button>
−
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
+
 
−
      <li role="presentation" class="divider"></li>
+
 
−
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
+
 
−
    </ul>
+
<a class="navbar-brand" href="https://2016.igem.org/Team:Oxford"><img src="https://static.igem.org/mediawiki/2016/thumb/a/af/T--Oxford--logofinal.png/800px-T--Oxford--logofinal.png" height="60" style="margin-left: 30px; margin-top:-16px;"/></a>
−
  </div><br>
+
 
−
  <p><strong>Note:</strong> The data-toggle="dropdown" attribute is required regardless of whether you call the dropdown() method.</p>
+
 
−
</div>
+
 
 +
<!--    <a class="navbar-brand" href="https://2016.igem.org/Team:Oxford"><img src="https://static.igem.org/mediawiki/2016/thumb/d/df/T--Oxford--logo.png/320px-T--Oxford--logo.png" height="60" style="margin-left: 30px; margin-top:-16px;"/></a>-->
 +
 
 +
 
 +
 
 +
    </div>
 +
    <div class="collapse navbar-collapse collapse" id="myNavbar" style="background-color: #fff;">
 +
      <ul class="nav navbar-nav">
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Project <span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Description">Description</a></li>
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Wilson_Disease">Wilson's Disease</a></li>
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Timeline">Timeline</a></li>
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Safety">Safety</a></li>
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Proof">Proof of Concept</a></li>
 +
 +
<li><a href="https://2016.igem.org/Team:Oxford/Achievements">Achievements</a></li>
 +
          </ul>
 +
        </li>
 +
 
 +
        <li class="dropdown">
 +
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Parts <span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
<li><a href="https://2016.igem.org/Team:Oxford/Parts">Parts Overview</a></li>           
 +
<li><a href="https://2016.igem.org/Team:Oxford/Basic_Part">Basic Part</a></li>
 +
<li><a href="https://2016.igem.org/Team:Oxford/Composite_Part">Composite Part</a></li>
 +
<li><a href="https://2016.igem.org/Team:Oxford/Part_Collection">Part Collection</a></li>
 +
<li><a href="https://2016.igem.org/Team:Oxford/CueR_MOI">CueR Mechanism</a></li>
 +
          </ul>
 +
        </li>
 +
 
 +
        <li class="dropdown">
 +
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Wet lab <span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Results">Overview and Results</a></li>
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Experiments">Experiments</a></li>
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Protocols">Protocols</a></li>
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Chemicals">Chemicals</a></li>
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Sequences">Sequences</a></li>
 +
            <li><a href="https://2016.igem.org/Team:Oxford/InterLab">InterLab Study</a></li>
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Notebook">Notebook</a></li>
 +
          </ul>
 +
        </li>
 +
 
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dry lab <span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Model">Modelling Overview</a></li>
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Model#ModelA">Reaction Kinetics</a></li>
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Model#ModelB">Promoter Characterisation</a></li>
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Model#ModelC">Copper Advection</a></li>
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Model#ModelD">Bacteria Distribution</a></li>
 +
          </ul>
 +
        </li>
 +
 
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Practices <span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Human_Practices">Human Practices</a></li>
 +
            <li><a href="https://2016.igem.org/Team:Oxford/HP/Silver">Silver Criterion</a></li>
 +
            <li><a href="https://2016.igem.org/Team:Oxford/HP/Gold">Gold Criterion</a></li>
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Integrated_Practices">Integrated Practices</a></li>
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Questionnaires">Surveys</a></li>
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Engagement">Engagement</a></li>
 +
          </ul>
 +
        </li>
 +
 
 +
        <li class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">People <span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Team">Team</a></li>
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Collaborations">Collaborations</a></li>
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Attributions">Attributions</a></li>
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Sponsors">Sponsors</a></li>
 +
            <li><a href="https://2016.igem.org/Team:Oxford/Contact">Contact Us</a></li>
 +
          </ul>
 +
        </li>
  
−
<script>
 
−
$(document).ready(function(){
 
−
    $(".dropdown-toggle").dropdown();
 
−
});
 
−
</script>
 
  
 +
      </ul>
 +
      <ul class="nav navbar-nav navbar-right">
 +
        <li><a href="https://oxfordigem2016.wordpress.com">Blog</a></li>
 +
<!--        <li><a href="https://www.gofundme.com/oxfordigem2016">Donate</a></li>-->
 +
      </ul>
 +
    </div>
 +
  </div>
 +
</nav>
 +
<!--<div style="height:50px;">&nbsp;</div>-->
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 00:30, 12 November 2016

iGEM Oxford 2016 - Cure for Copper