|
|
| (4 intermediate revisions by one other user not shown) |
| Line 1: |
Line 1: |
| − | {{Heidelberg/header}}
| |
| − | {{Heidelberg/navbar}}
| |
| − | {{#tag:html|
| |
| − | <style>
| |
| − | .heidelbox-darkred {background-color: #9D1C20 !important; color: white !important; }
| |
| − | </style>
| |
| | | | |
| − | <div class="heidelbox-darkred">
| |
| − | <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">Some content</h1>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <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="container">
| |
| − | <div class="row">
| |
| − | <div class="col-lg-3 col-md-3 col-xs-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-xs-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>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | <script>
| |
| − | $('.flip-container').click(function (e) {
| |
| − | $(this).toggleClass('flipped');
| |
| − | });
| |
| − |
| |
| − | </script>
| |
| − | }}
| |
| − |
| |
| − | {{Heidelberg/footer}}
| |
