|
|
| (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>
| |
"
