Team:WITS-CSIR SA/About/Team
From 2011.igem.org
(Difference between revisions)
Line 59: | Line 59: | ||
<h1>Meet the Team</h1> | <h1>Meet the Team</h1> | ||
+ | |||
+ | <!--Circle--> | ||
+ | <div class="mosaic-block circle"> | ||
+ | <a href="http://buildinternet.com/project/mosaic" class="mosaic-overlay"> </a> | ||
+ | <div class="mosaic-backdrop"><img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/mosaic.jpg"/></div> | ||
+ | </div> | ||
+ | |||
+ | <!--Fade--> | ||
+ | <div class="mosaic-block fade"> | ||
+ | <a href="http://buildinternet.com/project/mightyicons/" target="_blank" class="mosaic-overlay"> | ||
+ | <div class="details"> | ||
+ | <h4>Mighty Social Icons</h4> | ||
+ | <p>By Build Internet</p> | ||
+ | </div> | ||
+ | </a> | ||
+ | <div class="mosaic-backdrop"><img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/mightyicons.jpg"/></div> | ||
+ | </div> | ||
+ | |||
+ | <!--Bar--> | ||
+ | <div class="mosaic-block bar"> | ||
+ | <a href="http://www.nonsensesociety.com/2011/01/sloppy-art/" target="_blank" class="mosaic-overlay"> | ||
+ | <div class="details"> | ||
+ | <h4>Sloppy Art - A Mess of Inspiration</h4> | ||
+ | <p>via the Nonsense Society (image credit: Florian</p> | ||
+ | </div> | ||
+ | </a> | ||
+ | <div class="mosaic-backdrop"><img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/florian.jpg"/></div> | ||
+ | </div> | ||
+ | |||
+ | <!--Bar 2--> | ||
+ | <div class="mosaic-block bar2"> | ||
+ | <a href="http://www.nonsensesociety.com/2010/12/i-am-not-human-portraits/" target="_blank" class="mosaic-overlay"> | ||
+ | <div class="details"> | ||
+ | <h4>I Am Not Human - Unique Self Portraits</h4><br/> | ||
+ | <p>via the Nonsense Society (photo credit: Dan Deroches)</p> | ||
+ | </div> | ||
+ | </a> | ||
+ | <div class="mosaic-backdrop"><img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/desroches.jpg"/></div> | ||
+ | </div> | ||
+ | |||
+ | <!--Bar 3--> | ||
+ | <div class="mosaic-block bar3"> | ||
+ | <a href="http://www.desktopped.com/featured/2010/09/multi-display-setup-with-four-systems-and-a-whole-lot-of-screen-space/" target="_blank" class="mosaic-overlay"> | ||
+ | <div class="details"> | ||
+ | <h4>Multi-Display Setup With Four Systems, A Wall of Screens, And 64TB Of Storage</h4> | ||
+ | <p>via Desktopped</p> | ||
+ | </div> | ||
+ | </a> | ||
+ | <a href="http://www.nonsensesociety.com/2010/12/i-am-not-human-portraits/" target="_blank" class="mosaic-backdrop"><img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/64tb.jpg"/></a> | ||
+ | </div> | ||
+ | |||
+ | <!--Cover--> | ||
+ | <div class="mosaic-block cover"> | ||
+ | <div class="mosaic-overlay"><img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/imac.jpg"/></div> | ||
+ | <a href="http://www.desktopped.com/featured/2010/12/mounted-imac-and-desk-mod-with-computer-components-built-in/" target="_blank" class="mosaic-backdrop"> | ||
+ | <div class="details"> | ||
+ | <h4>Mounted iMac And Desk Mod With Computer Components Built In</h4> | ||
+ | <p>via Desktopped</p> | ||
+ | </div> | ||
+ | </a> | ||
+ | </div> | ||
+ | |||
+ | <!--Cover 2--> | ||
+ | <div class="mosaic-block cover2"> | ||
+ | <a href="http://yourather.com/questions/135" target="_blank" class="mosaic-overlay"><img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/yourather.jpg"/></a> | ||
+ | <a href="http://yourather.com/questions/135" target="_blank" class="mosaic-backdrop"> | ||
+ | <div class="details"> | ||
+ | <h4>Hardest Choice Ever</h4> | ||
+ | <p>via You Rather</p> | ||
+ | </div> | ||
+ | </a> | ||
+ | </div> | ||
+ | |||
+ | <!--Cover 3--> | ||
+ | <div class="mosaic-block cover3"> | ||
+ | <div class="mosaic-overlay"><img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/omr-office.jpg"/></div> | ||
+ | <a href="http://officeal.com/offices/one-mighty-roar/" target="_blank" class="mosaic-backdrop"> | ||
+ | <div class="details"> | ||
+ | <h4>One Mighty Roar Office</h4> | ||
+ | <p>via Officeal</p> | ||
+ | </div> | ||
+ | </a> | ||
+ | </div> | ||
+ | |||
+ | <div class="clearfix"></div> | ||
</div> | </div> | ||
Line 64: | Line 149: | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
$(function(){ | $(function(){ | ||
+ | $('.circle').mosaic({ | ||
+ | opacity : 0.8 //Opacity for overlay (0-1) | ||
+ | }); | ||
+ | |||
+ | $('.fade').mosaic(); | ||
+ | |||
+ | $('.bar').mosaic({ | ||
+ | animation : 'slide' //fade or slide | ||
+ | }); | ||
+ | |||
+ | $('.bar2').mosaic({ | ||
+ | animation : 'slide' //fade or slide | ||
+ | }); | ||
+ | |||
+ | $('.bar3').mosaic({ | ||
+ | animation : 'slide', //fade or slide | ||
+ | anchor_y : 'top' //Vertical anchor position | ||
+ | }); | ||
+ | |||
+ | $('.cover').mosaic({ | ||
+ | animation : 'slide', //fade or slide | ||
+ | hover_x : '400px' //Horizontal position on hover | ||
+ | }); | ||
+ | |||
+ | $('.cover2').mosaic({ | ||
+ | animation : 'slide', //fade or slide | ||
+ | anchor_y : 'top', //Vertical anchor position | ||
+ | hover_y : '80px' //Vertical position on hover | ||
+ | }); | ||
+ | |||
+ | $('.cover3').mosaic({ | ||
+ | animation : 'slide', //fade or slide | ||
+ | hover_x : '400px', //Horizontal position on hover | ||
+ | hover_y : '300px' //Vertical position on hover | ||
+ | }); | ||
}); | }); | ||
</script> | </script> |
Revision as of 13:32, 8 May 2011