Team:Groningen/DesignTest2
From 2012.igem.org
(Difference between revisions)
m |
m |
||
Line 1: | Line 1: | ||
+ | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> | ||
+ | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> | ||
+ | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> | ||
+ | <script type="text/javascript" src="js/prototype.js"></script> | ||
+ | <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> | ||
+ | <script type="text/javascript" src="js/lightbox.js"></script> | ||
+ | <script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script> | ||
+ | |||
+ | <head> | ||
+ | <meta http-equiv="X-UA-Compatible" content="IE=EDGE" charset="utf-8" /> | ||
+ | <style> | ||
+ | div.cogbig{ | ||
+ | position:absolute; | ||
+ | padding: 0px; | ||
+ | margin: 0px 0px; | ||
+ | opacity:0.4; | ||
+ | filter:alpha(opacity=40); | ||
+ | z-index:-1; | ||
+ | } | ||
+ | |||
+ | /*Windmill*/ | ||
+ | #img1{ | ||
+ | width:120px; | ||
+ | height:104px; | ||
+ | position:absolute; | ||
+ | z-index:10; | ||
+ | left:-19px; | ||
+ | top:-31px; | ||
+ | } | ||
+ | |||
+ | /*Menu*/ | ||
+ | #navigation { | ||
+ | margin: 0; | ||
+ | padding: 0 0em; | ||
+ | height: 20px; | ||
+ | list-style: none; | ||
+ | display:block; | ||
+ | font-size: 12px; | ||
+ | font-weight: 300; | ||
+ | color:#fff; | ||
+ | z-index:2; | ||
+ | } | ||
+ | #navigation > li { | ||
+ | float: left; | ||
+ | height: 100%; | ||
+ | margin-right: 18px; | ||
+ | margin-left: 18px; | ||
+ | left:100px; | ||
+ | padding: 0 0em; | ||
+ | } | ||
+ | #navigation > li > a { | ||
+ | float: left; | ||
+ | height: 100%; | ||
+ | color: #00; | ||
+ | text-decoration: none; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | #navigation > li > a:hover { | ||
+ | color: Black; | ||
+ | text-decoration: underline; | ||
+ | |||
+ | |||
+ | } | ||
+ | #navigation > li.sub { | ||
+ | position: relative; | ||
+ | |||
+ | } | ||
+ | #navigation > li.sub ul { | ||
+ | width: 130px; | ||
+ | margin: 0; | ||
+ | padding: 0.0em 0; | ||
+ | list-style: none; | ||
+ | position: absolute; | ||
+ | top: -800em; | ||
+ | text-align:center; | ||
+ | padding-left:13px; | ||
+ | background-color: rgba(0,0,0,0.5); | ||
+ | } | ||
+ | #navigation > li.sub ul li { | ||
+ | width: 90%; | ||
+ | background-color: rgba(0,0,0,0.9); | ||
+ | } | ||
+ | #navigation > li.sub ul li a { | ||
+ | height: 100%; | ||
+ | display: block; | ||
+ | padding: 0.0em; | ||
+ | color: #fff; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | #navigation > li.sub ul li a:hover { | ||
+ | color: rgb(255,103,0); | ||
+ | font-weight: 700; | ||
+ | } | ||
+ | #navigation > li.sub:hover ul { | ||
+ | top: 100px; | ||
+ | left:-35px; | ||
+ | } | ||
+ | |||
+ | #expand | ||
+ | .expand-down span | ||
+ | { | ||
+ | font-family: Arial,Helvetica,sans-serif; | ||
+ | line-height: normal; | ||
+ | margin-bottom: 0px; | ||
+ | margin-top: 0px; | ||
+ | z-index:1; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | .expand-down * { | ||
+ | margin: 0px; | ||
+ | padding: 0; | ||
+ | z-index:1; | ||
+ | } | ||
+ | .expand-down ul { | ||
+ | padding-top:100px; | ||
+ | z-index:1; | ||
+ | } | ||
+ | .expand-down ul li { | ||
+ | list-style-type:none; | ||
+ | z-index:1; | ||
+ | } | ||
+ | .expand-down ul li a { | ||
+ | text-decoration:none; | ||
+ | z-index:1; | ||
+ | } | ||
+ | .expand-down ul li a img { | ||
+ | width:80px; | ||
+ | height:82px; | ||
+ | border:none; | ||
+ | z-index:1; | ||
+ | } | ||
+ | .expand-down ul li a span { | ||
+ | //span bar under picture text | ||
+ | z-index:1; | ||
+ | text-align:center; | ||
+ | font-size:14px; | ||
+ | display: block; | ||
+ | padding: 0.0em; | ||
+ | color: #fff; | ||
+ | } | ||
+ | .expand-down ul li:hover a span { | ||
+ | display:block; | ||
+ | font-size:14px; | ||
+ | z-index:1; | ||
+ | color: rgb(255,103,0); | ||
+ | font-weight: 700; | ||
+ | background-color: rgba(0,0,0,0.5); | ||
+ | } | ||
+ | .expand-down ul li:hover a img { | ||
+ | width:80px; | ||
+ | height:82px; | ||
+ | z-index:1; | ||
+ | } | ||
+ | .expand-down ul li:hover + li a img { | ||
+ | width:80px; | ||
+ | height:82px; | ||
+ | z-index:1; | ||
+ | } | ||
+ | .expand-down ul li:hover + li + li a img { | ||
+ | width:80px; | ||
+ | height:82px; | ||
+ | z-index:1; | ||
+ | } | ||
+ | |||
+ | /*Body*/ | ||
+ | body{ | ||
+ | background-attachment:fixed; | ||
+ | background-color:rgb(118,28,17); | ||
+ | text-align: justify; | ||
+ | border: none; | ||
+ | } | ||
+ | #content{ | ||
+ | position: relative; | ||
+ | top:-5px; | ||
+ | width: 1024px; | ||
+ | padding: 0px 0px 0px 0px; | ||
+ | background-color:transparent; | ||
+ | border: none; | ||
+ | } | ||
+ | #bodyContent{ | ||
+ | width: 1024px; | ||
+ | position: relative; | ||
+ | padding: 0px 0px 0px 0px; | ||
+ | background-color:transparent; | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*Suppress iGEM defaults*/ | ||
+ | a[title="Main Page"]{display: none;} | ||
+ | .firstHeading{display: none;} | ||
+ | .noprint{display: none;} | ||
+ | #menubar{ | ||
+ | display: block; | ||
+ | background-color:transparent; | ||
+ | } | ||
+ | #search-controls{display: none;} | ||
+ | #contentSub{display: none;} | ||
+ | #catlinks{display: none;} | ||
+ | #footer-box{display: none;} | ||
+ | #p-logo{display: block;} | ||
+ | #top-section { | ||
+ | display: none; | ||
+ | position: relative; | ||
+ | height: 98px; | ||
+ | width: 975px; | ||
+ | margin: 0px auto; | ||
+ | border-left: 1px solid rgb(118,28,17); | ||
+ | border-right: 1px solid rgb(118,28,17); | ||
+ | border-bottom: 1px solid rgb(118,28,17); | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | |||
+ | |||
+ | <div style="position:absolute; left: 197px; top: 30px;opacity:0.4; | ||
+ | filter:alpha(opacity=40);"> | ||
+ | <img id="cog1" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" /> | ||
+ | </div> | ||
+ | |||
+ | <div style="position:absolute; left: 313px; top: 30px;opacity:0.4; | ||
+ | filter:alpha(opacity=40);"> | ||
+ | <img id="cog2" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" /> | ||
+ | </div> | ||
+ | |||
+ | <div style="position:absolute; left: 429px; top: 30px;opacity:0.4; | ||
+ | filter:alpha(opacity=40);"> | ||
+ | <img id="cog3" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" /> | ||
+ | </div> | ||
+ | |||
+ | <div style="position:absolute; left: 545px; top: 30px;opacity:0.4; | ||
+ | filter:alpha(opacity=40);"> | ||
+ | <img id="cog4" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" /> | ||
+ | </div> | ||
+ | |||
+ | <div style="position:absolute; left: 661px; top: 30px;opacity:0.4; | ||
+ | filter:alpha(opacity=40);"> | ||
+ | <img id="cog5" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" /> | ||
+ | </div> | ||
+ | |||
+ | <div style="position:absolute; left: 777px; top: 30px;opacity:0.4; | ||
+ | filter:alpha(opacity=40);"> | ||
+ | <img id="cog6" src="https://static.igem.org/mediawiki/2012/a/ad/Groningen2012_AD_20120802_SmallCog.png" /> | ||
+ | </div> | ||
+ | |||
+ | <div class="expand-down"> | ||
+ | <ul id="navigation" > | ||
+ | <li class="sub" id="menuhome"> | ||
+ | |||
+ | <a href="https://2012.igem.org/Team:Groningen" title="Home" rel="nofollow"> | ||
+ | <img src="https://static.igem.org/mediawiki/2012/6/61/Groningen2012_ID_20120808_Menu_Home.png" alt="Home" title="Home" /> | ||
+ | <span>home</span> | ||
+ | </a> | ||
+ | |||
+ | <div class="cogbig"> | ||
+ | <img id="cogbighome" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80"> | ||
+ | </div> | ||
+ | |||
+ | </li> | ||
+ | <li class="sub" id="menuteam"> | ||
+ | <div class="cogbig"> | ||
+ | <img id="cogbigteam" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80"> | ||
+ | </div> | ||
+ | <a href="https://2012.igem.org/Team:Groningen/Team" title="Team" rel="nofollow" > | ||
+ | <img src="https://static.igem.org/mediawiki/2012/f/fc/Groningen2012_ID_20120808_Menu_Team.png" alt="team" title="Team" /> | ||
+ | <span>team</span> | ||
+ | <ul> | ||
+ | <li><a href="https://2012.igem.org/Team:Groningen/Team">about us</a></li> | ||
+ | <li><a href="https://igem.org/Team.cgi?id=818">official team profile</a></li> | ||
+ | |||
+ | <li><a href="https://2012.igem.org/Team:Groningen/Attributions">attributions</a></li> | ||
+ | |||
+ | <li><a href="https://2012.igem.org/Team:Groningen/Contact">contact</a></li> | ||
+ | </ul> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="sub" id="menuproject"> | ||
+ | <div class="cogbig"> | ||
+ | <img id="cogbigproject" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80"> | ||
+ | </div> | ||
+ | <a href="https://2012.igem.org/Team:Groningen/Project" title="Project" rel="nofollow" > | ||
+ | <img src="https://static.igem.org/mediawiki/2012/1/19/Groningen2012_ID_20120808_Menu_Project.png" alt="Project" title="Project" /> | ||
+ | <span>project</span> | ||
+ | <ul> | ||
+ | <li><a href="https://2012.igem.org/Team:Groningen/description">abstract</a></li> | ||
+ | <li><a href="https://2012.igem.org/Team:Groningen/Wetwork">wetwork</a></li> | ||
+ | <li><a href="https://2012.igem.org/Team:Groningen/Notebook">notebook</a></li> | ||
+ | <li><a href="https://2012.igem.org/Team:Groningen/Modeling">modeling</a></li> | ||
+ | |||
+ | |||
+ | </ul> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="sub" id="menuparts"> | ||
+ | <div class="cogbig"> | ||
+ | <img id="cogbigparts" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80"> | ||
+ | </div> | ||
+ | <a href="https://2012.igem.org/Team:Groningen/Parts" title="Parts" rel="nofollow" > | ||
+ | <img src="https://static.igem.org/mediawiki/2012/0/06/Groningen2012_ID_20120808_Menu_Parts.png" alt="Parts" title="Parts" /> | ||
+ | <span>parts</span> | ||
+ | <ul> | ||
+ | <li><a href="https://2012.igem.org/Team:Groningen/OurBiobrick">biobricks</a></li> | ||
+ | <li><a href="https://2012.igem.org/Team:Groningen/parts_fail">failed bricks</a></li> | ||
+ | </ul> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="sub" id="menusafety"> | ||
+ | <div class="cogbig"> | ||
+ | <img id="cogbigsafety" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80"> | ||
+ | </div> | ||
+ | <a href="https://2012.igem.org/Team:Groningen/Safety" title="Safety" rel="nofollow" > | ||
+ | <img src="https://static.igem.org/mediawiki/2012/d/d4/Groningen2012_ID_20120808_Menu_Safety.png" alt="Safety" title="Safety" /> | ||
+ | <span>safety</span> | ||
+ | <ul> | ||
+ | <li><a href="https://2012.igem.org/Team:Groningen/10com">in the lab</a></li> | ||
+ | <li><a href="https://2012.igem.org/Team:Groningen/publicsafety">public safety</a></li> | ||
+ | <li><a href="https://2012.igem.org/Team:Groningen/environment">in the environment</a></li> | ||
+ | <li><a href="https://2012.igem.org/Team:Groningen/foodsafety">food safety</a></li> | ||
+ | </ul> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="sub" id="menupr"> | ||
+ | <div class="cogbig"> | ||
+ | <img id="cogbigpr" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80"> | ||
+ | </div> | ||
+ | <a href="https://2012.igem.org/Team:Groningen/PublicRelations" title="Public Relation" rel="nofollow" > | ||
+ | <img src="https://static.igem.org/mediawiki/2012/6/6f/Groningen2012_ID_20120808_Menu_Public_Relations.png" alt="Public Relation" title="Public Relation" /> | ||
+ | <span>human<br>resources</span> | ||
+ | <ul> | ||
+ | |||
+ | <li><a href="https://2012.igem.org/Team:Groningen/summer_school">summerschool</a></li> | ||
+ | <li><a href="https://2012.igem.org/Team:Groningen/Stop_the_food_waste_initiative">stop the food waste</a></li> | ||
+ | <li><a href="https://2012.igem.org/Team:Groningen/Festivals">festivals</a></li> | ||
+ | <li><a href="https://2012.igem.org/Team:Groningen/symposia">symposia</a></li> | ||
+ | <li><a href="https://2012.igem.org/Team:Groningen/international_cooperation">cooperation</a></li> | ||
+ | </ul> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="sub" id="menusponsors"> | ||
+ | <div class="cogbig"> | ||
+ | <img id="cogbigsponsors" src="https://static.igem.org/mediawiki/2012/b/b6/Groningen2012_AD_20120802_BigCog.png" width="80" height="80"> | ||
+ | </div> | ||
+ | <a href="https://2012.igem.org/Team:Groningen/Sponsors" title="Sponsors" rel="nofollow" > | ||
+ | <img src="https://static.igem.org/mediawiki/2012/d/d4/Groningen2012_ID_20120808_Menu_Sponsors.png" alt="Sponsors" title="Sponsors" /> | ||
+ | <span>sponsors</span> | ||
+ | <ul> | ||
+ | <li><a href="https://2012.igem.org/Team:Groningen/our_sponsors">our sponsors</a></li> | ||
+ | <li><a href="https://2012.igem.org/Team:Groningen/become_a_sponsor">become a sponsor</a></li> | ||
+ | <li><a href="http://www.indiegogo.com/FoodWarden">indiegogo crowdfunding </a></li> | ||
+ | <li><a href="https://2012.igem.org/Team:Groningen/sponsor_levels">sponsorship levels</a></li> | ||
+ | </ul> | ||
+ | </a> | ||
+ | |||
+ | <img id="img1" img src="https://static.igem.org/mediawiki/2012/e/e4/Groningen2012_AD_20120802_WindmillArms.png" width="120"height="104" /> | ||
+ | |||
+ | |||
+ | </script> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </body> | ||
+ | <script> | ||
+ | $(document).ready(function(){ | ||
+ | $("ul#navigation").mouseenter(function(){ | ||
+ | cog = 1; | ||
+ | }); | ||
+ | $("li#navigation").mouseleave(function(){ | ||
+ | cog = 0; | ||
+ | angle = 0; | ||
+ | }); | ||
+ | $("li#menuhome").mouseenter(function(){ | ||
+ | target = "#cogbighome"; | ||
+ | }); | ||
+ | $("li#menuteam").mouseenter(function(){ | ||
+ | target = "#cogbigteam"; | ||
+ | }); | ||
+ | $("li#menuproject").mouseenter(function(){ | ||
+ | target = "#cogbigproject"; | ||
+ | }); | ||
+ | $("li#menuparts").mouseenter(function(){ | ||
+ | target = "#cogbigparts"; | ||
+ | }); | ||
+ | $("li#menusafety").mouseenter(function(){ | ||
+ | target = "#cogbigsafety"; | ||
+ | }); | ||
+ | $("li#menupr").mouseenter(function(){ | ||
+ | target = "#cogbigpr"; | ||
+ | }); | ||
+ | $("li#menusponsors").mouseenter(function(){ | ||
+ | target = "#cogbigsponsors"; | ||
+ | |||
+ | }); | ||
+ | }); | ||
+ | |||
+ | var cogangle = 0; | ||
+ | var cog = 0; | ||
+ | var angle = 0; | ||
+ | |||
+ | var target = ".cogbig"; | ||
+ | setInterval(function(){ | ||
+ | cogangle-=cog; | ||
+ | $(target).rotate(cogangle); | ||
+ | if (target=="#cogbigsponsors") | ||
+ | { | ||
+ | $("#img1").rotate(-cogangle); | ||
+ | $("#cogbighome").rotate(cogangle); | ||
+ | $("#cogbigteam").rotate(cogangle); | ||
+ | $("#cogbigproject").rotate(cogangle); | ||
+ | $("#cogbigsafety").rotate(cogangle); | ||
+ | $("#cogbigparts").rotate(cogangle); | ||
+ | $("#cogbigpr").rotate(cogangle); | ||
+ | $("#cog1").rotate(-cogangle*3); | ||
+ | $("#cog2").rotate(-cogangle*3); | ||
+ | $("#cog3").rotate(-cogangle*3); | ||
+ | $("#cog4").rotate(-cogangle*3); | ||
+ | $("#cog5").rotate(-cogangle*3); | ||
+ | $("#cog6").rotate(-cogangle*3); | ||
+ | document.getElementById('cog1').style.display = "block"; | ||
+ | document.getElementById('cog2').style.display = "block"; | ||
+ | document.getElementById('cog3').style.display = "block"; | ||
+ | document.getElementById('cog4').style.display = "block"; | ||
+ | document.getElementById('cog5').style.display = "block"; | ||
+ | document.getElementById('cog6').style.display = "block"; | ||
+ | } | ||
+ | else | ||
+ | { | ||
+ | document.getElementById('cog1').style.display = "none"; | ||
+ | document.getElementById('cog2').style.display = "none"; | ||
+ | document.getElementById('cog3').style.display = "none"; | ||
+ | document.getElementById('cog4').style.display = "none"; | ||
+ | document.getElementById('cog5').style.display = "none"; | ||
+ | document.getElementById('cog6').style.display = "none"; | ||
+ | |||
+ | } | ||
+ | },30); | ||
+ | |||
+ | |||
+ | |||
+ | </script> | ||
+ | |||
+ | </html> | ||
+ | |||
+ | <html> | ||
+ | <head> | ||
+ | <style> | ||
+ | #img2{ | ||
+ | position:absolute; | ||
+ | z-index:0; | ||
+ | left:-50px; | ||
+ | top:60px; | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | font-family: Helvetica, Arial, sans-serif; | ||
+ | |||
+ | } | ||
+ | l1 { | ||
+ | font-size:21pt; | ||
+ | line-height:21pt; | ||
+ | color:white; | ||
+ | } | ||
+ | l2 { | ||
+ | font-size:14pt; | ||
+ | line-height:14pt; | ||
+ | color:white; | ||
+ | |||
+ | } | ||
+ | .ctb { | ||
+ | width: 540px; | ||
+ | text-align: center; | ||
+ | background: #000; | ||
+ | |||
+ | background-color: transparent; | ||
+ | background-color: rgba(0,0,0,0.3); | ||
+ | padding: 10px ; | ||
+ | margin: 30px auto; | ||
+ | |||
+ | color: #FFF; | ||
+ | |||
+ | } | ||
+ | .ctc { | ||
+ | width: 600px; | ||
+ | text-align: center; | ||
+ | background: #000; | ||
+ | |||
+ | padding-right:10px; | ||
+ | padding-left:10px; | ||
+ | margin: 50px auto; | ||
+ | background-color: transparent; | ||
+ | background-color: rgba(0,0,0,0.3); | ||
+ | |||
+ | color: #FFF; | ||
+ | |||
+ | } | ||
+ | </style> | ||
+ | |||
+ | <body> | ||
+ | <div class="ctc"> | ||
+ | <div class="ctb"> | ||
+ | <l1 >Take a part in <A HREF="http://edu.surveygizmo.com/s3/1020905/FoodWarden" TARGET="_blank"><FONT COLOR=#ff6700>the survey</FONT></A> about our project!</l1><br> | ||
+ | </div> | ||
+ | </div> | ||
+ | <img id="img2" img src="https://static.igem.org/mediawiki/2012/4/41/Groningen_2012_logoFW.png" width="300px"/> | ||
+ | </body> | ||
+ | </head> | ||
+ | </html> | ||
+ | |||
+ | <html> | ||
+ | <script type="text/javascript"> | ||
+ | |||
+ | var _gaq = _gaq || []; | ||
+ | _gaq.push(['_setAccount', 'UA-34029773-1']); | ||
+ | _gaq.push(['_trackPageview']); | ||
+ | |||
+ | (function() { | ||
+ | var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; | ||
+ | ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; | ||
+ | var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | ||
+ | })(); | ||
+ | |||
+ | </script> | ||
+ | </html> | ||
+ | |||
+ | |||
<html> | <html> | ||
<header> | <header> |
Revision as of 16:51, 17 September 2012