Team:Sheffield/yyy

From 2014.igem.org

(Difference between revisions)
(Created page with "{{Team:Sheffield/NavigationBar}} {{Team:Sheffield}} <html> <head> <title></title> <link href="https://2014.igem.org/Team:Sheffield/Template:menustyle.css?action=raw&ctype=text/...")
Line 7: Line 7:
<title></title>
<title></title>
-
<link href="https://2014.igem.org/Team:Sheffield/Template:menustyle.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" media="all"/>
+
<link href="./css/bootstrap.css" rel='stylesheet' type='text/css' />
-
<link href='http://fonts.googleapis.com/css?family=Baumans' rel='stylesheet' type='text/css'>
+
<!-- Custom Theme files -->
-
<script type="text/javascript" src="https://2014.igem.org/Team:Sheffield/Template:menujquery-1.10.1.min.js?action=raw&ctype=text/javascript"></script>
+
<link href="./css/style.css" rel='stylesheet' type='text/css' />
-
<script type="text/javascript" src="https://2014.igem.org/Team:Sheffield/Template:jquery.fancybox.js?action=raw&ctype=text/javascript"></script>
+
<link rel="stylesheet" href="./css/hover.css" />
-
<link rel="stylesheet" type="text/css" href="https://2014.igem.org/Team:Sheffield/Template:jquery.fancybox.css?action=raw&ctype=text/css" media="screen" />
+
<script src="./js/jquery.min.js"></script>
-
<script type="text/javascript">
+
<!-- Custom Theme files -->
-
$(document).ready(function() {
+
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
-
$('.fancybox').fancybox();
+
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
-
});
+
<!---//webfonts--->
-
</script>
+
<!---- start-smoth-scrolling---->
 +
<script type="text/javascript" src="./js/move-top.js"></script>
 +
<script type="text/javascript" src="./js/easing.js"></script>
 +
 
</head>
</head>
Line 23: Line 26:
<body>
<body>
-
 
+
  <!--- portfolio ---->
-
      <div class="main">
+
<div id="portfolio" class="portfolio">
-
<div class="wrap">
+
<div class="container">
-
  <div class="gallery">
+
<div class="head-section text-center">
-
<div class="section group">
+
<h3>Checkout my latest work </h3>
-
<div class="gallery_1_of_4 images_1_of_4">
+
  <span1> </span1>
-
<a class="fancybox" href="https://static.igem.org/mediawiki/2014/c/cc/Jay.JPG" data-fancybox-group="gallery" title="Jianxing Qin"><img src="https://static.igem.org/mediawiki/2014/c/cc/Jay.JPG" alt=""><span> </span></a>
+
  <p>Proin iaculis purus consequat sem cure  digni sim donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt proin iaculis.</p>
-
<h3>Jianxing Qin</h3>
+
</div>
-
<p>Control Systems Engineer</p>
+
</div>
-
                </div>
+
<!--- Portfolio --->
-
<div class="gallery_1_of_4 images_1_of_4">
+
<div id="port" class="portfolio-box">
-
<a class="fancybox" href="https://static.igem.org/mediawiki/2014/9/94/BenM.JPG" data-fancybox-group="gallery" title="Ben Madden"><img src="https://static.igem.org/mediawiki/2014/9/94/BenM.JPG" alt=""><span> </span></a>
+
<div class="container">
-
<h3>Ben Madden</h3>
+
<ul id="filters" class="clearfix">
-
<p>bla</p>
+
<li><span class="filter active" data-filter="app card icon logo web">All</span></li>
-
                </div>
+
<li><span class="filter" data-filter="app">Web</span></li>
-
  </div>
+
<li><span class="filter" data-filter="card">Mobile</span></li>
-
  </div>
+
<li><span class="filter" data-filter="icon">Photography</span></li>
-
</div>
+
<li><span class="filter" data-filter="logo">Design</span></li>
-
      </div>
+
<li><span class="filter" data-filter="web">Type</span></li>
 +
</ul>
 +
</div>
 +
<div id="portfoliolist">
 +
<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block;width:25%; opacity: 1;">
 +
    <div class="portfolio-wrapper">
 +
<a class="lightbox" href="#goofy">
 +
  <img src="./images/p1.jpg"/>
 +
</a>
 +
<div class="lightbox-target" id="goofy">
 +
<img src="./images/p1.jpg"/>
 +
  <a class="lightbox-close" href="#"></a>
 +
</div>
 +
</div>
 +
            </div>
 +
<div class="portfolio web mix_all" data-cat="web" style="display: inline-block;width:25%; opacity: 1;">
 +
<div class="portfolio-wrapper">
 +
<a class="lightbox" href="#goofy">
 +
  <img src="./images/p2.jpg"/>
 +
</a>  
 +
    </div>
 +
</div>
 +
<div class="portfolio card mix_all" data-cat="card" style="display: inline-block;width:25%; opacity: 1;">
 +
<div class="portfolio-wrapper">
 +
<a class="lightbox" href="#goofy">
 +
  <img src="./images/p3.jpg"/>
 +
</a>
 +
    </div>
 +
</div>
 +
<div class="portfolio logo mix_all" data-cat="logo" style="display: inline-block;width:25%; opacity: 1;">
 +
<div class="portfolio-wrapper">
 +
<a class="lightbox" href="#goofy">
 +
  <img src="./images/p4.jpg"/>
 +
</a>
 +
</div>
 +
</div>
 +
<div class="portfolio card mix_all" data-cat="card" style="display: inline-block;width:25%; opacity: 1;">
 +
<div class="portfolio-wrapper">
 +
<a class="lightbox" href="#goofy">
 +
<img src="./images/p5.jpg"/>
 +
</a>
 +
</div>
 +
</div>
 +
<div class="portfolio app mix_all" data-cat="app" style="display: inline-block;width:25%; opacity: 1;">
 +
<div class="portfolio-wrapper">
 +
<a class="lightbox" href="#goofy">
 +
  <img src="./images/p6.jpg"/>
 +
</a>
 +
    </div>
 +
</div>
 +
<div class="portfolio app mix_all" data-cat="app" style="display: inline-block;width:25%; opacity: 1;">
 +
<div class="portfolio-wrapper">
 +
<a class="lightbox" href="#goofy">
 +
  <img src="./images/p7.jpg"/>
 +
</a>  
 +
    </div>
 +
</div>
 +
    <div class="portfolio app mix_all" data-cat="icon" style="display: inline-block;width:25%; opacity: 1;">
 +
  <div class="portfolio-wrapper">
 +
<a class="lightbox" href="#goofy">
 +
  <img src="./images/p8.jpg"/>
 +
</a>
 +
    </div>
 +
</div>
 +
<div class="clearfix"></div>
 +
</div>
 +
    </div>
 +
            <!---- start-portfolio-script----->
 +
<script type="text/javascript" src="./js/jquery.mixitup.min.js"></script>
 +
<script type="text/javascript">
 +
$(function () {
 +
var filterList = {
 +
init: function () {
 +
 +
// MixItUp plugin
 +
// http://mixitup.io
 +
$('#portfoliolist').mixitup({
 +
targetSelector: '.portfolio',
 +
filterSelector: '.filter',
 +
effects: ['fade'],
 +
easing: 'snap',
 +
// call the hover effect
 +
onMixEnd: filterList.hoverEffect()
 +
});
 +
 +
},
 +
hoverEffect: function () {
 +
// Simple parallax effect
 +
$('#portfoliolist .portfolio').hover(
 +
function () {
 +
$(this).find('.label1').stop().animate({bottom: 0}, 200, 'easeOutQuad');
 +
$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');
 +
},
 +
function () {
 +
$(this).find('.label1').stop().animate({bottom: -40}, 200, 'easeInQuad');
 +
$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');
 +
}
 +
);
 +
 +
}
 +
 +
};
 +
// Run the show!
 +
filterList.init();
 +
});
 +
</script>
 +
</div>
 +
<script type="text/javascript">
 +
$(document).ready(function() {
 +
/*
 +
var defaults = {
 +
  containerID: 'toTop', // fading element id
 +
containerHoverID: 'toTopHover', // fading element hover id
 +
scrollSpeed: 1200,
 +
easingType: 'linear'
 +
};
 +
*/
 +
 +
$().UItoTop({ easingType: 'easeOutQuart' });
 +
 +
});
 +
</script>
 +
<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
</body>
</body>
</html>
</html>

Revision as of 13:31, 8 October 2014

Checkout my latest work

Proin iaculis purus consequat sem cure digni sim donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt proin iaculis.

  • All
  • Web
  • Mobile
  • Photography
  • Design
  • Type

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