Team:CityU HK/HumanPractice

From 2014.igem.org

(Difference between revisions)
Line 59: Line 59:
</style>
</style>
-
<style>  /*============animation===========*/
+
<style>  /*============ word animation===========*/
.jumbotron h1 {
.jumbotron h1 {
   -webkit-transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
Line 125: Line 125:
     -moz-transform: rotateY(0deg) translateZ(100px);
     -moz-transform: rotateY(0deg) translateZ(100px);
   }
   }
 +
</style>
 +
 +
<style> <!--=========== lightbox css =====-->
 +
.container ul {
 +
  list-style: none;
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
.container ul li {
 +
  display: inline-block;
 +
  margin: 0.7em;
 +
}
 +
.container ul li img {
 +
  width: 200px;
 +
  height: auto;
 +
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
 +
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
 +
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
 +
}
 +
.container ul .social li {
 +
  margin: 0;
 +
  margin-top: 1em;
 +
}
 +
 +
#simplbox-loading {
 +
  position: fixed;
 +
  z-index: 10003;
 +
  top: 50%;
 +
  left: 50%;
 +
}
 +
#simplbox-loading:before {
 +
  display: block;
 +
  width: 8px;
 +
  height: 8px;
 +
  background-color: #ccc;
 +
  content: "";
 +
  -moz-border-radius: 50%;
 +
  -webkit-border-radius: 50%;
 +
  border-radius: 50%;
 +
  -moz-animation: loader 1s linear infinite;
 +
  -webkit-animation: loader 1s linear infinite;
 +
  animation: loader 1s linear infinite;
 +
  -moz-transform-origin: 8px 8px;
 +
  -ms-transform-origin: 8px 8px;
 +
  -webkit-transform-origin: 8px 8px;
 +
  transform-origin: 8px 8px;
 +
}
 +
 +
@-moz-keyframes loader {
 +
  0% {
 +
    opacity: 1;
 +
    -moz-transform: rotate(360deg) scale(1.5);
 +
    transform: rotate(360deg) scale(1.5);
 +
  }
 +
  50% {
 +
    opacity: 0.5;
 +
    -moz-transform: rotate(180deg) scale(1);
 +
    transform: rotate(180deg) scale(1);
 +
  }
 +
  100% {
 +
    opacity: 1;
 +
    -moz-transform: rotate(0deg) scale(1.5);
 +
    transform: rotate(0deg) scale(1.5);
 +
  }
 +
}
 +
@-webkit-keyframes loader {
 +
  0% {
 +
    opacity: 1;
 +
    -webkit-transform: rotate(360deg) scale(1.5);
 +
    transform: rotate(360deg) scale(1.5);
 +
  }
 +
  50% {
 +
    opacity: 0.5;
 +
    -webkit-transform: rotate(180deg) scale(1);
 +
    transform: rotate(180deg) scale(1);
 +
  }
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: rotate(0deg) scale(1.5);
 +
    transform: rotate(0deg) scale(1.5);
 +
  }
 +
}
 +
@keyframes loader {
 +
  0% {
 +
    opacity: 1;
 +
    -moz-transform: rotate(360deg) scale(1.5);
 +
    -ms-transform: rotate(360deg) scale(1.5);
 +
    -webkit-transform: rotate(360deg) scale(1.5);
 +
    transform: rotate(360deg) scale(1.5);
 +
  }
 +
  50% {
 +
    opacity: 0.5;
 +
    -moz-transform: rotate(180deg) scale(1);
 +
    -ms-transform: rotate(180deg) scale(1);
 +
    -webkit-transform: rotate(180deg) scale(1);
 +
    transform: rotate(180deg) scale(1);
 +
  }
 +
  100% {
 +
    opacity: 1;
 +
    -moz-transform: rotate(0deg) scale(1.5);
 +
    -ms-transform: rotate(0deg) scale(1.5);
 +
    -webkit-transform: rotate(0deg) scale(1.5);
 +
    transform: rotate(0deg) scale(1.5);
 +
  }
 +
}
 +
#simplbox-close {
 +
  width: 2.3em;
 +
  height: 2.3em;
 +
  text-align: center;
 +
  background-color: #F4F4F4;
 +
  border-radius: 50%;
 +
  position: fixed;
 +
  z-index: 10002;
 +
  top: 2em;
 +
  right: 2em;
 +
  cursor: pointer;
 +
}
 +
#simplbox-close:before, #simplbox-close:after {
 +
  width: 2px;
 +
  background-color: #404040;
 +
  content: "";
 +
  position: absolute;
 +
  top: 20%;
 +
  bottom: 20%;
 +
  left: 50%;
 +
  margin-left: -1px;
 +
}
 +
#simplbox-close:after {
 +
  -moz-transform: rotate(45deg);
 +
  -ms-transform: rotate(45deg);
 +
  -webkit-transform: rotate(45deg);
 +
  transform: rotate(45deg);
 +
}
 +
#simplbox-close:before {
 +
  -moz-transform: rotate(-45deg);
 +
  -ms-transform: rotate(-45deg);
 +
  -webkit-transform: rotate(-45deg);
 +
  transform: rotate(-45deg);
 +
}
 +
 +
#simplbox-overlay {
 +
  background-color: #F4F4F4;
 +
  background-color: rgba(0, 0, 0, 0.9);
 +
  position: fixed;
 +
  z-index: 9998;
 +
  top: 0;
 +
  right: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
}
 +
#simplbox-caption {
 +
  text-align: center;
 +
  color: #404040;
 +
  font-size: 18px;
 +
  background-color: #F4F4F4;
 +
  position: fixed;
 +
  z-index: 10001;
 +
  left: 0;
 +
  right: 0;
 +
  bottom: 0;
 +
  padding: 13px;
}
}
</style>
</style>
Line 150: Line 311:
</div> <!-- end of container-->
</div> <!-- end of container-->
 +
  <ul>
 +
    <li>
 +
      <a href="http://genert.laal.ee/demo/simplbox/gfx/image_09.jpg" data-simplbox="demo5"><img src="http://genert.laal.ee/demo/simplbox/gfx/image_09_thumb.jpg" alt="Image 09" /></a>
 +
    </li>
 +
    <li>
 +
      <a href="http://genert.laal.ee/demo/simplbox/gfx/image_10.jpg" data-simplbox="demo5"><img src="http://genert.laal.ee/demo/simplbox/gfx/image_10_thumb.jpg" alt="Image 10" /></a>
 +
    </li>
 +
  </ul>
 +
  </section>
 +
  <div class="github-fork-ribbon-wrapper right">
 +
    <div class="github-fork-ribbon">
 +
    <a href="https://github.com/Dendrochronologyy/SimplBox">Fork me on GitHub</a>
 +
  </div>
 +
</div>
<!--==================== footer ===========================-->
<!--==================== footer ===========================-->
Line 166: Line 341:
</div> <!--end of col-md-5-->
</div> <!--end of col-md-5-->
</div> <!-- end of #footer -->
</div> <!-- end of #footer -->
 +
 +
<script>
 +
var E = new SimplBox(document.querySelectorAll("[data-simplbox='demo5']"), {
 +
    quitOnDocumentClick: false,
 +
    onStart: function () {
 +
        overlayOn();
 +
        closeButtonOn(E);
 +
    },
 +
    onEnd: function () {
 +
        overlayOff();
 +
        closeButtonOff();
 +
        captionOff();
 +
    },
 +
    onImageLoadStart: function () {
 +
        preLoadIconOn();
 +
        captionOn(E);
 +
    },
 +
    onImageLoadEnd: function () {
 +
        preLoadIconOff();
 +
    }
 +
});
 +
E.init();
 +
</script>
</body>
</body>
</html>
</html>

Revision as of 01:42, 20 September 2014

Bootstrap 101 Template

Bootstrap 101 Template


Human Practice

We educated secondary school kids about synthetic biology and the safety issues. We also conducted a survey on public understanding on synthetic biology.

What we have done

This part is under construction.

Survey

This part is under construction.

  • Image 09
  • Image 10
Fork me on GitHub

Retrieved from "http://2014.igem.org/Team:CityU_HK/HumanPractice"