Team:Toronto/Trial

From 2012.igem.org

(Difference between revisions)
(Blanked the page)
Line 1: Line 1:
 +
<html>
 +
<body>
 +
<style> <!--interface-->
 +
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
 +
    display:none;}
 +
#top-section {
 +
      background-color:#ccff99;
 +
background-repeat: no-repeat;
 +
        background-position: center top;
 +
height:900px ! important;
 +
}
 +
body {
 +
    background: white url('http://igemtoronto.files.wordpress.com/2012/07/white-writing-29491444-516-350.jpg') no-repeat center top;
 +
    background-attachment: fixed;
 +
    height:0px;
 +
}
 +
#content{height:0px}
 +
#fisheye_menu {
 +
 +
list-style: none;
 +
padding: 0;
 +
margin: 10px;
 +
height: 81px;
 +
}
 +
#fisheye_menu li {
 +
position: relative;
 +
 +
display: block;
 +
float: left;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
#fisheye_menu span {
 +
position: absolute;
 +
top: 100%;
 +
left: 0;
 +
text-align: center;
 +
width: 79px;
 +
 +
padding: 1px;
 +
 +
margin: 0;
 +
border: solid 1px #bbb;
 +
color: #333;
 +
background: #eee;
 +
}
 +
#fisheye_menu a {
 +
text-decoration: none;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
#fisheye_menu img {
 +
border: 0;
 +
vertical-align: top;
 +
}
 +
</style>
 +
<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);
 +
 +
 +
}
 +
 +
},
 +
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
 +
if ( typeof window.addEventListener != "undefined" )
 +
    window.addEventListener( "load", fisheyemenu.init, false );
 +
else if ( typeof window.attachEvent != "undefined" )
 +
    window.attachEvent( "onload", fisheyemenu.init );
 +
else {
 +
    if ( window.onload != null ) {
 +
        var oldOnload = window.onload;
 +
        window.onload = function ( e ) {
 +
            oldOnload( e );
 +
            fisheyemenu.init();
 +
        };
 +
    }
 +
    else
 +
        window.onload = fisheyemenu.init;
 +
}
 +
</script><!--jquery-->
 +
 +
<div align=left style="margin-top:-935px; margin-left:-5px">
 +
<img src="http://igemtoronto.files.wordpress.com/2012/08/contactus.jpg" alt="Banner" width="977" height="205.3"/>
 +
</div>
 +
 +
 +
 +
<div class="container" style=" background: #147025; margin-top:-190px;">
 +
<ul id="fisheye_menu">
 +
<li><a href="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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>
 +
 +
<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; }
 +
 +
h1 { font: 32px Helvetica, Arial, Sans-Serif; margin: 0 0 0px 0; }
 +
a { text-decoration: none; }
 +
 +
</style>
 +
 +
<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>
 +
 +
<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>
 +
 +
<div align=left style="margin-top:100px; margin-left:380px;  position: absolute; z-index:99">
 +
<img src="https://static.igem.org/mediawiki/2012/6/6a/Utoronto.png" alt="UofT Logo" width="150" height="148"/>
 +
</div>

Revision as of 22:28, 8 August 2012

Banner



Please choose:

Our Facebook...

Keep updated with all things UToronto iGEM on facebook.

Email Us...

Keep in touch with iGEM UToronto by email.

Our other site...

This is our main site for current and previous projects.

UofT Logo

Retrieved from "http://2012.igem.org/Team:Toronto/Trial"