Team:Toronto/Attributions

From 2012.igem.org

(Difference between revisions)
(Prototype team page)
Line 1: Line 1:
-
<!-- *** What falls between these lines is the Alert Box!  You can remove it from your pages once you have read and understood the alert *** -->
 
-
 
<html>
<html>
-
<div id="box" style="width: 700px; margin-left: 137px; padding: 5px; border: 3px solid #000; background-color: #fe2b33;">
+
<body>
-
<div id="template" style="text-align: center; font-weight: bold; font-size: large; color: #f6f6f6; padding: 5px;">
+
 
-
This is a template page. READ THESE INSTRUCTIONS.
+
<!-- =============================================================
 +
 
 +
The following was written by Moustafa Abdalla for iGEM UToronto.
 +
 
 +
 
 +
Permission is granted, free of charge, to any person reading the code,
 +
to use, copy, modify, merge, publish, distribute, sublicense, and/or
 +
sell copies of the code, subject ONLY to the following condition:
 +
 
 +
******* This permission notice shall be included in all copies or
 +
substantial portions of the code. *********
 +
 
 +
Please enjoy :) .
 +
===================================================================-->
 +
 
 +
 
 +
 
 +
<!--==========================General Document Styling
 +
And CSS for Contact Buttons================-->
 +
<style>
 +
#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:800px ! 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 {
 +
list-style: none;
 +
padding: 0;
 +
margin: 10px;
 +
height: 140px;
 +
}
 +
#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: 95px;
 +
 
 +
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>
 +
 
 +
 
 +
<!--==========================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);
 +
 
 +
 +
}
 +
 
 +
},
 +
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>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<!--==========================Actual Wiki Stuff================-->
 +
 
 +
 
 +
<div align=left style="margin-top:-775px; margin-left:-5px">
 +
<img src="http://igemtoronto.files.wordpress.com/2012/08/contactus.jpg" alt="Banner" width="977" height="205.3"/>
</div>
</div>
-
<div id="instructions" style="text-align: center; font-weight: normal; font-size: small; color: #f6f6f6; padding: 5px;">
+
 
-
You are provided with this team page template with which to start the iGEM season. You may choose to personalize it to fit your team but keep the same "look." Or you may choose to take your team wiki to a different level and design your own wiki.  You can find some examples <a href="https://2008.igem.org/Help:Template/Examples">HERE</a>.
+
 
-
</div>
+
-
<div id="warning" style="text-align: center; font-weight: bold; font-size: small; color: #f6f6f6; padding: 5px;">
+
<!--==========================Menu================-->
-
You <strong>MUST</strong> have all of the pages listed in the menu below with the names specified. PLEASE keep all of your pages within your teams namespace.
+
 
 +
<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 Practice (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>
</div>
-
</div>
 
-
</html>
 
-
<!-- *** End of the alert box *** -->
 
-
{| style="color:#1b2c8a;background-color:#0c6;" cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="62%" align="center"
 
-
!align="center"|[[Team:Toronto|Home]]
 
-
!align="center"|[[Team:Toronto/Team|Team]]
 
-
!align="center"|[https://igem.org/Team.cgi?year=2012&team_name=Toronto Official Team Profile]
 
-
!align="center"|[[Team:Toronto/Project|Project]]
 
-
!align="center"|[[Team:Toronto/Parts|Parts Submitted to the Registry]]
 
-
!align="center"|[[Team:Toronto/Modeling|Modeling]]
 
-
!align="center"|[[Team:Toronto/Notebook|Notebook]]
 
-
!align="center"|[[Team:Toronto/Safety|Safety]]
 
-
!align="center"|[[Team:Toronto/Attributions|Attributions]]
 
-
|}
 
 +
<!--==========================Styling Sheet for Contact Buttons================-->
-
Each team must clearly attribute work done by the team on this page. They must distinguish work done by the team from work done by others, including the host labs, advisors, instructors, graduate students, and postgraduate masters students.
+
<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>
 +
 
 +
 
 +
 
 +
 
 +
<body>
 +
 
 +
<!--==========================Actual Contact Buttons================-->
 +
 
 +
 
 +
 
 +
 
 +
<!--==========================Footer================-->
 +
 
 +
<div align=left style="margin-top:500px; 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>
 +
 
 +
<div align=left style="margin-top:600px; margin-left:-6px; position:absolute; z-index:98">
 +
<img src="https://static.igem.org/mediawiki/2012/5/5d/Toronto_green.jpg" alt="Banner" width="977" height="125px"/>
 +
</div>

Revision as of 23:37, 1 October 2012

Banner
UofT Logo
Banner