Difference between revisions of "Team:Heidelberg/Sandbox10"

Line 5: Line 5:
 
.heidelbox-darkred {background-color: #9D1C20 !important; color: white !important; }
 
.heidelbox-darkred {background-color: #9D1C20 !important; color: white !important; }
 
</style>
 
</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="heidelbox-darkred">
 
<div class="container">
 
<div class="container">
Line 84: Line 14:
 
   </div>
 
   </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="container">
−
                                              <div class="row" style="padding-bottom: 20px;">
+
        <div class="row">
−
                                              <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
+
            <div class="col-lg-3 col-md-3 col-xs-6 col-xs-12">
−
                                                <div class="flip-container">
+
            <section class="flip-item-wrap">
−
                                                  <div class="front">
+
<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 -->
−
                                                      <div class="img-circular row1_place1"></div>
+
<input type="checkbox" class="flipper" id="a">
−
                                                  </div>
+
<label for="a" class="flip-item">
−
                                                  <div class="back">
+
    <figure class="front"><img class="circular" src="https://www.ostraining.com/cdn/images/coding/circled-images/girl.jpg" alt=""></figure>
−
                                                    <div class="img-circular" style="background-color: #222"><a href="#p1">"Hey there, maybe you tell me something about yourself"</a></div>
+
    <figure class="back">
−
                                                  </div>
+
   
−
                                                </div>
+
    <div class="flip-item-desc circular center-test">
−
                                              </div>
+
    <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>
 +
        </div>
 +
 
 
   <script>
 
   <script>
 
   // Info Pauline: Put your links here according to your order of images
 
   // Info Pauline: Put your links here according to your order of images

Revision as of 15:27, 22 October 2017

Some content