Difference between revisions of "Team:Dundee/home19"

(Blanked the page)
Line 1: Line 1:
 +
{{Team:Dundee/style.css}}
 +
<html>
 +
  <head>
 +
    <title>Dundee iGEM 2015</title>
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
    <!-- CSS and JS -->
 +
    <link href="css/bootstrap.css" rel="stylesheet">
 +
    <link href="css/style.css" rel="stylesheet">
 +
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
 +
    <link href="css/bootstrap-lightbox.css" rel="stylesheet" type="text/css"/>
 +
    <script src="js/jquery.js"></script>
  
 +
  </head>
 +
  <body>
 +
  <div id="page-wrap">
 +
    <header>
 +
    <a class="anchor" id="top"></a>
 +
      <div class="container">
 +
        <center>
 +
            <h1><img src="img/csi-dundee.png" alt="CSI:Dundee"</h1>
 +
            <h3><img src="img/the-forensic-toolkit.png" alt="The Forensic Toolkit"</h3>
 +
          <div style="margin-top:30px;">
 +
 +
<!---
 +
                  <a href="#" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#videoModal" data-theVideo="video/Episode 1.mp4" >Watch Our Introduction Video</a>
 +
 +
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
 +
  <div class="modal-dialog">
 +
    <div class="modal-content">
 +
      <div class="modal-body">
 +
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 +
        <div>
 +
          <iframe width="100%" height="350" src=""></iframe>
 +
        </div>
 +
      </div>
 +
    </div>
 +
  </div>
 +
</div>
 +
 +
-->
 +
 +
        </center>
 +
      </div>
 +
    </header>
 +
 +
    <div id="nav">
 +
    <nav class="navbar navbar-default navbar-static affix-top" role="navigation">
 +
      <!-- Brand and toggle get grouped for better mobile display -->
 +
      <div class="container">
 +
      <div class="navbar-header">
 +
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
 +
          <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="#"><img src="img/uod_crest.png" style="width:auto; height:20px;"> University of Dundee</a>
 +
      </div>
 +
 +
 +
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 +
        <ul class="nav navbar-nav">
 +
        </ul>
 +
        <ul class="nav navbar-nav navbar-right">
 +
          <li><a href="index.html">Home</a></li>
 +
          <!-- Team -->
 +
          <li class="dropdown">
 +
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team</a>
 +
            <ul class="dropdown-menu" style="left:0">
 +
              <li><a href="#">Action</a></li>
 +
              <li><a href="#">Another action</a></li>
 +
              <li><a href="#">Something else</a></li>
 +
              <li class="divider"></li>
 +
              <li><a href="#">Separated link</a></li>
 +
            </ul>
 +
          </li>
 +
          <!--- Project-->
 +
          <!--<li><a href="project.html">Project</a></li>-->
 +
          <li class="dropdown">
 +
            <a href="project.html" class="dropdown-toggle" data-toggle="dropdown">Project</a>
 +
            <ul class="dropdown-menu" style="left:0">
 +
              <li><a href="#">Abstract</a></li>
 +
              <li><a href="#">Data</a></li>
 +
              <li><a href="#">Lab Book</a></li>
 +
              <li><a href="#">Parts</a></li>
 +
              <li class="divider"></li>
 +
              <li><a href="#">Future Work</a></li>
 +
            </ul>
 +
          </li>
 +
          <!-- wetlab -->
 +
          <li class="dropdown">
 +
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Wetlab</a>
 +
            <ul class="dropdown-menu" style="left:0">
 +
              <li><a href="#">Action</a></li>
 +
              <li><a href="#">Another action</a></li>
 +
              <li><a href="#">Something else</a></li>
 +
              <li class="divider"></li>
 +
              <li><a href="#">Separated link</a></li>
 +
            </ul>
 +
          </li>
 +
          <!--- modelling -->
 +
          <li class="dropdown">
 +
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Modelling</a>
 +
            <ul class="dropdown-menu" style="left:0">
 +
              <li><a href="#">Action</a></li>
 +
              <li><a href="#">Another action</a></li>
 +
              <li><a href="#">Something else</a></li>
 +
              <li class="divider"></li>
 +
              <li><a href="#">Separated link</a></li>
 +
            </ul>
 +
          </li>
 +
          <!-- outreach -->
 +
          <li class="dropdown">
 +
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Outreach</a>
 +
            <ul class="dropdown-menu" style="left:0">
 +
              <li><a href="#">Action</a></li>
 +
              <li><a href="#">Another action</a></li>
 +
              <li><a href="#">Something else</a></li>
 +
              <li class="divider"></li>
 +
              <li><a href="#">Separated link</a></li>
 +
            </ul>
 +
          </li>
 +
        </ul>
 +
      </div><!-- /.navbar-collapse -->
 +
    </div>
 +
    </nav>
 +
  </div>
 +
 +
 +
<!-- button navigation -->
 +
<a class="anchor" id="selection"></a>
 +
    <section id="about" class="container">
 +
      <div class="row">
 +
        <div class="col-md-3">
 +
          <a href="#section1" class="scroll"><span class="glyphicon glyphicon-briefcase"></span></a> <br>
 +
          <h3>Forensic Toolkit</h3>
 +
          <p class="about-content">A collection of synthetically produced compounds to detect various compounds found at a crime scene.</p>
 +
        </div>
 +
        <div class="col-md-3">
 +
          <a href="#section2"><span class="glyphicon glyphicon-search" type="button" ></span></a> <br>
 +
          <h3>This bit</h3>
 +
          <p class="about-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a tincidunt elit. Aliquam porta nibh at enim luctus, auctor consequat dolor vehicula.</p>
 +
        </div>
 +
        <div class="col-md-3">
 +
          <a href="#section3"><span class="glyphicon glyphicon-eye-open"></span></a> <br>
 +
          <h3>Another bit</h3>
 +
          <p class="about-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a tincidunt elit. Aliquam porta nibh at enim luctus, auctor consequat dolor vehicula.</p>
 +
        </div>
 +
        <div class="col-md-3">
 +
          <a href="#section4"><span class="glyphicon glyphicon-user"></span></a> <br>
 +
          <h3>Find the bad guy</h3>
 +
          <p class="about-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a tincidunt elit. Aliquam porta nibh at enim luctus, auctor consequat dolor vehicula.</p>
 +
        </div>
 +
      </div>
 +
    </section>
 +
 +
 +
<a class="anchor" id="section1"></a>
 +
    <section id="about3">
 +
      <div class="container">
 +
        <div class="row">
 +
          <div class="col-md-6">
 +
            <img src="img/uod-logo.png" width="100%" height="auto" class="img-mockup">
 +
          </div>
 +
          <div class="col-md-6 feature">
 +
            <div class="row">
 +
              <div class="col-md-2">
 +
                <span class="glyphicon glyphicon-tint"></span>
 +
              </div>
 +
              <div class="col-md-10">
 +
                <h4>What it does</h4>
 +
                Praesent gravida justo quis faucibus vulputate. Cras hendrerit varius dui, a molestie ligula imperdiet quis.
 +
              </div>
 +
            </div>
 +
            <div class="row">
 +
              <div class="col-md-2">
 +
                <span class="glyphicon glyphicon-cloud"></span>
 +
              </div>
 +
              <div class="col-md-10">
 +
                <h4>How it does this</h4>
 +
                Praesent gravida justo quis faucibus vulputate. Cras hendrerit varius dui, a molestie ligula imperdiet quis.
 +
              </div>
 +
            </div>
 +
            <div class="row">
 +
              <div class="col-md-2">
 +
                <span class="glyphicon glyphicon-bell"></span>
 +
              </div>
 +
              <div class="col-md-10">
 +
                <h4>Uses</h4>
 +
                Praesent gravida justo quis faucibus vulputate. Cras hendrerit varius dui, a molestie ligula imperdiet quis.
 +
              </div>
 +
            </div>
 +
            <a href="" class="btn btn-primary btn-lg pull-right" role="button">Learn more</a>
 +
          </div>
 +
        </div>
 +
        <a style="margin-top:0px" href="#selection" class="btn btn-info btn-md pull-right" role="button">&uarr;</a>
 +
      </div>
 +
    </section>
 +
 +
    <!--
 +
   
 +
 +
<a class="anchor" id="section2"></a>
 +
    <section id="about3">
 +
      <div class="container">
 +
        <div class="row">
 +
          <div class="">
 +
              <img src="img/igem-sponsor.png" align="right" width="50%" height="auto" class="img-mockup">
 +
              </div>
 +
          <div class="col-md-6 feature" style="">
 +
            <div class="row">
 +
                <h4>What it does</h4>
 +
                <p>Praesent gravida justo quis faucibus vulputate. Cras hendrerit varius dui, a molestie ligula imperdiet quis. </p>
 +
                <h4> How it does this </h4>
 +
                <p>Praesent gravida justo quis faucibus vulputate. Cras hendrerit varius dui, a molestie ligula imperdiet quis.</p>
 +
              </div>           
 +
              <a href="" class="btn btn-primary btn-lg pull-right" role="button">Learn more</a>
 +
              </div>
 +
            </div>
 +
            <a style="margin-top:0px" href="#selection" class="btn btn-info btn-md pull-right" role="button">&uarr;</a>
 +
      </div>
 +
    </section>
 +
 +
 +
<a class="anchor" id="section3"></a>
 +
<section id="about3">
 +
      <div class="container">
 +
        <div class="row">
 +
          <div class="col-md-6">
 +
            <img src="" width="100%" height="100%" class="img-mockup">
 +
          </div>
 +
          <div class="col-md-6 feature">
 +
            <div class="row">
 +
              <div class="col-md-12">
 +
                <h4>What it does</h4>
 +
                Praesent gravida justo quis faucibus vulputate. Cras hendrerit varius dui, a molestie ligula imperdiet quis.Praesent gravida justo quis faucibus vulputate. Cras hendrerit varius dui, a molestie ligula imperdiet quis.Praesent gravida justo quis faucibus vulputate.
 +
                <br>
 +
                <br>
 +
                <h4>blalglglglgl</h4>
 +
                Cras hendrerit varius dui, a molestie ligula imperdiet quis.Praesent gravida justo quis faucibus vulputate. Cras hendrerit varius dui, a molestie ligula imperdiet quis.Praesent gravida justo quis faucibus vulputate. Cras hendrerit varius dui, a molestie ligula imperdiet quis.Praesent gravida justo quis faucibus vulputate. Cras hendrerit varius dui, a molestie ligula imperdiet quis.
 +
              </div>
 +
            </div>
 +
            <a href="" class="btn btn-primary btn-lg pull-right" role="button">Learn more</a>
 +
          </div>
 +
        </div>
 +
        <a style="margin-top:0px" href="#selection" class="btn btn-info btn-md pull-right" role="button">&uarr;</a>
 +
      </div>
 +
    </section>
 +
 +
<a class="anchor" id="section4"></a>
 +
    <section id="about3">
 +
      <div class="container">
 +
        <div class="row">
 +
          <div class="">
 +
              <img src="img/igem-sponsor.png" align="right" width="50%" height="auto" class="img-mockup">
 +
              </div>
 +
          <div class="col-md-6 feature" style="">
 +
            <div class="row">
 +
                <h4>What it does</h4>
 +
                <p>Praesent gravida justo quis faucibus vulputate. Cras hendrerit varius dui, a molestie ligula imperdiet quis. </p>
 +
                <h4> How it does this </h4>
 +
                <p>Praesent gravida justo quis faucibus vulputate. Cras hendrerit varius dui, a molestie ligula imperdiet quis.</p>
 +
              </div>           
 +
              <a href="" class="btn btn-primary btn-lg pull-right" role="button">Learn more</a>
 +
              </div>
 +
            </div>
 +
            <a style="margin-top:0px" href="#selection" class="btn btn-info btn-md pull-right" role="button">&uarr;</a>
 +
      </div>
 +
    </section>
 +
 +
    -->
 +
 +
  <section id="sponsor">
 +
    <div class="container">
 +
      <div class="row">
 +
        <div class="col-md-3">
 +
          <img class="igem-sponsor" src="./img/igem-sponsor.png">
 +
        </div>
 +
        <div class="col-md-3">
 +
          <img src="#">
 +
        </div>
 +
        <div class="col-md-3">
 +
          <img src="#">
 +
        </div>
 +
        <div class="col-md-3">
 +
          <img src="#">
 +
        </div>
 +
      </div>
 +
      <h3>Donec sed sapien</h3>
 +
      Morbi felis lectus, ultricies nec tellus eu, faucibus eleifend lectus. In molestie augue leo, id imperdiet ante imperdiet at. Quisque ultrices neque sit amet felis tincidunt tristique at sed nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut suscipit ut massa in ultricies. Nunc nec tincidunt nunc, ut consectetur lorem. Sed non justo nisl.
 +
      <div style="margin-top:40px;">
 +
        <a href="#" class="btn btn-primary btn-lg" role="button">Watch Our Introduction Video</a>
 +
        <a href="#top" class="btn btn-info btn-md" role="button">Back to the top</a>
 +
      </div>
 +
    </div>
 +
  </section>
 +
 +
  <footer>
 +
    <div class="container">
 +
      <div class="row">
 +
        <div class="col-md-3">
 +
          <h4>Dundee University</h4>
 +
          <p>Duis viverra suscipit vehicula. Aenean eu massa leo. Sed ullamcorper pretium risus eu scelerisque. Mauris venenatis consequat ultrices. Quisque fringilla sed lacus eu volutpat.</p>
 +
        </div>
 +
        <div class="col-md-3">
 +
          <h4>Social Media</h4>
 +
          <div class="row">
 +
            <div class="col-md-1"><span class="fa fa-youtube-play"></span></div>
 +
            <div class="col-md-10"><a href="http://www.youtube.com/blahblah">youtube.com/blahblah</a></div>
 +
          </div><br>
 +
          <div class="row">
 +
            <div class="col-md-1"><span class="fa fa-facebook-square"></span></div>
 +
            <div class="col-md-10"><a href="http://www.facebook.com/igemdundee2015">facebook.com/igemdundee2015</a></div>
 +
          </div><br>
 +
          <div class="row">
 +
            <div class="col-md-1"><span class="fa fa-twitter"></span></div>
 +
            <div class="col-md-10"><a href="http://www.twitter.com/dundeeigemteam">twitter.com/dundeeigemteam</a></div>
 +
      </div>
 +
    </div>
 +
  </footer> 
 +
 +
  <footer id="copyright">
 +
    <p>Dundee University</p>
 +
  </footer>
 +
 +
    <script src="js/jquery.js"></script>
 +
    <script src="js/bootstrap.min.js"></script>
 +
    <script>
 +
 +
 +
      $(function() {
 +
  $('a[href*=#]: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;
 +
      }
 +
    }
 +
  });
 +
});
 +
 +
      $(function() {
 +
  //navbar affix
 +
  $('#nav').affix({
 +
    offset: {
 +
      top: $('header').height()
 +
    }
 +
  });
 +
});
 +
 +
      $('#nav .navbar-nav li>a').click(function(){
 +
  var link = $(this).attr('href');
 +
  var posi = $(link).offset().top+20;
 +
  $('body,html').animate({scrollTop:posi},700);
 +
})
 +
    </script>
 +
 +
  </div>
 +
  </body>
 +
</html>

Revision as of 13:55, 17 June 2015