Difference between revisions of "Team:TUDelft/Example5"

Line 28: Line 28:
 
                 padding: 10px;
 
                 padding: 10px;
 
                 box-shadow: 2.5px 5px rgba(136, 136, 136,0.8);
 
                 box-shadow: 2.5px 5px rgba(136, 136, 136,0.8);
−
                 heigth:12%
+
                 height:12%
 
                     width:12%
 
                     width:12%
 
             }
 
             }
Line 35: Line 35:
 
                 box-shadow: 2.5px 5px rgba(136, 136, 136,0.8);
 
                 box-shadow: 2.5px 5px rgba(136, 136, 136,0.8);
 
                 border-radius:0.4em;
 
                 border-radius:0.4em;
−
                 heigth:12%
+
                 height:12%
 
                     width:12%;
 
                     width:12%;
 
             }
 
             }
Line 242: Line 242:
 
                 }
 
                 }
 
             }
 
             }
 +
  html, body { height: 100%; padding: 0; margin: 0; }
  
−
        </style>
+
#div1 {
 +
background-image: url('https://static.igem.org/mediawiki/2019/a/ac/T--TUDelft--homeimage2.jpg');
 +
  background-size: cover;
 +
    background-position: center; /* Center the image */
 +
    width: 25%; height: 100%; float: left;
 +
 
 +
    }
 +
#div2 {
 +
    background-image: url('https://static.igem.org/mediawiki/2019/1/1d/T--TUDelft--homeimage1.jpeg');
 +
    background-size: cover;
 +
    background-position: center; /* Center the image */
 +
    width: 25%; height: 100%; float: left;
 +
    }
 +
#div3 {
 +
   
 +
    background-image: url('https://static.igem.org/mediawiki/2019/b/b2/T--TUDelft--homeimage3.jpg');
 +
    background-size: cover;
 +
    background-position: center; /* Center the image */
 +
    width: 25%; height: 100%; float: left;
 +
    }
 +
#div4 { background-image: url('https://static.igem.org/mediawiki/2019/d/d6/T--TUDelft--homeimage4.jpg');
 +
    background-size: cover;
 +
    background-position: center; /* Center the image */
 +
    width: 25%; height: 100%; float: left;
 +
   
 +
    }
 +
    #div5 { background-image: url('https://static.igem.org/mediawiki/2019/6/68/T--TUDelft--achterkant.jpg');
 +
    background-size: cover;
 +
    background-position: center; /* Center the image */
 +
        width: 100%; height: 100%; float: left;
 +
   
 +
    }
 +
   
 +
    @-webkit-keyframes flip {
 +
  from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
 +
  to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
 +
}
  
−
    </head>
+
@keyframes flip {
 +
  from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
 +
  to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
 +
}
  
−
    <body>
 
  
 +
entire container, keeps perspective
 +
.flip-container {
 +
  perspective: 1000;
 +
}
  
 +
.flip-container, .front, .back {
 +
  width: 100%;
 +
  height: 100%;
 +
}
  
 +
/* flip speed goes here */
 +
.flipper {
 +
  transition: 0.6s;
 +
  transform-style: preserve-3d;
 +
  position: relative;
 +
  -webkit-animation-name: flip;
 +
  animation-name: flip;
 +
  -webkit-animation-duration: 0.6s;
 +
  animation-duration: 0.6s;
 +
  -webkit-animation-fill-mode: forwards;
 +
  animation-fill-mode: forwards;
 +
  -webkit-animation-delay: 3s;
 +
  animation-delay: 3s;
 +
    width: 100%;
 +
  height: 100%;
 +
}
  
 +
/* hide back of pane during swap */
 +
.front, .back {
 +
  backface-visibility: hidden;
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
}
  
−
<div class="as_hero">
+
/* front pane, placed above back */
−
        <div class="video-container">
+
.front {
 +
  z-index: 2;
 +
  /* for firefox 31 */
 +
  transform: rotateY(0deg);
 +
}
  
−
            <video playsinline autoplay muted>
+
/* back, initially hidden pane */
−
              <source type="video/mp4" src="https://static.igem.org/mediawiki/2019/e/eb/T--TUDelft--replicationanimation.mp4">
+
.back {
 +
  transform: rotateY(180deg);
 +
  background: green;
 +
}
 +
        </style>
  
−
             </video>
+
    </head>
 +
 
 +
    <body>
 +
 
 +
 
 +
  <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
 +
    <div class="flipper">
 +
        <div class="front">
 +
        <!-- front content -->
 +
   
 +
    <div id="div1">
 +
</div>
 +
<div id="div2">
 +
</div>
 +
<div id="div3">
 +
</div>
 +
<div id="div4">
 +
</div>
 +
              
 +
                </div>
 +
        <div class="back">
 +
      <div id="div5">
 +
</div>
 
         </div>
 
         </div>
 +
    </div>
 
</div>
 
</div>
 +
 +
 +
  
  

Revision as of 12:50, 19 October 2019

Sci-Phi 29




Engineering organism specific parts and utilizing existing parts across different species is extremely laborious and expensive

which restricts the scope of synthetic biology to a small subset of the bacterial cosmos.


Parts road





Sci-Phi 29


In our project, we developed the Sci-Phi 29 tool that aims to expand the repertoire of bacterial species and broaden the range of substrates and environmental conditions which is currently used in synthetic biology.



Read More



How does Sci-Phi 29 works?





Orthogonal Replication











Predictable Expression











Cross Species










Explore the bacterial world



Read More
Fold Scope Event