|
|
| (9 intermediate revisions by one other user not shown) |
| Line 1: |
Line 1: |
| − | {{Heidelberg/SandboxMarita/headerMarita}}
| |
| − | {{Heidelberg/SandboxMarita/navbarMarita}}
| |
| | | | |
| − | {{#tag: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">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>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!-- Beginn Text-Bild-Video-Einheit -->
| |
| − | <div class="container" style="padding-top: 80px; background-color: #222 !important">
| |
| − | <hr>
| |
| − | <div class="row">
| |
| − | <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="">
| |
| − | <p class="content" style="float: left; clear:left; text-align: left; font-size: 40px !important; color: white !important; font-weight: 700 !important;">Prof. Dr. Erika Musterfrau</p>
| |
| − | <p class="content" style="float: left; clear: left; text-align: left; font-size: 20px !important; color: white !important; font-weight: 400 !important;padding-top: 5px">Head of Department Musterpatterns</p>
| |
| − | <p class="content" style="float: left; clear: left; text-align: left; font-size: 20px !important; color: white !important; font-weight: 400 !important;">Pattern Scientist</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="row" style="align:right !important">
| |
| − | <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 class="col-lg-9 col-md-9 col-sm-6 col-xs-12 content" style="text-align: left; color: white !important">
| |
| − | Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen. Aber bin ich deshalb ein schlechter Text? Ich weiß, dass ich nie die Chance haben werde im Stern zu erscheinen. Aber bin ich darum weniger wichtig? Ich bin blind! Aber ich bin gerne Text. Und sollten Sie mich jetzt tatsächlich zu Ende lesen, dann habe ich etwas geschafft, was den meisten “normalen” Texten nicht gelingt.
| |
| − | Ich bin nur Blindtext und halte den Platz für Wichtigeres frei. Ich weiß, dass ich wieder gelöscht werde aber das macht mir nichts aus. Das ist meine Bestimmung.
| |
| − | </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>
| |
| − | <!-- Ende Text-Bild-Video-Einheit -->
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!-- Beginn Text-Bild-Video-Einheit -->
| |
| − | <div class="container" style="padding-top: 80px; background-color: #222 !important">
| |
| − | <hr>
| |
| − | <div class="row">
| |
| − | <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="">
| |
| − | <p class="content" style="float: right; clear:right; text-align: right; font-size: 40px !important; color: white !important; font-weight: 700 !important;">Prof. Dr. Erika Musterfrau</p>
| |
| − | <p class="content" style="float: right; clear:right; text-align: right; font-size: 20px !important; color: white !important; font-weight: 400 !important;padding-top: 5px">Head of Department Musterpatterns</p>
| |
| − | <p class="content" style="float: right; clear:right; text-align: right; font-size: 20px !important; color: white !important; font-weight: 400 !important;">Pattern Scientist</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="row" style="align:right !important">
| |
| − | <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 class="col-lg-9 col-md-9 col-sm-6 col-xs-12 content" style="align: right !important; text-align: right !important; color: white !important">
| |
| − | Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen. Aber bin ich deshalb ein schlechter Text? Ich weiß, dass ich nie die Chance haben werde im Stern zu erscheinen. Aber bin ich darum weniger wichtig? Ich bin blind! Aber ich bin gerne Text. Und sollten Sie mich jetzt tatsächlich zu Ende lesen, dann habe ich etwas geschafft, was den meisten “normalen” Texten nicht gelingt.
| |
| − | Ich bin nur Blindtext und halte den Platz für Wichtigeres frei. Ich weiß, dass ich wieder gelöscht werde aber das macht mir nichts aus. Das ist meine Bestimmung.
| |
| − | </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>
| |
| − | <!-- Ende Text-Bild-Video-Einheit -->
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <script>
| |
| − | $('.flip-container').click(function (e) {
| |
| − | $(this).toggleClass('flipped');
| |
| − | });
| |
| − | </script>
| |
| − |
| |
| − | }}
| |
| − |
| |
| − | {{Heidelberg/footer}}
| |
