Stassoulas (Talk | contribs) |
Stassoulas (Talk | contribs) |
||
Line 1: | Line 1: | ||
{{TU_Dresden/Header}} | {{TU_Dresden/Header}} | ||
<html> | <html> | ||
+ | <style> | ||
+ | .view { | ||
+ | width: 30%; | ||
+ | height: 450px; | ||
+ | float: left; | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | text-align: center; | ||
+ | cursor: default; | ||
+ | |||
+ | } | ||
+ | .view .mask, .view .content { | ||
+ | width: 400px; | ||
+ | height: 400px; | ||
+ | position: absolute; | ||
+ | overflow: hidden; | ||
+ | top: 0; | ||
+ | left: 0 | ||
+ | } | ||
+ | .view img { | ||
+ | display: block; | ||
+ | position: relative | ||
+ | } | ||
+ | .view h2 { | ||
+ | text-transform: uppercase; | ||
+ | color: #fff; | ||
+ | text-align: center; | ||
+ | position: relative; | ||
+ | font-size: 17px; | ||
+ | padding: 10px; | ||
+ | background: rgba(0, 0, 0, 0.8); | ||
+ | margin: 20px 0 0 0 | ||
+ | } | ||
+ | .view p { | ||
+ | font-family: Arial, serif; | ||
+ | font-size: 15px; | ||
+ | position: relative; | ||
+ | color: #fff; | ||
+ | padding: 10px 20px 20px; | ||
+ | text-align: center | ||
+ | } | ||
+ | |||
+ | .view a.info { | ||
+ | display: inline-block; | ||
+ | text-decoration: none; | ||
+ | padding: 7px 14px; | ||
+ | background: #000; | ||
+ | color: #fff; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | .view a.info:hover { | ||
+ | box-shadow: 0 0 5px #000 | ||
+ | } | ||
+ | .view-eighth .mask { | ||
+ | background-color: rgba(0,0,0,0.6); | ||
+ | top: -200px; | ||
+ | opacity: 0; | ||
+ | transition: all 0.3s ease-out 0.5s; | ||
+ | } | ||
+ | .view-eighth h2{ | ||
+ | transform: translateY(-200px); | ||
+ | transition: all 0.2s ease-in-out 0.1s; | ||
+ | } | ||
+ | .view-eighth p { | ||
+ | transform: translateY(-200px); | ||
+ | transition: all 0.2s ease-in-out 0.2s; | ||
+ | } | ||
+ | .view-eighth a.info { | ||
+ | transform: translateY(-200px); | ||
+ | transition: all 0.2s ease-in-out 0.3s; | ||
+ | } | ||
+ | .view-eighth:hover .mask { | ||
+ | opacity: 1; | ||
+ | top: 0px; | ||
+ | transition-delay: 0s; | ||
+ | animation: bounceY 0.9s linear; | ||
+ | } | ||
+ | .view-eighth:hover h2 { | ||
+ | transform: translateY(0px); | ||
+ | transition-delay: 0.4s; | ||
+ | } | ||
+ | .view-eighth:hover p { | ||
+ | transform: translateY(0px); | ||
+ | transition-delay: 0.2s; | ||
+ | } | ||
+ | .view-eighth:hover a.info { | ||
+ | transform: translateY(0px); | ||
+ | transition-delay: 0s; | ||
+ | } | ||
+ | @keyframes bounceY { | ||
+ | 0% { transform: translateY(-205px);} | ||
+ | 40% { transform: translateY(-100px);} | ||
+ | 65% { transform: translateY(-52px);} | ||
+ | 82% { transform: translateY(-25px);} | ||
+ | 92% { transform: translateY(-12px);} | ||
+ | 55%, 75%, 87%, 97%, 100% { transform: translateY(0px);} | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 600px) { | ||
+ | table {width:100%;} | ||
+ | thead {display: none;} | ||
+ | tr:nth-of-type(2n) {background-color: inherit;} | ||
+ | tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;} | ||
+ | tbody td {display: block; text-align:center;} | ||
+ | tbody td:before { | ||
+ | content: attr(data-th); | ||
+ | display: block; | ||
+ | text-align:center; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | </style> | ||
<div id="pagebanner" style="background-image: url(https://static.igem.org/mediawiki/2017/b/b4/T--TU_Dresden--planet--judging.png);"> | <div id="pagebanner" style="background-image: url(https://static.igem.org/mediawiki/2017/b/b4/T--TU_Dresden--planet--judging.png);"> | ||
Line 12: | Line 124: | ||
<p> For the iGEM competition, all teams must convince the judges of completing the requirements for achieving bronze, silver or gold. iGEMers register their teams in March and work all summer to check off these requirements and prepare to defend their claims in Boston, at the Hynes Convention Center. Teams also need to complete a poster, wiki page and present at the Giant Jamboree to get a medal as well as complete other tasks. Please see the <a target="_blank" href="https://2017.igem.org/Judging/Medals">Judging Criteria</a>, for more information on medals.</p> | <p> For the iGEM competition, all teams must convince the judges of completing the requirements for achieving bronze, silver or gold. iGEMers register their teams in March and work all summer to check off these requirements and prepare to defend their claims in Boston, at the Hynes Convention Center. Teams also need to complete a poster, wiki page and present at the Giant Jamboree to get a medal as well as complete other tasks. Please see the <a target="_blank" href="https://2017.igem.org/Judging/Medals">Judging Criteria</a>, for more information on medals.</p> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<div class="view view-eighth makeresponsive"> | <div class="view view-eighth makeresponsive"> | ||
Line 30: | Line 136: | ||
<a href="https://2017.igem.org/Team:TU_Dresden/InterLab" class="info">Read More</a> | <a href="https://2017.igem.org/Team:TU_Dresden/InterLab" class="info">Read More</a> | ||
</div> | </div> | ||
− | </div | + | </div> |
Line 46: | Line 152: | ||
</div> | </div> | ||
</div> | </div> | ||
− | + | ||
<div class="view view-eighth makeresponsive"> | <div class="view view-eighth makeresponsive"> | ||
Line 60: | Line 166: | ||
</div> | </div> | ||
</div> | </div> | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
Revision as of 21:04, 1 November 2017