Team:BU Wellesley Software/Social
From 2011.igem.org
(Difference between revisions)
(36 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
- | <head> | + | <head> |
+ | <title>BU-Wellesley iGEM Team: Meet the Team Members</title> | ||
+ | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | ||
+ | <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script> | ||
<style type="text/css"> | <style type="text/css"> | ||
- | |||
- | |||
/*hide default igem banner and reformat style into blank slate*/ | /*hide default igem banner and reformat style into blank slate*/ | ||
#globalWrapper {width: 100%;} | #globalWrapper {width: 100%;} | ||
Line 20: | Line 21: | ||
#content {width: 100%; border:none;} | #content {width: 100%; border:none;} | ||
#bodyContent {border:none;} | #bodyContent {border:none;} | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
/*actual content styles*/ | /*actual content styles*/ | ||
+ | body {width: 800px; margin:auto;} | ||
+ | #bu-wellesley_wiki_content {height:auto; line-height:100%;} | ||
+ | /*#bu-wellesley_wiki_content a {color:#69d01d;}*/ | ||
+ | #bu-wellesley_wiki_content a:hover {text-decoration:none; color:#3d3f3c;} | ||
- | + | .navbar li {color: #ffffff;} | |
- | + | .navbar li a {color: #ffffff;} | |
- | + | .navbar li a:hover {background:#69d01d; color: #ffffff;} | |
- | + | ||
+ | /*only use for current page content header (i.e. Team, G-nomeSurferPro, etc)*/ | ||
+ | H6 { | ||
+ | font-family: Helvetica; | ||
+ | text-transform: uppercase; | ||
+ | text-decoration: none; | ||
+ | text-align: left; | ||
+ | color: #3d3f3c; | ||
+ | font-size: 32pt; | ||
+ | } | ||
+ | |||
+ | .thumb { | ||
+ | width: 200px; | ||
+ | } | ||
</style> | </style> | ||
- | <link rel="stylesheet" type="text/css" href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/css/ | + | <link rel="stylesheet" type="text/css" href="http://cs.wellesley.edu/~hcilab/iGEM_wiki/css/Team.css"> |
+ | |||
+ | <!-- include the jQuery Tools --> | ||
+ | <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script> | ||
+ | |||
+ | |||
+ | |||
+ | <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-horizontal.css" /> | ||
+ | <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-buttons.css" /> | ||
+ | |||
+ | <style> | ||
+ | |||
+ | |||
+ | /* styling for the image wrapper */ | ||
+ | #image_wrap { | ||
+ | /* dimensions */ | ||
+ | width:677px; | ||
+ | margin:15px 0 15px 40px; | ||
+ | padding:15px 0; | ||
+ | |||
+ | /* centered */ | ||
+ | text-align:center; | ||
+ | |||
+ | /* some "skinning" */ | ||
+ | background-color:#efefef; | ||
+ | border:2px solid #fff; | ||
+ | outline:1px solid #ddd; | ||
+ | -moz-ouline-radius:4px; | ||
+ | } | ||
+ | </style> | ||
</head> | </head> | ||
- | <body> | + | |
+ | <body class="basiclayout"> | ||
<div id="bu-wellesley_wiki_content"> | <div id="bu-wellesley_wiki_content"> | ||
- | <a href="https://2011.igem.org/Team:BU_Wellesley_Software"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/banner.png" width=" | + | |
+ | <p style="text-align:center;"><a href="https://2011.igem.org/Team:BU_Wellesley_Software"><img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/banner.png" width="800px"></a></p> | ||
+ | |||
+ | <ul id="nav"> | ||
+ | <li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Team">Team</a></li> | ||
+ | <li><a href="#">Project</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Project_Overview">Overview</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Clotho">Clotho</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/G-nomeSurferPro">G-nome Surfer Pro</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/OptimusPrimer">Optimus Primer</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Trumpet">Trumpet</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Puppetshow">Puppetshow</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/eLabNotebook">eLabNotebook</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Wet_Lab">Wet Lab</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Downloads_and_Tutorials">Downloads and Tutorials</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="#">Process</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Methodology">Methodology</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Safety">Safety</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Notebook">Notebook</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Outreach">Outreach</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Tips">Tips and Tricks</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Gold">Medal Fulfillment</a></li> | ||
+ | <li><a href="#">Additional Info</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Acknowledgement">Acknowledgement</a></li> | ||
+ | <li><a href="https://2011.igem.org/Team:BU_Wellesley_Software/Social">Fun</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | |||
<br> | <br> | ||
+ | <h6>Fun</h6> | ||
+ | <br> | ||
+ | |||
+ | <div id="image_wrap"> | ||
+ | |||
+ | <!-- Initially the image is a simple 1x1 pixel transparent GIF --> | ||
+ | <img src="http://static.flowplayer.org/tools/img/blank.gif" width="500" height="375" /> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <a class="prev browse left"></a> | ||
+ | |||
+ | <!-- root element for scrollable --> | ||
+ | <div class="scrollable"> | ||
+ | |||
+ | <!-- root element for the items --> | ||
+ | <div class="items"> | ||
+ | |||
+ | <!-- 1-5 --> | ||
+ | <div> | ||
+ | <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/brainstorm.jpg" /> | ||
+ | <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/triptosbux.jpg" /> | ||
+ | |||
+ | <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/tracikathy.jpg" /> | ||
+ | <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/bigtent.JPG" /> | ||
+ | <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/croquet_girls.JPG" /> | ||
+ | </div> | ||
+ | |||
+ | <!-- 5-10 --> | ||
+ | <div> | ||
+ | |||
+ | <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/kelseyandmikey.jpg" /> | ||
+ | <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/croquet_jenh.JPG" /> | ||
+ | <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/triptosbux2.jpg" /> | ||
+ | <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/games.JPG" /> | ||
+ | <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/grp_croquet.JPG" /> | ||
+ | </div> | ||
+ | |||
+ | <!-- 10-15 --> | ||
+ | <div> | ||
+ | |||
+ | <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/beachattack.jpg" /> | ||
+ | <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/hotdogs.JPG" /> | ||
+ | <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/night_crzy.png" /> | ||
+ | <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/lab3.JPG" /> | ||
+ | <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/startfire.JPG" /> | ||
+ | </div> | ||
+ | |||
+ | <!-- 15-20 --> | ||
+ | <div> | ||
+ | <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/tent_boys.JPG" /> | ||
+ | <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/frisbee.jpg" /> | ||
+ | <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/hp1.jpg" /> | ||
+ | <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/tenting.JPG" /> | ||
+ | <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/lab4.JPG" /> | ||
+ | </div> | ||
+ | |||
+ | <!-- 20-25 --> | ||
+ | <div> | ||
+ | |||
+ | <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/all_camp.png" /> | ||
+ | <img src="http://cs.wellesley.edu/~hcilab/iGEM_wiki/images/igemfun/beachday.jpg" /> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <!-- "next page" action --> | ||
+ | <a class="next browse right"></a> | ||
+ | |||
+ | <script> | ||
+ | $(function() { | ||
+ | |||
+ | $(".scrollable").scrollable(); | ||
+ | |||
+ | $(".items img").click(function() { | ||
+ | |||
+ | // see if same thumb is being clicked | ||
+ | if ($(this).hasClass("active")) { return; } | ||
+ | |||
+ | // calclulate large image's URL based on the thumbnail URL (flickr specific) | ||
+ | var url = $(this).attr("src").replace("_t", ""); | ||
+ | |||
+ | // get handle to element that wraps the image and make it semi-transparent | ||
+ | var wrap = $("#image_wrap").fadeTo("medium", 0.5); | ||
+ | |||
+ | // the large image from www.flickr.com | ||
+ | var img = new Image(); | ||
+ | |||
+ | |||
+ | // call this function after it's loaded | ||
+ | img.onload = function() { | ||
+ | |||
+ | // make wrapper fully visible | ||
+ | wrap.fadeTo("fast", 1); | ||
+ | |||
+ | // change the image | ||
+ | wrap.find("img").attr("src", url); | ||
+ | |||
+ | }; | ||
+ | |||
+ | // begin loading the image from www.flickr.com | ||
+ | img.src = url; | ||
+ | |||
+ | // activate item | ||
+ | $(".items img").removeClass("active"); | ||
+ | $(this).addClass("active"); | ||
+ | |||
+ | // when page loads simulate a "click" on the first image | ||
+ | }).filter(":first").click(); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</div><!--end bu-wellesley_wiki_content div--> | </div><!--end bu-wellesley_wiki_content div--> | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 23:43, 28 September 2011