Team:Sheffield/project

From 2014.igem.org

(Difference between revisions)
 
(17 intermediate revisions not shown)
Line 1: Line 1:
{{Team:Sheffield}}
{{Team:Sheffield}}
-
<!DOCTYPE HTML>
+
 
<html>
<html>
-
<head>
+
<head>
-
<title>Pinball Website Template | Home :: w3layouts</title>
+
<title></title>
-
<link href="./css/style.css" rel='stylesheet' type='text/css' />
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<meta name="viewport" content="width=device-width, initial-scale=1">
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-
<link rel="shortcut icon" type="image/x-icon" href="./images/fav-icon.png" />
+
<link href="https://2014.igem.org/Team:Sheffield/Template:menustyle.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" media="all"/>
-
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
+
 
-
</script>
+
<link href='http://fonts.googleapis.com/css?family=Baumans' rel='stylesheet' type='text/css'>
-
<!----webfonts---->
+
  <script>
-
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
+
jQuery(function(){
-
<!----//webfonts---->
+
-
<!-- Global CSS for the page and tiles -->
+
jQuery('#camera_wrap_1').camera({
-
  <link rel="stylesheet" href="./css/main.css">
+
thumbnails: true
-
  <!-- //Global CSS for the page and tiles -->
+
-
<!---start-click-drop-down-menu----->
+
-
<script src="./js/jquery.min.js"></script>
+
-
        <!----start-dropdown--->
+
-
        <script type="text/javascript">
+
-
var $ = jQuery.noConflict();
+
-
$(function() {
+
-
$('#activator').click(function(){
+
-
$('#box').animate({'top':'0px'},500);
+
-
});
+
-
$('#boxclose').click(function(){
+
-
$('#box').animate({'top':'-700px'},500);
+
-
});
+
-
});
+
-
$(document).ready(function(){
+
-
//Hide (Collapse) the toggle containers on load
+
-
$(".toggle_container").hide();
+
-
//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
+
-
$(".trigger").click(function(){
+
-
$(this).toggleClass("active").next().slideToggle("slow");
+
-
return false; //Prevent the browser jump to the link anchor
+
-
});
+
-
+
});
});
-
</script>
+
});
-
        <!----//End-dropdown--->
+
</script>
-
<!---//End-click-drop-down-menu----->
+
 
-
</head>
+
 
-
<body>
+
 
-
<!---start-wrap---->
+
 
-
<!---start-header---->
+
</head>
-
<div class="header">
+
 
-
<div class="wrap">
+
 
-
<div class="logo">
+
 
-
<a href="index.html"><img src="./images/logo.png" title="pinbal" /></a>
+
<body>
-
</div>
+
  <div class="header">
-
<div class="nav-icon">
+
  <div class="header_top">
-
<a href="#" class="right_bt" id="activator"><span> </span> </a>
+
        <div class="wrap">
-
</div>
+
<div class="logo">
-
<div class="box" id="box">
+
<a href="index.html"><h1><span class="black"></span></h1></a>
-
<div class="box_content">                              
+
</div>
-
<div class="box_content_center">
+
<div class="menu">
-
<div class="form_content">
+
    <ul>
-
<div class="menu_box_list">
+
<li><a href="https://2014.igem.org/Team:Sheffield/tmp">Home</a></li>
-
<ul>
+
<li><a href="https://2014.igem.org/Team:Sheffield/team">Team</a></li>
-
<li><a href="#"><span>home</span></a></li>
+
<li class="active"><a href="https://2014.igem.org/Team:Sheffield/project">Project</a></li>
-
<li><a href="#"><span>About</span></a></li>
+
<li><a href="https://2014.igem.org/Team:Sheffield/modelling">Modelling</a></li>
-
<li><a href="#"><span>Works</span></a></li>
+
<li><a href="https://2014.igem.org/Team:Sheffield/pp">Policy&Practices</a></li>
-
<li><a href="#"><span>Clients</span></a></li>
+
                                                        <li><a href="https://2014.igem.org/Team:Sheffield/notebook">Notebook</a></li>
-
<li><a href="#"><span>Blog</span></a></li>
+
                                                        <li><a href="https://2014.igem.org/Team:Sheffield/attribution">Attribution</a></li>
-
<li><a href="contact.html"><span>Contact</span></a></li>
+
<div class="clear"></div>
-
<div class="clear"> </div>
+
-
</ul>
+
-
</div>
+
-
<a class="boxclose" id="boxclose"> <span> </span></a>
+
-
</div>                                 
+
-
</div>
+
-
</div>  
+
-
</div>        
+
-
<div class="top-searchbar">
+
-
<form>
+
-
<input type="text" /><input type="submit" value="" />
+
-
</form>
+
-
</div>
+
-
<div class="userinfo">
+
-
<div class="user">
+
-
<ul>
+
-
<li><a href="#"><img src="./images/user-pic.png" title="user-name" /><span>Ipsum</span></a></li>
+
</ul>
</ul>
-
</div>
+
</div>
-
</div>
+
    <div class="clear"></div>
-
<div class="clear"> </div>
+
        </div>
-
</div>
+
    </div>
-
</div>
+
</div>
-
<!---//End-header---->
+
<div id="firstSection">
-
<!---start-content---->
+
</div>
-
<div class="content">
+
 
-
<div class="wrap">
+
<div id="secondSection">
-
<div id="main" role="main">
+
</div>
-
      <ul id="tiles">
+
 
-
        <!-- These are our grid blocks -->
+
<div id="thirdSection">
-
        <li onclick="location.href='single-page.html';">
+
</div>
-
        <img src="./images/img1.jpg" width="200" height="200">
+
 
-
        <div class="post-info">
+
<div id="fourthSection">
-
        <div class="post-basic-info">
+
</div>
-
        <h3><a href="#">Animation films</a></h3>
+
 
-
        <span><a href="#"><label> </label>Movies</a></span>
+
 
-
        <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
+
</body>
-
        </div>
+
-
        <div class="post-info-rate-share">
+
-
        <div class="rateit">
+
-
        <span> </span>
+
-
        </div>
+
-
        <div class="post-share">
+
-
        <span> </span>
+
-
        </div>
+
-
        <div class="clear"> </div>
+
-
        </div>
+
-
        </div>
+
-
        </li>
+
-
        <li onclick="location.href='single-page.html';">
+
-
        <img src="./images/img2.jpg" width="200" height="299">
+
-
<div class="post-info">
+
-
        <div class="post-basic-info">
+
-
        <h3><a href="#">Animation films</a></h3>
+
-
        <span><a href="#"><label> </label>Movies</a></span>
+
-
        <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
+
-
        </div>
+
-
        <div class="post-info-rate-share">
+
-
        <div class="rateit">
+
-
        <span> </span>
+
-
        </div>
+
-
        <div class="post-share">
+
-
        <span> </span>
+
-
        </div>
+
-
        <div class="clear"> </div>
+
-
        </div>
+
-
        </div>
+
-
</li>
+
-
        <li onclick="location.href='single-page.html';">
+
-
        <img src="./images/img3.jpg" width="200" height="214">
+
-
        <div class="post-info">
+
-
        <div class="post-basic-info">
+
-
        <h3><a href="#">Animation films</a></h3>
+
-
        <span><a href="#"><label> </label>Movies</a></span>
+
-
        <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
+
-
        </div>
+
-
        <div class="post-info-rate-share">
+
-
        <div class="rateit">
+
-
        <span> </span>
+
-
        </div>
+
-
        <div class="post-share">
+
-
        <span> </span>
+
-
        </div>
+
-
        <div class="clear"> </div>
+
-
        </div>
+
-
        </div>
+
-
        </li>
+
-
        <li onclick="location.href='single-page.html';">
+
-
        <img src="./images/img4.jpg" width="200" height="333">
+
-
        <div class="post-info">
+
-
        <div class="post-basic-info">
+
-
        <h3><a href="#">Animation films</a></h3>
+
-
        <span><a href="#"><label> </label>Movies</a></span>
+
-
        <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
+
-
        </div>
+
-
        <div class="post-info-rate-share">
+
-
        <div class="rateit">
+
-
        <span> </span>
+
-
        </div>
+
-
        <div class="post-share">
+
-
        <span> </span>
+
-
        </div>
+
-
        <div class="clear"> </div>
+
-
        </div>
+
-
        </div>
+
-
        </li>
+
-
        <!----//--->
+
-
        <li onclick="location.href='single-page.html';">
+
-
        <img src="./images/img4.jpg" width="200" height="333">
+
-
        <div class="post-info">
+
-
        <div class="post-basic-info">
+
-
        <h3><a href="#">Animation films</a></h3>
+
-
        <span><a href="#"><label> </label>Movies</a></span>
+
-
        <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
+
-
        </div>
+
-
        <div class="post-info-rate-share">
+
-
        <div class="rateit">
+
-
        <span> </span>
+
-
        </div>
+
-
        <div class="post-share">
+
-
        <span> </span>
+
-
        </div>
+
-
        <div class="clear"> </div>
+
-
        </div>
+
-
        </div>
+
-
        </li>
+
-
        <li onclick="location.href='single-page.html';">
+
-
        <img src="./images/img3.jpg" width="200" height="214">
+
-
        <div class="post-info">
+
-
        <div class="post-basic-info">
+
-
        <h3><a href="#">Animation films</a></h3>
+
-
        <span><a href="#"><label> </label>Movies</a></span>
+
-
        <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
+
-
        </div>
+
-
        <div class="post-info-rate-share">
+
-
        <div class="rateit">
+
-
        <span> </span>
+
-
        </div>
+
-
        <div class="post-share">
+
-
        <span> </span>
+
-
        </div>
+
-
        <div class="clear"> </div>
+
-
        </div>
+
-
        </div>
+
-
        </li>
+
-
        <li onclick="location.href='single-page.html';">
+
-
        <img src="./images/img2.jpg" width="200" height="299">
+
-
<div class="post-info">
+
-
        <div class="post-basic-info">
+
-
        <h3><a href="#">Animation films</a></h3>
+
-
        <span><a href="#"><label> </label>Movies</a></span>
+
-
        <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
+
-
        </div>
+
-
        <div class="post-info-rate-share">
+
-
        <div class="rateit">
+
-
        <span> </span>
+
-
        </div>
+
-
        <div class="post-share">
+
-
        <span> </span>
+
-
        </div>
+
-
        <div class="clear"> </div>
+
-
        </div>
+
-
        </div>
+
-
</li>
+
-
  <li onclick="location.href='single-page.html';">
+
-
        <img src="./images/img1.jpg" width="200" height="200">
+
-
        <div class="post-info">
+
-
        <div class="post-basic-info">
+
-
        <h3><a href="#">Animation films</a></h3>
+
-
        <span><a href="#"><label> </label>Movies</a></span>
+
-
        <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
+
-
        </div>
+
-
        <div class="post-info-rate-share">
+
-
        <div class="rateit">
+
-
        <span> </span>
+
-
        </div>
+
-
        <div class="post-share">
+
-
        <span> </span>
+
-
        </div>
+
-
        <div class="clear"> </div>
+
-
        </div>
+
-
        </div>
+
-
        </li>
+
-
        <!----//--->
+
-
        <li onclick="location.href='single-page.html';">
+
-
        <img src="./images/img1.jpg" width="200" height="200">
+
-
        <div class="post-info">
+
-
        <div class="post-basic-info">
+
-
        <h3><a href="#">Animation films</a></h3>
+
-
        <span><a href="#"><label> </label>Movies</a></span>
+
-
        <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
+
-
        </div>
+
-
        <div class="post-info-rate-share">
+
-
        <div class="rateit">
+
-
        <span> </span>
+
-
        </div>
+
-
        <div class="post-share">
+
-
        <span> </span>
+
-
        </div>
+
-
        <div class="clear"> </div>
+
-
        </div>
+
-
        </div>
+
-
        </li>
+
-
        <li onclick="location.href='single-page.html';">
+
-
        <img src="./images/img2.jpg" width="200" height="299">
+
-
<div class="post-info">
+
-
        <div class="post-basic-info">
+
-
        <h3><a href="#">Animation films</a></h3>
+
-
        <span><a href="#"><label> </label>Movies</a></span>
+
-
        <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
+
-
        </div>
+
-
        <div class="post-info-rate-share">
+
-
        <div class="rateit">
+
-
        <span> </span>
+
-
        </div>
+
-
        <div class="post-share">
+
-
        <span> </span>
+
-
        </div>
+
-
        <div class="clear"> </div>
+
-
        </div>
+
-
        </div>
+
-
</li>
+
-
        <li onclick="location.href='single-page.html';">
+
-
        <img src="./images/img3.jpg" width="200" height="214">
+
-
        <div class="post-info">
+
-
        <div class="post-basic-info">
+
-
        <h3><a href="#">Animation films</a></h3>
+
-
        <span><a href="#"><label> </label>Movies</a></span>
+
-
        <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
+
-
        </div>
+
-
        <div class="post-info-rate-share">
+
-
        <div class="rateit">
+
-
        <span> </span>
+
-
        </div>
+
-
        <div class="post-share">
+
-
        <span> </span>
+
-
        </div>
+
-
        <div class="clear"> </div>
+
-
        </div>
+
-
        </div>
+
-
        </li>
+
-
        <li onclick="location.href='single-page.html';">
+
-
        <img src="./images/img4.jpg" width="200" height="333">
+
-
        <div class="post-info">
+
-
        <div class="post-basic-info">
+
-
        <h3><a href="#">Animation films</a></h3>
+
-
        <span><a href="#"><label> </label>Movies</a></span>
+
-
        <p>Lorem Ipsum is simply dummy text of the printing & typesetting industry.</p>
+
-
        </div>
+
-
        <div class="post-info-rate-share">
+
-
        <div class="rateit">
+
-
        <span> </span>
+
-
        </div>
+
-
        <div class="post-share">
+
-
        <span> </span>
+
-
        </div>
+
-
        <div class="clear"> </div>
+
-
        </div>
+
-
        </div>
+
-
        </li>
+
-
        <!-- End of grid blocks -->
+
-
      </ul>
+
-
    </div>
+
-
</div>
+
-
</div>
+
-
<!---//End-content---->
+
-
<!----wookmark-scripts---->
+
-
  <script src="./js/jquery.imagesloaded.js"></script>
+
-
  <script src="./js/jquery.wookmark.js"></script>
+
-
  <script type="text/javascript">
+
-
    (function ($){
+
-
      var $tiles = $('#tiles'),
+
-
          $handler = $('li', $tiles),
+
-
          $main = $('#main'),
+
-
          $window = $(window),
+
-
          $document = $(document),
+
-
          options = {
+
-
            autoResize: true, // This will auto-update the layout when the browser window is resized.
+
-
            container: $main, // Optional, used for some extra CSS styling
+
-
            offset: 20, // Optional, the distance between grid items
+
-
            itemWidth:280 // Optional, the width of a grid item
+
-
          };
+
-
      /**
+
-
      * Reinitializes the wookmark handler after all images have loaded
+
-
      */
+
-
      function applyLayout() {
+
-
        $tiles.imagesLoaded(function() {
+
-
          // Destroy the old handler
+
-
          if ($handler.wookmarkInstance) {
+
-
            $handler.wookmarkInstance.clear();
+
-
          }
+
-
+
-
          // Create a new layout handler.
+
-
          $handler = $('li', $tiles);
+
-
          $handler.wookmark(options);
+
-
        });
+
-
      }
+
-
      /**
+
-
      * When scrolled all the way to the bottom, add more tiles
+
-
      */
+
-
      function onScroll() {
+
-
        // Check if we're within 100 pixels of the bottom edge of the broser window.
+
-
        var winHeight = window.innerHeight ? window.innerHeight : $window.height(), // iphone fix
+
-
            closeToBottom = ($window.scrollTop() + winHeight > $document.height() - 100);
+
-
+
-
        if (closeToBottom) {
+
-
          // Get the first then items from the grid, clone them, and add them to the bottom of the grid
+
-
          var $items = $('li', $tiles),
+
-
              $firstTen = $items.slice(0, 10);
+
-
          $tiles.append($firstTen.clone());
+
-
+
-
          applyLayout();
+
-
        }
+
-
      };
+
-
+
-
      // Call the layout function for the first time
+
-
      applyLayout();
+
-
+
-
      // Capture scroll event.
+
-
      $window.bind('scroll.wookmark', onScroll);
+
-
    })(jQuery);
+
-
  </script>
+
-
<!----//wookmark-scripts---->
+
-
<!----start-footer--->
+
-
<div class="footer">
+
-
<p>Design by <a href="http://w3layouts.com/">W3layouts</a></p>
+
-
</div>
+
-
<!----//End-footer--->
+
-
<!---//End-wrap---->
+
-
</body>
+
</html>
</html>

Latest revision as of 15:37, 7 October 2014

Retrieved from "http://2014.igem.org/Team:Sheffield/project"