Line 1: | Line 1: | ||
− | {{ | + | {{Template_All_Teams}} |
− | {{ | + | <html> |
− | {{ | + | <style> |
+ | .heidelbox-darkred { | ||
+ | background-color: #9D1C20 !important; | ||
+ | color: white !important; | ||
+ | } | ||
+ | .flip-item-wrap { | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | float: left; | ||
+ | position:relative; | ||
+ | -webkit-perspective:800px; | ||
+ | -moz-perspective:800px; | ||
+ | -ms-perspective:800px; | ||
+ | -o-perspective:800px; | ||
+ | perspective: 800px; | ||
+ | } | ||
+ | @media screen and (min-width: 1280px) { | ||
+ | .flip-item-wrap{ | ||
+ | width: 100%; | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 979px) { | ||
+ | .flip-item-wrap{ | ||
+ | width: 100%; | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 639px) { | ||
+ | .flip-item-wrap{ | ||
+ | width: 100%; | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 379px) { | ||
+ | .flip-item-wrap{ | ||
+ | width: 100%; | ||
+ | } | ||
+ | } | ||
+ | .flip-item-wrap img{ | ||
+ | width:100%; | ||
+ | height:auto; | ||
+ | display:block; | ||
+ | border-radius: 50%; | ||
+ | margin:0; | ||
+ | } | ||
+ | .flip-item-wrap input{ | ||
+ | display: none; | ||
+ | } | ||
+ | .flip-item-wrap .give_height{ | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | .flip-item{ | ||
+ | display: block; | ||
+ | width:100%; | ||
+ | |||
+ | height:100%; | ||
+ | float:left; | ||
+ | position:absolute; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | cursor:pointer; | ||
+ | color:#fff; | ||
+ | -webkit-transform-style:preserve-3d; | ||
+ | -moz-transform-style:preserve-3d; | ||
+ | -ms-transform-style:preserve-3d; | ||
+ | -o-transform-style:preserve-3d; | ||
+ | transform-style:preserve-3d; | ||
+ | -webkit-transition:-webkit-transform 1s; | ||
+ | -moz-transition: -moz-transform 1s; | ||
+ | -o-transition: -o-transform 1s; | ||
+ | transition: transform 1s; | ||
+ | } | ||
+ | .flip-item figure{ | ||
+ | display:block; | ||
+ | position:absolute; | ||
+ | |||
+ | width:100%; | ||
+ | height:100%; | ||
+ | margin:0; | ||
+ | -webkit-backface-visibility:hidden; | ||
+ | -moz-backface-visibility:hidden; | ||
+ | -ms-backface-visibility:hidden; | ||
+ | -o-backface-visibility:hidden; | ||
+ | backface-visibility:hidden; | ||
+ | } | ||
+ | .flip-item .back{ | ||
+ | border-radius: 50%; | ||
+ | background-color: #222 !important; | ||
+ | width:100%; | ||
+ | display:block; | ||
+ | margin:0; | ||
+ | -webkit-transform:rotateY( 180deg ); | ||
+ | -moz-transform:rotateY( 180deg ); | ||
+ | -ms-transform:rotateY( 180deg ); | ||
+ | -o-transform:rotateY( 180deg ); | ||
+ | transform:rotateY( 180deg ); | ||
+ | } | ||
+ | .flipper:checked + .flip-item{ | ||
+ | -webkit-transform:rotateY( 180deg ); | ||
+ | -moz-transform:rotateY( 180deg ); | ||
+ | -ms-transform:rotateY( 180deg ); | ||
+ | -o-transform:rotateY( 180deg ); | ||
+ | transform:rotateY( 180deg ); | ||
+ | } | ||
+ | .flip-item-desc{ | ||
+ | background: #222; | ||
+ | border: 1px solid white; | ||
+ | width: 100%; | ||
+ | color: white; | ||
+ | height:100%; | ||
+ | border-radius: 50%; | ||
+ | position:absolute; | ||
+ | top: 0; | ||
+ | display: table; | ||
+ | left: 0; | ||
+ | text-shadow:1px 2px 1px rgba(0,0,0,0.9); | ||
+ | overflow:hidden; | ||
+ | |||
+ | } | ||
− | |||
+ | .center-test { | ||
+ | text-align: center; | ||
+ | padding: 30px; | ||
+ | |||
+ | } | ||
+ | .center-test span { | ||
+ | |||
+ | font-family: 'Open Sans'; | ||
+ | font-size: 18px; | ||
+ | display: table-cell; vertical-align: middle; | ||
+ | color: white; | ||
+ | } | ||
+ | </style> | ||
+ | <div class="heidelbox-darkred" style="padding-bottom: 100px"> | ||
+ | <div class="container"> | ||
+ | <div class="row" style="padding-top: 100px; padding-bottom: 25px"> | ||
+ | <div class="col-lg-12 col-md-12 col-xs-12 content heidelbox-darkred" style="display: inline-block;"> | ||
+ | <h1 style="color: white !important">Expert Interviews</h1> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
− | + | <div class="container"> | |
− | + | <div class="row"> | |
− | + | <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> | |
− | <div class="row"> | + | <section class="flip-item-wrap"> |
− | <div class="col-lg- | + | <img class="give_height" |
− | + | src="https://static.igem.org/mediawiki/2017/b/b8/T--Heidelberg--HP_experts_esvelt.jpeg" alt=""><!-- this image will add height to parent element --> | |
− | + | <input type="checkbox" class="flipper" id="a"> | |
− | + | <label for="a" class="flip-item"> | |
+ | <figure class="front"><img class="circular" src="https://static.igem.org/mediawiki/2017/b/b8/T--Heidelberg--HP_experts_esvelt.jpeg" alt=""></figure> | ||
+ | <figure class="back"> | ||
+ | <div class="flip-item-desc center-test"><span>"I`m a quote" & Text comes here</span></div> | ||
+ | |||
+ | </figure> | ||
+ | </label> | ||
+ | </section> | ||
</div> | </div> | ||
− | + | <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> | |
− | + | <section class="flip-item-wrap"> | |
− | <div class="col-lg- | + | <img class="give_height" |
− | + | src="https://static.igem.org/mediawiki/2017/8/88/T--Heidelberg--HP_experts_disanto.jpeg" alt=""><!-- this image will add height to parent element --> | |
+ | <input type="checkbox" class="flipper" id="b"> | ||
+ | <label for="b" class="flip-item"> | ||
+ | <figure class="front"><img class="circular" src="https://static.igem.org/mediawiki/2017/8/88/T--Heidelberg--HP_experts_disanto.jpeg" alt=""></figure> | ||
+ | <figure class="back"> | ||
+ | <div class="flip-item-desc center-test"><span>"I`m another quote" & Text comes here</span></div> | ||
+ | |||
+ | </figure> | ||
+ | </label> | ||
+ | </section> | ||
+ | </div> | ||
+ | <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> | ||
+ | <section class="flip-item-wrap"> | ||
+ | <img class="give_height" src="https://static.igem.org/mediawiki/2017/8/8a/T--Heidelberg--HP_experts_kaufmann.jpeg" alt=""><!-- this image will add height to parent element --> | ||
+ | <input type="checkbox" class="flipper" id="c"> | ||
+ | <label for="c" class="flip-item"> | ||
+ | <figure class="front"><img class="circular" src="https://static.igem.org/mediawiki/2017/8/8a/T--Heidelberg--HP_experts_kaufmann.jpeg" alt=""></figure> | ||
+ | <figure class="back"> | ||
+ | <div class="flip-item-desc center-test"><span>"I`m another quote" & Text comes here</span></div> | ||
+ | |||
+ | </figure> | ||
+ | </label> | ||
+ | </section> | ||
+ | </div> | ||
+ | <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> | ||
+ | <section class="flip-item-wrap"> | ||
+ | <img class="give_height" | ||
+ | src="https://static.igem.org/mediawiki/2017/b/bc/T--Heidelberg--HP_experts_wollmann.jpeg" alt=""><!-- this image will add height to parent element --> | ||
+ | <input type="checkbox" class="flipper" id="d"> | ||
+ | <label for="d" class="flip-item"> | ||
+ | <figure class="front"><img class="circular" src="https://static.igem.org/mediawiki/2017/b/bc/T--Heidelberg--HP_experts_wollmann.jpeg" alt=""></figure> | ||
+ | <figure class="back"> | ||
+ | <div class="flip-item-desc center-test"><span>"I`m another quote" & Text comes here</span></div> | ||
+ | |||
+ | </figure> | ||
+ | </label> | ||
+ | </section> | ||
+ | </div> | ||
+ | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
− | |||
<div class="row"> | <div class="row"> | ||
− | <div class="col-lg- | + | <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> |
− | + | <section class="flip-item-wrap"> | |
− | + | <img class="give_height" | |
− | + | src="https://static.igem.org/mediawiki/2017/1/19/T--Heidelberg--HP_experts_winkV2.jpeg" alt=""><!-- this image will add height to parent element --> | |
+ | <input type="checkbox" class="flipper" id="e"> | ||
+ | <label for="e" class="flip-item"> | ||
+ | <figure class="front"><img class="circular" src="https://static.igem.org/mediawiki/2017/1/19/T--Heidelberg--HP_experts_winkV2.jpeg" alt=""></figure> | ||
+ | <figure class="back"> | ||
+ | <div class="flip-item-desc center-test"><span>"I`m a quote" & Text comes here</span></div> | ||
+ | |||
+ | </figure> | ||
+ | </label> | ||
+ | </section> | ||
</div> | </div> | ||
− | + | <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> | |
− | + | <section class="flip-item-wrap"> | |
− | + | <img class="give_height" | |
− | + | src="https://static.igem.org/mediawiki/2017/1/10/T--Heidelberg--HP_experts_huland.jpeg" alt=""><!-- this image will add height to parent element --> | |
− | + | <input type="checkbox" class="flipper" id="f"> | |
+ | <label for="f" class="flip-item"> | ||
+ | <figure class="front"><img class="circular" src="https://static.igem.org/mediawiki/2017/1/10/T--Heidelberg--HP_experts_huland.jpeg" alt=""></figure> | ||
+ | <figure class="back"> | ||
+ | <div class="flip-item-desc center-test"><span>"I`m another quote" & Text comes here</span></div> | ||
+ | |||
+ | </figure> | ||
+ | </label> | ||
+ | </section> | ||
+ | </div> | ||
+ | <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> | ||
+ | <section class="flip-item-wrap"> | ||
+ | <img class="give_height" | ||
+ | src="https://static.igem.org/mediawiki/2017/a/ac/T--Heidelberg--HP_experts_stoellger_V2.jpeg" alt=""><!-- this image will add height to parent element --> | ||
+ | <input type="checkbox" class="flipper" id="g"> | ||
+ | <label for="g" class="flip-item"> | ||
+ | <figure class="front"><img class="circular" src="https://static.igem.org/mediawiki/2017/a/ac/T--Heidelberg--HP_experts_stoellger_V2.jpeg" alt=""></figure> | ||
+ | <figure class="back"> | ||
+ | <div class="flip-item-desc center-test"><span>"I`m another quote" & Text comes here</span></div> | ||
+ | |||
+ | </figure> | ||
+ | </label> | ||
+ | </section> | ||
+ | </div> | ||
+ | <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> | ||
+ | <section class="flip-item-wrap"> | ||
+ | <img class="give_height" src="https://static.igem.org/mediawiki/2017/a/a2/T--Heidelberg--HP_experts_koethe.jpeg" alt=""><!-- this image will add height to parent element --> | ||
+ | <input type="checkbox" class="flipper" id="h"> | ||
+ | <label for="h" class="flip-item"> | ||
+ | <figure class="front"><img class="circular" src="https://static.igem.org/mediawiki/2017/a/a2/T--Heidelberg--HP_experts_koethe.jpeg" alt=""></figure> | ||
+ | <figure class="back"> | ||
+ | <div class="flip-item-desc center-test"><span>"I`m another quote" & Text comes here</span></div> | ||
+ | |||
+ | </figure> | ||
+ | </label> | ||
+ | </section> | ||
+ | </div> | ||
+ | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
− | <div class="row | + | <div class="row"> |
− | <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 "> | + | <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> |
− | + | <section class="flip-item-wrap"> | |
− | + | <img class="give_height" src="https://static.igem.org/mediawiki/2017/2/22/T--Heidelberg--HP_experts_ernst.jpeg" alt=""><!-- this image will add height to parent element --> | |
− | + | <input type="checkbox" class="flipper" id="i"> | |
+ | <label for="i" class="flip-item"> | ||
+ | <figure class="front"><img class="circular" src="https://static.igem.org/mediawiki/2017/2/22/T--Heidelberg--HP_experts_ernst.jpeg" alt=""></figure> | ||
+ | <figure class="back"> | ||
+ | <div class="flip-item-desc center-test"><span>"I`m a quote" & Text comes here</span></div> | ||
+ | |||
+ | </figure> | ||
+ | </label> | ||
+ | </section> | ||
</div> | </div> | ||
− | + | <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> | |
− | + | <section class="flip-item-wrap"> | |
+ | <img class="give_height" src="https://static.igem.org/mediawiki/2017/9/98/T--Heidelberg--HP_experts_adlung.jpeg " alt=""><!-- this image will add height to parent element --> | ||
+ | <input type="checkbox" class="flipper" id="j"> | ||
+ | <label for="j" class="flip-item"> | ||
+ | <figure class="front"><img class="circular" src="https://static.igem.org/mediawiki/2017/9/98/T--Heidelberg--HP_experts_adlung.jpeg " alt=""></figure> | ||
+ | <figure class="back"> | ||
+ | <div class="flip-item-desc center-test"><span>"I`m another quote" & Text comes here</span></div> | ||
+ | |||
+ | </figure> | ||
+ | </label> | ||
+ | </section> | ||
+ | </div> | ||
+ | <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> | ||
+ | <section class="flip-item-wrap"> | ||
+ | <img class="give_height" src="https://static.igem.org/mediawiki/2017/9/93/T--Heidelberg--HP_experts_degner_mrs.jpeg" alt=""><!-- this image will add height to parent element --> | ||
+ | <input type="checkbox" class="flipper" id="k"> | ||
+ | <label for="k" class="flip-item"> | ||
+ | <figure class="front"><img class="circular" src="https://static.igem.org/mediawiki/2017/9/93/T--Heidelberg--HP_experts_degner_mrs.jpeg" alt=""></figure> | ||
+ | <figure class="back"> | ||
+ | <div class="flip-item-desc center-test"><span>"I`m another quote" & Text comes here</span></div> | ||
+ | |||
+ | </figure> | ||
+ | </label> | ||
+ | </section> | ||
+ | </div> | ||
+ | <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> | ||
+ | <section class="flip-item-wrap"> | ||
+ | <img class="give_height" src="https://static.igem.org/mediawiki/2017/1/11/T--Heidelberg--HP_experts_janausch.jpeg" alt=""><!-- this image will add height to parent element --> | ||
+ | <input type="checkbox" class="flipper" id="l"> | ||
+ | <label for="l" class="flip-item"> | ||
+ | <figure class="front"><img class="circular" src="https://static.igem.org/mediawiki/2017/1/11/T--Heidelberg--HP_experts_janausch.jpeg" alt=""></figure> | ||
+ | <figure class="back"> | ||
+ | <div class="flip-item-desc center-test"><span>"I`m another quote" & Text comes here</span></div> | ||
+ | |||
+ | </figure> | ||
+ | </label> | ||
+ | </section> | ||
+ | </div> | ||
+ | <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> | ||
+ | <section class="flip-item-wrap"> | ||
+ | <img class="give_height" src="https://static.igem.org/mediawiki/2017/8/89/T--Heidelberg--HP_experts_degner_mrV3.jpeg" alt=""><!-- this image will add height to parent element --> | ||
+ | <input type="checkbox" class="flipper" id="m"> | ||
+ | <label for="m" class="flip-item"> | ||
+ | <figure class="front"><img class="circular" src="https://static.igem.org/mediawiki/2017/8/89/T--Heidelberg--HP_experts_degner_mrV3.jpeg" alt=""></figure> | ||
+ | <figure class="back"> | ||
+ | <div class="flip-item-desc center-test"><span>"I`m another quote" & Text comes here</span></div> | ||
+ | |||
+ | </figure> | ||
+ | </label> | ||
+ | </section> | ||
+ | </div> | ||
− | |||
− | + | </div> | |
− | + | ||
− | + | ||
+ | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | { | + | <script> |
+ | $('.flip-container').click(function (e) { | ||
+ | $(this).toggleClass('flipped'); | ||
+ | }); | ||
+ | </script> | ||
+ | </html> |
Revision as of 12:17, 29 October 2017