|
|
| (5 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{
| |
| − |
| |
| − | 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;
| |
| − | width: auto;
| |
| − | 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 circular center-test">
| |
| − | <span>There is no content and no more and a lot fo different text in there There is no content and no more and a lot fo different text in there </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 circular center-test">
| |
| − | <span>There is no content and no more and a lot fo different text in there There is no content and no more and a lot fo different text in there </span>
| |
| − | </div>
| |
| − | </figure>
| |
| − | </label>
| |
| − | </section>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <script>
| |
| − | // Info Pauline: Put your links here according to your order of images
| |
| − | var image_source = ['https://engineering.unl.edu/images/staff/Kayla_Person-small.jpg', 'https://engineering.unl.edu/images/staff/Kayla_Person-small.jpg','https://engineering.unl.edu/images/staff/Kayla_Person-small.jpg', 'https://engineering.unl.edu/images/staff/Kayla_Person-small.jpg','https://engineering.unl.edu/images/staff/Kayla_Person-small.jpg', 'https://engineering.unl.edu/images/staff/Kayla_Person-small.jpg','https://engineering.unl.edu/images/staff/Kayla_Person-small.jpg', 'https://engineering.unl.edu/images/staff/Kayla_Person-small.jpg'];
| |
| − |
| |
| − | for(var i=1;i<3;i++) {
| |
| − | for(var j=1;j<5;j++) {
| |
| − | var place = ".row"+i+"_place"+j;
| |
| − |
| |
| − | var url = 'url('+image_source[(j-1)+(i-1)*4]+')';
| |
| − | console.log(url)
| |
| − | console.log(place);
| |
| − | $(place).css('background-image', url);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | </script>
| |
| − | <script>
| |
| − | $('.flip-container').click(function (e) {
| |
| − | $(this).toggleClass('flipped');
| |
| − | });
| |
| − |
| |
| − | </script>
| |
| − | }}
| |
| − |
| |
| − | {{Heidelberg/footer}}
| |
