|
|
| 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="https://static.igem.org/mediawiki/2012/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> </font> </li>
| + | |
| - | <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>
| + | |
| | </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="https://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"> |
| - | | + | <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> |
| - | <input type="radio" id="tab-2" name="tab-group-1">
| + | < 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> |
| - | <label for="tab-2" style="color:#fff" >Project</label>
| + | <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> |
| - | <div class="content">
| + | <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> |
| - | < h3> <a href="https://2012.igem.org/Team:Toronto/ Project" style=" color: #fff"> Project </ a> </ h3> | + | <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> |
| - | <br>
| + | < 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> |
| - | <P> This year, our design team aims to engineer a plant
| + | < 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> |
| - | 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="https://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="https://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="https://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="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/6/6a/Utoronto.png" alt="UofT Logo" width="150" height="148"/> | | <img src="https://static.igem.org/mediawiki/2012/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="https://static.igem.org/mediawiki/2012/5/5d/Toronto_green.jpg" alt="Banner" width="977" height="50px"/> |
| | + | </div> |
"
