Difference between revisions of "Team:UNOTT/NavBar"

Line 1: Line 1:
−
<html>
+
<!DOCTYPE html>
−
 
+
<html >
 
<head>
 
<head>
−
<link href="https://2017.igem.org/Team:UNOTT/Bootstrap?action=raw&ctype=text/css" rel="stylesheet">
+
  <meta charset="UTF-8">
−
<link href="https://2017.igem.org/Team:UNOTT/CSS?action=raw&ctype=text/css" rel="stylesheet">
+
  <title>Flexbox and Bootstrap Cover Page ( scroll spy and things )</title>
−
<link href="https://2017.igem.org/Team:UNOTT/BootstrapStyling rel="stylesheet">
+
  <meta name="viewport" content="width=device-width, initial-scale=1">
−
</head>
+
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  
 +
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
 +
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>
  
  
 +
<style>
 +
      @import url(https://fonts.googleapis.com/css?family=Lato:300,400,300italic,400italic);
 +
 +
      /* Base Styles
 +
      ===================================*/
 +
      body {
 +
      color: #183532;
 +
      font-family: 'Lato', sans-serif;
 +
      font-weight: 400;
 +
      line-height: 1.8;
 +
          background-color: #fff;
 +
      }
 +
 +
 +
      /* Layout Styles
 +
      ===================================*/
 +
      section:not(:first-of-type),
 +
      section:not(:nth-of-type(n2)) {
 +
      margin-top: 80px;
 +
      }
 +
      .section-two,
 +
      .section-three,
 +
      footer {
 +
      margin-top: 80px;
 +
      }
 +
 +
 +
      /* Nav / Navbar Styles
 +
      ===================================*/
 +
      .navbar {
 +
      background: transparent;
 +
      border-bottom: none;
 +
      padding: 30px 0 10px;
 +
      -webkit-transition-duration: 0.6s;
 +
              transition-duration: 0.6s;
 +
      }
 +
      .navbar-default .navbar-brand,
 +
      .navbar-default .navbar-nav>li>a {
 +
      color: #183532;
 +
      }
 +
      .navbar-default .navbar-nav>li {
 +
      margin-right: 8px;
 +
      }
 +
      .navbar-default .navbar-nav>li:last-of-type {
 +
      margin-right: 0;
 +
      }
 +
      .dropdown-menu,
 +
      .navbar-default .navbar-nav>li>a:hover,
 +
      .navbar-default .navbar-nav>.active>a,
 +
      .navbar-default .navbar-nav>.active>a:hover,
 +
      .navbar-default .navbar-nav>.active>a:focus,
 +
      .navbar-default .navbar-nav>.open>a,
 +
      .navbar-default .navbar-nav>.open>a:hover,
 +
      .navbar-default .navbar-nav>.open>a:focus {
 +
      background: rgba(24,53,50, 0.1);
 +
      }
 +
      .dropdown-menu {
 +
      padding: 8px;
 +
      box-shadow: none;
 +
      border: none;
 +
      }
 +
      .dropdown-menu li a {
 +
      padding: 4px 8px;
 +
      border-radius: 6px;
 +
      }
 +
      .nav-dropdown-scroll {
 +
      background: #e7eaea;
 +
      box-shadow: 0px 10px 9px rgba(0, 0, 0, 0.4);
 +
      }
 +
      .navbar-toggle,
 +
      .navbar-default .navbar-toggle:focus,
 +
      .navbar-default .navbar-toggle:hover {
 +
      background: #fff;
 +
      }
 +
 +
 +
      /* Cover / Jumbotron Styles
 +
      ===================================*/
 +
      section.cover {
 +
      padding-top: 70px;
 +
      background: url('https://static.igem.org/mediawiki/2017/1/16/T--UNOTT--Whitebg.png');
 +
      background-repeat: no-repeat;
 +
      background-size: cover;
 +
      height: 100vh;
 +
      display: -webkit-box;
 +
      display: -ms-flexbox;
 +
      display: flex;
 +
      }
 +
      .jumbotron {
 +
      -ms-flex-item-align: center;
 +
          -ms-grid-row-align: center;
 +
          align-self: center;
 +
      background: transparent;
 +
      color: #ffffff;
 +
      text-align: center;
 +
      width: 90%;
 +
      }
 +
      .jumbotron-btn {
 +
      background: #fff;
 +
      color: #111111;
 +
      }
 +
      .jumbotron-btn:hover {
 +
      background: rgb(24,53,50);
 +
      color: #fff;
 +
      border: 1px solid #fff;
 +
      }
 +
 +
 +
      /* Section One Styles
 +
      ===================================*/
 +
      .section-one-content {
 +
      padding: 40px 20px;
 +
      color: #ffffff;
 +
      font-weight: 300;
 +
      }
 +
      .section-one-content h1 {
 +
      margin: 0 0 20px;
 +
      }
 +
      #section-one-left {
 +
      background: #183532;
 +
      }
 +
      #section-one-middle {
 +
      background: #244F4A;
 +
      }
 +
      #section-one-right {
 +
      background: #2A5C56;
 +
      }
 +
 +
      .section-two,
 +
      .section-three {
 +
      background: #fff;
 +
      }
 +
 +
      /* CSS Image Styles
 +
      ====================================================*/
 +
      .css-img-wrapper {
 +
          display: -webkit-box;
 +
          display: -ms-flexbox;
 +
          display: flex;
 +
          -webkit-box-orient: vertical;
 +
          -webkit-box-direction: normal;
 +
              -ms-flex-direction: column;
 +
                  flex-direction: column;
 +
          -ms-flex-wrap: nowrap;
 +
              flex-wrap: nowrap;
 +
          -webkit-box-pack: center;
 +
              -ms-flex-pack: center;
 +
                  justify-content: center;
 +
          -ms-flex-line-pack: center;
 +
              align-content: center;
 +
          -webkit-box-align: center;
 +
              -ms-flex-align: center;
 +
                  align-items: center;
 +
      }
 +
      .img-designers,
 +
      .img-developers {
 +
      height: 400px;
 +
      width: 400px;
 +
      background-position: center center;
 +
      background-size: cover;
 +
      }
 +
      .img-designers {
 +
      background: #183532;
 +
      }
 +
      .img-developers {
 +
      background: #2A5C56;
 +
      }
 +
 +
 +
 +
      /* To Top Button Styles
 +
      ===================================*/
 +
      .top {
 +
      display: none;
 +
      background-color: #5C3359;
 +
      bottom: 2em;
 +
      color: #FFF;
 +
      opacity:0.8;
 +
      padding: 1.2em;
 +
      position: fixed;
 +
      right: 1.5em;
 +
      text-decoration: none;
 +
      -webkit-transition-duration: 1s;
 +
              transition-duration: 1s;
 +
      }
 +
      .top:hover {
 +
      opacity: 1;
 +
      -webkit-transition: 1s;
 +
      transition: 1s;
 +
      text-decoration: none;
 +
      color: #fff;
 +
      }
 +
 +
 +
      /* Footer Styles
 +
      ===================================*/
 +
      footer {
 +
      height: 200px;
 +
      width: 100%;
 +
      background: #283332;
 +
      }
 +
 +
 +
      /* Helpers for top position on internal page links
 +
      ====================================================*/
 +
      #spytop:before,
 +
      section:before {
 +
        display: block;
 +
        content: " ";
 +
        margin-top: -100px;
 +
        height: 100px;
 +
        visibility: hidden;
 +
      }
 +
 +
 +
      /* Media Styles
 +
      ===================================*/
 +
      @media (min-width: 480px) {
 +
      body {
 +
      font-size: 16px;
 +
      }
 +
      }
 +
      @media (min-width: 768px) {
 +
      .section-one-content {
 +
      padding: 40px 40px;
 +
      }
 +
      }
 +
      @media (min-width: 992px) {
 +
      .section-one-content {
 +
      padding: 40px 20px;
 +
      }
 +
      }
 +
      @media (min-width: 1200px) {
 +
      .section-one-content {
 +
      padding: 40px 40px;
 +
      }
 +
      }
 +
 +
 +
      /* jQuery Styles
 +
      ===================================*/
 +
      .navbar-scroll {
 +
      background: #ffffff;
 +
      padding: 0;
 +
      box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.4);
 +
      -webkit-transition-duration: 0.6s;
 +
              transition-duration: 0.6s;
 +
      }
 +
</style>
 +
 +
</head>
  
 
<body>
 
<body>
−
   <nav class="navbar navbar-default navbar-fixed-top" style=" padding-top: 15px;">
+
   <body data-spy="scroll" data-target="#myScrollspy" class="">
−
    <div class="container-fluid">
+
−
      <div class="navbar-header">
+
  
 +
<!-- Fixed Nav -->
 +
<nav class="navbar navbar-default navbar-fixed-top" id="myScrollspy">
 +
<div class="container">
 +
<div class="navbar-header">
 +
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
 +
<span class="sr-only">Toggle navigation</span>
 +
<span class="icon-bar"></span>
 +
<span class="icon-bar"></span>
 +
<span class="icon-bar"></span>
 +
</button>
 +
<a class="navbar-brand" href="#">Key. coli</a>
 +
</div>
 +
<div id="navbar" class="navbar-collapse collapse">
 +
<ul class="nav navbar-nav navbar-right">
 +
                    <li class="dropdown">
 +
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
 +
                            PROJECT <span class="caret"></span>
 +
                        </a>
 +
                        <ul class="dropdown-menu" role="menu">
 +
                            <li><a href="#">Bootstrap</a></li>
 +
                            <li><a href="#">WordPress</a></li>
 +
                            <li><a href="#">Treehouse</a></li>
 +
                            <li><a href="#">DigiMouse</a></li>
 +
                            <li><a href="#">CSS-Tricks</a></li>
 +
                        </ul>
 +
                            <li class="dropdown">
 +
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
 +
                                    LAB <span class="caret"></span>
 +
                                </a>
 +
                                <ul class="dropdown-menu" role="menu">
 +
                                    <li><a href="#">Bootstrap</a></li>
 +
                                    <li><a href="#">WordPress</a></li>
 +
                                    <li><a href="#">Treehouse</a></li>
 +
                                    <li><a href="#">DigiMouse</a></li>
 +
                                    <li><a href="#">CSS-Tricks</a></li>
 +
                                </ul>
 +
                                    <li class="dropdown">
 +
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
 +
                                            MODELLING <span class="caret"></span>
 +
                                        </a>
 +
                                        <ul class="dropdown-menu" role="menu">
 +
                                            <li><a href="#">Bootstrap</a></li>
 +
                                            <li><a href="#">WordPress</a></li>
 +
                                            <li><a href="#">Treehouse</a></li>
 +
                                            <li><a href="#">DigiMouse</a></li>
 +
                                            <li><a href="#">CSS-Tricks</a></li>
 +
                                        </ul>
  
 +
<li class="dropdown">
 +
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
 +
OUTREACH <span class="caret"></span>
 +
</a>
 +
<ul class="dropdown-menu" role="menu">
 +
<li><a href="#">Bootstrap</a></li>
 +
<li><a href="#">WordPress</a></li>
 +
<li><a href="#">Treehouse</a></li>
 +
<li><a href="#">DigiMouse</a></li>
 +
<li><a href="#">CSS-Tricks</a></li>
 +
</ul>
 +
                        <li class="dropdown">
 +
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
 +
                                TEAM <span class="caret"></span>
 +
                            </a>
 +
                            <ul class="dropdown-menu" role="menu">
 +
                                <li><a href="#">Bootstrap</a></li>
 +
                                <li><a href="#">WordPress</a></li>
 +
                                <li><a href="#">Treehouse</a></li>
 +
                                <li><a href="#">DigiMouse</a></li>
 +
                                <li><a href="#">CSS-Tricks</a></li>
 +
                            </ul>
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
</nav>
 +
<!-- //Close Fixed Nav -->
  
  
−
      </div>
+
<!-- Full Screen Landing Section -->
−
      <div class="navbar-header" style="padding-top: 15x; padding-left: 15px">
+
<section class="cover" id="spytop">
−
        <a class="navbar-logo" href="https://2017.igem.org/Team:UNOTT">
+
<div class="jumbotron">
−
          <image class="img-responsive" src="https://static.igem.org/mediawiki/2017/4/4b/University_of_Nottingham_Logo.png" height="200" width="200">
+
<h1 class="animated fadeInDownBig" style="color: #0236EE">KEY. COLI</h1>
−
        </a>
+
<p class="animated fadeInRightBig" style="color: #0236ee">By the University of Nottingham</p>
−
      </div>
+
<p class="animated fadeInLeftBig"><em></em></p>
  
−
      <div id="navbar" class="navbar-collapse collapse">
 
−
        <ul class="nav navbar-nav navbar-middle" style="margin-top: 15px;">
 
−
          <li class="dropdown">
 
−
            <a class="dropdown-toggle active" href="https://2017.igem.org/Team:UNOTT/Description">Project <span class="caret"></span></a>
 
−
            <ul class="dropdown-menu" style="left:0;">
 
−
              <li><a href="https://2017.igem.org/Team:UNOTT/Description">Description</a></li>
 
−
              <li><a href="https://2017.igem.org/Team:UNOTT/Results">Results</a></li>
 
−
              <li><a href="https://2017.igem.org/Team:UNOTT/Dunno">Proof</a></li>
 
−
              <li><a href="https://2017.igem.org/Team:UNOTT/Basic_Partt">Basic Parts</a></li>
 
−
              <li><a href="https://2017.igem.org/Team:UNOTT/Composite_Part">Composite Parts</a></li>
 
−
            </ul>
 
−
          </li>
 
  
 +
</div>
 +
</section>
 +
<!-- //Close Full Screen Landing Section -->
  
−
          <li class="dropdown">
 
−
            <a class="dropdown-toggle active" href="https://2017.igem.org/Team:UNOTT/Model">Modelling <span class="caret"></span></a>
 
−
            <ul class="dropdown-menu" style="left:0;">
 
−
              <li><a href="https://2017.igem.org/Team:UNOTT/Model">Overview</a></li>
 
−
              <li><a href="https://2017.igem.org/Team:UNOTT">Model Page 1</a></li>
 
−
              <li><a href="https://2017.igem.org/Team:UNOTT">Model Page 2</a></li>
 
  
−
            </ul>
+
<!-- Section One; as seen on many site 3 main option sections for content -->
−
          </li>
+
<section class="container-fluid section-one">
 +
<div class="row">
 +
<div class="col-md-4 section-one-content" id="section-one-left">
 +
<h1>What</h1>
 +
<p> A Bacterial securty system
 +
</p>
  
 +
</div>
  
−
          <li>
+
<div class="col-md-4 section-one-content" id="section-one-middle">
−
            <a class="dropdown-toggle active" href="https://2017.igem.org/Team:UNOTT">Add Page Here </a></li>
+
<h1>Why</h1>
 +
<p> To secure banks
 +
</p>
  
 +
</div>
  
−
          <li class="dropdown">
+
<div class="col-md-4 section-one-content" id="section-one-right">
−
            <a class="dropdown-toggle active" href="https://2017.igem.org/Team:UNOTT/Notebook">Notebook <span class="caret"></span></a>
+
<h1>How</h1>
−
            <ul class="dropdown-menu" style="left:0;">
+
<p>Using Random assortments of fluorescent proteins
−
              <li><a href="https://2017.igem.org/Team:UNOTT/Notebook">Lab book</a></li>
+
</p>
−
              <li><a href="https://2017.igem.org/Team:UNOTT/Experiments">Protocols</a></li>
+
−
              <li><a href="https://2017.igem.org/Team:UNOTT">Medal Criteria</a></li>
+
−
              <li><a href="https://2017.igem.org/Team:UNOTT">Brainstorm</a></li>
+
−
            </ul>
+
−
          </li>
+
  
−
          <li class="dropdown">
+
</div>
−
            <a class="dropdown-toggle active" href="https://2016.igem.org/Team:Imperial_College/Human_Practices">Human Practices <span class="caret"></span></a>
+
</div>
−
            <ul class="dropdown-menu">
+
</section>
−
              <li><a href="https://2017.igem.org/Team:UNOTT">Human Practices</a></li>
+
<!-- //Close Section One -->
−
              <li><a href="https://2017.igem.org/Team:UNOTT/HP/Gold_Integrated">Integrated Practices</a></li>
+
−
              <li><a href="https://2017.igem.org/Team:UNOTT/Engagement">Public Engagement</a></li>
+
−
              <li><a href="https://2017.igem.org/Team:UNOTT/Collaborations">Collaborations</a></li>
+
  
−
            </ul>
 
−
          </li>
 
  
−
          <li class="dropdown">
+
<!-- Section Two; a style feature I really like is 2 cols, 1 for text and 1 for a related image -->
−
            <a class="dropdown-toggle active" href="https://2017.igem.org/Team:UNOTT/Team">Team <span class="caret"></span></a>
+
<section class="container section-two" id="spydesingers">
−
            <ul class="dropdown-menu" style="text-align: right;">
+
<div class="row">
−
              <li><a href="https://2017.igem.org/Team:UNOTT/Team">Team</a></li>
+
<div class="col-md-6 to-match">
−
              <li><a href="https://2017.igem.org/Team:UNOTT/Attributions">Attributions</a></li>
+
<h2>About</h2>
 +
<article>
 +
<p>Recently, there has been a rise in cyber security breaches
 +
</p>
 +
                    <p>Companies are turning to physical security strategies involving biometric and digital keys to secure their clients' accounts.
 +
</p
 +
</article>
 +
</div>
 +
<div class="col-md-6 css-img-wrapper hidden-xs hidden-sm">
 +
<img class="img-responsive img-circle img-designers">
 +
</div>
 +
</section>
 +
<!--//Close Section Two -->
  
−
            </ul>
+
 
−
          </li>
+
<!--// Section Three; the main reason I like this format is the increase in white space -->
−
        </ul>
+
<section class="container section-three" id="spydevelopers">
−
      </div>
+
<div class="row">
−
      <!-- /.navbar-collapse -->
+
<div class="col-md-6 css-img-wrapper hidden-xs hidden-sm">
−
    </div>
+
<div class="img-circle img-responsive img-developers"></div>
−
    <!-- /.container-fluid -->
+
</div>
−
  </nav>
+
<div class="col-md-6">
 +
<h2></h2>
 +
<article>
 +
<p> Our solution: a randomly assorted biometric which utlises CRISPRi to synthesise a random fluorescent key in E. coli.
 +
                    </p>
 +
                    <p>
 +
 
 +
</article>
 +
</div>
 +
</div>
 +
</section>
 +
<!--//Close Section Three -->
 +
 
 +
<!-- Footer -->
 +
<footer>
 +
 
 +
<!-- Back to top link -->
 +
<a href="#spytop" class="top"><span class="glyphicon glyphicon-chevron-up"></span></a>
 +
<!-- //Close Back to top link -->
 +
 
 +
<div class="container">
 +
<h2>Footer</h2>
 +
</div>
 +
</footer>
 +
<!-- //Close Footer -->
 
</body>
 
</body>
 +
  <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.4/js/bootstrap.min.js'></script>
  
 +
    <script> $(window).resize(function() {
 +
  //update stuff
 +
});
 +
 +
//Change pos/background/padding/add shadow on nav when scroll event happens
 +
$(function(){
 +
var navbar = $('.navbar');
 +
var navDropdown = $('.dropdown-menu');
 +
 +
$(window).scroll(function(){
 +
if($(window).scrollTop() <= 40){
 +
navbar.removeClass('navbar-scroll');
 +
navDropdown.removeClass('nav-dropdown-scroll');
 +
$('.top').hide();
 +
} else {
 +
navbar.addClass('navbar-scroll');
 +
navDropdown.addClass('nav-dropdown-scroll');
 +
$('.top').show();
 +
}
 +
});
 +
$('.navbar-toggle').click(function(){
 +
if($(window).scrollTop() <= 40){
 +
  navbar.addClass('navbar-scroll');
 +
    }
 +
});
 +
});
 +
 +
 +
//Close collapse nav when scroll spy page link is clicked
 +
$('.navbar-nav a[href*="#spy"]').click(function(){
 +
$('.navbar-collapse').collapse('hide');
 +
if($(window).scrollTop() <= 40){
 +
  $('.navbar').removeClass('navbar-scroll');
 +
}
 +
});
 +
 +
 +
//Get height of col next to img col and apply a fixed height for flexbox to work correctly.
 +
$(function(){
 +
var flexColHeight = $('.to-match').height();
 +
var flexCol = $('.css-img-wrapper');
 +
 +
flexCol.css('height', flexColHeight);
 +
});
 +
 +
 +
//Smooth Scrolling For Internal Page Links
 +
$(function() {
 +
  $('a[href*=#spy]:not([href=#])').click(function() {
 +
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
 +
  var target = $(this.hash);
 +
  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
 +
  if (target.length) {
 +
$('html,body').animate({
 +
  scrollTop: target.offset().top
 +
}, 1000);
 +
return false;
 +
  }
 +
}
 +
  });
 +
});</script>
 +
 +
</body>
 
</html>
 
</html>

Revision as of 12:27, 20 October 2017

<!DOCTYPE html> Flexbox and Bootstrap Cover Page ( scroll spy and things )

KEY. COLI

By the University of Nottingham

What

A Bacterial securty system

Why

To secure banks

How

Using Random assortments of fluorescent proteins

About

Recently, there has been a rise in cyber security breaches

Companies are turning to physical security strategies involving biometric and digital keys to secure their clients' accounts.

Our solution: a randomly assorted biometric which utlises CRISPRi to synthesise a random fluorescent key in E. coli.

Footer