Team:Toronto/Trial

From 2012.igem.org

(Difference between revisions)
(Blanked the page)
 
(23 intermediate revisions not shown)
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:-900px; 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>
 

Latest revision as of 00:03, 6 September 2012