Team:UNAM-Genomics Mexico/Templates/Team
From 2011.igem.org
(testing dimensions) |
(Wrote fake content. Changed footer and header font-size. Used blue colors) |
||
(16 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<!-- | <!-- | ||
- | @VERSION 1. | + | @VERSION 1.2.0 |
@NAME /Templates/Team | @NAME /Templates/Team | ||
@DESC This is a wiki template designed for the welcoming page. | @DESC This is a wiki template designed for the welcoming page. | ||
Line 20: | Line 20: | ||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | ||
})(); | })(); | ||
+ | |||
+ | </script> | ||
+ | <script type="text/javascript"> | ||
+ | |||
+ | var onTopId = "psi"; | ||
+ | function HeapScreen(currId){ | ||
+ | var screenOnTop = document.getElementById( onTopId + "Screen" ); | ||
+ | screenOnTop.style.zIndex = "1"; | ||
+ | screenOnTop = document.getElementById( currId + "Screen" ); | ||
+ | screenOnTop.style.zIndex = "2"; | ||
+ | onTopId = currId; | ||
+ | } | ||
</script> | </script> | ||
Line 30: | Line 42: | ||
body{ | body{ | ||
background-color: black; | background-color: black; | ||
- | background-image: url("https://static.igem.org/mediawiki/2011/9/98/Black_cardboard_tiled_UGM.png"); | + | /*background-image: url("https://static.igem.org/mediawiki/2011/9/98/Black_cardboard_tiled_UGM.png");*/ |
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
Line 41: | Line 53: | ||
background-color: transparent; | background-color: transparent; | ||
font-size: 100%; | font-size: 100%; | ||
- | + | line-height: 1em; | |
font-size:100%; | font-size:100%; | ||
font-family: "Maiandra GD", Garamond, "Tempus Sans ITC", Papyrus, "Kristen ITC", | font-family: "Maiandra GD", Garamond, "Tempus Sans ITC", Papyrus, "Kristen ITC", | ||
Line 61: | Line 73: | ||
position: relative; | position: relative; | ||
width: 1000px; | width: 1000px; | ||
+ | height: 650px; | ||
margin: 0 auto; | margin: 0 auto; | ||
- | padding: | + | padding: 0px; |
border: none; | border: none; | ||
z-index: 0; | z-index: 0; | ||
Line 73: | Line 86: | ||
padding: 0px; | padding: 0px; | ||
width: 1000px; | width: 1000px; | ||
- | + | height: 650px; | |
margin: 0px; | margin: 0px; | ||
border: none; | border: none; | ||
Line 108: | Line 121: | ||
background-color: transparent; | background-color: transparent; | ||
color: #FF0000; | color: #FF0000; | ||
- | |||
- | |||
- | |||
} | } | ||
div#p-logo{ | div#p-logo{ | ||
Line 122: | Line 132: | ||
height: 21px; | height: 21px; | ||
z-index: 5; | z-index: 5; | ||
- | top: | + | top: 0px; |
- | margin-top: - | + | margin-top: 0px; |
+ | font-size: 85%; | ||
+ | font-family: sans-serif; | ||
} | } | ||
#menubar ul{ | #menubar ul{ | ||
Line 138: | Line 150: | ||
text-align: right; | text-align: right; | ||
right: 0px; | right: 0px; | ||
+ | } | ||
+ | div.right-menu li a { | ||
+ | background-color:transparent; | ||
} | } | ||
div#search-controls{ | div#search-controls{ | ||
Line 144: | Line 159: | ||
#menubar a{ | #menubar a{ | ||
text-decoration:none; | text-decoration:none; | ||
- | color: | + | color: black; |
} | } | ||
#menubar a:visited { | #menubar a:visited { | ||
- | color:# | + | color: grey; |
+ | } | ||
+ | #menubar a:hover { | ||
+ | color: silver; | ||
} | } | ||
- | |||
/******************************* | /******************************* | ||
Line 158: | Line 175: | ||
width: 990px; | width: 990px; | ||
padding: 5px; | padding: 5px; | ||
- | background-color: | + | background-color: transparent; |
- | background-image: | + | background-image: none; |
border: none; | border: none; | ||
+ | font-size: 85%; | ||
+ | font-family: sans-serif; | ||
+ | } | ||
+ | ul#f-list{ | ||
+ | margin: 0 auto; | ||
} | } | ||
div#footer-box div#footer ul#f-list li a { | div#footer-box div#footer ul#f-list li a { | ||
- | color: | + | color: black; |
+ | text-decoration: none; | ||
+ | } | ||
+ | div#footer-box div#footer ul#f-list li a:visited { | ||
+ | color: grey; | ||
} | } | ||
div#footer-box div#footer ul#f-list li a:hover { | div#footer-box div#footer ul#f-list li a:hover { | ||
- | color: | + | color: silver; |
} | } | ||
#f-poweredbyico{ | #f-poweredbyico{ | ||
Line 177: | Line 203: | ||
/******************************* | /******************************* | ||
- | + | Screen Control Properties | |
*******************************/ | *******************************/ | ||
- | div. | + | /*Bar Properties*/ |
+ | div.bar{ | ||
margin: 0px; | margin: 0px; | ||
padding: 5px; | padding: 5px; | ||
width: 990px; | width: 990px; | ||
- | + | height: 50px; | |
- | + | ||
} | } | ||
- | div# | + | /*Sepparating space: 20px;*/ |
+ | /*Box Properties*/ | ||
+ | div.box{ | ||
+ | margin: 0px; | ||
+ | padding: 5px; | ||
+ | width: 140px; | ||
+ | height: 140px; | ||
+ | } | ||
+ | /*Screen Properties*/ | ||
+ | div.screen{ | ||
+ | margin: 0px; | ||
+ | padding: 5px; | ||
+ | width: 650px; | ||
+ | height: 480px; | ||
+ | position: absolute; | ||
+ | top: 80px; | ||
+ | left: 170px; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | div#psi { | ||
position: absolute; | position: absolute; | ||
top: 0px; | top: 0px; | ||
left: 0px; | left: 0px; | ||
+ | background-color: #1d7cbc; | ||
} | } | ||
- | div# | + | div#omega { |
position: absolute; | position: absolute; | ||
- | + | bottom: 0px; | |
left: 0px; | left: 0px; | ||
+ | background-color: #1e4878; | ||
} | } | ||
- | + | div#alpha{ | |
- | div | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
position: absolute; | position: absolute; | ||
- | top: | + | top: 80px; |
left: 0px; | left: 0px; | ||
+ | background-color: #94dafb; | ||
} | } | ||
- | div# | + | div#beta{ |
position: absolute; | position: absolute; | ||
- | top: | + | top: 250px; |
left: 0px; | left: 0px; | ||
+ | background-color: #389ad9; | ||
} | } | ||
- | div# | + | div#gamma{ |
position: absolute; | position: absolute; | ||
- | top: | + | top: 420px; |
left: 0px; | left: 0px; | ||
+ | background-color: #0172c0; | ||
} | } | ||
- | div# | + | div#delta{ |
position: absolute; | position: absolute; | ||
- | top: | + | top: 80px; |
right: 0px; | right: 0px; | ||
+ | background-color: #003c77; | ||
} | } | ||
- | div# | + | div#epsilon{ |
position: absolute; | position: absolute; | ||
- | top: | + | top: 250px; |
right: 0px; | right: 0px; | ||
+ | background-color: #0c2857; | ||
} | } | ||
- | div# | + | div#zeta{ |
position: absolute; | position: absolute; | ||
- | top: | + | top: 420px; |
right: 0px; | right: 0px; | ||
+ | background-color: #2e5894; | ||
} | } | ||
- | div# | + | div#psiScreen { |
- | + | background-color: #1d7cbc; | |
- | + | z-index: 2; | |
- | + | } | |
- | + | div#alphaScreen { | |
- | background-color: # | + | background-color: #94dafb; |
- | + | } | |
- | + | div#betaScreen { | |
- | + | background-color: #389ad9; | |
+ | } | ||
+ | div#gammaScreen { | ||
+ | background-color: #0172c0; | ||
+ | } | ||
+ | div#deltaScreen { | ||
+ | background-color: #003c77; | ||
+ | } | ||
+ | div#epsilonScreen { | ||
+ | background-color: #0c2857; | ||
+ | } | ||
+ | div#zetaScreen { | ||
+ | background-color: #2e5894; | ||
+ | } | ||
+ | div#omegaScreen { | ||
+ | background-color: #1e4878; | ||
+ | } | ||
+ | /**************************** | ||
+ | Text markup instructions | ||
+ | ****************************/ | ||
+ | span.sp_name{ | ||
+ | /*use this span class to format species names*/ | ||
+ | text-decoration: none; | ||
+ | font-style: italic; | ||
+ | } | ||
+ | span.gene_name{ | ||
+ | /*use this span class to format gene names*/ | ||
+ | text-decoration: none; | ||
+ | font-style: italic; | ||
+ | } | ||
+ | span.lat_phrase{ | ||
+ | /*use this span class to format latin phrases*/ | ||
+ | text-decoration: none; | ||
+ | font-style: italic; | ||
} | } | ||
</style> | </style> | ||
</head> | </head> | ||
- | < | + | <body> |
- | <div id=" | + | <div id="psi" class="bar" onMouseOver="HeapScreen(this.id); return(true);"> |
- | <div id=" | + | iGEM links and other stuff |
- | <div id=" | + | </div> |
- | <div id=" | + | <div id="psiScreen" class="screen"> |
- | <div id=" | + | <h2>UNAM-Genomics_Mexico presents:</h2> |
- | <div id=" | + | <h1>Hydrobium etli<h1> |
- | <div id=" | + | <h4>for iGEM competition 2011</h4> |
- | <div id=" | + | </div> |
- | <div id=" | + | |
+ | <div id="alpha" class="box" onMouseOver="HeapScreen(this.id); return(true);"> | ||
+ | Project | ||
+ | </div> | ||
+ | <div id="alphaScreen" class="screen"> | ||
+ | <p>Hydrogen. The doubtful begining, the unreachable end. Our paths, both the one drawn in the | ||
+ | maps of our heads and the one awaiting our fall in reality, will be written here, with blood | ||
+ | and sweat, for other adventurers wishing to reach the border of what our knowledge lights. </p> | ||
+ | </div> | ||
+ | |||
+ | <div id="beta" class="box" onMouseOver="HeapScreen(this.id); return(true);"> | ||
+ | The <span class="sp_name">Rhizobium etli</span> Work Kit | ||
+ | </div> | ||
+ | <div id="betaScreen" class="screen"> | ||
+ | <p>Arrows, bow, rope, shield, sword. The warrior relies heavily on his tools. This is why | ||
+ | trustworthy tools are not necessary but vital along the travel. The blacksmith is a hero | ||
+ | too. Here is his story.</p> | ||
+ | </div> | ||
+ | |||
+ | <div id="gamma" class="box" onMouseOver="HeapScreen(this.id); return(true);">Model</div> | ||
+ | <div id="gammaScreen" class="screen"> | ||
+ | <p>Wizard wisdom lights all heroes paths. The seers ability to overcome trouble beffore it | ||
+ | presents itself saves resources and lives. Being a step ahead can make the difference.</p> | ||
+ | <p>There are many kinds of wizards. Most of them lack the beard, the hat and the magic wand. | ||
+ | But you must not be deluded. They can be just as powerful. They are vital for any heroic | ||
+ | campaign.</p> | ||
+ | <p>Yes, wizards don't know it all. But who does?</p> | ||
+ | </div> | ||
+ | |||
+ | <div id="delta" class="box" onMouseOver="HeapScreen(this.id); return(true);">Safety and Ethics</div> | ||
+ | <div id="deltaScreen" class="screen"> | ||
+ | <p>If while saving the princess you destroy the kingdom, you're no hero.</p> | ||
+ | </div> | ||
+ | |||
+ | <div id="epsilon" class="box" onMouseOver="HeapScreen(this.id); return(true);">Human Practices</div> | ||
+ | <div id="epsilonScreen" class="screen"> | ||
+ | <p>Little heroes save their princess. Big heroes save towns, cities or nations. Great heroes | ||
+ | save the people.</p> | ||
+ | </div> | ||
+ | |||
+ | <div id="zeta" class="box" onMouseOver="HeapScreen(this.id); return(true);">Our</div> | ||
+ | <div id="zetaScreen" class="screen"> | ||
+ | <p>This is how we changed along the path:</p> | ||
+ | <ul> | ||
+ | <li>Our logbook (or the team's tale)</li> | ||
+ | <li>Our tools, and how they grew old with us</li> | ||
+ | <li>Our memories, imprinted in minds and bytes</li> | ||
+ | <li>Ourselves (as childs, teens, men and women)</li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | |||
+ | <div id="omega" class="bar" onMouseOver="HeapScreen(this.id); return(true);">Sponsors</div> | ||
+ | <div id="omegaScreen" class="screen"> | ||
+ | <p>Thank you Puss in Boots, thank you Tinker Bell, thank you Godmother</p> | ||
+ | </div> | ||
+ | |||
+ | </body> | ||
+ | </html> |
Latest revision as of 05:30, 23 July 2011
UNAM-Genomics_Mexico presents:
Hydrobium etli
for iGEM competition 2011
for iGEM competition 2011
Hydrogen. The doubtful begining, the unreachable end. Our paths, both the one drawn in the maps of our heads and the one awaiting our fall in reality, will be written here, with blood and sweat, for other adventurers wishing to reach the border of what our knowledge lights.
Arrows, bow, rope, shield, sword. The warrior relies heavily on his tools. This is why trustworthy tools are not necessary but vital along the travel. The blacksmith is a hero too. Here is his story.
Wizard wisdom lights all heroes paths. The seers ability to overcome trouble beffore it presents itself saves resources and lives. Being a step ahead can make the difference.
There are many kinds of wizards. Most of them lack the beard, the hat and the magic wand. But you must not be deluded. They can be just as powerful. They are vital for any heroic campaign.
Yes, wizards don't know it all. But who does?
If while saving the princess you destroy the kingdom, you're no hero.
Little heroes save their princess. Big heroes save towns, cities or nations. Great heroes save the people.
This is how we changed along the path:
- Our logbook (or the team's tale)
- Our tools, and how they grew old with us
- Our memories, imprinted in minds and bytes
- Ourselves (as childs, teens, men and women)
Thank you Puss in Boots, thank you Tinker Bell, thank you Godmother