Team:SEU A/Attributions

From 2012.igem.org

(Difference between revisions)
Line 23: Line 23:
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
 +
 +
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
 +
<script type="text/javascript">
 +
$(document).ready(function(){
 +
 +
//Blur Links (Prevents Outline)
 +
$('a').click(function() {
 +
        this.blur();
 +
        });
 +
 +
//Hide all item descriptions in the info box
 +
$("#infobox > div").css("display", "none");
 +
 +
//Call in the info box
 +
$(".more a").click(function(){
 +
$("#infobox").animate({bottom: '233px' }, 300);
 +
$("#fade_bg").fadeIn();
 +
return false;
 +
});
 +
 +
//Expand more info button on hover
 +
$(".more").hover(function(){
 +
$(this).stop().animate({width: '225px' }, 200).css({'z-index' : '10'}); //Change the width increase caption size
 +
}, function () {
 +
$(this).stop().animate({width: '50px' }, 200).css({'z-index' : '1'});
 +
      });
 +
     
 +
      //Show description for selected item
 +
      $("#couch a").click(function(){
 +
$("#couch_info").show();
 +
});
 +
 +
$("#plant a").click(function(){
 +
$("#plant_info").show();
 +
});
 +
 +
      $("#monitor a").click(function(){
 +
$("#monitor_info").show();
 +
});
 +
 +
      $("#board a").click(function(){
 +
$("#board_info").show();
 +
});
 +
 +
//Remove background, info box and hide all descriptions
 +
$("#fade_bg, .close").click(function(){
 +
$("#fade_bg").fadeOut();
 +
$("#infobox").animate({bottom: '-200px' }, 300, function() {
 +
$("#infobox > div").css("display", "none");
 +
});
 +
return false;
 +
});
 +
 +
});
 +
</script>
 +
 +
<style type="text/css">
 +
 +
/* General Styles */
 +
*{ padding:0px; margin:0px; }
 +
img{ border: none; }
 +
a:focus, a:active{ outline:none; }
 +
body{ text-align:center; background:#111; }
 +
h1{ font:bold 18px Helvetica, Arial, sans-sarif; color:#FFF; margin:20px 0 0 0; }
 +
 +
/* Picture Styles */
 +
#picture{ position:relative; top:20px; width:700px; height:466px; margin:0px auto; background:#FFF url('office.jpg'); overflow:hidden; }
 +
 +
/* General More Button */
 +
.more{ position:absolute; width:50px; height:50px; background:url('dim.png'); border:1px solid #444; padding:5px; text-align:left; overflow:hidden; }
 +
 +
.more span{ position:absolute; left:60px; width:160px; padding:15px 0 0 5px; color:#FFF; font:bold 13px Lucida Grande, Arial, sans-serif; text-shadow:#000 1px 1px 0px; }
 +
 +
/* Item Specific More Button */
 +
#couch{ top:240px; left:75px;}
 +
#plant{ top:180px; left:370px; }
 +
#monitor{ top:335px; left:390px; }
 +
#board{ top:50px; left:450px; }
 +
 +
/* General Info Box */
 +
#infobox{ position:absolute; bottom:-200px; left: 350px; height:200px; width:300px; z-index:20; margin:0 0 -100px -150px; background:#FFF; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }
 +
#infobox a, #infobox a:visited{ font:italic 16px Georgia, serif; color:#555; text-decoration:none; }
 +
#infobox a:hover{ text-decoration:underline; }
 +
 +
/* Close button for info box */
 +
span.close{position:absolute; right:5px; top:5px;}
 +
 +
/* The dimmed background when the info box is showing */
 +
#fade_bg{ position:absolute; z-index:15; width:100%; height:100%; background:url('dim.png'); display:none;}
 +
.whitef{ color:#FFFFFF;}
 +
.whitef a{ color:#FFFFFF;}
 +
</style>
</head>
</head>
Line 44: Line 136:
<img src="https://static.igem.org/mediawiki/2012/a/af/Seua_title.png">
<img src="https://static.igem.org/mediawiki/2012/a/af/Seua_title.png">
</div>
</div>
-
    <div class="titleword">
 
-
    Attributions
 
-
    </div>
 
         <br class="clearfloat" />
         <br class="clearfloat" />
     </header>
     </header>
Line 53: Line 142:
<div class="content">
<div class="content">
<header>
<header>
-
<h1>Activities</h1>
+
<h1>Attributions</h1>
-
<span>Enjoy a world of Synthetic Biology</span>
+
<span>Next comes what we have done for this project.</span>
</header>
</header>
</div>
</div>
 +
<div class="footer">
 +
  <a href="http://www.seu.edu.cn" target="_blank"><strong>Southeast University</strong></a>
 +
  <a href="http://bme.seu.edu.cn/" target="_blank">Biomedical Engineer School,SEU</a>
 +
  <a href="https://2012.igem.org/Main_Page/" target="_blank">iGEM 2012</a>
 +
  <a href="https://igem.org/Team.cgi" target="_blank">Designed By SEU_A</a>
 +
  <a href="/wiki/index.php?title=Special:UserLogout&amp;returnto=Team:SEU_A/Attributions" title="Log out">Log out</a>
 +
  <a href='https://igem.org/User_Information' title='My account'>My account</a></li>
 +
  <a href="/User:Poetdevin" title="Your user page [.]" accesskey="." class="new">Poetdevin</a>
 +
  <a href="/wiki/index.php?title=Team:SEU_A/Attributions&amp;action=edit">Edit</a>
 +
</div>
-
 
+
<div id="picture">
-
<div class="footer">
+
-
  <a href="http://www.seu.edu.cn" target="_blank"><strong>Southeast University</strong></a>
+
<!-- More Info Buttons -->
-
  <a href="http://bme.seu.edu.cn/" target="_blank">Biomedical Engineer School,SEU</a>
+
-
  <a href="https://2012.igem.org/Main_Page/" target="_blank">iGEM 2012</a>
+
<div class="more" id="couch">
-
  <a href="https://igem.org/Team.cgi" target="_blank">Designed By SEU_A</a>
+
-
  <a href="/wiki/index.php?title=Special:UserLogout&amp;returnto=Team:SEU_A/Attributions" title="Log out">Log out</a>
+
<a href="#"><img src="more.png"/></a>
-
  <a href='https://igem.org/User_Information' title='My account'>My account</a></li>
+
<span>IKEA Klippan Couch</span>
-
  <a href="/User:Poetdevin" title="Your user page [.]" accesskey="." class="new">Poetdevin</a>
+
-
  <a href="/wiki/index.php?title=Team:SEU_A/Attributions&amp;action=edit">Edit</a>
+
</div>
-
</div>
+
 +
<div class="more" id="plant">
 +
<a href="#"><img src="more.png"/></a>
 +
<span>Cornelius, Office Plant</span>
 +
</div>
 +
 +
<div class="more" id="monitor">
 +
<a href="#"><img src="more.png"/></a>
 +
<span>Samsung 305t Monitor</span>
 +
</div>
 +
 +
<div class="more" id="board">
 +
<a href="#"><img src="more.png"/></a>
 +
<span>Custom White Board</span>
 +
</div>
 +
 +
<!-- Info Boxes -->
 +
<div id="infobox">
 +
<span class="close"><a href="#"><img src="close.png"/></a></span>
 +
<br/>
 +
 +
<div id="couch_info">
 +
<img src="klippan.jpg"/><br/>
 +
<a href="http://www.ikea.com/us/en/catalog/products/10138530">IKEA Klippan Couch</a>
 +
</div>
 +
 +
<div id="plant_info">
 +
<img src="plant.jpg"/><br/>
 +
<a href="http://images.google.com/images?q=office%20plants&oe=utf-8&rls=org.mozilla:en-US:official&client=firefox-a&um=1&ie=UTF-8&sa=N&hl=en&tab=wi">Office Plants</a>
 +
</div>
 +
 +
<div id="monitor_info">
 +
<img src="samsung.jpg"/><br/>
 +
<a href="http://www.samsung.com/us/consumer/office/monitors/professional/LS30HUXCB/XAA/index.idx?pagetype=prd_detail">Samsung 305t Monitor</a>
 +
</div>
 +
 +
<div id="board_info">
 +
<img src="whiteboard.jpg"/><br/>
 +
<a href="http://www.lowes.com/lowes/lkn?action=productDetail&productId=61082-46498-31023248&lpage=none">Custom Whiteboards</a>
 +
</div>
 +
</div>
 +
 +
<!-- Dimmed Background -->
 +
<div id="fade_bg">&nbsp;</div>
 +
 +
</div>
</body>
</body>
</html>
</html>

Revision as of 06:35, 24 September 2012

iGEM 2012 SEU_A Human Practice


Attributions

Next comes what we have done for this project.
IKEA Klippan Couch
Cornelius, Office Plant
Samsung 305t Monitor
Custom White Board