Team:Sheffield/aaa

From 2014.igem.org

(Difference between revisions)
 
(38 intermediate revisions not shown)
Line 1: Line 1:
-
<!DOCTYPE HTML>
+
{{Team:Sheffield/NavigationBar}}
<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 rel="stylesheet" href="https://2014.igem.org/Team:Sheffield/Template:Style.css?action=raw&ctype=text/css" 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 src="https://2014.igem.org/Team:Sheffield/Template:jquery-1.10.1.min.js?action=raw&ctype=text/javascript"></script>
-
</script>
+
<script src="https://2014.igem.org/Team:Sheffield/Template:modernizr.custom.js?action=raw&ctype=text/javascript"></script>
-
<!----webfonts---->
+
<script src="https://2014.igem.org/Team:Sheffield/Template:script.js?action=raw&ctype=text/javascript"></script>
-
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
+
<link href='http://fonts.googleapis.com/css?family=Damion' rel='stylesheet' type='text/css'>
-
<!----//webfonts---->
+
</head>
-
<!-- Global CSS for the page and tiles -->
+
<body>
-
  <link rel="stylesheet" href="./css/main.css">
+
  <div class="container">
-
  <!-- //Global CSS for the page and tiles -->
+
<header class="clearfix">
-
<!---start-click-drop-down-menu----->
+
<div class="header">
-
<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--->
+
-
<!---//End-click-drop-down-menu----->
+
-
</head>
+
-
<body>
+
-
<!---start-wrap---->
+
-
<!---start-header---->
+
-
<div class="header">
+
<div class="wrap">
<div class="wrap">
-
<div class="logo">
+
<div class="logo">
-
<a href="index.html"><img src="./images/logo.png" title="pinbal" /></a>
+
    <a href="index.html"><h1>Team Sheffield</h1></a>
-
</div>
+
-
<div class="nav-icon">
+
-
<a href="#" class="right_bt" id="activator"><span> </span> </a>
+
-
</div>
+
-
<div class="box" id="box">
+
-
<div class="box_content">                               
+
-
<div class="box_content_center">
+
-
<div class="form_content">
+
-
<div class="menu_box_list">
+
-
<ul>
+
-
<li><a href="#"><span>home</span></a></li>
+
-
<li><a href="#"><span>About</span></a></li>
+
-
<li><a href="#"><span>Works</span></a></li>
+
-
<li><a href="#"><span>Clients</span></a></li>
+
-
<li><a href="#"><span>Blog</span></a></li>
+
-
<li><a href="contact.html"><span>Contact</span></a></li>
+
-
<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>
+
</div>
</div>
-
</div>
+
          <div class="header_top">
-
<div class="clear"> </div>
+
 +
          <div class="search_box">
 +
    <form>
 +
<input type="text" class="text-box" placeholder="Search..."><input type="submit" value="">
 +
    </form>
 +
  </div>
 +
    </div>
 +
<div class="clear"></div>
 +
    </div>
</div>
</div>
-
</div>
+
</header>
-
<!---//End-header---->
+
<div class="main">
-
<!---start-content---->
+
<ul id="og-grid" class="og-grid">
-
<div class="content">
+
<li>
-
<div class="wrap">
+
<a href="#" data-largesrc="https://static.igem.org/mediawiki/2014/b/b5/Jay1.JPG" data-title="Jianxing" data-description="Automatic Control and Systems Engineering third year student.">
-
<div id="main" role="main">
+
<img src="https://static.igem.org/mediawiki/2014/c/cc/Jay.JPG" width="500px alt="img01"/>
-
      <ul id="tiles">
+
</a>
-
        <!-- These are our grid blocks -->
+
-
        <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>
-
        <li onclick="location.href='single-page.html';">
+
 
-
        <img src="./images/img3.jpg" width="200" height="214">
+
</ul>
-
        <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>
-
</div>
+
</div><!-- /container -->
-
<!---//End-content---->
+
<script src="https://2014.igem.org/Team:Sheffield/Template:grid.js?action=raw&ctype=text/javascript"></script>
-
<!----wookmark-scripts---->
+
<script>
-
  <script src="./js/jquery.imagesloaded.js"></script>
+
$(function() {
-
  <script src="./js/jquery.wookmark.js"></script>
+
Grid.init();
-
  <script type="text/javascript">
+
});
-
    (function ($){
+
</script>
-
      var $tiles = $('#tiles'),
+
          </body>
-
          $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 21:55, 13 October 2014

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