Team:Uppsala/Templates/header template
From 2014.igem.org
(Difference between revisions)
Line 2: | Line 2: | ||
<div id="header"> <!-- Header that contains all elements in the header --> | <div id="header"> <!-- Header that contains all elements in the header --> | ||
+ | <style type="text/css"> | ||
+ | <!-- | ||
+ | #imgwrapNH { width: 1050px; height: 300px; | ||
+ | position: relative } | ||
+ | #ste { width:35px; height: 40px; | ||
+ | position: absolute; left: 755px; top: 145px; | ||
+ | } | ||
+ | #ter { width: 35px; height: 35px; | ||
+ | position: absolute; left: 613px; top: 197px; | ||
+ | } | ||
+ | #joa { width: 35px; height: 35px; | ||
+ | position: absolute; left: 231px; top: 88px; | ||
+ | } | ||
+ | #ale { width: 35px; height: 35px; | ||
+ | position: absolute; left: 150px; top: 140px; | ||
+ | } | ||
+ | #jen { width: 35px; height: 35px; | ||
+ | position: absolute; left: 209px; top: 170px; | ||
+ | } | ||
+ | #marc { width: 35px; height: 35px; | ||
+ | position: absolute; left: 265px; top: 145px; | ||
+ | } | ||
+ | #mir { width: 35px; height: 35px; | ||
+ | position: absolute; left: 310px; top: 190px; | ||
+ | } | ||
+ | #tim { width: 35px; height: 35px; | ||
+ | position: absolute; left: 315px; top: 100px; | ||
+ | } | ||
+ | #vik { width: 35px; height: 35px; | ||
+ | position: absolute; left: 365px; top: 130px; | ||
+ | } | ||
+ | #meg { width: 35px; height: 35px; | ||
+ | position: absolute; left: 406px; top: 188px; | ||
+ | } | ||
+ | #nik { width: 35px; height: 35px; | ||
+ | position: absolute; left: 404px; top: 107px; | ||
+ | } | ||
+ | #jon { width: 35px; height: 35px; | ||
+ | position: absolute; left: 480px; top: 107px; | ||
+ | } | ||
+ | #ari { width: 35px; height: 35px; | ||
+ | position: absolute; left: 454px; top: 145px; | ||
+ | } | ||
+ | #nil { width: 35px; height: 35px; | ||
+ | position: absolute; left: 520px; top: 185px; | ||
+ | } | ||
+ | #eri { width: 35px; height: 35px; | ||
+ | position: absolute; left: 550px; top: 145px; | ||
+ | } | ||
+ | #gun { width: 35px; height: 35px; | ||
+ | position: absolute; left: 565px; top: 100px; | ||
+ | } | ||
+ | #oli { width: 35px; height: 35px; | ||
+ | position: absolute; left: 665px; top: 115px; | ||
+ | } | ||
+ | #mar { width: 35px; height: 35px; | ||
+ | position: absolute; left: 625px; top: 100px; | ||
+ | } | ||
+ | #kir { width: 35px; height: 35px; | ||
+ | position: absolute; left: 695px; top: 195px; | ||
+ | } | ||
+ | #chr { width: 35px; height: 35px; | ||
+ | position: absolute; left: 733px; top: 95px; | ||
+ | } | ||
+ | #lau { width: 35px; height: 35px; | ||
+ | position: absolute; left: 795px; top: 205px; | ||
+ | } | ||
+ | #and { width: 35px; height: 35px; | ||
+ | position: absolute; left: 830px; top: 70px; | ||
+ | } | ||
+ | #ste span, #ter span, #joa span, #ale span, #jen span, #marc span, #mir span, #tim span, #vik span, #meg span, #nik span, #jon span, #ari span, #nil span, #eri span, #gun span, #oli span, #mar span, #kir span, #chr span, #lau span, #and span | ||
+ | { width: 5em; | ||
+ | font: bold 75% Arial, sans-serif; | ||
+ | display: none } | ||
+ | |||
+ | #ste:hover span, #ter:hover span, #joa:hover span, #ale:hover span, #jen:hover span, #mar:hover span, #mir:hover span, #tim:hover span, #vik:hover span, #meg:hover span, #nik:hover span, #jon:hover span, #ari:hover span, #nil:hover span, #eri:hover span, #gun:hover span, #oli:hover span, #marc:hover span, #kir:hover span, #chr:hover span, #lau:hover span, #and:hover span | ||
+ | { display: block; | ||
+ | position: absolute; | ||
+ | padding: .5em; | ||
+ | content: attr(title); | ||
+ | min-width: px; | ||
+ | text-align: center; | ||
+ | width: auto; | ||
+ | height: auto; | ||
+ | white-space: nowrap; | ||
+ | top: -40px; | ||
+ | background: rgba(0,0,0,.8); | ||
+ | -moz-border-radius: 10px; | ||
+ | -webkit-border-radius: 10px; | ||
+ | border-radius: 10px; | ||
+ | color: yellow; | ||
+ | font-size: 0.86em; | ||
+ | font-family: Arial, Helvetica, sans-serif; } | ||
+ | #ste:hover span:after, #ter:hover span:after, #joa:hover span:after, #ale:hover span:after, #jen:hover span:after, #mar:hover span:after, #mir:hover span:after, #tim:hover span:after, #vik:hover span:after, #meg:hover span:after, #nik:hover span:after, jon:hover span:after, #ari:hover span:after, #nil:hover span:after, #eri:hover span:after, #gun:hover span:after, #oli:hover span:after, #marc:hover span:after, #kir:hover span:after, #chr:hover span:after, #lau:hover span:after, #and:hover span:after | ||
+ | { | ||
+ | position: absolute; | ||
+ | display: block; | ||
+ | content: ""; | ||
+ | border-color: rgba(0,0,0,.8) transparent transparent transparent; | ||
+ | border-style: solid; | ||
+ | border-width: 10px; | ||
+ | height: 0; | ||
+ | width: 0; | ||
+ | position: absolute; | ||
+ | bottom: -20px; | ||
+ | left: 1em; | ||
+ | } | ||
+ | --> | ||
+ | </style> | ||
+ | |||
+ | <div id="imgwrapNH"> | ||
+ | <img src="https://static.igem.org/mediawiki/2014/1/11/Uppsala_iGEM2014_Team_headerV3.png" width="1050" height="300" usemap="#map" alt="Webdesign Group"> | ||
+ | <div id="ste"><span>Stephanie Herman</span></div> | ||
+ | <div id="ter"><span>Teresa Reinli</span></div> | ||
+ | <div id="joa"><span>Joakim Hellner</span></div> | ||
+ | <div id="ale"><span>Alexander Virtanen</span></div> | ||
+ | <div id="jen"><span>Jennifer Rosènius</span></div> | ||
+ | <div id="marc"><span>Marcus Hong</span></div> | ||
+ | <div id="mir"><span>Miranda Stiernborg</span></div> | ||
+ | <div id="tim" onclick="darkLord()"><span>Tim Hagelby Edström</span></div> | ||
+ | <div id="vik"><span>Viktor Blomkvist</span></div> | ||
+ | <div id="meg"><span>Megha Biradar</span></div> | ||
+ | <div id="nik"><span>Niklas Handin</span></div> | ||
+ | <div id="jon"><span>Jonas Mattisson</span></div> | ||
+ | <div id="ari"><span>Arina Gromov</span></div> | ||
+ | <div id="nil"><span>Nils Anlind</span></div> | ||
+ | <div id="eri"><span>Eric Sandström</span></div> | ||
+ | <div id="gun"><span>Gunta Celma</span></div> | ||
+ | <div id="oli"><span>Oliver Possnert</span></div> | ||
+ | <div id="mar"><span>Martin Friberg</span></div> | ||
+ | <div id="kir"><span>Kira Karlsson</span></div> | ||
+ | <div id="chr"><span>Christoffer Andersson</span></div> | ||
+ | <div id="lau"><span>Laura Pacoste</span></div> | ||
+ | <div id="and"><span>Andries Wille Boers</span></div> | ||
+ | </div> | ||
+ | <script> | ||
+ | function darkLord() { | ||
+ | alert("The Dark Lord is too GREAT to allow for clicking on him. *You surrender*"); | ||
+ | } | ||
+ | </script> | ||
</div> <!-- Ends main_header --> | </div> <!-- Ends main_header --> |
Revision as of 17:08, 16 October 2014
Stephanie Herman
Teresa Reinli
Joakim Hellner
Alexander Virtanen
Jennifer Rosènius
Marcus Hong
Miranda Stiernborg
Tim Hagelby Edström
Viktor Blomkvist
Megha Biradar
Niklas Handin
Jonas Mattisson
Arina Gromov
Nils Anlind
Eric Sandström
Gunta Celma
Oliver Possnert
Martin Friberg
Kira Karlsson
Christoffer Andersson
Laura Pacoste
Andries Wille Boers