Difference between revisions of "Team:TU Dresden/Judging"
Stassoulas (Talk | contribs) |
|||
| Line 1: | Line 1: | ||
| + | <style> | ||
| + | |||
| + | .view { | ||
| + | width: 400px; | ||
| + | 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> | ||
| + | |||
{{TU_Dresden/Header}} | {{TU_Dresden/Header}} | ||
<html> | <html> | ||
Revision as of 20:58, 1 November 2017
<style>
.view {
width: 400px; 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>
Judging
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 Judging Criteria, for more information on medals.
