|
|
| (28 intermediate revisions not shown) |
| Line 1: |
Line 1: |
| - | {{:Team:Hong_Kong_HKU/templates/header}}
| |
| - | <html>
| |
| - | <body>
| |
| - |
| |
| - | <div id="divAbout">
| |
| - | <div id="divContent"><br><br><p style="color: #FFF; font-size: 12px; font-family: Baskerville, 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', serif; text-align: left;">
| |
| - | {| style="width:900px;background:#000000;text-align:justify;font-family: georgia, helvetica, arial, sans-serif;color:#ffffff;margin-top:25px;" cellspacing="20"
| |
| - | |style="font-family: georgia, helvetica, arial, sans-serif;font-size:2em;color:#01DF01;"|Team Profile
| |
| | | | |
| - | <html xmlns="http://www.w3.org/1999/xhtml">
| |
| - |
| |
| - | <title>Sliding Boxes and Captions with JQuery</title>
| |
| - |
| |
| - | <style type="text/css">
| |
| - |
| |
| - | *{ padding:0px; margin:0px; }
| |
| - | body{ background:#000000;}
| |
| - | a{ color:#0CE717;}
| |
| - | h3{ margin: 10px 10px 0 10px; color:#FFF; font:18pt Georgia, Arial, sans-serif; letter-spacing:-1px; font-weight: bold; }
| |
| - |
| |
| - | .boxgrid{
| |
| - | width: 260px;
| |
| - | height: 180px;
| |
| - | margin:5px;
| |
| - | float:left;
| |
| - | background:#161613;
| |
| - | border: solid 2px #0CE717;
| |
| - | overflow: hidden;
| |
| - | position: relative;
| |
| - | }
| |
| - | .boxgrid img{
| |
| - | position: absolute;
| |
| - | top: 0;
| |
| - | left: 0;
| |
| - | border: 0;
| |
| - | }
| |
| - | .boxgrid p{
| |
| - | padding: 0 10px;
| |
| - | color:#afafaf;
| |
| - | font-weight:bold;
| |
| - | font:10pt "Lucida Grande", Arial, sans-serif;
| |
| - | }
| |
| - |
| |
| - | .boxcaption{
| |
| - | float: left;
| |
| - | position: absolute;
| |
| - | background: #000;
| |
| - | height: 100px;
| |
| - | width: 100%;
| |
| - | opacity: .8;
| |
| - | /* For IE 5-7 */
| |
| - | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
| |
| - | /* For IE 8 */
| |
| - | -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
| |
| - | }
| |
| - | .captionfull .boxcaption {
| |
| - | top: 260;
| |
| - | left: 0;
| |
| - | }
| |
| - | .caption .boxcaption {
| |
| - | top: 220;
| |
| - | left: 0;
| |
| - | }
| |
| - |
| |
| - | h3 a{}
| |
| - |
| |
| - | </style>
| |
| - | <link rel="stylesheet" href="http://buildinternet.s3.amazonaws.com/theme-files/bsa.css" type="text/css" media="screen" />
| |
| - |
| |
| - | <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
| |
| - | <script type="text/javascript">
| |
| - | $(document).ready(function(){
| |
| - | //To switch directions up/down and left/right just place a "-" in front of the top/left attribute
| |
| - | //Vertical Sliding
| |
| - | $('.boxgrid.slidedown').hover(function(){
| |
| - | $(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
| |
| - | }, function() {
| |
| - | $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
| |
| - | });
| |
| - | //Horizontal Sliding
| |
| - | $('.boxgrid.slideright').hover(function(){
| |
| - | $(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});
| |
| - | }, function() {
| |
| - | $(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
| |
| - | });
| |
| - | $('.boxgrid.slideleft').hover(function(){
| |
| - | $(".cover", this).stop().animate({left:'-325px'},{queue:false,duration:300});
| |
| - | }, function() {
| |
| - | $(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
| |
| - | });
| |
| - | //Diagnal Sliding
| |
| - | $('.boxgrid.thecombo').hover(function(){
| |
| - | $(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
| |
| - | }, function() {
| |
| - | $(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
| |
| - | });
| |
| - | //Partial Sliding (Only show some of background)
| |
| - | $('.boxgrid.peek').hover(function(){
| |
| - | $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
| |
| - | }, function() {
| |
| - | $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
| |
| - | });
| |
| - | //Full Caption Sliding (Hidden to Visible)
| |
| - | $('.boxgrid.captionfull').hover(function(){
| |
| - | $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
| |
| - | }, function() {
| |
| - | $(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
| |
| - | });
| |
| - | //Caption Sliding (Partially Hidden to Visible)
| |
| - | $('.boxgrid.caption').hover(function(){
| |
| - | $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
| |
| - | }, function() {
| |
| - | $(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
| |
| - | });
| |
| - | });
| |
| - | </script>
| |
| - |
| |
| - | </head>
| |
| - | <body>
| |
| - |
| |
| - | </div>
| |
| - | <div class="boxgrid slideright">
| |
| - | <img class="cover" src="https://static.igem.org/mediawiki/2011/3/34/George.jpg"/>
| |
| - | <h3>George Leung</h3>
| |
| - | <p>Boss<br/><a href="https://2011.igem.org/Team:HKU-Hong_Kong/George" target="_BLANK">Click Me!</a></p>
| |
| - | </div>
| |
| - |
| |
| - | <div class="boxgrid slideright">
| |
| - | <img class="cover" src="https://static.igem.org/mediawiki/2011/d/d7/Alex.jpg"/>
| |
| - | <h3>Alex Leong</h3>
| |
| - | <p>Wiki-wacky<br/><a href="https://2011.igem.org/Team:HKU-Hong_Kong/Alex" target="_BLANK">Click Me!</a></p>
| |
| - | </div>
| |
| - |
| |
| - | <div class="boxgrid slideright">
| |
| - | <img class="cover" src="https://static.igem.org/mediawiki/2011/7/75/Horace.jpg"/>
| |
| - | <h3>Horace Chan</h3>
| |
| - | <p>'Huma'rous<br/><a href="https://2011.igem.org/Team:HKU-Hong_Kong/Horace" target="_BLANK">Click Me!</a></p>
| |
| - | </div>
| |
| - |
| |
| - | <div class="boxgrid slideleft">
| |
| - | <img class="cover" src="https://static.igem.org/mediawiki/2011/4/4f/Karen.jpg"/>
| |
| - | <h3>Karen Siu</h3>
| |
| - | <p>Camera Maniac<br/><a href="https://2011.igem.org/Team:HKU-Hong_Kong/Karen" target="_BLANK">Click Me!</a></p>
| |
| - | </div>
| |
| - |
| |
| - | <div class="boxgrid slideleft">
| |
| - | <img class="cover" src="https://static.igem.org/mediawiki/2011/4/40/Joan.jpg"/>
| |
| - | <h3>Joan So</h3>
| |
| - | <p>Investigator<br/><a href="https://2011.igem.org/Team:HKU-Hong_Kong/Joan" target="_BLANK">Click Me!</a></p>
| |
| - | </div>
| |
| - |
| |
| - | <div class="boxgrid slideleft">
| |
| - | <img class="cover" src="https://static.igem.org/mediawiki/2011/c/cc/Wendy.jpg"/>
| |
| - | <h3>Wendy Chan</h3>
| |
| - | <p>'Huma'rous<br/><a href="https://2011.igem.org/Team:HKU-Hong_Kong/Wendy" target="_BLANK">Click Me!</a></p>
| |
| - | </div>
| |
| - |
| |
| - | <div class="boxgrid slideright">
| |
| - | <img class="cover" src="https://static.igem.org/mediawiki/2011/0/09/Stephen.jpg"/>
| |
| - | <h3>Stephen Li</h3>
| |
| - | <p>Investigator<br/><a href="https://2011.igem.org/Team:HKU-Hong_Kong/Stephen" target="_BLANK">Click Me!</a></p>
| |
| - | </div>
| |
| - |
| |
| - | <div class="boxgrid slideright">
| |
| - | <img class="cover" src="https://static.igem.org/mediawiki/2011/d/da/Sheen.jpg"/>
| |
| - | <h3>Cheung Ngo</h3>
| |
| - | <p>Super 'Model'<br/><a href="https://2011.igem.org/Team:HKU-Hong_Kong/Sheen" target="_BLANK">Click Me!</a></p>
| |
| - | </div>
| |
| - |
| |
| - | <div class="boxgrid slideright">
| |
| - | <img class="cover" src="https://static.igem.org/mediawiki/2011/3/36/Janus.jpg"/>
| |
| - | <h3>Janus Wong</h3>
| |
| - | <p>Cha-ching<br/><a href="https://2011.igem.org/Team:HKU-Hong_Kong/Janus" target="_BLANK">Click Me!</a></p>
| |
| - | </div>
| |
| - |
| |
| - | <div class="boxgrid slideleft">
| |
| - | <img class="cover" src="https://static.igem.org/mediawiki/2011/1/1c/Christy.jpg"/>
| |
| - | <h3>Christy Hung</h3>
| |
| - | <p>Investigator<br/><a href="https://2011.igem.org/Team:HKU-Hong_Kong/Christy" target="_BLANK">Click Me!</a></p>
| |
| - | </div>
| |
| - |
| |
| - | <div class="boxgrid slideleft">
| |
| - | <img class="cover" src="https://static.igem.org/mediawiki/2011/2/20/Sam.jpg"/>
| |
| - | <h3>Win Sam</h3>
| |
| - | <p>Investigator<br/><a href="https://2011.igem.org/Team:HKU-Hong_Kong/Win_Sam" target="_BLANK">Click Me!</a></p>
| |
| - | </div>
| |
| - |
| |
| - | <div class="boxgrid slideleft">
| |
| - | <img class="cover" src="https://static.igem.org/mediawiki/2011/d/d7/IGEM_logo_6.jpg"/>
| |
| - | <h3>HKU iGEM 2011</h3>
| |
| - | <p>Formed in late April with one mission at heart. Sapientia et Virtus.</p>
| |
| - | </div>
| |
| - |
| |
| - | <script type="text/javascript">
| |
| - | var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
| |
| - | document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
| |
| - | </script>
| |
| - | <script type="text/javascript">
| |
| - | try {
| |
| - | var pageTracker = _gat._getTracker("UA-6444047-1");
| |
| - | pageTracker._trackPageview();
| |
| - | } catch(err) {}</script>
| |
| - | <script type='text/javascript' src='http://track.mybloglog.com/js/jsserv.php?mblID=2008122418424037'></script>
| |
| - |
| |
| - | </body>
| |
| - | </html>
| |
| - | </p>
| |
| - |
| |
| - | </div>
| |
| - | </div>
| |
| - | </body>
| |
| - | </html>
| |
| - |
| |
| - | {{:Team:Hong_Kong_HKU/templates/footer}}
| |
"
