|
|
| (6 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>
| |
| − | <style>
| |
| | | | |
| − |
| |
| − | .img-circular{
| |
| − | width: 250px;
| |
| − | height: 250px;
| |
| − | margin: 0 auto;
| |
| − | display: block;
| |
| − | border-radius: 50%;
| |
| − | background-size: cover;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .img-circular a {
| |
| − | display:table-cell;
| |
| − | vertical-align:middle;
| |
| − | height:250px;
| |
| − | width:250px;
| |
| − | text-align:center;
| |
| − | padding: 0 15px;
| |
| − | color: white !important;
| |
| − | }
| |
| − | .flip-container {
| |
| − |
| |
| − | position: relative;
| |
| − | /* background: teal;*/
| |
| − | height: 200px;
| |
| − | transition: all 0.2s;
| |
| − | perspective: 700px;
| |
| − |
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .front, .back {
| |
| − |
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | text-align: center;
| |
| − | backface-visibility: hidden;
| |
| − | transform-style: preserve3d;
| |
| − | transition: all 0.4s;
| |
| − | }
| |
| − |
| |
| − | .pad {
| |
| − | height:100%;
| |
| − | width:100%;
| |
| − | padding: 0px 60px 0 60px;
| |
| − | }
| |
| − |
| |
| − | .front_adv {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | .back {
| |
| − | transform: rotateY(-180deg);
| |
| − | }
| |
| − |
| |
| − | .flipped .back {
| |
| − | transform: rotateY(0deg);
| |
| − | }
| |
| − |
| |
| − | .flipped .front {
| |
| − | transform: rotateY(180deg);
| |
| − | }
| |
| − | </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>
| |
| − | <div class="container">
| |
| − | <div class="row" style="padding-bottom: 20px;">
| |
| − | <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
| |
| − | <div class="flip-container">
| |
| − | <div class="front">
| |
| − | <div class="img-circular row1_place1"></div>
| |
| − | </div>
| |
| − | <div class="back">
| |
| − | <div class="img-circular" style="background-color: #222"><a href="#p1">"Hey there, maybe you tell me something about yourself"</a></div>
| |
| − | </div>
| |
| − | </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}}
| |
