Difference between revisions of "Team:Harvard BioDesign/Team"
| Line 2: | Line 2: | ||
| − | <html> | + | <html> |
<head> | <head> | ||
| − | + | <title> TEAM </title> | |
| − | + | <style type="text/css"> | |
| − | + | .focus{ | |
| − | + | border:5px solid #ccc; | |
| − | + | width:450px; | |
| − | + | height: 500px; | |
| − | + | margin-bottom:30px; | |
| − | + | } | |
| − | + | ||
| − | + | .mainphoto{ | |
| − | + | ||
| − | + | } | |
| − | + | .containerTextChange{ | |
| − | + | /* Set a counter named cnt to 0 */ | |
| − | + | counter-reset: cnt; | |
background-color:transparent; | background-color:transparent; | ||
| − | + | position:absolute; | |
| − | + | right:0; | |
| − | + | text-align:center; | |
| − | + | padding:20px 0; | |
| − | + | width:800px; | |
| − | + | height:300px; | |
| − | + | margin-right: 0px; | |
} | } | ||
| Line 35: | Line 35: | ||
.containerTextChange::before{ | .containerTextChange::before{ | ||
| − | + | display: block; | |
| − | + | font-size:18px; | |
| − | + | font-weight:bold; | |
| − | + | text-align:center; | |
| − | + | padding:15px; | |
} | } | ||
.containerTextChange span{ | .containerTextChange span{ | ||
| − | + | display:inline-block; | |
| − | + | padding:2px 6px; | |
| − | + | background-color:#4400dd; | |
| − | + | color:#186C72; | |
| − | + | border-radius:4px; | |
| − | + | margin:3px; | |
| − | + | cursor:default; | |
} | } | ||
| Line 56: | Line 56: | ||
.containerTextChange span::after{ | .containerTextChange span::after{ | ||
| − | + | /* Every time this rule is executed, the | |
| − | + | counter value is increased by 1 */ | |
| − | + | counter-increment: cnt; | |
| − | + | /* Add the counter value as part of the content */ | |
| − | + | content:" #" counter(cnt); | |
| − | + | display:inline-block; | |
| − | + | padding:4px; | |
} | } | ||
| Line 70: | Line 70: | ||
.containerTextChange span::before{ | .containerTextChange span::before{ | ||
| − | + | position:absolute; | |
| − | + | bottom:0; | |
| − | + | left:0; | |
| − | + | width:100%; | |
| − | + | content:attr(data-title); | |
| − | + | color:#666; | |
| − | + | opacity:0; | |
| − | + | /* Animate the transitions */ | |
| − | + | -webkit-transition:opacity 0.4s; | |
| − | + | transition:opacity 0.4s; | |
} | } | ||
.containerTextChange span:hover::before{ | .containerTextChange span:hover::before{ | ||
| − | + | opacity:1; | |
} | } | ||
| Line 95: | Line 95: | ||
#outer{ | #outer{ | ||
| − | + | width:800px; | |
| − | + | height:300px; | |
| − | + | position:absolute; | |
| − | + | left:0; | |
| − | + | background:transparent; | |
} | } | ||
ul{ | ul{ | ||
| − | + | list-style:none; | |
| − | + | padding:0px; | |
| − | + | /*width:980px; width removed */ | |
} | } | ||
.wrap { | .wrap { | ||
| − | + | border:none; | |
| − | + | width: 800px; | |
| − | + | height:300px;/* ie9 needs height */ | |
| − | + | overflow: auto; | |
| − | + | padding-bottom:50px; | |
| − | + | white-space:nowrap; | |
| − | + | position:relative; | |
| − | + | z-index:1; | |
| − | + | background:transparent; | |
} | } | ||
.wrap {overflow-x:auto;overflow-y:hidden} | .wrap {overflow-x:auto;overflow-y:hidden} | ||
.wrap ul{ | .wrap ul{ | ||
| − | + | padding:5px 5px; | |
} | } | ||
.wrap li { | .wrap li { | ||
| − | + | margin:0 10px; | |
| − | + | text-align:center; | |
| − | + | display:table-cell; | |
| − | + | padding:5px; | |
| − | + | margin:5px; | |
} | } | ||
.wrap li a,.wrap li a span{ | .wrap li a,.wrap li a span{ | ||
| − | + | text-align:center; | |
| − | + | width:225px; | |
| − | + | height:225px; | |
| − | + | display:block; | |
} | } | ||
.wrap li a{ | .wrap li a{ | ||
| − | + | background:url(images/zimg7-small-over.jpg) no-repeat 0 0; | |
opacity:1; | opacity:1; | ||
| − | + | font-size:77%; | |
} | } | ||
.wrap li a:hover{opacity:1;} | .wrap li a:hover{opacity:1;} | ||
.wrap li a:hover img{opacity:1;} | .wrap li a:hover img{opacity:1;} | ||
| − | + | </style> | |
</head> | </head> | ||
| Line 157: | Line 157: | ||
<div class="containerTextChange"> | <div class="containerTextChange"> | ||
<div id="outer"> | <div id="outer"> | ||
| − | + | <div class="wrap"> | |
| − | + | <ul> | |
| − | + | <li><span data-title="Human Name"><a><img class="miniphoto" src="https://static.igem.org/mediawiki/2015/9/94/HarvardBioDesign2015Logo2.png"alt="Harvard Logo" style="width:238px;height:162px;" alt="Harvard Logo" style="width:317px;height: 216px;"></a>Ben</span></li> | |
| − | + | <li><span data-title="Human Name"><a href="#"><img class="miniphoto" src="https://static.igem.org/mediawiki/2015/9/94/HarvardBioDesign2015Logo2.png"alt="Harvard Logo" style="width:238px;height:162px;"></a>Elizabeth</span></li> | |
| − | + | <li><span data-title="Human Name"><a href="#"><img class="miniphoto" src="https://static.igem.org/mediawiki/2015/9/94/HarvardBioDesign2015Logo2.png" alt="Harvard Logo" style="width:238px;height:162px;"></a>Ethan</span></li> | |
| − | + | <li><span data-title="Human Name"><a href="#"><img class="miniphoto" src="https://static.igem.org/mediawiki/2015/9/94/HarvardBioDesign2015Logo2.png" alt="Harvard Logo" style="width:238px;height:162px;"></a>Lydia</span></li> | |
| − | + | <li><span data-title="Human Name"><a href="#"><img class="miniphoto" src="https://static.igem.org/mediawiki/2015/9/94/HarvardBioDesign2015Logo2.png" alt="Harvard Logo" style="width:238px;height:162px;"></a>Sylvia</span></li> | |
| − | + | <li><span data-title="Human Name"><a href="#"><img class="miniphoto" src="https://static.igem.org/mediawiki/2015/9/94/HarvardBioDesign2015Logo2.png" alt="Harvard Logo" style="width:238px;height:162px;"></a>Chris</span></li> | |
| − | + | <li><span data-title="Human Name"><a href="#"><img class="miniphoto" src="https://static.igem.org/mediawiki/2015/9/94/HarvardBioDesign2015Logo2.png" alt="Harvard Logo" style="width:238px;height:162px;"></a>Isaac</span></li> | |
| − | + | <li><span data-title="Human Name"><a href="#"><img class="miniphoto" src="https://static.igem.org/mediawiki/2015/9/94/HarvardBioDesign2015Logo2.png" alt="Harvard Logo" style="width:238px;height:162px;"></a>Marika</span></li> | |
| − | + | <li><span data-title="Human Name"><a href="#"><img class="miniphoto" src="https://static.igem.org/mediawiki/2015/9/94/HarvardBioDesign2015Logo2.png" alt="Harvard Logo" style="width:238px;height:162px;"></a>Matt</span></li> | |
| − | + | <li><span data-title="Human Name"><a href="#"><img class="miniphoto" src="https://static.igem.org/mediawiki/2015/9/94/HarvardBioDesign2015Logo2.png" alt="Harvard Logo" style="width:238px;height:162px;"></a>Neel</span></li> | |
| − | + | </ul> | |
| − | + | </div> | |
</div> | </div> | ||
</div> | </div> | ||
Revision as of 22:43, 9 July 2015
Meet the Harvard 2015 Team
Text goes here
Ben- Elizabeth
- Ethan
- Lydia
- Sylvia
- Chris
- Isaac
- Marika
- Matt
- Neel
