|
|
(31 intermediate revisions by 3 users not shown) |
Line 1: |
Line 1: |
| | | |
− | {{Freiburg/Navbar}}
| |
− | <html>
| |
− | <head>
| |
− | </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: 900px){
| |
− |
| |
− | .circle-container {
| |
− | position: relative;
| |
− | /* [1] */
| |
− | width: 500px; /* changes size of circle that elements are circling on */
| |
− | height: 500px;
| |
− | 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: 20px;
| |
− | height: 160px;
| |
− | background-color: #FFFFFF;
| |
− | text-align: center;
| |
− | 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: -100px;
| |
− | }
| |
− |
| |
− | /* =============== END: Circle of Elements - Element Styling ==================== */
| |
− |
| |
− |
| |
− | /* =============== BEGIN: Circle of Elements - Center Image ==================== */
| |
− | .cool_centerimage {
| |
− | margin: 0 auto;
| |
− | position: relative;
| |
− | width: 30%;
| |
− | height: 250px;
| |
− | top: -530px;
| |
− | text-align: center;
| |
− | left: 1%;
| |
− | color: #000;
| |
− | z-index: 10;
| |
− | }
| |
− |
| |
− | #Abstract_logo{
| |
− | position: relative;
| |
− | transform: translate(-20%, 50%);
| |
− | -ms-transform: translate(-20%, 50%);
| |
− | -o-transform: translate(-10%, 50%);
| |
− | -webkit-transform: translate(-10%, 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/6/67/Mafiadude_z_medalami.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/0/0e/T-FREIBURG-mafiadude-diploma.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: 899px) {
| |
− |
| |
− | .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="">
| |
− | <div class="text">
| |
− | Besides learning a lot and having tremendous fun, we achieved something great this year!
| |
− | Check it out!
| |
− |
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
− | <div class="cool_header"><a href=''>Achievement</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="">
| |
− | Find out more about the Freiburg 2017 Team!
| |
− | </div>
| |
− | </div>
| |
− | <div class="cool_header"><a href=''>Team</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="">
| |
− | In our project, we used a genetic AND gate to improve the safety of CAR therapy! Learn more about it here...
| |
− |
| |
− | </div>
| |
− | </div>
| |
− | <div class="cool_header"><a href=''>AND gate</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="">
| |
− | We generated stable cell lines, a knockout in two cell lines, characterized x promoters and much more! Check out our results page!
| |
− | </div>
| |
− | </div>
| |
− | <div class="cool_header"><a href=''>Results</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="">
| |
− | To better understand our project, we modeled gene expression within our genetic circuit and T cell migration. Learn more here...
| |
− | </div>
| |
− | </div>
| |
− | <div class="cool_header"><a href=''>Modeling</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" style="font-size:70%" href='' title="">
| |
− | In human practice, we wanted to hear the thoughts and concerns about our project. Check out our survey and interviews with experts working on the field!
| |
− | </div>
| |
− | </div>
| |
− | <div class="cool_header"><a href=''>Human Practice</a></div>
| |
− | </div>
| |
− | </li>
| |
− |
| |
− |
| |
− | </ul>
| |
− | <div class="cool_centerimage">
| |
− | <div id="Abstract_logo">
| |
− | <img src="https://static.igem.org/mediawiki/2017/e/e5/Cartel_full.png" height="150px" width="340px">
| |
− | </div>
| |
− | </div>
| |
− |
| |
− |
| |
− | </div>
| |
− | </div>
| |
− | </html>
| |
− | {{Freiburg/Footer}}
| |