Team:Toronto

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
 +
<body>
<!-- =============================================================  
<!-- =============================================================  
Line 17: Line 18:
-
<body>
 
-
<!--==========================General Document Styling
+
<!--==========================General Document Styling  
-
And CSS for sliders================-->
+
And CSS for Contact Buttons================-->
<style>  
<style>  
-
 
+
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
-
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo{
+
     display:none;}
     display:none;}
#top-section {
#top-section {
 +
    background-color:#ccff99;
background-repeat: no-repeat;
background-repeat: no-repeat;
-
background-position: center top;
+
    background-position: center top;
-
height:1220px ! important;
+
height:900px ! important;
-
background:#215E21;
+
}
}
body {
body {
Line 37: Line 36:
}
}
#content{height:0px}
#content{height:0px}
-
h1 a, h2 a, h3 a {
+
#fisheye_menu {
-
text-decoration: none;
+
-
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+
-
font-size: 1.75em;
+
-
line-height: 1.5em; 
+
-
font-weight: 200;
+
-
color:#fff
+
-
}
+
-
p {
+
-
text-decoration: none;
+
-
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+
-
font-size: 1.25em;
+
-
line-height: 1.5em; 
+
-
font-weight: 150;
+
-
color:#fff
+
-
}
+
-
 
+
list-style: none;
-
.slideshow {
+
padding: 0;
-
position: relative;
+
margin: 10px;
-
min-height: 220px;  
+
height: 81px;
-
clear: both;
+
-
margin: 35px 0 25px;
+
}
}
-
.slide {
 
-
  float: left;
 
-
}
 
-
.slide h3 a:hover {
 
-
text-decoration: none;
 
-
font-weight: bold;
 
-
}
 
-
.slide label {
 
-
    background: #2F2F2F;
 
-
    padding: 3px 7px;
 
-
    border: 1px solid #215E21;
 
-
    margin-right: 4px;
 
-
    position: relative;
 
-
    left: 1px;
 
-
    top: 280px;
 
-
    -webkit-transition: background-color .17s linear;
 
-
      -moz-transition: background-color .17s linear;
 
-
            transition: background-color .17s linear;
 
-
}
 
-
.slide [type=radio] {
 
-
display: none; 
 
-
}
 
-
.content {
 
-
position: absolute;
 
-
top: -1px;
 
-
left: -400px;
 
-
background: #215E21;
 
-
width: 500px;
 
-
padding: 20px;
 
-
border: 1px solid #215E21;
 
-
opacity: 0;
 
-
  height: 100%;
 
-
-webkit-transition: all .6s linear;
 
-
  -moz-transition: all .6s linear;
 
-
            transition: all .6s linear;
 
-
}
 
-
 
-
[type=radio]:checked ~ label {
 
-
background: #215E21;
 
-
border-bottom: 1px solid #215E21;
 
-
z-index: 2;
 
-
}
 
-
[type=radio]:checked ~ label ~ .content {
 
-
z-index: 1;
 
-
opacity: 1;
 
-
left: 0;
 
-
}​
 
-
 
-
 
-
 
#fisheye_menu {
#fisheye_menu {
list-style: none;
list-style: none;
Line 147: Line 79:
vertical-align: top;
vertical-align: top;
}
}
 +
</style>
 +
<!--==========================Javascript for Top Menu================-->
 +
 +
<script type="text/javascript">
 +
var fisheyemenu = {
 +
startSize : 55,
 +
endSize : 90,
 +
imgType : ".png",
 +
init : function () {
 +
var animElements = document.getElementById("fisheye_menu").getElementsByTagName("img");
 +
var titleElements = document.getElementById("fisheye_menu").getElementsByTagName("span");
 +
for(var j=0; j<titleElements.length; j++) {
 +
titleElements[j].style.display = 'none';
 +
}
 +
for(var i=0; i<animElements.length; i++) {
 +
 +
var y = animElements[i];
 +
y.style.width = fisheyemenu.startSize+'px';
 +
y.style.height = fisheyemenu.startSize+'px';
 +
fisheyemenu.imgSmall(y);
 +
animElements[i].onmouseover = changeSize;
 +
animElements[i].onmouseout = restoreSize;
 +
}
 +
function changeSize() {
 +
 +
fisheyemenu.imgLarge(this);
 +
var x = this.parentNode.getElementsByTagName("span");
 +
x[0].style.display = 'block';
 +
if (!this.currentWidth) this.currentWidth = fisheyemenu.startSize;
 +
fisheyemenu.resizeAnimation(this,this.currentWidth,fisheyemenu.endSize,15,10,0.333);
 +
}
 +
function restoreSize() {
 +
 +
var x = this.parentNode.getElementsByTagName("span");
 +
x[0].style.display = 'none';
 +
if (!this.currentWidth) return;
 +
fisheyemenu.resizeAnimation(this,this.currentWidth,fisheyemenu.startSize,15,10,0.5);
 +
fisheyemenu.imgSmall(this);
-
#stuff {
+
-
overflow: hidden;
+
}
-
width: 853px;
+
-
height: 204px;
+
-
-webkit-box-shadow: 0px 0px 50px 10px #215E21;
+
-
  -moz-box-shadow: 0px 0px 50px 10px #215E21;
+
-
    box-shadow: 0px 0px 50px 10px #215E21;
+
-
}
+
-
#stuff-inside {
+
-
width:10000px;
+
-
height: 204px;
+
-
}
+
-
.pag {
+
},
-
width: 853px;
+
resizeAnimation : function (elem,startWidth,endWidth,steps,intervals,powr) {
-
height: 204px;
+
if (elem.widthChangeMemInt) window.clearInterval(elem.widthChangeMemInt);
-
float: left;
+
var actStep = 0;
-
}
+
-
#stuff-inside-1:target #stuff-inside {
+
elem.widthChangeMemInt = window.setInterval(
-
-webkit-transition: all 400ms ease;
+
function() {
-
    -moz-transition: all 400ms ease;
+
elem.currentWidth = fisheyemenu.easeInOut(startWidth,endWidth,steps,actStep,powr);
-
    -o-transition: all 400ms ease;
+
elem.style.width = elem.currentWidth+"px";
-
                transition: all 400ms ease;
+
elem.style.height = elem.currentWidth+"px";
-
margin-left: 0px;
+
-
}
+
actStep++;
 +
if (actStep > steps) window.clearInterval(elem.widthChangeMemInt);
 +
}
 +
 +
,intervals)
 +
},
 +
easeInOut : function (minValue,maxValue,totalSteps,actualStep,powr) {
 +
//Generic Animation Step Value Generator By www.hesido.com
 +
var delta = maxValue - minValue;
 +
var stepp = minValue+(Math.pow(((1 / totalSteps)*actualStep),powr)*delta);
 +
return Math.ceil(stepp)
-
#stuff-inside-2:target #stuff-inside {
+
},
-
-webkit-transition: all 400ms ease;
+
imgSmall : function (obj) {
-
    -moz-transition: all 400ms ease;
+
imgSrc = obj.getAttribute("src");
-
    -o-transition: all 400ms ease;
+
var typePos = imgSrc.indexOf(fisheyemenu.imgType, 0);
-
                transition: all 400ms ease;
+
var imgName = imgSrc.substr(0, typePos);
-
margin-left: -853px;
+
obj.setAttribute("src", imgName+"_small"+fisheyemenu.imgType);
-
}
+
},
-
#stuff-inside-3:target #stuff-inside {
+
imgLarge : function (obj) {
-
-webkit-transition: all 400ms ease;
+
imgSrc = obj.getAttribute("src");
-
    -moz-transition: all 400ms ease;
+
var typePos = imgSrc.indexOf("_small", 0);
-
    -o-transition: all 400ms ease;
+
var imgName = imgSrc.substr(0, typePos);
-
                transition: all 400ms ease;
+
-
margin-left: -1706px;
+
obj.setAttribute("src", imgName+fisheyemenu.imgType);
 +
}
}
}
-
#stuff-inside-4:target #stuff-inside {
 
-
-webkit-transition: all 400ms ease;
 
-
    -moz-transition: all 400ms ease;
 
-
    -o-transition: all 400ms ease;
 
-
                transition: all 400ms ease;
 
-
margin-left: -2559px;
 
-
}
 
-
 
-
#stuff-inside-5:target #stuff-inside {
 
-
    -webkit-transition: all 400ms ease;
 
-
    -moz-transition: all 400ms ease;
 
-
    -o-transition: all 400ms ease;
 
-
                transition: all 400ms ease;
 
-
margin-left: -3412px;
 
-
}
 
-
.pag-info {
 
-
height: 40px;
 
-
background-color: #215E21;
 
-
opacity:0.9;
 
-
position: relative;
 
-
margin-top: 0px;
 
-
bottom: 50px;
 
-
color: #147025;
 
-
padding-left: 20px;
 
-
padding-top: 20px;
 
-
}
 
-
#nav {
 
-
list-style-type: none;
 
-
width: 156px;
 
-
height: 16px;
 
-
margin: 0 auto;
 
-
margin-top: 20px;
 
-
padding: 0;
 
-
color:#215E21;
 
-
}
 
-
.click {
 
-
float: left;
 
-
background: #74C365;
 
-
width: 16px;
 
-
height: 16px;
 
-
-webkit-border-radius: 8px;
 
-
  -moz-border-radius: 8px;
 
-
            border-radius: 8px;
 
-
margin-left: 5px;
 
-
margin-right: 5px;
 
-
}
 
-
.click:hover {
 
-
-webkit-box-shadow: inset 0px 0px 2px 2px #d4d4d4;
 
-
  -moz-box-shadow: inset 0px 0px 2px 2px #d4d4d4;
 
-
            box-shadow: inset 0px 0px 2px 2px #d4d4d4;
 
-
}
 
-
.click:active {
 
-
-webkit-box-shadow: inset 0px 0px 2px 2px #7a7a7a;
 
-
  -moz-box-shadow: inset 0px 0px 2px 2px #7a7a7a;
 
-
            box-shadow: inset 0px 0px 2px 2px #7a7a7a;
 
-
}
 
-
.click a {
 
-
display: block;
 
-
width: 16px;
 
-
height: 16px;
 
-
}
 
-
li {
 
-
    list-style: none;
 
-
}
 
-
</style>
 
-
 
-
 
-
<!--==========================Javascript for MENU (written below)================-->
 
-
<script type="text/javascript">
 
-
var fisheyemenu = {
 
-
startSize : 65,
 
-
endSize : 90,
 
-
imgType : ".png",
 
-
init : function () {
 
-
var animElements = document.getElementById("fisheye_menu").getElementsByTagName("img");
 
-
var titleElements = document.getElementById("fisheye_menu").getElementsByTagName("span");
 
-
for(var j=0; j<titleElements.length; j++) {
 
-
titleElements[j].style.display = 'none';
 
-
}
 
-
for(var i=0; i<animElements.length; i++) {
 
-
var y = animElements[i];
 
-
y.style.width = fisheyemenu.startSize+'px';
 
-
y.style.height = fisheyemenu.startSize+'px';
 
-
fisheyemenu.imgSmall(y);
 
-
animElements[i].onmouseover = changeSize;
 
-
animElements[i].onmouseout = restoreSize;
 
-
}
 
-
function changeSize() {
 
-
fisheyemenu.imgLarge(this);
 
-
var x = this.parentNode.getElementsByTagName("span");
 
-
x[0].style.display = 'block';
 
-
if (!this.currentWidth) this.currentWidth = fisheyemenu.startSize;
 
-
fisheyemenu.resizeAnimation(this,this.currentWidth,fisheyemenu.endSize,15,10,0.333);
 
-
}
 
-
function restoreSize() {
 
-
var x = this.parentNode.getElementsByTagName("span");
 
-
x[0].style.display = 'none';
 
-
if (!this.currentWidth) return;
 
-
fisheyemenu.resizeAnimation(this,this.currentWidth,fisheyemenu.startSize,15,10,0.5);
 
-
fisheyemenu.imgSmall(this);
 
-
}
 
-
},
 
-
resizeAnimation : function (elem,startWidth,endWidth,steps,intervals,powr) {
 
-
if (elem.widthChangeMemInt) window.clearInterval(elem.widthChangeMemInt);
 
-
var actStep = 0;
 
-
elem.widthChangeMemInt = window.setInterval(
 
-
function() {
 
-
elem.currentWidth = fisheyemenu.easeInOut(startWidth,endWidth,steps,actStep,powr);
 
-
elem.style.width = elem.currentWidth+"px";
 
-
elem.style.height = elem.currentWidth+"px";
 
-
actStep++;
 
-
if (actStep > steps) window.clearInterval(elem.widthChangeMemInt);
 
-
}
 
-
,intervals)
 
-
},
 
-
easeInOut : function (minValue,maxValue,totalSteps,actualStep,powr) {
 
-
//Generic Animation Step Value Generator By www.hesido.com
 
-
var delta = maxValue - minValue;
 
-
var stepp = minValue+(Math.pow(((1 / totalSteps)*actualStep),powr)*delta);
 
-
return Math.ceil(stepp)
 
-
},
 
-
imgSmall : function (obj) {
 
-
imgSrc = obj.getAttribute("src");
 
-
var typePos = imgSrc.indexOf(fisheyemenu.imgType, 0);
 
-
var imgName = imgSrc.substr(0, typePos);
 
-
obj.setAttribute("src", imgName+"_small"+fisheyemenu.imgType);
 
-
},
 
-
imgLarge : function (obj) {
 
-
imgSrc = obj.getAttribute("src");
 
-
var typePos = imgSrc.indexOf("_small", 0);
 
-
var imgName = imgSrc.substr(0, typePos);
 
-
obj.setAttribute("src", imgName+fisheyemenu.imgType);
 
-
}
 
-
}
 
// Add event with wide browser support
// Add event with wide browser support
if ( typeof window.addEventListener != "undefined" )
if ( typeof window.addEventListener != "undefined" )
Line 346: Line 183:
-
<body style="overflow-y:scroll;" >
 
-
<!--==========================TOP MENU================-->
 
-
<div class="container" style=" background: #147025; margin-top:-1240px;">
+
<!--==========================Actual Wiki Stuff================-->
-
<div align=left style="margin-top:0px; margin-left:0px;">
+
 
-
<img src="http://2012.igem.org/wiki/images/5/5d/Toronto_green.jpg" alt="Background" width="965" height="130"/>
+
 
-
</div>
+
<div align=left style="margin-top:-885px; margin-left:-5px">
-
+
<img src="http://igemtoronto.files.wordpress.com/2012/08/contactus.jpg" alt="Banner" width="977" height="205.3"/>
-
<div style="margin-top:-125px">
+
-
<ul id="fisheye_menu">
+
-
<li> <font color=#147025> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;  </font> </li>
+
-
<li><a href="http://2012.igem.org/Team:Toronto" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_home.png" alt="" /><span> <font size=3><b>Home </span></a> </li>
+
-
<li><a href="http://2012.igem.org/Team:Toronto/Contact" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_email.png" alt="" /><span>Contact</span></a></li>
+
-
<li><a href="http://2012.igem.org/Team:Toronto/Team" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_teamicon.png" alt="" /><span>Team</span></a></li>
+
-
<li><a href="http://2012.igem.org/Team:Toronto/Project" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_projecticon.png" alt="" /><span>Project</span></a> </li>
+
-
<li><a href="http://2012.igem.org/Team:Toronto/Notebook" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_notebook.png" alt="" /><span>Notebook</span></a></li>
+
-
<li><a href="http://2012.igem.org/Team:Toronto/Attributions" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_history.png" alt="" /><span>Attributions </span></a></li>
+
-
<li><a href="http://2012.igem.org/Team:Toronto/HumanPractice" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_outreach.png" alt="" /><span>Human Practices (Safety & Outreach)</span></a></li>
+
-
<li><a href="http://2012.igem.org/Main_Page" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_igemlogo.png" alt="" /><span>iGEM 2012 Home</span></a></li>
+
-
</ul> </font></b> </div>
+
</div>
</div>
 +
 +
   
   
-
+
  <!--==========================Menu================-->
-
+
-
  <!--==========================Main Slide show================-->
+
-
<div  style="margin-top:400px; margin-left:50px">
+
-
<div class="slideshow" style="z-index:99; position:absolute; ">
+
-
    <div class="slide" >
+
-
      <input type="radio" id="tab-1" name="tab-group-1" checked>
+
-
      <label for="tab-1" style="color:#fff">Featured</label>
+
-
     
+
-
      <div class="content">
+
-
          <h3> <a href="#" style="color:#fff">Featured Content</a> </h3>
+
-
          <br>
+
-
          <P> Are you a new visitor? <a href="#" style="color: #fff"> Click here to view site map. </a> </P>
+
-
            <P> Please use <a href="http://www.google.com/intl/en/chrome/browser/" style="color: #fff"> Chrome </a> or <a href="http://www.mozilla.org/en-US/firefox/new/" style="color: #fff"> Firefox </a> to enjoy the full site experience.</P>
+
-
            <P> For Project Description, <a href="http://2012.igem.org/Team:Toronto/Project" style="color: #fff"> Click here. </a> </P>
+
-
      </div>
+
<div class="container" style=" background: #147025; margin-top:-190px;">
-
  </div>
+
<ul id="fisheye_menu">
-
    <div class="slide">
+
<li><a href="http://2012.igem.org/Team:Toronto" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_home.png" alt="" /><span> <font size=3><b>Home </span></a> </li>
-
      <input type="radio" id="tab-2" name="tab-group-1">
+
<li><a href="http://2012.igem.org/Team:Toronto/Contact" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_email.png" alt="" /><span>Contact</span></a></li>
-
      <label for="tab-2" style="color:#fff" >Project</label>
+
<li><a href="http://2012.igem.org/Team:Toronto/Team" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_teamicon.png" alt="" /><span>Team</span></a></li>
-
     
+
<li><a href="http://2012.igem.org/Team:Toronto/Project" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_projecticon.png" alt="" /><span>Project</span></a> </li>
-
      <div class="content">
+
<li><a href="http://2012.igem.org/Team:Toronto/Notebook" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_notebook.png" alt="" /><span>Notebook</span></a></li>
-
          <h3> <a href="http://2012.igem.org/Team:Toronto/Project" style="color:#fff">Project </a> </h3>
+
<li><a href="http://2012.igem.org/Team:Toronto/Attributions" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_history.png" alt="" /><span>Attributions </span></a></li>
-
          <br>
+
<li><a href="http://2012.igem.org/Team:Toronto/HumanPractice" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_outreach.png" alt="" /><span>Human Practices (Safety & Outreach)</span></a></li>
-
          <P> This year, our design team aims to engineer a plant
+
<li><a href="http://2012.igem.org/Main_Page" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_igemlogo.png" alt="" /><span>iGEM 2012 Home</span></a></li>
-
which will have an increased tolerance for low temperature stress,
+
</ul> </font></b>
-
and be able to utilize accumulated forms of organic phosphorus,
+
-
which otherwise would not be available to the plant. <br> <br>
+
-
<a href="http://2012.igem.org/Team:Toronto/Project" style="color: #fff">Click here to read more. </a></P>
+
-
      </div>  
+
-
  </div>
+
-
    <div class="slide">
+
-
      <input type="radio" id="tab-3" name="tab-group-1">
+
-
      <label for="tab-3" style="color:#fff">Team</label>
+
-
   
+
-
      <div class="content">
+
-
          <h3> <a href="http://2012.igem.org/Team:Toronto/Team" style="color:#fff"> Team </a> </h3>
+
-
          <br>
+
-
          <P>Since 2005, the UToronto iGEM Team
+
-
has gathered members from across
+
-
disciplines in order to  conceptualize, design,
+
-
and build  genetic constructs that push the boundaries
+
-
of synthetic biology.  <a href="http://2012.igem.org/Team:Toronto/Team" style="color: #fff"> <br> <br> <br> Click here to meet this year's team. </a></P>
+
-
      </div>  
+
-
  </div>
+
-
   
+
-
</div>
+
</div>
</div>
-
<!--==========================Background Images================-->
 
-
<div align=left style="margin-top:-430px; margin-left:0px;">
 
-
<img src="http://2012.igem.org/wiki/images/d/d8/Toronto_homebanner.jpg" alt="Background" width="965" height="723.75"/>
 
-
</div>
 
-
<div align=left style="margin-top:-723px;">
+
<!--==========================Styling Sheet for Contact Buttons================-->
-
<img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_titlebanner_2.jpg" alt="Background" width="965" height="312.12"/>
+
-
</div>
+
 +
<style rel='stylesheet' >
 +
/*
 +
CSS-Tricks Example
 +
by Chris Coyier
 +
http://css-tricks.com
 +
*/
 +
* { margin: 0; padding: 0; margin-top:-20px }
 +
#page-wrap { width: 370px; margin: 0px auto; }
-
<!--==========================Sponsor Slider================-->
+
h1 { font: 32px Helvetica, Arial, Sans-Serif; margin: 0 0 0px 0; }
-
<div id="stuff-slider"  style="margin-top:470px; margin-left:40px; position:absolute; z-index:99">
+
a { text-decoration: none; }
-
<FONT FACE="helvetica neue" size="3" color="#ffffff" >
+
-
We would like to thank our sponsors:
+
-
</font>
+
-
<div id="stuff">
+
-
<div id="stuff-inside-1">
+
-
<div id="stuff-inside-2">
+
-
<div id="stuff-inside-3">
+
-
<div id="stuff-inside-4">
+
-
<div id="stuff-inside-5">
+
-
<div id="stuff-inside-6">
+
-
<div id="stuff-inside">
+
-
<div class="pag" id="pag1">
+
-
<a href="http://www.cagef.utoronto.ca/"> <img src="http://2012.igem.org/wiki/images/7/78/Toronto_cagef.jpg" alt="test1" title="test1"> </a>
+
-
<div class="pag-info" id="info1">
+
-
<FONT FACE="cooper std" size="6" color="#ffd700" >
+
-
Gold Sponsor
+
-
</font>
+
-
</div>
+
-
</div>
+
-
<div class="pag" id="pag2">
+
-
<a href="http://www.neb.ca/"> <img src="http://2012.igem.org/wiki/images/a/aa/Toronto_newengland.jpg" alt="test2" title="test2" style="margin-left:300px"></a>
+
-
<div class="pag-info" id="info2">
+
-
<FONT FACE="cooper std" size="6" color="#CD7F32">
+
-
Bronze Sponsor
+
-
</font>
+
-
</div>
+
-
</div>
+
-
<div class="pag" id="pag3">
+
-
<a href="http://www.csb.utoronto.ca/"> <img src="http://2012.igem.org/wiki/images/b/b6/Toronto_csb.jpg" alt="test3" title="test3" style="margin-left:300px"></a>
+
-
<div class="pag-info" id="info3">
+
-
<FONT FACE="cooper std" size="6" color="#CD7F32">
+
-
Bronze Sponsor
+
-
</font></div>
+
-
</div>
+
-
<div class="pag" id="pag4">
+
-
<a href="http://www.sporometrics.com/" > <img src="http://2012.igem.org/wiki/images/3/31/Toronto_sporometrics.jpg" alt="test4" title="test4" style="margin-left:300px"></a>
+
-
<div class="pag-info" id="info4">
+
-
<FONT FACE="cooper std" size="6" color="#CD7F32">
+
-
Bronze Sponsor
+
-
</font>
+
-
</div>
+
-
</div>
+
-
<div class="pag" id="pag5">
+
-
<a href="http://www.bio-rad.com/" ><img src="http://2012.igem.org/wiki/images/e/e2/Toronto_biorad.jpg" alt="test5" title="test5" style="margin-left:300px"> </a>
+
-
<div class="pag-info" id="info5">
+
-
<FONT FACE="cooper std" size="6" color="#CD7F32">
+
-
Bronze Sponsor
+
-
</font></div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
<ul id="nav">
+
-
<li  class="click" id="click1" ><a href="#stuff-inside-1" > <FONT  color="#74C365">1 </font></a></li>
+
-
<li class="click" id="click2"  ><a href="#stuff-inside-2" ><FONT  color="#74C365">1 </font></a></li>
+
-
<li class="click" id="click3"  ><a href="#stuff-inside-3" ><FONT  color="#74C365">1 </font></a></li>
+
-
<li class="click" id="click4"  ><a href="#stuff-inside-4" ><FONT color="#74C365">1 </font></a></li>
+
-
<li class="click" id="click5" ><a href="#stuff-inside-5" ><FONT  color="#74C365">1 </font></a></li>
+
-
</ul>
+
-
</div>
+
-
<div align=left style="margin-top:600px; margin-left:-6px; position:absolute; z-index:98">
+
</style>
-
<img src="http://2012.igem.org/wiki/images/5/5d/Toronto_green.jpg" alt="Banner" width="977" height="300px"/>
+
-
</div>
+
-
<div align=left style="margin-top:730px; margin-left:380px;  position: absolute; z-index:99">
+
<style>
 +
.slide-up-boxes a {
 +
display: block;
 +
height: 130px;
 +
margin: 0 0 20px 0;
 +
background:#215E21;
 +
border: 1px solid #ccc;
 +
height: 65px;
 +
overflow: hidden;
 +
}
 +
 +
.slide-up-boxes h5 {
 +
color: #fff;
 +
display: block;
 +
text-align: center;
 +
height: 65px;
 +
font: italic 18px/65px Georgia, Serif;    /* Vertically center text by making line height equal to height */
 +
opacity: 1;
 +
-webkit-transition: all 0.2s linear;
 +
-moz-transition: all 0.2s linear;
 +
-o-transition: all 0.2s linear;
 +
}
 +
 +
.slide-up-boxes a:hover h5 {
 +
margin-top: -65px;
 +
opacity: 0;
 +
display: block;
 +
}
 +
 +
.slide-up-boxes div {
 +
position: relative;
 +
color: white;
 +
font: 12px/15px Georgia, Serif;
 +
height: 45px;
 +
padding: 15px;
 +
opacity: 0;
 +
display: block;
 +
-webkit-transform: rotate(6deg);
 +
-webkit-transition: all 0.4s linear;
 +
-moz-transform: rotate(6deg);
 +
-moz-transition: all 0.4s linear;
 +
-o-transform: rotate(6deg);
 +
-o-transition: all 0.4s linear;
 +
}
 +
.slide-up-boxes a:hover div {
 +
opacity: 1;
 +
display: block;
 +
-webkit-transform: rotate(0);
 +
-moz-transform: rotate(0);
 +
-o-transform: rotate(0);
 +
}
 +
.slide-up-boxes a:nth-child(3) div { background: #c73b1b url(http://igemtoronto.files.wordpress.com/2012/08/site.png) 17px 15px no-repeat; padding-left: 120px; }
 +
.slide-up-boxes a:nth-child(1) div { background: #367db2 url(http://igemtoronto.files.wordpress.com/2012/08/facebook.png) 21px 10px no-repeat; padding-left: 90px; }
 +
.slide-up-boxes a:nth-child(2) div { background: #393838 url(http://igemtoronto.files.wordpress.com/2012/08/email.png) 14px 16px no-repeat; padding-left: 133px; }
 +
 +
</style>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<!--==========================Actual Contact Buttons================-->
 +
 
 +
<div id="page-wrap" style="margin-top:100px">
 +
 +
<h1><br> <br> Please choose: <br> <br> </h1>
 +
 +
<section class="slide-up-boxes">
 +
 +
<a href="http://facebook.com">
 +
<h5>Our Facebook...</h5>
 +
<div> <p style="line-height: 150%;"> <font size="3">Keep updated with all things UToronto iGEM on facebook. </p></font></div>
 +
</a>
 +
 +
<a href="#">
 +
<h5>Email Us...</h5>
 +
<div> <p style="line-height: 150%;"> <font size="3">Keep in touch with iGEM UToronto by email. </p></font></div>
 +
</a>
 +
 +
<a href="http://igem.skule.ca/">
 +
<h5>Our other site...</h5>
 +
<div> <p style="line-height: 150%;"> <font size="3">This is our main site for current and previous projects. </p></font></div>
 +
 
 +
</a>
 +
 
 +
</section>
 +
 +
</div>
 +
 
 +
 
 +
<!--==========================Footer================-->
 +
 
 +
<div align=left style="margin-top:150px; margin-left:380px;  position: absolute; z-index:99">
<img src="http://2012.igem.org/wiki/images/6/6a/Utoronto.png" alt="UofT Logo" width="150" height="148"/>
<img src="http://2012.igem.org/wiki/images/6/6a/Utoronto.png" alt="UofT Logo" width="150" height="148"/>
</div>
</div>
-
</body>
+
<div align=left style="margin-top:250px; margin-left:-6px; position:absolute; z-index:98">
-
</html>
+
<img src="http://2012.igem.org/wiki/images/5/5d/Toronto_green.jpg" alt="Banner" width="977" height="50px"/>
 +
</div>

Revision as of 22:40, 8 August 2012

Banner
UofT Logo
Banner