Team:StuyGem NYC

From 2014hs.igem.org

(Difference between revisions)
 
(144 intermediate revisions not shown)
Line 1: Line 1:
-
 
<html class="no-js" lang="en">
<html class="no-js" lang="en">
   <head>
   <head>
Line 15: Line 14:
display: none;
display: none;
}
}
-
#content{
+
#content {
-
border: none;
+
  border: none;
}
}
#searchform {
#searchform {
Line 23: Line 22:
body
body
{
{
-
background-color:#ffffff !important;
+
text-align: center;
 +
background-color: #ffffff !important;
}
}
.mediawiki{
.mediawiki{
-
background: #ffffff;
+
background: #7FFF00;
}
}
-
div#top-section{
+
div#top-section{
height: 20px;
height: 20px;
margin-bottom: 0px !important;
margin-bottom: 0px !important;
Line 50: Line 50:
html *
html *
{
{
-
   font-family: Garamond !important;
+
   font-family: Century Gothic !important;
}
}
 +
.img{position:absolute;z-index:1;}
 +
 +
#container{
 +
    display:inline-block;
 +
    position:relative;
 +
}
 +
 +
#gameCanvas{
 +
    position:relative;
 +
    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 class="row">
+
</div>
-
    <div class="large-3 columns">
+
-
      <h1><img src="https://static.igem.org/mediawiki/2014hs/4/4c/StuyGemLogo.png" /></h1>
+
-
    </div>
+
-
    <div class="large-9 columns">
+
-
      <ul class="right button-group">
+
-
      <li><a href="#" class="button">Team Info</a></li>
+
-
      <li><a href="#" class="button">Sponsors</a></li>
+
-
      <li><a href="#" class="button">Parts</a></li>
+
-
      <li><a href="#" class="button">Project</a></li>
+
-
      <li><a href="#" class="button">Public Outreach</a></li>
+
-
      </ul>
+
-
    </div>
+
-
  </div>
+
-
 
+
-
<!-- End Header and Nav -->
+
-
+
-
<!-- First Band (Slider) -->
+
-
+
-
  <div class="row">
+
-
    <div class="large-12 columns">
+
-
    <div id="slider">
+
-
      <img src="http://placehold.it/1000x400&text=[ img 1 ]" />
+
-
    </div>
+
-
   
+
-
    <hr />
+
-
    </div>
+
   </div>
   </div>
-
 
+
 
 +
<br>
 +
 
 +
 
 +
 
<!-- Three-up Content Blocks -->
<!-- Three-up Content Blocks -->
-
+
 
   <div class="row">
   <div class="row">
-
    <div class="large-4 columns">
+
<div class="large-12 columns">
-
      <img src="http://placehold.it/400x300&text=[img]" />
+
<div id = 'container'>
-
      <h4>This is a content section.</h4>
+
<center>
-
      <p>Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.</p>
+
<img src = "https://static.igem.org/mediawiki/2014hs/a/a7/Petri-dish.gif" class='img' alt="">
-
    </div>
+
<canvas id="gameCanvas" width="500" height="500" onclick="load()"></canvas>
-
      
+
</center>
-
     <div class="large-4 columns">
+
</div>
-
      <img src="http://placehold.it/400x300&text=[img]" />
+
</div>
-
      <h4>This is a content section.</h4>
+
</div>
-
      <p>Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.</p>
+
     <br>
-
    </div>
+
<br>
-
   
+
 
-
    <div class="large-4 columns">
+
 
-
      <img src="http://placehold.it/400x300&text=[img]" />
+
<div class="row">
-
      <h4>This is a content section.</h4>
+
     <div class="large-12 columns">
-
      <p>Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.</p>
+
<center>
-
    </div>
+
<h3>Photo Gallery</h3>
-
 
+
</center>
-
    </div>
+
<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>
 +
 
<!-- Call to Action Panel -->
<!-- Call to Action Panel -->
<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>We'd love to hear from you, you attractive person you.</p>
+
             <p align="left">Visit Our Twitter Page!</p>
           </div>
           </div>
           <div class="large-3 columns">
           <div class="large-3 columns">
-
             <a href="#" class="radius button right">Contact Us</a>
+
             <a href="http://twitter.com/StuyGEM" class="radius button right">Tweets!</a>
           </div>
           </div>
         </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">
-
          <p>© Copyright no one at all. Go to town.</p>
+
<font color = "aqua">
-
        </div>
+
  <p align="left">© Copyright StuyGem, Foundation</p>
-
        <div class="large-6 columns">
+
</div>
-
          <ul class="inline-list right">
+
</font>
-
            <li><a href="#">Link 1</a></li>
+
<div class="large-6 columns">
-
            <li><a href="#">Link 2</a></li>
+
  <ul class="inline-list right">
-
            <li><a href="#">Link 3</a></li>
+
<li><a href="Stuy.edu">Stuyvesant Website</a></li>
-
            <li><a href="#">Link 4</a></li>
+
<li><a href="igem.org">iGem Website</a></li>
-
          </ul>
+
  </ul>
-
        </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>
 +
    <script src="https://2014hs.igem.org/Team:StuyGem_NYC/foundation.orbit.js?action=raw&ctype=text/js" type="text/js"></script>
     <script>
     <script>
       $(document).foundation();
       $(document).foundation();
     </script>
     </script>
 +
<script>
 +
var canvas = document.getElementById('gameCanvas');
 +
var ctx = canvas.getContext('2d');
 +
var imageObj = new Image();
 +
      imageObj.onload = function() {
 +
        ctx.drawImage(imageObj, 75, 170);
 +
      };
 +
      imageObj.src = 'https://static.igem.org/mediawiki/2014hs/7/7c/About.png';
 +
  var imageObj2 = new Image();
 +
      imageObj2.onload = function() {
 +
        ctx.drawImage(imageObj2, 75, 270);
 +
      };
 +
      imageObj2.src = 'https://static.igem.org/mediawiki/2014hs/3/32/Team.png';
 +
  var imageObj3 = new Image();
 +
      imageObj3.onload = function() {
 +
        ctx.drawImage(imageObj3, 265, 170);
 +
      };
 +
      imageObj3.src = 'https://static.igem.org/mediawiki/2014hs/9/92/Project.png';
 +
  var imageObj4 = new Image();
 +
      imageObj4.onload = function() {
 +
        ctx.drawImage(imageObj4, 265, 270);
 +
      };
 +
      imageObj4.src = 'https://static.igem.org/mediawiki/2014hs/1/16/Sponsors.png';
 +
 +
 +
 +
 +
 +
function getMousePos(canvas, evt) {
 +
        var rect = canvas.getBoundingClientRect();
 +
        return {
 +
          x: evt.clientX - rect.left,
 +
          y: evt.clientY - rect.top
 +
        };
 +
      }
 +
 +
 +
  canvas.addEventListener('mousemove', function(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>
   </body>
   </body>
</html>
</html>

Latest revision as of 03:34, 21 June 2014


StuyGem NYC




Photo Gallery

Image Not Loaded Image Not Loaded Image Not Loaded Image Not Loaded Image Not Loaded

Image Not Loaded Image Not Loaded Image Not Loaded Image Not Loaded Image Not Loaded


Get in touch!

Visit Our Twitter Page!

Tweets!

Retrieved from "http://2014hs.igem.org/Team:StuyGem_NYC"