Team:StuyGem NYC
From 2014hs.igem.org
(Difference between revisions)
Kelvinn1996 (Talk | contribs) |
Kelvinn1996 (Talk | contribs) |
||
(100 intermediate revisions not shown) | |||
Line 15: | Line 15: | ||
} | } | ||
#content { | #content { | ||
- | border | + | border: none; |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
#searchform { | #searchform { | ||
Line 26: | Line 23: | ||
{ | { | ||
text-align: center; | text-align: center; | ||
- | background-color:#ffffff !important; | + | background-color: #ffffff !important; |
} | } | ||
.mediawiki{ | .mediawiki{ | ||
- | background: # | + | background: #7FFF00; |
} | } | ||
- | div#top-section{ | + | div#top-section{ |
height: 20px; | height: 20px; | ||
margin-bottom: 0px !important; | margin-bottom: 0px !important; | ||
Line 53: | Line 50: | ||
html * | html * | ||
{ | { | ||
- | font-family: | + | font-family: Century Gothic !important; |
} | } | ||
.img{position:absolute;z-index:1;} | .img{position:absolute;z-index:1;} | ||
#container{ | #container{ | ||
- | display:inline-block; | + | display:inline-block; |
- | position:relative; | + | position:relative; |
} | } | ||
Line 66: | Line 63: | ||
z-index:20; | z-index:20; | ||
} | } | ||
+ | .thumbnails img { | ||
+ | |||
+ | height: 80px; | ||
+ | |||
+ | border: 4px solid #555; | ||
+ | |||
+ | padding: 1px; | ||
+ | |||
+ | margin: 0 10px 10px 0; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | .thumbnails img:hover { | ||
+ | border: 4px solid #00ccff; | ||
+ | |||
+ | cursor:pointer; | ||
+ | } | ||
+ | |||
+ | |||
+ | .preview img { | ||
+ | border: 4px solid #444; | ||
+ | |||
+ | padding: 1px; | ||
+ | |||
+ | height: 500px; | ||
+ | } | ||
+ | |||
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
+ | <div class="row"> | ||
+ | <p align="right"> | ||
+ | <img src="https://static.igem.org/mediawiki/2014hs/8/82/Bacteria.gif"> | ||
+ | </p> | ||
+ | </div> | ||
+ | <p> | ||
+ | <div class="row"> | ||
+ | <center> | ||
+ | <marquee behavior="slide" direction="right" scrollamount="20"> | ||
+ | <img src="https://static.igem.org/mediawiki/2014hs/4/49/Stuygem1.png"> | ||
+ | </marquee> | ||
+ | <p> | ||
+ | <marquee behavior="slide" direction="right" scrollamount="20"> | ||
+ | <img src="https://static.igem.org/mediawiki/2014hs/a/ae/Stuygem2.png"> | ||
+ | </marquee> | ||
+ | <p> | ||
+ | <marquee behavior="slide" direction="right" scrollamount="20"> | ||
+ | <img src="https://static.igem.org/mediawiki/2014hs/6/68/Stuygem3.png"> | ||
+ | </marquee> | ||
+ | </center> | ||
- | |||
- | |||
- | |||
- | |||
</div> | </div> | ||
</div> | </div> | ||
Line 81: | Line 122: | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
+ | <!-- Three-up Content Blocks --> | ||
- | |||
- | |||
<div class="row"> | <div class="row"> | ||
<div class="large-12 columns"> | <div class="large-12 columns"> | ||
<div id = 'container'> | <div id = 'container'> | ||
<center> | <center> | ||
- | <img src = "https://static.igem.org/mediawiki/2014hs/ | + | <img src = "https://static.igem.org/mediawiki/2014hs/a/a7/Petri-dish.gif" class='img' alt=""> |
- | <canvas id="gameCanvas" width="500" height="500"></canvas> | + | <canvas id="gameCanvas" width="500" height="500" onclick="load()"></canvas> |
</center> | </center> | ||
</div> | </div> | ||
Line 114: | Line 136: | ||
</div> | </div> | ||
<br> | <br> | ||
+ | <br> | ||
+ | |||
+ | |||
+ | <div class="row"> | ||
+ | <div class="large-12 columns"> | ||
+ | <center> | ||
+ | <h3>Photo Gallery</h3> | ||
+ | </center> | ||
+ | <div class="gallery" align="center"> | ||
+ | <div class="thumbnails"> | ||
+ | |||
+ | <img onclick="load1()" id="img1" src="https://pbs.twimg.com/media/Bkfp7KhCAAAb6gp.jpg" alt="Image Not Loaded"/> | ||
+ | <img onclick="load2()" id="img2" src="https://pbs.twimg.com/media/BlZnWsqCYAAjGxL.jpg" alt="Image Not Loaded"/> | ||
+ | <img onclick="load3()" id="img3" src="https://pbs.twimg.com/media/Bmk9AScIYAA2u98.jpg" alt="Image Not Loaded"/> | ||
+ | <img onclick="load4()" id="img4" src="https://pbs.twimg.com/media/Bm6UMgqIIAAfzPi.jpg" alt="Image Not Loaded"/> | ||
+ | <img onclick="load5()" id="img5" src="https://pbs.twimg.com/media/BoB-Cm4IgAAI_LV.jpg" alt="Image Not Loaded"/> | ||
+ | </div><br/> | ||
+ | <div class="thumbnails"> | ||
+ | <img onclick="load6()" id="img6" src="https://pbs.twimg.com/media/BqDncTQCcAA8Qe1.jpg" alt="Image Not Loaded"/> | ||
+ | <img onclick="load7()" id="img7" src="https://pbs.twimg.com/media/BqDnxN2CcAERiye.jpg" alt="Image Not Loaded"/> | ||
+ | <img onclick="load8()" id="img8" src="https://static.igem.org/mediawiki/2014hs/7/7e/10469649_775809195802730_1655927593_n.jpg" alt="Image Not Loaded"/> | ||
+ | <img onclick="load9()" id="img9" src="https://static.igem.org/mediawiki/2014hs/4/4e/10478883_775809185802731_498288320_n.jpg" alt="Image Not Loaded"/> | ||
+ | <img onclick="load10()" id="img10" src="https://static.igem.org/mediawiki/2014hs/5/5b/10466823_775809192469397_451170229_n.jpg" alt="Image Not Loaded"/> | ||
+ | |||
+ | |||
+ | <div class="preview" align="center"> | ||
+ | |||
+ | <img id="preview" src="https://pbs.twimg.com/media/Bkfp7KhCAAAb6gp.jpg"/> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <br> | ||
<br> | <br> | ||
Line 119: | Line 177: | ||
<div class="row"> | <div class="row"> | ||
<div class="large-12 columns"> | <div class="large-12 columns"> | ||
- | + | ||
<div class="panel"> | <div class="panel"> | ||
<h4>Get in touch!</h4> | <h4>Get in touch!</h4> | ||
- | + | ||
<div class="row"> | <div class="row"> | ||
<div class="large-9 columns"> | <div class="large-9 columns"> | ||
- | <p>Visit Our Twitter Page!</p> | + | <p align="left">Visit Our Twitter Page!</p> |
</div> | </div> | ||
<div class="large-3 columns"> | <div class="large-3 columns"> | ||
Line 132: | Line 190: | ||
</div> | </div> | ||
</div> | </div> | ||
- | + | ||
</div> | </div> | ||
</div> | </div> | ||
- | + | ||
<!-- Footer --> | <!-- Footer --> | ||
- | + | ||
<footer class="row"> | <footer class="row"> | ||
<div class="large-12 columns"> | <div class="large-12 columns"> | ||
<hr /> | <hr /> | ||
- | <div class="row"> | + | <div class="row" id="foo"> |
<div class="large-6 columns"> | <div class="large-6 columns"> | ||
<font color = "aqua"> | <font color = "aqua"> | ||
- | <p>© Copyright StuyGem, Foundation</p> | + | <p align="left">© Copyright StuyGem, Foundation</p> |
</div> | </div> | ||
</font> | </font> | ||
Line 154: | Line 212: | ||
</div> | </div> | ||
</div> | </div> | ||
- | </div> | + | </div> |
</footer> | </footer> | ||
- | |||
+ | <script> | ||
+ | function load1(){document.getElementById("preview").src = "https://pbs.twimg.com/media/Bkfp7KhCAAAb6gp.jpg"; | ||
+ | } | ||
+ | function load2(){document.getElementById("preview").src = "https://pbs.twimg.com/media/BlZnWsqCYAAjGxL.jpg"; | ||
+ | } | ||
+ | function load3(){document.getElementById("preview").src = "https://pbs.twimg.com/media/Bmk9AScIYAA2u98.jpg"; | ||
+ | } | ||
+ | function load4(){document.getElementById("preview").src = "https://pbs.twimg.com/media/Bm6UMgqIIAAfzPi.jpg"; | ||
+ | } | ||
+ | |||
+ | function load5(){document.getElementById("preview").src = "https://pbs.twimg.com/media/BoB-Cm4IgAAI_LV.jpg"; | ||
+ | } | ||
+ | |||
+ | function load6(){document.getElementById("preview").src = "https://pbs.twimg.com/media/BqDncTQCcAA8Qe1.jpg"; | ||
+ | } | ||
+ | |||
+ | function load7(){document.getElementById("preview").src = "https://pbs.twimg.com/media/BqDnxN2CcAERiye.jpg"; | ||
+ | } | ||
+ | |||
+ | function load8(){document.getElementById("preview").src = "https://static.igem.org/mediawiki/2014hs/7/7e/10469649_775809195802730_1655927593_n.jpg"; | ||
+ | } | ||
+ | |||
+ | function load9(){document.getElementById("preview").src ="https://static.igem.org/mediawiki/2014hs/4/4e/10478883_775809185802731_498288320_n.jpg"; | ||
+ | } | ||
+ | |||
+ | function load10(){document.getElementById("preview").src ="https://static.igem.org/mediawiki/2014hs/5/5b/10466823_775809192469397_451170229_n.jpg"; | ||
+ | } | ||
+ | </script> | ||
- | |||
<script src="https://2014hs.igem.org/Team:StuyGem_NYC/jquery.js?action=raw&ctype=text/js"></script> | <script src="https://2014hs.igem.org/Team:StuyGem_NYC/jquery.js?action=raw&ctype=text/js"></script> | ||
<script src="https://2014hs.igem.org/Team:StuyGem_NYC/foundation.min.js?action=raw&ctype=text/js" type="text/js"></script> | <script src="https://2014hs.igem.org/Team:StuyGem_NYC/foundation.min.js?action=raw&ctype=text/js" type="text/js"></script> | ||
Line 175: | Line 259: | ||
<script> | <script> | ||
var canvas = document.getElementById('gameCanvas'); | var canvas = document.getElementById('gameCanvas'); | ||
- | var ctx = canvas.getContext('2d'); | + | var ctx = canvas.getContext('2d'); |
- | var imageObj = new Image(); | + | var imageObj = new Image(); |
imageObj.onload = function() { | imageObj.onload = function() { | ||
ctx.drawImage(imageObj, 75, 170); | ctx.drawImage(imageObj, 75, 170); | ||
}; | }; | ||
- | imageObj.src = 'https://static.igem.org/mediawiki/2014hs/ | + | imageObj.src = 'https://static.igem.org/mediawiki/2014hs/7/7c/About.png'; |
var imageObj2 = new Image(); | var imageObj2 = new Image(); | ||
imageObj2.onload = function() { | imageObj2.onload = function() { | ||
ctx.drawImage(imageObj2, 75, 270); | ctx.drawImage(imageObj2, 75, 270); | ||
}; | }; | ||
- | imageObj2.src = 'https://static.igem.org/mediawiki/2014hs/ | + | imageObj2.src = 'https://static.igem.org/mediawiki/2014hs/3/32/Team.png'; |
var imageObj3 = new Image(); | var imageObj3 = new Image(); | ||
imageObj3.onload = function() { | imageObj3.onload = function() { | ||
ctx.drawImage(imageObj3, 265, 170); | ctx.drawImage(imageObj3, 265, 170); | ||
}; | }; | ||
- | imageObj3.src = 'https://static.igem.org/mediawiki/2014hs/ | + | imageObj3.src = 'https://static.igem.org/mediawiki/2014hs/9/92/Project.png'; |
var imageObj4 = new Image(); | var imageObj4 = new Image(); | ||
imageObj4.onload = function() { | imageObj4.onload = function() { | ||
ctx.drawImage(imageObj4, 265, 270); | ctx.drawImage(imageObj4, 265, 270); | ||
}; | }; | ||
- | imageObj4.src = 'https://static.igem.org/mediawiki/2014hs/ | + | imageObj4.src = 'https://static.igem.org/mediawiki/2014hs/1/16/Sponsors.png'; |
- | function getMousePos(canvas, evt) { | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | function getMousePos(canvas, evt) { | |
- | + | var rect = canvas.getBoundingClientRect(); | |
- | + | return { | |
- | canvas.addEventListener('mousemove', function(evt){ | + | x: evt.clientX - rect.left, |
+ | y: evt.clientY - rect.top | ||
+ | }; | ||
+ | } | ||
+ | |||
+ | |||
+ | canvas.addEventListener('mousemove', function(evt){ | ||
var mousePos = getMousePos(canvas, evt); | var mousePos = getMousePos(canvas, evt); | ||
- | + | if (mousePos.x < 250){ | |
- | + | if (mousePos.y < 250){ | |
- | + | imageObj.src = 'https://static.igem.org/mediawiki/2014hs/9/99/AboutOn.png'; | |
- | + | imageObj2.src = 'https://static.igem.org/mediawiki/2014hs/3/32/Team.png'; | |
- | + | imageObj3.src = 'https://static.igem.org/mediawiki/2014hs/9/92/Project.png'; | |
- | + | imageObj4.src = 'https://static.igem.org/mediawiki/2014hs/1/16/Sponsors.png'; | |
- | + | } | |
- | + | else if (mousePos.y >= 250){ | |
- | + | imageObj.src = 'https://static.igem.org/mediawiki/2014hs/7/7c/About.png'; | |
- | + | imageObj2.src = 'https://static.igem.org/mediawiki/2014hs/3/3f/TOn.png'; | |
- | + | imageObj3.src = 'https://static.igem.org/mediawiki/2014hs/9/92/Project.png'; | |
- | + | imageObj4.src = 'https://static.igem.org/mediawiki/2014hs/1/16/Sponsors.png'; | |
- | + | } | |
- | + | } | |
- | + | else if (mousePos.x >= 250){ | |
- | + | if (mousePos.y < 250){ | |
- | + | imageObj.src = 'https://static.igem.org/mediawiki/2014hs/7/7c/About.png'; | |
- | + | imageObj2.src = 'https://static.igem.org/mediawiki/2014hs/3/32/Team.png'; | |
- | + | imageObj3.src = 'https://static.igem.org/mediawiki/2014hs/1/13/POn.png'; | |
- | + | imageObj4.src = 'https://static.igem.org/mediawiki/2014hs/1/16/Sponsors.png'; | |
- | + | } | |
- | + | else if (mousePos.y >= 250){ | |
- | + | imageObj.src = 'https://static.igem.org/mediawiki/2014hs/7/7c/About.png'; | |
- | + | imageObj2.src = 'https://static.igem.org/mediawiki/2014hs/3/32/Team.png'; | |
- | + | imageObj3.src = 'https://static.igem.org/mediawiki/2014hs/9/92/Project.png'; | |
- | + | imageObj4.src = 'https://static.igem.org/mediawiki/2014hs/2/20/SponsorsOn.png'; | |
+ | } | ||
+ | } | ||
+ | }, false); | ||
+ | function load(){ | ||
+ | if (imageObj.src == 'https://static.igem.org/mediawiki/2014hs/9/99/AboutOn.png') | ||
+ | { | ||
+ | window.location.replace("https://2014hs.igem.org/Team:StuyGem_NYC/About"); | ||
+ | } | ||
+ | else if (imageObj2.src == 'https://static.igem.org/mediawiki/2014hs/3/3f/TOn.png') | ||
+ | { | ||
+ | window.location.replace("https://2014hs.igem.org/Team:StuyGem_NYC/Team"); | ||
+ | } | ||
+ | else if (imageObj3.src == 'https://static.igem.org/mediawiki/2014hs/1/13/POn.png') | ||
+ | { | ||
+ | window.location.replace("https://2014hs.igem.org/Team:StuyGem_NYC/Project"); | ||
+ | } | ||
+ | else if (imageObj4.src == 'https://static.igem.org/mediawiki/2014hs/2/20/SponsorsOn.png') | ||
+ | { | ||
+ | window.location.replace("https://2014hs.igem.org/Team:StuyGem_NYC/Sponsors"); | ||
+ | } | ||
+ | } | ||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 03:34, 21 June 2014
Photo Gallery
Get in touch!
Visit Our Twitter Page!