|
|
| Line 4: |
Line 4: |
| | <title> TEAM </title> | | <title> TEAM </title> |
| | <style type="text/css"> | | <style type="text/css"> |
| − |
| |
| − | .containerTextChange{
| |
| − | /* Set a counter named cnt to 0 */
| |
| − | counter-reset: cnt;
| |
| − | background-color:#00FF00;
| |
| − | position:absolute;
| |
| − | right:0;
| |
| − | text-align:center;
| |
| − | padding:20px 0;
| |
| − | height:50vh;
| |
| − | width:50vh;
| |
| − | margin-right: 0px;
| |
| − | }
| |
| − |
| |
| − | /* You can style pseudo elements and give them content,
| |
| − | as if they were real elements on the page */
| |
| − |
| |
| − | .containerTextChange::before{
| |
| − | display: block;
| |
| − | font-size:18px;
| |
| − | font-weight:bold;
| |
| − | text-align:center;
| |
| − | padding:15px;
| |
| − | }
| |
| − |
| |
| − | .containerTextChange span{
| |
| − | display:inline-block;
| |
| − | background-color:#aaaaaa;
| |
| − | color:#000000;
| |
| − | length: 100px;
| |
| − | border-radius:4px;
| |
| − | margin:3px;
| |
| − | cursor:default;
| |
| − | }
| |
| − |
| |
| − | /* Create a counter with a pseudo element */
| |
| − |
| |
| − | .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;
| |
| − | }
| |
| − |
| |
| − | /* Pseudo elements can even access attributes of their parent element */
| |
| − |
| |
| − | .containerTextChange span::before{
| |
| − | position:float;
| |
| − | 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{
| |
| − | opacity:1;
| |
| − | }
| |
| − |
| |
| − | /* */
| |
| − |
| |
| − | * {margin:0;padding:0}
| |
| − |
| |
| − | img #miniphoto {
| |
| − | border:none;
| |
| − | display:block;
| |
| − | opacity:0.5;
| |
| − | }/* add display:block to remove image underline*/
| |
| − |
| |
| − |
| |
| − | ul{
| |
| − | list-style:none;
| |
| − | padding:0px;
| |
| − | /*width:980px; width removed */
| |
| − | }
| |
| − |
| |
| − | .wrap {
| |
| − | border:none;
| |
| − | width: 800px;
| |
| − | height:300px;/* ie9 needs height */
| |
| − | overflow: auto;
| |
| − | padding-bottom:50px;
| |
| − | white-space:nowrap;
| |
| − | position:relative;
| |
| − | z-index:1;
| |
| − | background:#FF0000;
| |
| − | }
| |
| − |
| |
| − | .wrap {
| |
| − | overflow-x: hidden;
| |
| − | overflow-y:scroll
| |
| − | }
| |
| − |
| |
| − | .wrap ul{
| |
| − | padding:5px 5px;
| |
| − | }
| |
| − | .wrap li {
| |
| − | margin:0 10px;
| |
| − | text-align:center;
| |
| − | display:table-cell;
| |
| − | padding:5px;
| |
| − | margin:5px;
| |
| − | }
| |
| − | .wrap li a,.wrap li a span{
| |
| − | text-align:center;
| |
| − | width:225px;
| |
| − | height:225px;
| |
| − | display:block;
| |
| − | }
| |
| − | .wrap li a{
| |
| − | background:url(images/zimg7-small-over.jpg) no-repeat 0 0;
| |
| − | opacity:0.7;
| |
| − | font-size:77%;
| |
| − | }
| |
| − | .wrap li a:hover{opacity:1;}
| |
| − | .wrap li a:hover img{opacity:1;}
| |
| − |
| |
| − | </style>
| |
| − | </head>
| |
| − |
| |
| | <body> | | <body> |
| − | <div id="wrapper">
| + | <h1>TEAM: UNDER CONSTRUCTION</h1> |
| − | <h1> Meet the Harvard 2015 Team </h1>
| + | |
| − |
| + | |
| − | <div class="containerTextChange">
| + | |
| − |
| + | |
| − | <ul>
| + | |
| − | <li><span data-title="Student"><a href="#"><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="Student"><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="Student"><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="Student"><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="Student"><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="Mentor"><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="Mentor"><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="Mentor"><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="Mentor"><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="Advisor"><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><!--#containerTextChange-->
| + | |
| − | | + | |
| − | </div><!--#wrapper-->
| + | |
| | </body> | | </body> |
| | </html> | | </html> |
| | {{Template:Team:Harvard_BioDesign/Home}} | | {{Template:Team:Harvard_BioDesign/Home}} |