|
|
| (148 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | {{Team:LUBBOCK_TTU/test2}}
| |
| | | | |
| − | <html>
| |
| − | <!--
| |
| − | Completed: Epic Box and all rollovers associated with the box.
| |
| − | Change text in Epic Box to each icon.
| |
| − |
| |
| − | To do: Finish main page
| |
| − | -->
| |
| − | <head>
| |
| − | <!--CSS styles: global-->
| |
| − | <link rel='stylesheet' type='text/css' href="https://2012.igem.org/Team:Calgary/static/basicpageglobal.css?action=raw&ctype=text/css" />
| |
| − |
| |
| − | <style>
| |
| − | /*======
| |
| − | Desktop Styling
| |
| − | ======*/
| |
| − |
| |
| − | /***Body styling***/
| |
| − | h1{
| |
| − | font-size: 2.5em;
| |
| − | }
| |
| − | h2{
| |
| − | font-size: 1.8em;
| |
| − | }
| |
| − |
| |
| − | #box1{
| |
| − | width: 968px;
| |
| − | margin-top: -8px;
| |
| − | background: threedface;
| |
| − | float: left;
| |
| − | padding-bottom: 20px;
| |
| − | margin-bottom: 13px;
| |
| − | }
| |
| − | #box1 h2{
| |
| − | padding: 20px 20px 20px 20px;
| |
| − | }
| |
| − | #box1 p{
| |
| − | padding: 0px 20px 0px 20px;
| |
| − | font-size: 1.1em;
| |
| − | }
| |
| − |
| |
| − | #FredOscarFlag{
| |
| − | display: block;
| |
| − | float: left;
| |
| − | width: 250px;
| |
| − | height: 274px;
| |
| − | background: url('https://static.igem.org/mediawiki/2012/0/0b/UCalgary2012_FRED_and_OSCAR_Main_Page.png');
| |
| − | background-position: top;
| |
| − | margin: 15px;
| |
| − | }
| |
| − | #FredOscarFlag:hover{
| |
| − | background-position: bottom;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #box2{
| |
| − | width: 968px;
| |
| − | background: #C68DD8;
| |
| − | float: left;
| |
| − | margin-bottom: 13px;
| |
| − | }
| |
| − | #box2 h2{
| |
| − | padding: 20px 20px 20px 20px;
| |
| − | color: white;
| |
| − | }
| |
| − | #box2 p{
| |
| − | padding: 0px 20px 0px 20px;
| |
| − | font-size: 1.1em;
| |
| − | color: white;
| |
| − | }
| |
| − | #box2 img{
| |
| − | float: left;
| |
| − | margin: 15px;
| |
| − | height: 110px;
| |
| − | }
| |
| − | #box2:hover{
| |
| − | background: #D79EE9;
| |
| − | }
| |
| − |
| |
| − | /***positioning of elements in ZE EPIC BOX***/
| |
| − | #epicbox{
| |
| − | margin-top: 4px;
| |
| − | }
| |
| − |
| |
| − | #boximgcontainer{
| |
| − | float: left;
| |
| − | width: 644px;
| |
| − | height: 655px;
| |
| − | }
| |
| − | #boximgcontainer div{
| |
| − | float: left;
| |
| − | position: relative;
| |
| − | }
| |
| − | #orangebox{
| |
| − | margin-bottom: 4px;
| |
| − | }
| |
| − | #orangebox .imgbox{
| |
| − | width: 644px;
| |
| − | height: 215px;
| |
| − | top: 108px;
| |
| − | background: #F6A82D;
| |
| − | margin-bottom: 4px;
| |
| − | }
| |
| − | .oblank{
| |
| − | width: 644px;
| |
| − | height: 104px;
| |
| − | background: #FFE485;
| |
| − | position: relative;
| |
| − | top: -219px;
| |
| − | }
| |
| − | #orangebox:hover .oblank, .oblank:hover{
| |
| − | display: none;
| |
| − | }
| |
| − | #orangebox .iconcontainer{
| |
| − | position: relative;
| |
| − | display: none;
| |
| − | left: auto;
| |
| − | top: -219px;
| |
| − | }
| |
| − | .iconbox div, .iconbox{
| |
| − | width: 104px;
| |
| − | height: 104px;
| |
| − | margin-right: 4px;
| |
| − | }
| |
| − | a.obox1 div{
| |
| − | background: #FFD35A;
| |
| − | }
| |
| − | a.obox2 div{
| |
| − | background: #FECC44;
| |
| − | }
| |
| − | a.obox3 div{
| |
| − | background: #F8C22E;
| |
| − | }
| |
| − | a.obox4 div{
| |
| − | background: #F8B32E;
| |
| − | }
| |
| − | a.obox5 div{
| |
| − | background: #F6A82D;
| |
| − | }
| |
| − | a.obox6 div{
| |
| − | background: #F39808;
| |
| − | margin-right: 0;
| |
| − | }
| |
| − | #orangebox div:hover, #orangebox div.iconbox:hover div{
| |
| − | background: #FFE44F;
| |
| − | }
| |
| − | #orangebox:hover .iconcontainer{
| |
| − | display: block;
| |
| − | background: transparent;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #greenbox .imgbox{
| |
| − | width: 320px;
| |
| − | height: 215px;
| |
| − | background: #58CD45;
| |
| − | }
| |
| − | .gblank{
| |
| − | width: 320px;
| |
| − | height: 104px;
| |
| − | background: #B6FFA3;
| |
| − | position: relative;
| |
| − | top: 219px;
| |
| − | left: -320px;
| |
| − | }
| |
| − | #greenbox .iconcontainer{
| |
| − | position: relative;
| |
| − | margin-top: 4px;
| |
| − | left: -999em;
| |
| − | z-index: 1;
| |
| − | }
| |
| − | a.gbox1 div{
| |
| − | background: #72E85B;
| |
| − | }
| |
| − | a.gbox2 div{
| |
| − | background: #5BCD45;
| |
| − | }
| |
| − | a.gbox3 div{
| |
| − | background: #4CC035;
| |
| − | }
| |
| − | a.gbox4 div{
| |
| − | background: #44AF2F;
| |
| − | }
| |
| − | #greenbox div:hover, #greenbox div.iconbox:hover div{
| |
| − | background: #94FF7D;
| |
| − | z-index: 99; /*hovers are not overridden by OSCAR boxes*/
| |
| − | }
| |
| − | #greenbox:hover .gblank, .gblank:hover{
| |
| − | display: none;
| |
| − | }
| |
| − | #greenbox:hover .iconcontainer{
| |
| − | left: auto;
| |
| − | background: transparent;
| |
| − | }hu
| |
| − |
| |
| − | #bluebox{
| |
| − | position: relative;
| |
| − | top: -323px;
| |
| − | left: 320px;
| |
| − | }
| |
| − | #bluebox .imgbox{
| |
| − | width: 320px;
| |
| − | height: 215px;
| |
| − | background: #5BB5E8;
| |
| − | margin-left: 4px;
| |
| − | }
| |
| − | .bblank{
| |
| − | width: 320px;
| |
| − | height: 104px;
| |
| − | background: #C5F0F0;
| |
| − | position: relative;
| |
| − | top: 219px;
| |
| − | left: -320px;
| |
| − | z-index: 0;
| |
| − | }
| |
| − | #bluebox .iconcontainer{
| |
| − | position: relative;
| |
| − | margin-top: 4px;
| |
| − | left: -999em;
| |
| − | z-index: 0;
| |
| − | }
| |
| − | a.bbox1 div{
| |
| − | background: #1574AA;
| |
| − | }
| |
| − | a.bbox2 div{
| |
| − | background: #2580B3;
| |
| − | }
| |
| − | a.bbox3 div{
| |
| − | background: #3285B4;
| |
| − | }
| |
| − | a.bbox4 div{
| |
| − | background: #4292BF;
| |
| − | }
| |
| − | a.bbox5 div{
| |
| − | background: #50A2D0;
| |
| − | }
| |
| − | a.bbox6 div{
| |
| − | background: #5BB5E8;
| |
| − | margin: 0;
| |
| − | }
| |
| − | #bluebox div:hover, #bluebox .iconbox:hover div{
| |
| − | background: #7DD7FF;
| |
| − | z-index: 99; /*hovers are not overridden by FRED boxes*/
| |
| − | }
| |
| − | #bluebox:hover .bblank, .bblank:hover{
| |
| − | display: none;
| |
| − | }
| |
| − | #bluebox:hover .iconcontainer{
| |
| − | left: -212px;
| |
| − | background: transparent;
| |
| − | }
| |
| − |
| |
| − | #boxinfo{
| |
| − | float: right;
| |
| − | position: relative;
| |
| − | width: 320px;
| |
| − | left: 3px;
| |
| − | background: #555555;
| |
| − | height: 650px;
| |
| − | margin-bottom: 12px;
| |
| − | }
| |
| − | #boxinfo h2{
| |
| − | color: white;
| |
| − | padding: 20px 20px 0px;
| |
| − | }
| |
| − | #boxinfo p{
| |
| − | color: white;
| |
| − | padding: 10px 20px 20px;
| |
| − | font-size: 1.2em;
| |
| − | }
| |
| − | /*initial boxinfo appearance settings*/
| |
| − | #boxinfo div.orangebox, #boxinfo div.obox1, #boxinfo div.obox2, #boxinfo div.obox3, #boxinfo div.obox4, #boxinfo div.obox5, #boxinfo div.obox6{
| |
| − | display: none;
| |
| − | }
| |
| − | #boxinfo div.greenbox, #boxinfo div.gbox1, #boxinfo div.gbox2, #boxinfo div.gbox3, #boxinfo div.gbox4,
| |
| − | #boxinfo div.bluebox, #boxinfo div.bbox1, #boxinfo div.bbox2, #boxinfo div.bbox3, #boxinfo div.bbox4, #boxinfo div.bbox5{
| |
| − | position: relative;
| |
| − | padding-top: 320px;
| |
| − | display: none;
| |
| − | }
| |
| − | /*bold colours for FRED and OSCAR*/
| |
| − | #boxinfo div.greenbox b{
| |
| − | color: #72E85B;
| |
| − | }
| |
| − | #boxinfo div.bluebox b{
| |
| − | color: #5EB7F0;
| |
| − | }
| |
| − | .threeboxes{
| |
| − | clear: both;
| |
| − | position: relative;
| |
| − | width: 968px;
| |
| − | margin-bottom: 12px;
| |
| − | }
| |
| − | .threeboxes a, .threeboxes a div{
| |
| − | width: 320px;
| |
| − | height: 155px;
| |
| − | float: left;
| |
| − | margin-bottom: 12px;
| |
| − | }
| |
| − | .threeboxes div h2{
| |
| − | padding: 20px 20px 0px;
| |
| − | position: relative;
| |
| − | top: -155px;
| |
| − | }
| |
| − | .threeboxes div p{
| |
| − | padding: 0px 20px;
| |
| − | position: relative;
| |
| − | top: -155px;
| |
| − | }
| |
| − | #greybox1, #greybox6{
| |
| − | margin-right: 4px;
| |
| − | background: #58CD45;
| |
| − | }
| |
| − | #greybox1:hover, #greybox6:hover{
| |
| − | background: #94FF7D;
| |
| − | }
| |
| − | #greybox2, #greybox5{
| |
| − | margin-right: 4px;
| |
| − | background: #5BB5E8;
| |
| − | }
| |
| − | #greybox2:hover, #greybox5:hover{
| |
| − | background: #7DD7FF;
| |
| − | }
| |
| − | #greybox3, #greybox4{
| |
| − | margin: 0;
| |
| − | background: #F6A82D;
| |
| − | }
| |
| − | #greybox3:hover, #greybox4:hover{
| |
| − | background: #FFE44F;
| |
| − | }
| |
| − |
| |
| − | #sponsorsbox{
| |
| − | clear: both;
| |
| − | position: relative;
| |
| − | width: 968px;
| |
| − | margin: 4px 0px;
| |
| − | background: #EEEEEE;
| |
| − | }
| |
| − | #sponsorsbox h2{
| |
| − | padding: 20px 20px 0px 20px;
| |
| − | }
| |
| − | #sponsorsbox p{
| |
| − | padding: 0px 20px;
| |
| − | }
| |
| − | #sponsorsbox table{
| |
| − | width: 950px;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | background: #EEEEEE;
| |
| − | }
| |
| − | #sponsorsbox td{
| |
| − | padding: 15px 0px;
| |
| − | width: 300px;
| |
| − | }
| |
| − | #sponsorsbox img{
| |
| − | display: block;
| |
| − | margin-right: auto;
| |
| − | margin-left: auto;
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − | <script>
| |
| − | jQuery(document).ready(function($){
| |
| − |
| |
| − | //eliminate jsnotice
| |
| − | $('#jsnotice').hide();
| |
| − |
| |
| − |
| |
| − | /*epic box info functionality*/
| |
| − | //small icons
| |
| − | $('#boximgcontainer .iconbox').hover(
| |
| − | function(){
| |
| − | var className = $(this).attr('class').split(" ");
| |
| − | var box = className[0];
| |
| − | clearinfo();
| |
| − | $('#boxinfo div.' + box).show();
| |
| − | },
| |
| − | function(){
| |
| − | clearinfo();
| |
| − | $('#boxinfo_default').show();
| |
| − | });
| |
| − | //large icons
| |
| − | $('.imgbox').hover(
| |
| − | function(){
| |
| − | var id = $(this).parent().parent().attr('id');
| |
| − | clearinfo();
| |
| − | $('#boxinfo div.' + id).show();
| |
| − | },
| |
| − | function(){
| |
| − | clearinfo();
| |
| − | $('#boxinfo_default').show();
| |
| − | });
| |
| − |
| |
| − | /*epic box FRED/OSCAR blank box disappearance*/
| |
| − | $('#bluebox').hover(
| |
| − | function(){
| |
| − | $('.gblank').hide();
| |
| − | $('.bblank').hide();
| |
| − | },
| |
| − | function(){
| |
| − | $('.gblank').show();
| |
| − | $('.bblank').show();
| |
| − | });
| |
| − |
| |
| − | $('#greenbox').hover(
| |
| − | function(){
| |
| − | $('.gblank').hide();
| |
| − | $('.bblank').hide();
| |
| − | },
| |
| − | function(){
| |
| − | $('.gblank').show();
| |
| − | $('.bblank').show();
| |
| − | });
| |
| − |
| |
| − | });
| |
| − |
| |
| − | function clearinfo(){
| |
| − | $('#boxinfo div').hide();
| |
| − | }
| |
| − | </script>
| |
| − | </head>
| |
| − |
| |
| − | <body>
| |
| − |
| |
| − | <div id="box1" align="justify">
| |
| − | <a href="https://2012.igem.org/Team:Calgary/Project/Post-Regionals" id="FredOscarFlag">
| |
| − |
| |
| − | </a>
| |
| − | <center><h2>Title</h2></center>
| |
| − | <p>Description</p>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <div class="threeboxes">
| |
| − | <a id="greybox1" href="LINK">
| |
| − | <div>
| |
| − | <img src="https://static.igem.org/mediawiki/2012/b/b8/UCalgary2012_ThreeBoxTeam.png"></img>
| |
| − | <h2>Team</h2>
| |
| − | <p>Description 4</p>
| |
| − | </div>
| |
| − | </a>
| |
| − | <a id="greybox3" href="LINK">
| |
| − | <div>
| |
| − | <img src="https://static.igem.org/mediawiki/2012/1/1b/UCalgary2012_ThreeBoxNotebook.png"></img>
| |
| − | <h2>Project</h2>
| |
| − | <p>Description 6</p>
| |
| − | </div>
| |
| − | </a>
| |
| − | <a id="greybox2" href="LINK">
| |
| − | <div>
| |
| − | <img src="https://static.igem.org/mediawiki/2012/9/92/UCalgary2012_ThreeBoxData.png"></img>
| |
| − | <h2>Parts</h2>
| |
| − | <p>Description</p>
| |
| − | </div>
| |
| − | </a>
| |
| − | </div>
| |
| − |
| |
| − | <div class="threeboxes">
| |
| − | <a id="greybox4" href="LINK" style="margin-right:4px;">
| |
| − | <div>
| |
| − | <img src="https://static.igem.org/mediawiki/2012/0/02/UCalgary2012_ThreeBoxMusic.png"></img>
| |
| − | <h2>Header 1</h2>
| |
| − | <p>Description 1</p>
| |
| − | </div>
| |
| − | </a>
| |
| − | <a id="greybox5" href="LINK">
| |
| − | <div>
| |
| − | <img src="https://static.igem.org/mediawiki/2012/2/20/UCalgary2012_ThreeBoxSynergy.png"></img>
| |
| − | <h2>Header 2</h2>
| |
| − | <p>Description 2</p>
| |
| − | </div>
| |
| − | </a>
| |
| − | <a id="greybox6" href="LINK" style="margin:0;">
| |
| − | <div>
| |
| − | <img src="https://static.igem.org/mediawiki/2012/b/b1/UCalgary2012_ThreeBoxFilm.png"></img>
| |
| − | <h2>Header 3</h2>
| |
| − | <p>Description 3</p>
| |
| − | </div>
| |
| − | </a>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <div id="sponsorsbox">
| |
| − | <table>
| |
| − | <tr>
| |
| − | <td><a href="http://bio.ucalgary.ca/" target="_blank"><img style="width: 290px;" src="https://static.igem.org/mediawiki/2012/4/45/UCalgary2012_BioSci_Logo.png"></img></a></td>
| |
| − | <td><a href="http://enel.ucalgary.ca/" target="_blank"><img style="width: 290px;" src="https://static.igem.org/mediawiki/2012/9/9c/UCalgary2012_Schulich_Electric_Computer_Logo.png"></img></a></td>
| |
| − | <td><a href="http://www.ucalgary.ca/bme/about/CBRE" target="_blank"><img style="width: 220px;" src="https://static.igem.org/mediawiki/2012/5/56/UCalgary2012_CBREhz_Cropped.jpg"></img></a></td>
| |
| − | </tr>
| |
| − | </table>
| |
| − | <table>
| |
| − | <tr>
| |
| − | <td><a href="http://www.osli.ca" target="_blank"><img style="width: 891px;" src="https://static.igem.org/mediawiki/2012/9/98/UCalgary2012_Logo_OSLI.png"></img></a></td>
| |
| − | </tr>
| |
| − | </table>
| |
| − | </div>
| |
| − |
| |
| − | </body>
| |
| − | </html>
| |
