(125 intermediate revisions by 3 users not shown) | |||
Line 8: | Line 8: | ||
.foo:hover img:first-child{display:none} | .foo:hover img:first-child{display:none} | ||
.foo:hover img:last-child{display:inline-block} | .foo:hover img:last-child{display:inline-block} | ||
− | |||
− | |||
− | |||
} | } | ||
/*h2 { | /*h2 { | ||
− | padding: | + | padding: 0; |
− | font-weight: | + | font-weight: 200;*/ |
} | } | ||
+ | |||
h2 span { | h2 span { | ||
margin-left: 1em; | margin-left: 1em; | ||
color: #aaa; | color: #aaa; | ||
− | font-size: | + | font-size: 32%; |
} | } | ||
Line 27: | Line 25: | ||
<style> | <style> | ||
+ | p {padding-top: 0px; padding-right: 170px; padding-bottom: 10px; padding-left: 170px;} | ||
p{ background-color: #f7f3ed;} | p{ background-color: #f7f3ed;} | ||
+ | center{ background-color: #f7f3ed;} | ||
button{border: 0; background-color: #f7f3ed;} | button{border: 0; background-color: #f7f3ed;} | ||
− | figure { background-color: #f7f3ed;} | + | figure {background-color: #f7f3ed;} |
− | h2{background-color: #f7f3ed;} | + | h2{margin: 0; background-color: #f7f3ed;} |
+ | h3{margin: 0; background-color: #f7f3ed;} | ||
body{background-color: #f7f3ed;} | body{background-color: #f7f3ed;} | ||
</style> | </style> | ||
</head> | </head> | ||
+ | <style> | ||
+ | p.big { | ||
+ | line-height: 1.8; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Modal Image */ | ||
+ | /* The Modal (background) */ | ||
+ | .modal { | ||
+ | display: none; /* Hidden by default */ | ||
+ | position: fixed; /* Stay in place */ | ||
+ | z-index: 1; /* Sit on top */ | ||
+ | padding-top: 100px; /* Location of the box */ | ||
+ | left: 0; | ||
+ | top: 0; | ||
+ | width: 100%; /* Full width */ | ||
+ | height: 100%; /* Full height */ | ||
+ | overflow: auto; /* Enable scroll if needed */ | ||
+ | background-color: rgb(0,0,0); /* Fallback color */ | ||
+ | background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ | ||
+ | } | ||
+ | |||
+ | /* Modal Content (image) */ | ||
+ | .modal-content { | ||
+ | margin: auto; | ||
+ | display: block; | ||
+ | width: 60%; | ||
+ | height: 90%; | ||
+ | max-width: 700px; | ||
+ | } | ||
+ | |||
+ | /* Caption of Modal Image */ | ||
+ | #caption { | ||
+ | margin: auto; | ||
+ | display: block; | ||
+ | width: 60%; | ||
+ | max-width: 700px; | ||
+ | text-align: center; | ||
+ | color: #ccc; | ||
+ | padding: 10px 0; | ||
+ | height: 150px; | ||
+ | } | ||
+ | |||
+ | /* Add Animation */ | ||
+ | .modal-content, #caption { | ||
+ | -webkit-animation-name: zoom; | ||
+ | -webkit-animation-duration: 0.6s; | ||
+ | animation-name: zoom; | ||
+ | animation-duration: 0.6s; | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes zoom { | ||
+ | from {-webkit-transform:scale(0)} | ||
+ | to {-webkit-transform:scale(1)} | ||
+ | } | ||
+ | |||
+ | @keyframes zoom { | ||
+ | from {transform:scale(0)} | ||
+ | to {transform:scale(1)} | ||
+ | } | ||
+ | |||
+ | /* The Close Button */ | ||
+ | .close { | ||
+ | position: absolute; | ||
+ | top: 15px; | ||
+ | right: 35px; | ||
+ | color: #f1f1f1; | ||
+ | font-size: 40px; | ||
+ | font-weight: bold; | ||
+ | transition: 0.3s; | ||
+ | } | ||
+ | |||
+ | .close:hover, | ||
+ | .close:focus { | ||
+ | color: #bbb; | ||
+ | text-decoration: none; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | /* 100% Image Width on Smaller Screens */ | ||
+ | @media only screen and (max-width: 700px){ | ||
+ | .modal-content { | ||
+ | width: 100%; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | p { | ||
+ | background-color: #f7f3ed; | ||
+ | } | ||
+ | button{ | ||
+ | border: 0; background-color: #f7f3ed; | ||
+ | } | ||
+ | figure { | ||
+ | background-color: #f7f3ed; | ||
+ | } | ||
+ | h2{ | ||
+ | background-color: #f7f3ed; | ||
+ | } | ||
+ | body { | ||
+ | background-color: #f7f3ed; | ||
+ | } | ||
+ | foo { | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
<body> | <body> | ||
+ | |||
+ | <body style="height:100%;"> | ||
<div> | <div> | ||
− | <center><h2><br><br> | + | <center><h2><br><br>Meet our Team<br><br></h2> |
</div> | </div> | ||
+ | <center style="text-decoration: none;"><figure> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/thumb/c/ce/T--Northwestern--team.png/800px-T--Northwestern--team.png" usemap="#image-map"> | ||
+ | <map name="image-map"> | ||
+ | <area target="" alt="" title="Jack" href="https://2017.igem.org/Team:Northwestern/Team/Jack" coords="185,118,176,126,186,144,192,126" shape="poly"> | ||
+ | <area target="" alt="" title="Katerina" href="https://2017.igem.org/Team:Northwestern/Team/Katerina" coords="275,161,268,174,275,191,282,172" shape="poly"> | ||
+ | <area target="" alt="" title="Ayesha" href="https://2017.igem.org/Team:Northwestern/Team/Ayesha" coords="373,169,365,179,372,197,379,179" shape="poly"> | ||
+ | <area target="" alt="" title="Lulu" href="https://2017.igem.org/Team:Northwestern/Team/Lulu" coords="464,169,455,179,464,197,470,179" shape="poly"> | ||
+ | <area target="" alt="" title="Will" href="https://2017.igem.org/Team:Northwestern/Team/Will" coords="553,156,545,167,552,183,558,168" shape="poly"> | ||
+ | <area target="" alt="" title="Tyler" href="https://2017.igem.org/Team:Northwestern/Team/Tyler" coords="672,117,663,130,673,148,679,131" shape="poly"> | ||
+ | </map> | ||
+ | </figure><p><center>Not shown: <a href="https://2017.igem.org/Team:Northwestern/Team/Charley">Charley Rees</a> and <a href="https://2017.igem.org/Team:Northwestern/Team/Karen">Karen Taylor</a></center></p></center> | ||
+ | |||
+ | |||
+ | |||
+ | <div> | ||
+ | <center><h2><br><br>Meet our advisors</h2> | ||
+ | </div> | ||
<p style="padding-top: 5%; padding-left: 15%; padding-right: 15%> | <p style="padding-top: 5%; padding-left: 15%; padding-right: 15%> | ||
<h2 style="padding-top: 5%; padding-left: 15%; padding-right: 15%> | <h2 style="padding-top: 5%; padding-left: 15%; padding-right: 15%> | ||
− | <button class="foo"> | + | <center> |
− | + | <button class="foo"> | |
− | <img src="https://static.igem.org/mediawiki/2017/c/cb/T--Northwestern--Leonard.png" width="200px" /> | + | <a style="text-decoration:none !important;" class="foo" href="#JL"> |
− | <img src="https://static.igem.org/mediawiki/2017/ | + | <img src="https://static.igem.org/mediawiki/2017/c/cb/T--Northwestern--Leonard.png" width="200px"/> |
+ | <img src="https://static.igem.org/mediawiki/2017/e/e4/T--Northwestern--Leonard4.png" width="200px"/> | ||
</a> | </a> | ||
</button> | </button> | ||
<button class="foo"> | <button class="foo"> | ||
− | + | <a style="text-decoration:none !important;" class="foo" href="#KT"> | |
<img src="https://static.igem.org/mediawiki/2017/6/66/T--Northwestern--tyo.png" width="200px" /> | <img src="https://static.igem.org/mediawiki/2017/6/66/T--Northwestern--tyo.png" width="200px" /> | ||
− | <img src="https://static.igem.org/mediawiki/2017/ | + | <img src="https://static.igem.org/mediawiki/2017/9/91/T--Northwestern--Tyo.png" width="200px"/> |
</a> | </a> | ||
− | |||
+ | </button> | ||
<button class="foo"> | <button class="foo"> | ||
− | + | <a style="text-decoration:none !important;" class="foo" href="#DTE"> | |
<img src="https://static.igem.org/mediawiki/2017/d/d8/T--Northwestern--dte.png"width="200px" /> | <img src="https://static.igem.org/mediawiki/2017/d/d8/T--Northwestern--dte.png"width="200px" /> | ||
− | <img src="https://static.igem.org/mediawiki/2017/ | + | <img src="https://static.igem.org/mediawiki/2017/a/ae/T--Northwestern--dte2.png" width="200px"/> |
</a> | </a> | ||
</button> | </button> | ||
− | <button class="foo"> | + | <button class="foo"> |
− | + | <a style="text-decoration:none !important;" class="foo" href="#JM"> | |
<img src="https://static.igem.org/mediawiki/2017/4/44/T--Northwestern--Mordacq.png" width="200px" /> | <img src="https://static.igem.org/mediawiki/2017/4/44/T--Northwestern--Mordacq.png" width="200px" /> | ||
− | <img src="https://static.igem.org/mediawiki/2017/ | + | <img src="https://static.igem.org/mediawiki/2017/2/29/T--Northwestern--Mordacq2.png" width="200px"/> |
</a> | </a> | ||
</button> | </button> | ||
+ | </center> | ||
+ | |||
</p> | </p> | ||
</div> | </div> | ||
− | |||
+ | |||
+ | <h2><center><br><br>Graduate and undergraduate student network</center><br><br></h2> | ||
+ | <center style="text-decoration: none;"><figure><img src="https://static.igem.org/mediawiki/2017/5/51/T--Northwestern--gradstudentnetwork.png" alt="" usemap="#Map" hidefocus="true" /> | ||
+ | <map style="outline: none; text-decoration: none;" name="Map" id="Map"> | ||
+ | <area alt="Patrick" title="Patrick Donahue" shape="circle" coords="134, 107, 52"> | ||
+ | <area alt="Bon" title="Bon Ikwuagwu" coords="604,121,54" shape="circle"> | ||
+ | <area target="" alt="Lisa" title="Lisa Burdette" coords="47,319,46" shape="circle"> | ||
+ | <area target="" alt="Devin" title="Devin Stanford" coords="205,448,52" shape="circle"> | ||
+ | <area target="" alt="Joe" title="Joe Muldoon" coords="62,548,55" shape="circle"> | ||
+ | <area target="" alt="Taylor" title="Taylor Dickman" coords="257,675,53" shape="circle"> | ||
+ | <area target="" alt="Han" title="Han Teng Wong" coords="497,675,59" shape="circle"> | ||
+ | <area target="" alt="Jasmine" title="Jasmine Hershewe" coords="673,548,45" shape="circle"> | ||
+ | <area target="" alt="Taylor" title="Taylor Dolberg" coords="714,320,52" shape="circle"> | ||
+ | <area target="" alt="Michelle Cai" title="Michelle Cai" coords="238,283,43" shape="circle"> | ||
+ | <area target="" alt="Sam Davidson" title="Sam Davidson" coords="301,187,44" shape="circle"> | ||
+ | <area target="" alt="Tyler Lazar" title="Tyler Lazar" coords="370,52,53" shape="circle"> | ||
+ | <area target="" alt="Cameron Glasscock" title="Cameron Glasscock" coords="434,174,50" shape="circle"> | ||
+ | <area target="" alt="Chelsea Hu" title="Chelsea Hu" coords="509,261,45" shape="circle"> | ||
+ | <area target="" alt="Jordan Harrison" title="Jordan Harrison" coords="625,253,47" shape="circle"> | ||
+ | <area target="" alt="Peter Su" title="Peter Su" coords="566,375,53" shape="circle"> | ||
+ | <area target="" alt="Paul Perkovich" title="Paul Perkovich" coords="441,424,47" shape="circle"> | ||
+ | <area target="" alt="Shu Huang" title="Shu Huang" coords="326,452,51" shape="circle"> | ||
+ | <area target="" alt="Bradley Biggs" title="Bradley Biggs" coords="529,499,50" shape="circle"> | ||
+ | <area target="" alt="Tasfia Azim" title="Tasfia Azim" coords="283,562,50" shape="circle"> | ||
+ | <area target="" alt="Sarah Stainbrook" title="Sarah Stainbrook" coords="408,564,50" shape="circle"> | ||
+ | </map></figure></center> | ||
+ | |||
+ | </body> | ||
</html> | </html> |
Latest revision as of 03:07, 2 November 2017
Meet our Team
Meet our advisors
Graduate and undergraduate student network
Graduate and undergraduate student network