Difference between revisions of "Template:Freiburg/Elements"

(Blanked the page)
 
(84 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{Freiburg/CCS}}
 
{{Freiburg/Navbar}}
 
<html>
 
<head>
 
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 
<link rel="stylesheet" type="text/css"
 
href="https://2017.igem.org/Template:Team:Freiburg/CSS?action=raw&ctype=text/css"/>
 
<link rel="stylesheet" type="text/css"
 
href="https://2017.igem.org/Template:Team:Freiburg/CSS:bootstrap?action=raw&ctype=text/css"/>
 
<script type="text/javascript" src="https://2017.igem.org/Template:Team:Freiburg/JS:bootstrap?action=raw&ctype=text/javascript"></script>
 
</head>
 
  
<style>
 
 
/* .body {
 
  background-color: #F5EFED;
 
} */
 
 
/* =============== BEGIN: Circle of Elements ==================== */
 
/*
 
* Mixin to put items on a circle
 
* [1] - Allows children to be absolutely positioned
 
* [2] - Allows the mixin to be used on a list
 
* [3] - In case box-sizing: border-box has been enabled
 
* [4] - Allows any type of direct children to be targeted
 
*/
 
 
@media screen and (min-width: 1050px){
 
 
.circle-container {
 
  position: relative;
 
  /* [1] */
 
  width: 500px;                      /* changes size of circle that elements are circling on */
 
  height: 300px;
 
  padding: 0;
 
  border-radius: 10%;              /* switch between circle and Rechteck */
 
  list-style: none;
 
  /* [2] */
 
  -moz-box-sizing: content-box;
 
  -webkit-box-sizing: content-box;
 
  box-sizing: content-box;
 
  /* [3] */
 
  margin: 5em auto 0;
 
  /*border: solid 5px #0051A2;*/
 
  z-index: 9;
 
}
 
.circle-container > * {
 
  /* [4] */
 
  display: block;
 
  position: absolute;              /* set absolute to fix elements on circle */
 
  top: 25%;
 
  left: 40%;
 
  width: 170px;                      /* define size of elements */
 
  height: 280px;
 
  margin: 0;   
 
  font-size: 100%;
 
  text-align: center;
 
}
 
 
/* transformations needed for showing the pictures */
 
.circle-container > *:nth-of-type(4) {
 
  -moz-transform: rotate(341.8deg) translate(274px) rotate(-341.8deg);
 
  -ms-transform: rotate(341.8deg) translate(274px) rotate(-341.8deg);
 
  -webkit-transform: rotate(341.8deg) translate(274px) rotate(-341.8deg);
 
  transform: rotate(341.8deg) translate(274px) rotate(-341.8deg);            /*change translate for defining position of elements*/
 
}
 
.circle-container > *:nth-of-type(5) {
 
  -moz-transform: rotate(60deg) translate(138px) rotate(-60deg);
 
  -ms-transform: rotate(60deg) translate(138px) rotate(-60deg);
 
  -webkit-transform: rotate(60deg) translate(138px) rotate(-60deg);
 
  transform: rotate(60deg) translate(138px) rotate(-60deg);
 
}
 
.circle-container > *:nth-of-type(6) {
 
  -moz-transform: rotate(150deg) translate(236px) rotate(-150deg);
 
  -ms-transform: rotate(150deg) translate(236px) rotate(-150deg);
 
  -webkit-transform: rotate(150deg) translate(236px) rotate(-150deg);
 
  transform: rotate(150deg) translate(236px) rotate(-150deg);
 
}
 
.circle-container > *:nth-of-type(1) {
 
  -moz-transform: rotate(235deg) translate(355.5px) rotate(-235deg);
 
  -ms-transform: rotate(235deg) translate(355.5px) rotate(-235deg);
 
  -webkit-transform: rotate(235deg) translate(355.5px) rotate(-235deg);
 
  transform: rotate(235deg) translate(355.5px) rotate(-235deg);
 
}
 
.circle-container > *:nth-of-type(2) {
 
  -moz-transform: rotate(192.5deg) translate(395px) rotate(-192.5deg);
 
  -ms-transform: rotate(192.5deg) translate(395px) rotate(-192.5deg);
 
  -webkit-transform: rotate(192.5deg) translate(395px) rotate(-192.5deg);
 
  transform: rotate(192.5deg) translate(395px) rotate(-192.5deg);
 
}
 
.circle-container > *:nth-of-type(3) {
 
  -moz-transform: rotate(283deg) translate(300px) rotate(-283deg);
 
  -ms-transform: rotate(283deg) translate(300px) rotate(-283deg);
 
  -webkit-transform: rotate(283deg) translate(300px) rotate(-283deg);
 
  transform: rotate(283deg) translate(300px) rotate(-283deg);
 
}
 
 
.circle-container a {
 
  padding: 1px 10px;
 
  font-size: 90%;
 
}
 
 
.circle-container > div {
 
  display: block;
 
  width: 100%;
 
  border-radius: 50%;                      /* makes elements round or Rechteck */
 
  -webkit-filter: grayscale(100%);
 
  filter: grayscale(100%);
 
}
 
.circle-container img:hover {
 
  -webkit-filter: grayscale(0);
 
  filter: grayscale(0);
 
}
 
 
 
 
/* =============== END: Circle of Elements - Positioning ==================== */
 
 
/* =============== BEGIN: New Header =============================== */
 
#cool_centerimage_small{
 
  display: none;
 
}
 
/* =============== END: New Header =============================== */
 
 
} /* end of media query! dont delete */
 
 
 
/* =============== BEGIN: Circle of Elements - Element Styling ==================== */
 
.cool_header {
 
    text-align: center;
 
    height: 20px;
 
    margin-bottom: 3px;
 
    z-index: 5;
 
}
 
 
.cool_header a {
 
  /*display: block; */                        /* border around elements */
 
  border-radius: 30%;                      /* makes border around elements round or Rechteck */
 
  /*box-shadow: 0 0 0 5px #0051A2;*/
 
        color: #FFF;
 
  background-color: #7D0202;
 
  padding: 1px 10px;
 
  font-size: 110%;
 
  border: 5px solid #7D0202;
 
}
 
 
.cool_header a:hover {
 
  text-decoration: underline;
 
}
 
 
.cool_content {
 
    padding: 16px;
 
    height: 160px;
 
    background-color: #FFFFFF;
 
    text-align: left;
 
    box-shadow: 1px 1px 10px #888;
 
    -webkit-box-shadow: 1px 1px 10px #888;
 
    -moz-box-shadow: 1px 1px 10px #888;
 
    border-radius: 50%;
 
  opacity: 0;
 
 
 
  -webkit-transition: all 0.4s ease-in-out;
 
  -moz-transition: all 0.4s ease-in-out;
 
  -o-transition: all 0.4s ease-in-out;
 
  -ms-transition: all 0.4s ease-in-out;
 
  transition: all 0.4s ease-in-out;
 
 
 
  -webkit-transform: scale(0);
 
  -moz-transform: scale(0);
 
  -o-transform: scale(0);
 
  -ms-transform: scale(0);
 
  transform: scale(0);
 
 
 
  -webkit-backface-visibility: hidden;
 
}
 
 
.cool_container {
 
    width: 100%;
 
    padding-top: 250px;
 
    margin-bottom: 50px;
 
}
 
 
/* =============== END: Circle of Elements - Element Styling ==================== */
 
 
 
/* =============== BEGIN: Circle of Elements - Center Image ==================== */
 
.cool_centerimage {
 
    margin: 0 auto;
 
    position: relative;
 
    width: 40%;
 
    height: 250px;
 
    top: -530px;
 
    text-align: center;
 
    left: 1%;
 
    color: #000;
 
    z-index: 10;
 
}
 
 
#Abstract_logo{
 
  position: absolute;
 
transform: translate(30%, 50%);
 
  -ms-transform: translate(30%, 50%);
 
  -o-transform: translate(30%, 50%);
 
  -webkit-transform: translate(30%, 50%);
 
 
 
}
 
/* =============== END: Circle of Elements - Center Image ==================== */
 
 
 
/* =============== BEGIN: Circle of Elements - Hiding Animation ==================== */
 
.cool_image_blink {
 
  /*box-shadow:
 
    inset 0 0 0 0 rgba(200,95,66, 0.4),
 
    inset 0 0 0 16px rgba(255,255,255,0.6),
 
    0 1px 2px rgba(0,0,0,0.1);*/
 
        /* box-shadow: 1px 1px 2px 2px #000; */
 
   
 
  -webkit-transition: all 0.4s ease-in-out;
 
  -moz-transition: all 0.4s ease-in-out;
 
  -o-transition: all 0.4s ease-in-out;
 
  -ms-transition: all 0.4s ease-in-out;
 
  transition: all 0.4s ease-in-out;
 
        border-radius: 50%;
 
}
 
 
.cool_image_blink:hover {
 
  /*box-shadow:
 
    inset 0 0 0 110px #0051A2/*rgba(200,95,66, 0.4)*/,
 
    inset 0 0 0 16px #0051A2/*rgba(255,255,255,0.8)*/,
 
    0 1px 2px #0051A2/*rgba(0,0,0,0.1)*/;*/
 
}
 
 
.cool_image_blink:hover .cool_content {
 
  opacity: 1;
 
 
 
  -webkit-transform: scale(1);
 
  -moz-transform: scale(1);
 
  -o-transform: scale(1);
 
  -ms-transform: scale(1);
 
  transform: scale(1); 
 
}
 
 
.element1 {
 
    background-image: url("https://static.igem.org/mediawiki/2017/2/27/Mafiadude_rand_grau.png");
 
    background-size: cover;
 
    background-position: center;
 
}
 
 
.element2 {
 
    background-image: url("https://static.igem.org/mediawiki/2017/2/27/Mafiadude_rand_grau.png");
 
    background-size: cover;
 
    background-position: center;
 
}
 
 
.element3 {
 
    background-image: url("https://static.igem.org/mediawiki/2017/2/27/Mafiadude_rand_grau.png");
 
    background-size: cover;
 
    background-position: center;
 
}
 
 
.element4 {
 
    background-image: url("https://static.igem.org/mediawiki/2017/2/27/Mafiadude_rand_grau.png");
 
    background-size: cover;
 
    background-position: center;
 
}
 
 
.element5 {
 
    background-image: url("https://static.igem.org/mediawiki/2017/2/27/Mafiadude_rand_grau.png");
 
    background-size: cover;
 
    background-position: center;
 
}
 
 
.element6 {
 
    background-image: url("https://static.igem.org/mediawiki/2017/2/27/Mafiadude_rand_grau.png");
 
    background-size: cover;
 
    background-position: center;
 
}
 
 
.element7 {
 
    background-image: url("https://static.igem.org/mediawiki/2017/2/27/Mafiadude_rand_grau.png");
 
    background-size: cover;
 
    background-position: center;
 
}
 
 
.element8 {
 
    background-image: url("https://static.igem.org/mediawiki/2017/2/27/Mafiadude_rand_grau.png");
 
    background-size: cover;
 
    background-position: center;
 
}
 
/* =============== END: Circle of Elements - Hiding Animation ==================== */
 
 
 
/* =============== BEGIN: Resetting General CSS ==================== */
 
.mw-content-ltr ul {
 
    padding: 0;
 
    margin: 0 auto;
 
}
 
 
/*ul {
 
    line-height: 1em;
 
}*/
 
 
.content_box {
 
    box-shadow: none;
 
    padding: 2% 4%;
 
    margin: 0px;
 
}
 
/* =============== END: Resetting General CSS ==================== */
 
 
 
/* ============== Animate boxes on start ===========================*/
 
 
/* from https://daneden.github.io/animate.css/ */
 
 
@-webkit-keyframes zoomIn {
 
  from {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.3, .3, .3);
 
    transform: scale3d(.3, .3, .3);
 
  }
 
 
  50% {
 
    opacity: 1;
 
  }
 
}
 
 
@-webkit-keyframes zoomIn-Pics {
 
  from {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.3, .3, .3);
 
    transform: scale3d(.3, .3, .3);
 
  }
 
 
  40% {
 
    -webkit-transform: scale3d(1.1,1.1,1.1);
 
    transform: scale3d(1.1,1.1,1.1);
 
  }
 
 
  50% {
 
    opacity: 1;
 
  }
 
}
 
 
@keyframes zoomIn {
 
  from {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.3, .3, .3);
 
    transform: scale3d(.3, .3, .3);
 
  }
 
 
  50% {
 
    opacity: 1;
 
  }
 
}
 
 
@keyframes zoomIn-Pics {
 
  from {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.3, .3, .3);
 
    transform: scale3d(.3, .3, .3);
 
  }
 
 
  40% {
 
    -webkit-transform: scale3d(1.1,1.1,1.1);
 
    transform: scale3d(1.1,1.1,1.1);
 
  }
 
 
  50% {
 
    opacity: 1;
 
  }
 
}
 
 
.zoomIn {
 
  -webkit-animation-name: zoomIn;
 
  animation-name: zoomIn;
 
}
 
 
@-webkit-keyframes zoomOut {
 
  from {
 
    opacity: 1;
 
  }
 
 
  50% {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.3, .3, .3);
 
    transform: scale3d(.3, .3, .3);
 
  }
 
 
  to {
 
    opacity: 0;
 
  }
 
}
 
 
@keyframes zoomOut {
 
  from {
 
    opacity: 1;
 
  }
 
 
  50% {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.3, .3, .3);
 
    transform: scale3d(.3, .3, .3);
 
  }
 
 
  to {
 
    opacity: 0;
 
  }
 
}
 
 
.zoomOut {
 
  -webkit-animation-name: zoomOut;
 
  animation-name: zoomOut;
 
}
 
 
 
#box1,
 
#box2,
 
#box3,
 
#box4,
 
#box5,
 
#box6,
 
#box7,
 
#box8,
 
#Abstract_logo,
 
#Abstract_text {
 
  opacity: 0;
 
}
 
 
.link_trigger:hover{
 
  cursor: hand;
 
  cursor: pointer;
 
}
 
 
@media screen and (max-width: 1049px) {
 
 
.topicboxes{
 
  display: block;
 
  width: 200px;                      /* define size of elements */
 
  height: 200px;
 
  margin: 20px;
 
  font-size: 100%;   
 
  text-align: center;
 
}
 
 
.circle-container li {
 
  display: inline-block;
 
}
 
 
 
.circle-container{
 
  display: flex;
 
  flex-wrap: wrap;
 
  justify-content: space-around;
 
  margin-bottom: 32px;
 
}
 
 
.cool_container{
 
  display: block;
 
  padding-top: 0;
 
  margin: 0;
 
}
 
 
 
.cool_centerimage{
 
  display: none;
 
}
 
 
#cool_centerimage_small{
 
  display: block;
 
  margin: 20px;
 
  font-weight: 500;
 
}
 
 
.circle-container a {
 
  padding: 1px 5px;
 
  font-size: 80%;
 
}
 
 
}
 
 
</style>
 
 
<script type="text/javascript">
 
 
 
// perform the animation
 
 
$(document).ready(function() {
 
    $('#Abstract_logo').delay(1000).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); }); 
 
    $('#box1').delay(2000).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 
    $('#box2').delay(2500).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 
    $('#box3').delay(3000).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 
    $('#box4').delay(3500).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 
    $('#box5').delay(4000).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 
    $('#box6').delay(4500).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 
    $('#box7').delay(5000).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 
    $('#box8').delay(5500).queue(function (next) {$(this).css({"animation-name": "zoomIn-Pics", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 
    $('#Abstract_logo').delay(6000).queue(function (next) {$(this).css({"animation-name": "zoomIn", "animation-duration": "1s"}).css({"opacity":"1"}); next(); });
 
});
 
 
</script>
 
 
<script>
 
 
$(document).ready(function(){
 
  $('.link_trigger').click(function(){
 
    window.location.href=$(this).attr('href');
 
  })
 
});
 
 
</script>
 
 
<div class="body">
 
 
 
<div class="cool_container">
 
 
    <ul class='circle-container'>
 
        <li><!--6-->
 
        <div id="box1" class="topicboxes">
 
         
 
          <div class="cool_image_blink element1">
 
          <div class="cool_content cool_text_blink link_trigger" href='' title="">
 
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 
          </div>
 
          </div>
 
<div class="cool_header"><a href=''>Lorem ipsum</a></div>
 
        </div>
 
        </li>
 
 
        <li><!--7-->
 
        <div id="box2" class="topicboxes">
 
          <div class="cool_image_blink element2">
 
          <div class="cool_content cool_text_blink link_trigger" href="" title="">
 
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 
          </div>
 
          </div>
 
<div class="cool_header"><a href=''>Lorem ipsum</a></div>
 
        </div>
 
        </li>
 
 
        <li><!--8-->
 
        <div id="box3" class="topicboxes">
 
         
 
          <div class="cool_image_blink element3">
 
          <div class="cool_content cool_text_blink link_trigger" href='' title="">
 
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 
          </div>
 
          </div>
 
<div class="cool_header"><a href=''>Lorem ipsum</a></div>
 
        </div>
 
        </li>
 
 
        <li><!--1-->
 
            <div id="box4" class="topicboxes">
 
           
 
              <div class="cool_image_blink element4">
 
              <div class="cool_content cool_text_blink link_trigger" href='' title="">
 
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 
              </div>
 
            </div>
 
<div class="cool_header"><a href=''>Lorem ipsum</a></div>
 
          </div>
 
        </li>
 
 
        <li><!--2-->
 
          <div id="box5" class="topicboxes">
 
   
 
            <div class="cool_image_blink element5">
 
            <div class="cool_content cool_text_blink link_trigger" href='' title="">
 
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 
            </div>
 
            </div>
 
<div class="cool_header"><a href=''>Lorem ipsum</a></div>
 
          </div>
 
        </li>
 
 
        <li><!--3-->
 
          <div id="box6" class="topicboxes">
 
         
 
            <div class="cool_image_blink element6">
 
            <div class="cool_content cool_text_blink link_trigger"  href='' title="">
 
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 
            </div>
 
            </div>
 
<div class="cool_header"><a href=''>Lorem ipsum</a></div>
 
          </div>
 
        </li>
 
 
     
 
    </ul>
 
<div class="cool_centerimage">
 
        <div id="Abstract_logo">
 
          <img  src="https://static.igem.org/mediawiki/2017/c/c3/CARTEL_final.png" height="150px" width="340px">
 
        </div>
 
    </div>
 
 
   
 
</div>
 
</div>
 
</html>
 
{{Freiburg/Footer}}
 

Latest revision as of 19:08, 26 October 2017