Team:Hong Kong HKU/people

From 2013.igem.org

(Difference between revisions)
Line 5: Line 5:
  <div id="divAbout">
  <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;">
  <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>
</p>
Line 12: Line 211:
</body>
</body>
</html>
</html>
 +
{{:Team:Hong_Kong_HKU/templates/footer}}
{{:Team:Hong_Kong_HKU/templates/footer}}

Revision as of 04:13, 23 August 2013



{| 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 Sliding Boxes and Captions with JQuery

George Leung

Boss
Click Me!

Alex Leong

Wiki-wacky
Click Me!

Horace Chan

'Huma'rous
Click Me!

Karen Siu

Camera Maniac
Click Me!

Joan So

Investigator
Click Me!

Wendy Chan

'Huma'rous
Click Me!

Stephen Li

Investigator
Click Me!

Cheung Ngo

Super 'Model'
Click Me!

Janus Wong

Cha-ching
Click Me!

Christy Hung

Investigator
Click Me!

Win Sam

Investigator
Click Me!

HKU iGEM 2011

Formed in late April with one mission at heart. Sapientia et Virtus.

</p> 

	</div>

</div> </body> </html>

Our Sponsors:

lee kofa savantas ricardo


Retrieved from "http://2013.igem.org/Team:Hong_Kong_HKU/people"