|
|
| Line 1: |
Line 1: |
| − | {{Heidelberg/header}}
| |
| − | {{Heidelberg/navbar}}
| |
| − | {{#tag:html|
| |
| − | <style>
| |
| − | .heidelbox-darkred {background-color: #9D1C20 !important; color: white !important; }
| |
| − | </style>
| |
| − | <style>
| |
| − | .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">Integrated Human Practice</h1>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="container">
| |
| − | <div class="row">
| |
| − | <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
| |
| − | <section class="flip-item-wrap">
| |
| − | <img class="give_height" src="https://www.ostraining.com/cdn/images/coding/circled-images/girl.jpg" 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://www.ostraining.com/cdn/images/coding/circled-images/girl.jpg" 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 class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
| |
| − | <section class="flip-item-wrap">
| |
| − | <img class="give_height" src="https://www.ostraining.com/cdn/images/coding/circled-images/girl.jpg" 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://www.ostraining.com/cdn/images/coding/circled-images/girl.jpg" 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-12">
| |
| − | <section class="flip-item-wrap">
| |
| − | <img class="give_height" src="https://www.ostraining.com/cdn/images/coding/circled-images/girl.jpg" 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://www.ostraining.com/cdn/images/coding/circled-images/girl.jpg" 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-12">
| |
| − | <section class="flip-item-wrap">
| |
| − | <img class="give_height" src="https://www.ostraining.com/cdn/images/coding/circled-images/girl.jpg" 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://www.ostraining.com/cdn/images/coding/circled-images/girl.jpg" 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 class="container" style="padding-top: 100px; background-color: #222 !important">
| |
| − | <div class="row">
| |
| − | <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
| |
| − | <hr>
| |
| − | <div class="content" style="font-size: 40px !important; color: white !important; font-weight: 700 !important;">Dr. Mustermann</div>
| |
| − | <div class="content" style="font-size: 20px !important; color: white !important; font-weight: 400 !important;padding-top: 5px">Professor of Musterhausen</div>
| |
| − | <div class="content" style="font-size: 20px !important; color: white !important; font-weight: 400 !important;">Scientist</div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="row">
| |
| − | <div class="col-lg-9 col-md-9 col-sm-6 col-xs-12 content" style="color: white !important">
| |
| − | Bacon ipsum dolor amet hamburger ham hock alcatra sirloin shankle andouille cupim porchetta chuck pork loin corned beef turducken boudin jerky prosciutto. Tri-tip jowl prosciutto, meatball brisket short loin short ribs landjaeger turkey rump sirloin frankfurter. Kielbasa jerky drumstick venison ground round. Jerky beef pancetta, filet mignon biltong venison short loin doner meatloaf ham landjaeger spare ribs sausage. Chuck meatball jerky flank, landjaeger fatback filet mignon jowl boudin leberkas rump hamburger. Pastrami short loin meatloaf beef ribs, hamburger pork belly swine ground round turkey bacon picanha tri-tip salami. Ribeye tri-tip biltong frankfurter flank, corned beef jerky sirloin pork chop
| |
| − | </div>
| |
| − | <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
| |
| − | <section class="flip-item-wrap">
| |
| − | <img src="https://www.ostraining.com/cdn/images/coding/circled-images/girl.jpg" alt="">
| |
| − | </section>
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − | <div class="row">
| |
| − | <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
| |
| − | <video poster="" style="width: 100%; height: auto" controls>
| |
| − | <source src="https://static.igem.org/mediawiki/2017/2/25/T--Heidelberg--2017_Wiki_Intro_iGEM2017.mp4" type="video/mp4">
| |
| − | </video>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <script>
| |
| − | $('.flip-container').click(function (e) {
| |
| − | $(this).toggleClass('flipped');
| |
| − | });
| |
| − |
| |
| − | </script>
| |
| − | }}
| |
| − |
| |
| − | {{Heidelberg/footer}}
| |
