Difference between revisions of "Team:Heidelberg/Sandbox10"

(Created page with "{{Heidelberg/header}} {{Heidelberg/navbar}} {{Heidelberg/templateus/Emphasissection| {{Heidelberg/templateus/Heading| Integrated Human Practices}} Flank strip steak kevin chic...")
 
Line 1: Line 1:
 
{{Heidelberg/header}}
 
{{Heidelberg/header}}
 
{{Heidelberg/navbar}}
 
{{Heidelberg/navbar}}
−
{{Heidelberg/templateus/Emphasissection|
+
{{#tag:html|
−
{{Heidelberg/templateus/Heading| Integrated Human Practices}}
+
<style>
−
Flank strip steak kevin chicken ribeye. Picanha tri-tip turducken andouille, pork chop fatback meatball boudin prosciutto tenderloin ribeye. Short ribs leberkas tenderloin, ham ground round beef ribs ball tip boudin short loin. Flank strip steak kevin chicken ribeye. Picanha tri-tip turducken andouille, pork chop fatback meatball boudin prosciutto tenderloin ribeye. Short ribs leberkas tenderloin, ham ground round beef ribs ball tip boudin short loin. Bacon ipsum dolor amet tail cupim andouille ball tip, pancetta ham hock prosciutto beef ribs venison porchetta. Pork chop pork belly flank meatloaf beef kielbasa prosciutto meatball pork loin. Prosciutto tail short loin ham hock rump venison. Flank strip steak kevin chicken ribeye. Picanha tri-tip turducken andouille, pork chop fatback meatball boudin prosciutto tenderloin ribeye. Short ribs leberkas tenderloin, ham ground round beef ribs ball tip boudin short loin. Bacon ipsum dolor amet tail cupim andouille ball tip, pancetta ham hock prosciutto beef ribs venison porchetta. Pork chop pork belly flank meatloaf beef kielbasa prosciutto meatball pork loin. Prosciutto tail short loin ham hock rump venison. Flank strip steak kevin chicken ribeye. Picanha tri-tip turducken andouille, pork chop fatback meatball boudin prosciutto tenderloin ribeye. Short ribs leberkas tenderloin, ham ground round beef ribs ball tip boudin short loin.
+
.heidelbox-darkred {background-color: #9D1C20 !important; color: white !important; }
−
|color=red}}
+
.image-grid {
 +
  width: 100%;
 +
  max-width: 1310px;
 +
  margin: 0 auto;
 +
 
 +
  overflow: hidden;
 +
  padding: 10px 5px 0;
 +
}
 +
 
 +
.image__cell {
 +
  float: left;
 +
  position: relative;
 +
}
 +
 
 +
 
 +
 
 +
.basic__img {
 +
  display: block;
 +
    float: left;
 +
  max-width: 100%;
 +
  height: auto;
 +
  margin: 0 auto;
 +
 
 +
}
 +
         
 +
.img-circular{
 +
width: 250px;
 +
height: 250px;
 +
margin: 0 auto;
 +
display: block;
 +
border-radius: 50%;
 +
background-size: cover;
 +
}
 +
 
 +
 
 +
.image__cell.is-collapsed .arrow--up {
 +
  height: 10px;
 +
  width: 100%;
 +
}
 +
 
 +
.image__cell.is-expanded .arrow--up {
 +
  border-bottom: 8px solid #222;
 +
  border-left: 8px solid transparent;
 +
  border-right: 8px solid transparent;
 +
  height: 0;
 +
  width: 0;
 +
  margin: 2px auto 0;
 +
}
 +
 
 +
.expand__close {
 +
  position: absolute;
 +
  top: 10px;
 +
  right: 20px;
 +
  color: #393939;
 +
  font-size: 50px;
 +
  line-height: 50px;
 +
  text-decoration: none;
 +
}
 +
 
 +
.expand__close:before {
 +
  content: '×';
 +
}
 +
 
 +
.expand__close:hover {
 +
  color: #fff;
 +
}
 +
 
 +
.image--large {
 +
  max-width: 100%;
 +
  height: auto;
 +
  display: block;
 +
  padding: 40px;
 +
  margin: 0 auto;
 +
  box-sizing: border-box;
 +
}
 +
 
 +
@media only screen and (max-width: 530px) {
 +
 
 +
  .image__cell {
 +
      width: 50%;
 +
  }
 +
 
 +
  .image__cell:nth-of-type(2n+2) .image--expand {
 +
      margin-left: -100%;
 +
  }
 +
 
 +
  .image__cell:nth-of-type(2n+3) {
 +
      clear:left;
 +
  }
 +
 
 +
  .image--expand {
 +
      width: 200%;
 +
  }
 +
 
 +
}
 +
 
 +
@media only screen and (min-width: 531px) {
 +
  .image__cell {
 +
      width: 20%;
 +
  }
 +
 
 +
  .image__cell:nth-of-type(5n+2) .image--expand {
 +
    margin-left: -100%;
 +
  }
 +
 
 +
  .image__cell:nth-of-type(5n+3) .image--expand {
 +
    margin-left: -200%;
 +
  }
 +
 
 +
  .image__cell:nth-of-type(5n+4) .image--expand {
 +
    margin-left: -300%;
 +
  }
 +
 
 +
  .image__cell:nth-of-type(5n+5) .image--expand {
 +
    margin-left: -400%;
 +
  }
 +
 
 +
  .image__cell:nth-of-type(5n+6) {
 +
    clear: left;
 +
  }
 +
 
 +
  .image--expand {
 +
    width: 500%;
 +
  }
 +
 
 +
}       
 +
 
 +
.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}}
 
{{Heidelberg/footer}}

Revision as of 20:42, 21 October 2017

Some content

"Hey there, maybe you tell me something about yourself"