Team:UCL Academy/Project

From 2014hs.igem.org

(Difference between revisions)
(Created page with "<h1> Project </h1>")
Line 1: Line 1:
-
<h1> Project </h1>
+
<!doctype html>
 +
<html>
 +
<head>
 +
  <meta http-equiv="content-type" content="text/html; charset="utf-8">
 +
  <title>iGem slideshow stuff</title>
 +
  <meta name="viewport" content="width=device-width">
 +
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 +
 +
  <!-- CSS for slidesjs.com example -->
 +
  <link rel="stylesheet" href="css/example.css">
 +
  <link rel="stylesheet" href="css/font-awesome.min.css">
 +
  <!-- End CSS for slidesjs.com example -->
 +
  <!-- BEGIN Navigation bar CSS - This is where the magic happens -->
 +
  <link rel="stylesheet" href=".../navbar.css">
 +
  <!-- END Navigation bar CSS -->
 +
 
 +
  <!-- SlidesJS Required: Link to jQuery -->
 +
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 +
  <script src="js/jquery.slides.min.js"></script>
 +
  <!-- End SlidesJS Required -->
 +
 
 +
  <!-- BEGIN JavaScript -->
 +
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 +
  <script type="text/javascript">
 +
  $(document).ready(function(){
 +
 
 +
// Requried: Navigation bar drop-down
 +
$("nav ul li").hover(function() {
 +
$(this).addClass("active");
 +
$(this).find("ul").show().animate({opacity: 1}, 400);
 +
},function() {
 +
$(this).find("ul").hide().animate({opacity: 0}, 200);
 +
$(this).removeClass("active");
 +
});
 +
 +
// Requried: Addtional styling elements
 +
$('nav ul li ul li:first-child').prepend('<li class="arrow"></li>');
 +
$('nav ul li:first-child').addClass('first');
 +
$('nav ul li:last-child').addClass('last');
 +
$('nav ul li ul').parent().append('<span class="dropdown"></span>').addClass('drop');
 +
 +
});
 +
</script>
 +
<!-- END JavaScript -->
 +
 
 +
 
 +
  <style>
 +
    body {
 +
      -webkit-font-smoothing: antialiased;
 +
      font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
 +
      color: #232525;
 +
      padding-top:70px;
 +
    }
 +
 
 +
    #slides {
 +
      display: none
 +
    }
 +
 
 +
    #slides .slidesjs-navigation {
 +
      margin-top:5px;
 +
    }
 +
 
 +
    a.slidesjs-next,
 +
    a.slidesjs-previous,
 +
    a.slidesjs-play,
 +
    a.slidesjs-stop {
 +
      background-image: url(img/btns-next-prev.png);
 +
      background-repeat: no-repeat;
 +
      display:block;
 +
      width:12px;
 +
      height:18px;
 +
      overflow: hidden;
 +
      text-indent: -9999px;
 +
      float: left;
 +
      margin-right:5px;
 +
    }
 +
 
 +
    a.slidesjs-next {
 +
      margin-right:10px;
 +
      background-position: -12px 0;
 +
    }
 +
 
 +
    a:hover.slidesjs-next {
 +
      background-position: -12px -18px;
 +
    }
 +
 
 +
    a.slidesjs-previous {
 +
      background-position: 0 0;
 +
    }
 +
 
 +
    a:hover.slidesjs-previous {
 +
      background-position: 0 -18px;
 +
    }
 +
 
 +
    a.slidesjs-play {
 +
      width:15px;
 +
      background-position: -25px 0;
 +
    }
 +
 
 +
    a:hover.slidesjs-play {
 +
      background-position: -25px -18px;
 +
    }
 +
 
 +
    a.slidesjs-stop {
 +
      width:18px;
 +
      background-position: -41px 0;
 +
    }
 +
 
 +
    a:hover.slidesjs-stop {
 +
      background-position: -41px -18px;
 +
    }
 +
 
 +
    .slidesjs-pagination {
 +
      margin: 7px 0 0;
 +
      float: right;
 +
      list-style: none;
 +
    }
 +
 
 +
    .slidesjs-pagination li {
 +
      float: left;
 +
      margin: 0 1px;
 +
    }
 +
 
 +
    .slidesjs-pagination li a {
 +
      display: block;
 +
      width: 13px;
 +
      height: 0;
 +
      padding-top: 13px;
 +
      background-image: url(img/pagination.png);
 +
      background-position: 0 0;
 +
      float: left;
 +
      overflow: hidden;
 +
    }
 +
 
 +
    .slidesjs-pagination li a.active,
 +
    .slidesjs-pagination li a:hover.active {
 +
      background-position: 0 -13px
 +
    }
 +
 
 +
    .slidesjs-pagination li a:hover {
 +
      background-position: 0 -26px
 +
    }
 +
 
 +
    #slides a:link,
 +
    #slides a:visited {
 +
      color: #333
 +
    }
 +
 
 +
    #slides a:hover,
 +
    #slides a:active {
 +
      color: #9e2020
 +
    }
 +
 
 +
    .navbar {
 +
      overflow: hidden
 +
    }
 +
  </style>
 +
  <!-- End SlidesJS Optional-->
 +
 
 +
  <!-- SlidesJS Required: These styles are required if you'd like a responsive slideshow -->
 +
  <style>
 +
    #slides {
 +
      display: none
 +
    }
 +
 
 +
    .container {
 +
      margin: 0 auto
 +
    }
 +
 
 +
    /* For tablets & smart phones */
 +
    @media (max-width: 767px) {
 +
      body {
 +
        padding-left: 20px;
 +
        padding-right: 20px;
 +
      }
 +
      .container {
 +
        width: auto
 +
      }
 +
    }
 +
 
 +
    /* For smartphones */
 +
    @media (max-width: 480px) {
 +
      .container {
 +
        width: auto
 +
      }
 +
    }
 +
 
 +
    /* For smaller displays like laptops */
 +
    @media (min-width: 768px) and (max-width: 979px) {
 +
      .container {
 +
        width: 724px
 +
      }
 +
    }
 +
 
 +
    /* For larger displays */
 +
    @media (min-width: 1200px) {
 +
      .container {
 +
        width: 1170px
 +
      }
 +
    }
 +
  </style>
 +
  <!-- SlidesJS Required: -->
 +
</head>
 +
<body>
 +
<div class="wrapper">
 +
 +
<!-- BEGIN Dark navigation bar -->
 +
<nav class="dark">
 +
<ul class="clear">
 +
<li><a href="#">Home</a></li>
 +
<li><a href="#">About</a></li>
 +
<li><a href="#">Services</a>
 +
<ul>
 +
<li><a href="#">Branding</a></li>
 +
<li><a href="#">Print</a></li>
 +
<li><a href="#">Web</a></li>
 +
<li><a href="#">Marketing</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="#">Portfolio</a></li>
 +
<li><a href="#">Clients</a></li>
 +
<li><a href="#">Our blog</a></li>
 +
<li><a href="#">Downloads</a></li>
 +
<li><a href="#">Contact us</a></li>
 +
</ul>
 +
</nav>
 +
<!-- END Dark navigation bar -->
 +
 +
</div>
 +
  <!-- SlidesJS : Start Slideshow --> 
 +
  <div class="container">
 +
    <div id="slides">
 +
      <a href="#"><img src="img/example-slide-1.jpg"></a>
 +
      <a href="#"><img src="img/example-slide-2.jpg"></a>
 +
      <a href="#"><img src="img/example-slide-3.jpg"></a>
 +
      <a href="#"><img src="img/example-slide-4.jpg"></a>
 +
    </div>
 +
  </div>
 +
 
 +
 
 +
  <script>
 +
    $(function() {
 +
      $('#slides').slidesjs({
 +
        width: 940,
 +
        height: 528,
 +
        play: {
 +
          active: true,
 +
          auto: true,
 +
          interval: 4000,
 +
          swap: true
 +
        }
 +
      });
 +
    });
 +
  </script>
 +
  <!-- End SlidesJS Slideshow -->
 +
</body>
 +
</html>

Revision as of 15:59, 24 May 2014

<!doctype html> iGem slideshow stuff