Difference between revisions of "Team:TUDelft/Example5"

Line 86: Line 86:
  
 
             }
 
             }
−
.hero-text {
+
            .hero-text {
−
  text-align: center;
+
                text-align: center;
−
  position: absolute;
+
                position: absolute;
−
  top: 90%;
+
                top: 90%;
−
  left: 50%;
+
                left: 50%;
−
  transform: translate(-50%, -50%);
+
                transform: translate(-50%, -50%);
−
  color: white;
+
                color: white;
−
}
+
            }
 
             .buttontu {
 
             .buttontu {
  
Line 146: Line 146:
 
                 text-align: justify;
 
                 text-align: justify;
 
             }
 
             }
−
.mySlides {display: none}
+
            .mySlides {display: none}
−
img {vertical-align: middle;}
+
            img {vertical-align: middle;}
  
−
/* Slideshow container */
+
            /* Slideshow container */
−
.slideshow-container {
+
            .slideshow-container {
−
  max-width: 100%;
+
                max-width: 100%;
−
  position: relative;
+
                position: relative;
−
  margin: auto;
+
                margin: auto;
−
}
+
            }
  
  
−
/* The dots/bullets/indicators */
+
            /* The dots/bullets/indicators */
−
.dot {
+
            .dot {
−
  cursor: pointer;
+
                cursor: pointer;
−
  height: 20px;
+
                height: 20px;
−
  width: 20px;
+
                width: 20px;
−
  margin: 0 2px;
+
                margin: 0 2px;
−
  background-color: #bbb;
+
                background-color: #bbb;
−
  border-radius: 50%;
+
                border-radius: 50%;
−
  display: inline-block;
+
                display: inline-block;
−
  transition: background-color 0.6s ease;
+
                transition: background-color 0.6s ease;
−
 
+
−
 
+
−
}
+
  
−
.active, .dot:hover {
 
−
  background-color: #717171;
 
−
}
 
  
−
/* Fading animation */
+
            }
−
.fade {
+
−
  -webkit-animation-name: fade;
+
−
  -webkit-animation-duration: 3s;
+
−
  animation-name: fade;
+
−
  animation-duration: 3s;
+
−
}
+
  
−
@-webkit-keyframes fade {
+
            .active, .dot:hover {
−
  from{opacity: 0}
+
                background-color: #717171;
−
  to {opacity: 1}
+
            }
−
 
+
−
}
+
  
−
@keyframes fade {
+
            /* Fading animation */
−
  from{opacity: 0}
+
            .fade {
−
  to {opacity: 1}
+
                -webkit-animation-name: fade;
−
}
+
                -webkit-animation-duration: 3s;
 +
                animation-name: fade;
 +
                animation-duration: 3s;
 +
            }
  
−
/* On smaller screens, decrease text size */
+
            @-webkit-keyframes fade {
−
@media only screen and (max-width: 300px) {
+
                from{opacity: 0}
−
  .prev, .next,.text {font-size: 11px}
+
                to {opacity: 1}
−
}
+
 
 +
            }
 +
 
 +
            @keyframes fade {
 +
                from{opacity: 0}
 +
                to {opacity: 1}
 +
            }
 +
 
 +
            /* On smaller screens, decrease text size */
 +
            @media only screen and (max-width: 300px) {
 +
                .prev, .next,.text {font-size: 11px}
 +
            }
  
  
Line 252: Line 252:
  
  
−
                      <div class=" ">
+
        <div class=" ">
  
 
             <video autoplay muted width="100%">
 
             <video autoplay muted width="100%">
−
              <source type="video/mp4" src="https://static.igem.org/mediawiki/2019/3/3f/T--TUDelft--homevideo.mp4">
+
                <source type="video/mp4" src="https://static.igem.org/mediawiki/2019/3/3f/T--TUDelft--homevideo.mp4">
−
          </video>
+
            </video>
−
<div class="hero-text">  
+
            <div class="hero-text">  
−
<a href="#ScrollDown1" class="buttontu2 jump"><p style="font-size:xx-large; "> <b> <i class='fas fa-angle-double-down'></i></b></p></a>
+
                <a href="#ScrollDown1" class="buttontu2 jump"><p style="font-size:xx-large; "> <b> <i class='fas fa-angle-double-down'></i></b></p></a>
−
</div>
+
            </div>
 
         </div>
 
         </div>
  
Line 265: Line 265:
  
  
−
    <div id="ScrollDown1"></div>
+
        <div id="ScrollDown1"></div>
−
    <br>   
+
        <br>   
−
    <div style="background-color:#fbfbfb;">
+
        <div style="background-color:#fbfbfb;">
−
        <br>
+
            <br>
−
        <br>
+
            <br>
−
        <br>
+
            <br>
  
−
        <div class="centerjustify2">
+
            <div class="centerjustify2">
−
            <div class="rowhm">
+
                <div class="rowhm">
  
−
                <a href="https://2019.igem.org/Team:TUDelft/Description"><div class="boxx columnhm">
+
                    <a href="https://2019.igem.org/Team:TUDelft/Description"><div class="boxx columnhm">
−
                    <img src = "https://static.igem.org/mediawiki/2019/9/96/T--TUDelft--mini_project_logo.png" alt="Project logo" style="width:100%";>  
+
                        <img src = "https://static.igem.org/mediawiki/2019/9/96/T--TUDelft--mini_project_logo.png" alt="Project logo" style="width:100%";>  
−
                </div></a>
+
                        </div></a>
  
−
                <a href="https://2019.igem.org/Team:TUDelft/Results"><div class="boxx columnhm">
+
                    <a href="https://2019.igem.org/Team:TUDelft/Results"><div class="boxx columnhm">
−
                    <img src = "https://static.igem.org/mediawiki/2019/f/f5/T--TUDelft--Minilogoresults_logo.png" alt="Results logo" style="width:100%";>  
+
                        <img src = "https://static.igem.org/mediawiki/2019/f/f5/T--TUDelft--Minilogoresults_logo.png" alt="Results logo" style="width:100%";>  
−
                </div></a>
+
                        </div></a>
  
−
                <a href="https://2019.igem.org/Team:TUDelft/Parts"><div class="boxx columnhm">
+
                    <a href="https://2019.igem.org/Team:TUDelft/Parts"><div class="boxx columnhm">
−
                    <img src = "https://static.igem.org/mediawiki/2019/8/88/T--TUDelft--Minilogoparts_logo.png" alt="Parts logo" style="width:100%";>  
+
                        <img src = "https://static.igem.org/mediawiki/2019/8/88/T--TUDelft--Minilogoparts_logo.png" alt="Parts logo" style="width:100%";>
 +
                        </div>
 +
 
 +
                        <a href="https://2019.igem.org/Team:TUDelft/Model"><div class="boxx columnhm">
 +
                            <img src = "https://static.igem.org/mediawiki/2019/2/2b/T--TUDelft--mini_model_logo.png" alt="Model logo" style="width:100%";>
 +
                            </div></a>
 +
 
 +
                        <a href="https://2019.igem.org/Team:TUDelft/Human_Practices"><div class="boxx columnhm">
 +
                            <img src = "https://static.igem.org/mediawiki/2019/5/53/T--TUDelft--HP_mini_logo.png" alt="Human Pratices logo" style="width:100%";>
 +
                            </div></a>
 +
               
 +
                </div>
 
                 </div>
 
                 </div>
  
−
                 <a href="https://2019.igem.org/Team:TUDelft/Model"><div class="boxx columnhm">
+
                 <br>
−
                    <img src = "https://static.igem.org/mediawiki/2019/2/2b/T--TUDelft--mini_model_logo.png" alt="Model logo" style="width:100%";>  
+
                 <br>
−
                 </div></a>
+
                 <br>
−
 
+
                 <br>
−
                 <a href="https://2019.igem.org/Team:TUDelft/Human_Practices"><div class="boxx columnhm">
+
−
                    <img src = "https://static.igem.org/mediawiki/2019/5/53/T--TUDelft--HP_mini_logo.png" alt="Human Pratices logo" style="width:100%";>  
+
−
                 </div></a>
+
 
             </div>
 
             </div>
−
        </div>
 
  
−
        <br>
+
            <br>
−
        <br>
+
−
        <br>
+
−
        <br>
+
−
    </div>
+
  
−
    <br>
+
            <div style="background-color:#fbfbfb;cursor: pointer;" onclick="window.location='https://2019.igem.org/Team:TUDelft/Description';">
  
−
    <div style="background-color:#fbfbfb;cursor: pointer;" onclick="window.location='https://2019.igem.org/Team:TUDelft/Description';">
+
                <br>
 +
                <div class="centerjustify2" style="text-align: center;">
  
−
        <br>
+
                    <div data-aos="fade-up" data-aos-duration="3000">
−
        <div class="centerjustify2" style="text-align: center;">
+
  
−
            <div data-aos="fade-up" data-aos-duration="3000">
+
                        <div class="centerjustify2" style="text-align: center;"><p style=" font-size:xx-large;"> <b> Engineering organism specific parts and utilizing existing parts across different species is extremely laborious and expensive </b> </p>
 +
                            <p>which restricts the scope of synthetic biology to a small subset of the bacterial cosmos.</p></div>
 +
                        <br>
 +
                        <img src = "https://static.igem.org/mediawiki/2019/8/84/T--TUDelft--steps_parts.png" alt="Parts road" style="width:60%";>
 +
                    </div>
 +
                </div>
 +
                <br>
 +
                <br>
 +
            </div>
  
−
                <div class="centerjustify2" style="text-align: center;"><p style=" font-size:xx-large;"> <b> Engineering organism specific parts and utilizing existing parts across different species is extremely laborious and expensive </b> </p>
+
             <br>
−
                <p>which restricts the scope of synthetic biology to a small subset of the bacterial cosmos.</p></div>
+
−
                <br>
+
−
                <img src = "https://static.igem.org/mediawiki/2019/8/84/T--TUDelft--steps_parts.png" alt="Parts road" style="width:60%";>
+
−
             </div>
+
−
        </div>
+
−
        <br>
+
−
        <br>
+
−
    </div>
+
  
−
    <br>
 
  
 +
            <div class="row">
 +
                <div data-aos="fade-up" data-aos-duration="3000">
  
−
        <div class="row">
+
                    <div class="left" style="text-align:center;">
−
            <div data-aos="fade-up" data-aos-duration="3000">
+
                        <div class="centerjustify2">
 +
                            <br>
 +
                            <br>
  
−
                <div class="left" style="text-align:center;">
+
                            <img src = "https://static.igem.org/mediawiki/2019/e/e7/T--TUDELFT--logonavbar-white.png" alt="Sci-Phi 29" style="width:100%";>  
−
                    <div class="centerjustify2">
+
−
                        <br>
+
−
<br>
+
  
−
                        <img src = "https://static.igem.org/mediawiki/2019/e/e7/T--TUDELFT--logonavbar-white.png" alt="Sci-Phi 29" style="width:100%";>
+
                            <br>
−
                       
+
                            <br>  
−
<br>
+
                            <br>
−
<br>  
+
 
−
                        <br>
+
                        </div>  
−
+
                    </div>   
−
                    </div>  
+
−
                </div>   
+
−
            </div>
+
−
            <div  data-aos="fade-up" data-aos-duration="3000">
+
−
<div style="cursor: pointer;" onclick="window.location='https://2019.igem.org/Team:TUDelft/Description';">             
+
−
<div class="right">
+
−
                    <div class="centerjustify2">
+
−
                        <p style="font-size:large; line-height: 200%;"> In our project, we developed the <b style="font-size:xx-large;color:#0072b2;">Sci-Phi 29 tool</b> 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.</p>
+
−
                        <br>
+
−
                        <br>
+
−
                        <a target="_blank" href="https://2019.igem.org/Team:TUDelft/Description" class="buttontu "><b>Read More</b></a>                     
+
−
                    </div>       
+
 
                 </div>
 
                 </div>
 +
                <div  data-aos="fade-up" data-aos-duration="3000">
 +
                    <div style="cursor: pointer;" onclick="window.location='https://2019.igem.org/Team:TUDelft/Description';">             
 +
                        <div class="right">
 +
                            <div class="centerjustify2">
 +
                                <p style="font-size:large; line-height: 200%;"> In our project, we developed the <b style="font-size:xx-large;color:#0072b2;">Sci-Phi 29 tool</b> 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.</p>
 +
                                <br>
 +
                                <br>
 +
                                <a target="_blank" href="https://2019.igem.org/Team:TUDelft/Description" class="buttontu "><b>Read More</b></a>                     
 +
                            </div>       
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
                <br>
 
             </div>
 
             </div>
−
        </div>
 
−
        <br>
 
−
    </div>
 
  
−
    <br>
+
            <br>
  
−
        <div style="background-color:#fbfbfb;cursor: pointer;" onclick="window.location='https://2019.igem.org/Team:TUDelft/Design';">
+
            <div style="background-color:#fbfbfb;cursor: pointer;" onclick="window.location='https://2019.igem.org/Team:TUDelft/Design';">
  
−
        <br>
+
                <br>
−
        <div class="centerjustify2" style="text-align: center;">
+
                <div class="centerjustify2" style="text-align: center;">
  
−
            <div  data-aos="fade-up" data-aos-duration="3000">
+
                    <div  data-aos="fade-up" data-aos-duration="3000">
  
−
                <center style="font-size:xx-large;"> <b> How does Sci-Phi 29 works? </b> </center>
+
                        <center style="font-size:xx-large;"> <b> How does Sci-Phi 29 works? </b> </center>
−
                                  <div class="centerjustify3">
+
                        <div class="centerjustify3">
−
                                                              <div class="rowhm">
+
                            <div class="rowhm">
  
−
                                                                                <div class="boxx3 columnhm" style="background-color:#0072b2;">
+
                                <div class="boxx3 columnhm" style="background-color:#0072b2;">
  
−
                                                                                                                                            <br>
+
                                    <br>
−
                                                                                                                                            <br>
+
                                    <br>
−
                                                                                                                                            <br>
+
                                    <br>
−
                                                                                                                                            <br>
+
                                    <br>
−
                                                                                                                                            <br>
+
                                    <br>
−
                                                                                                                                            <p style="color:#ffffff;text-align:center; font-size:large;">Orthogonal Replication</p>
+
                                    <p style="color:#ffffff;text-align:center; font-size:large;">Orthogonal Replication</p>
−
<br>
+
                                    <br>
−
<br>
+
                                    <br>
−
<br>
+
                                    <br>
−
<br>
+
                                    <br>
−
<br>
+
                                    <br>
  
−
</div>
+
                                </div>
  
  
−
<div class="boxx3 columnhm" style="background-color:#009e73;">
+
                                <div class="boxx3 columnhm" style="background-color:#009e73;">
  
−
                                                            <br>
+
                                    <br>
−
                                                            <br>
+
                                    <br>
−
                                                            <br>
+
                                    <br>
−
                                                            <br>
+
                                    <br>
−
                                                            <br>
+
                                    <br>
−
                                                            <p style="color:#ffffff;text-align:center; font-size:large;">Predictable Expression</p>
+
                                    <p style="color:#ffffff;text-align:center; font-size:large;">Predictable Expression</p>
−
                                                                                                                        <br>
+
                                    <br>
−
                                                                                                                        <br>
+
                                    <br>
−
                                                                                                                        <br>
+
                                    <br>
−
                                                                                                                        <br>
+
                                    <br>
−
                                                                                                                        <br>
+
                                    <br>
  
−
                                                                                                                        </div>
+
                                </div>
  
−
                                                                                                                        <div class="boxx3 columnhm" style="background-color:#d55e00;">
+
                                <div class="boxx3 columnhm" style="background-color:#d55e00;">
  
−
<br>
+
                                    <br>
−
<br>
+
                                    <br>
−
<br>
+
                                    <br>
−
<br>
+
                                    <br>
−
<br>
+
                                    <br>
−
<p style="color:#ffffff;text-align:center; font-size:large;">Cross Species</p>
+
                                    <p style="color:#ffffff;text-align:center; font-size:large;">Cross Species</p>
−
                                                            <br>
+
                                    <br>
−
                                                            <br>
+
                                    <br>
−
                                                            <br>
+
                                    <br>
−
                                                            <br>
+
                                    <br>
−
                                                            <br>
+
                                    <br>
−
                                                            </div>
+
                                </div>
−
</div>
+
                            </div>
−
                                                            </div>
+
                        </div>
−
            </div>  
+
                    </div>  
−
        </div>
+
                </div>
−
        <br>
+
                <br>
−
        <br>
+
                <br>
  
−
    </div>
+
            </div>
  
−
    <br>
+
            <br>
  
−
 
−
        <div class="row">
 
−
<div  data-aos="fade-up" data-aos-duration="3000">
 
−
<div style="cursor: pointer;" onclick="window.location='https://2019.igem.org/Team:TUDelft/Human_Practices';">             
 
−
<div class="left2">
 
−
                    <div class="centerjustify2">
 
−
                        <br>
 
−
                        <p style="font-size:x-large; line-height: 200%;"> Explore the bacterial world</p>
 
−
                        <br>
 
−
                        <br>
 
−
                        <a href="https://2019.igem.org/Team:TUDelft/Human_Practices" class="buttontu ">Read More</a>
 
−
                    </div>   
 
−
                </div> 
 
−
            </div>
 
  
 +
            <div class="row">
 +
                <div  data-aos="fade-up" data-aos-duration="3000">
 +
                    <div style="cursor: pointer;" onclick="window.location='https://2019.igem.org/Team:TUDelft/Human_Practices';">             
 +
                        <div class="left2">
 +
                            <div class="centerjustify2">
 +
                                <br>
 +
                                <p style="font-size:x-large; line-height: 200%;"> Explore the bacterial world</p>
 +
                                <br>
 +
                                <br>
 +
                                <a href="https://2019.igem.org/Team:TUDelft/Human_Practices" class="buttontu ">Read More</a>
 +
                            </div>   
 +
                        </div> 
 +
                    </div>
  
−
            <div class="right2">
 
−
                    <div class="centerjustify2">
 
−
                    <div class="slideshow-container" style="text-align:center">
 
  
−
  <img class="mySlides fade" style="border-radius:10px; width:100%;" src = "https://static.igem.org/mediawiki/2019/9/9b/T--TUDelft--fold3.png" alt="Fold Scope Event" >
+
                    <div class="right2">
 +
                        <div class="centerjustify2">
 +
                            <div class="slideshow-container" style="text-align:center">
  
 +
                                <img class="mySlides fade" style="border-radius:10px; width:100%;" src = "https://static.igem.org/mediawiki/2019/9/9b/T--TUDelft--fold3.png" alt="Fold Scope Event" >
  
−
  <img class="mySlides fade" style="border-radius:10px; width:100%;"  src = "https://static.igem.org/mediawiki/2019/d/d6/T--TUDelft--fold2.png" >
+
                                <img class="mySlides fade" style="border-radius:10px; width:100%;"  src = "https://static.igem.org/mediawiki/2019/d/d6/T--TUDelft--fold2.png" >
  
 +
                                <img class="mySlides fade" style="border-radius:10px; width:100%;" src = "https://static.igem.org/mediawiki/2019/1/1d/T--TUDelft--fold1.png">
  
−
  <img class="mySlides fade" style="border-radius:10px; width:100%;" src = "https://static.igem.org/mediawiki/2019/1/1d/T--TUDelft--fold1.png">
+
                                <img class="mySlides fade" style="border-radius:10px; width:100%;" src = "https://static.igem.org/mediawiki/2019/c/c6/T--TUDelft--fold4.png">
  
−
  <img class="mySlides fade" style="border-radius:10px; width:100%;" src = "https://static.igem.org/mediawiki/2019/c/c6/T--TUDelft--fold4.png">
+
                                <span class="dot" onclick="currentSlide(1)"></span>
 +
                                <span class="dot" onclick="currentSlide(2)"></span>
 +
                                <span class="dot" onclick="currentSlide(3)"></span>
 +
                                <span class="dot" onclick="currentSlide(4)"></span>
 +
                            </div> 
 +
                        </div>
  
−
  <span class="dot" onclick="currentSlide(1)"></span>
+
                    </div>                             
−
  <span class="dot" onclick="currentSlide(2)"></span>
+
−
  <span class="dot" onclick="currentSlide(3)"></span>
+
−
  <span class="dot" onclick="currentSlide(4)"></span>
+
−
</div> 
+
−
</div>
+
−
                               
+
−
</div>                             
+
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
                                           
 
−
    </div>
 
  
−
<br>
+
        </div>
−
<br>
+
−
<br>
+
−
<br>
+
−
       
+
−
<script>
+
−
var slideIndex = 1;
+
−
var timer = null;
+
−
showSlides(slideIndex);
+
  
−
function plusSlides(n) {
+
        <br>
−
  clearTimeout(timer);
+
        <br>
−
  showSlides(slideIndex += n);
+
        <br>
−
}
+
        <br>
  
−
function currentSlide(n) {
+
        <script>
−
  clearTimeout(timer);
+
            var slideIndex = 1;
−
  showSlides(slideIndex = n);
+
            var timer = null;
−
}
+
            showSlides(slideIndex);
  
−
function showSlides(n) {
+
            function plusSlides(n) {
−
  var i;
+
                clearTimeout(timer);
−
  var slides = document.getElementsByClassName("mySlides");
+
                showSlides(slideIndex += n);
−
  var dots = document.getElementsByClassName("dot");
+
            }
−
  if (n==undefined){n = ++slideIndex}
+
 
−
  if (n > slides.length) {slideIndex = 1}
+
            function currentSlide(n) {
−
  if (n < 1) {slideIndex = slides.length}
+
                clearTimeout(timer);
−
  for (i = 0; i < slides.length; i++) {
+
                showSlides(slideIndex = n);
−
      slides[i].style.display = "none";
+
            }
−
  }
+
 
−
  for (i = 0; i < dots.length; i++) {
+
            function showSlides(n) {
−
      dots[i].className = dots[i].className.replace(" active", "");
+
                var i;
−
  }
+
                var slides = document.getElementsByClassName("mySlides");
−
  slides[slideIndex-1].style.display = "block";
+
                var dots = document.getElementsByClassName("dot");
−
  dots[slideIndex-1].className += " active";
+
                if (n==undefined){n = ++slideIndex}
−
  timer = setTimeout(showSlides, 4000);
+
                if (n > slides.length) {slideIndex = 1}
−
}  
+
                if (n < 1) {slideIndex = slides.length}
 +
                for (i = 0; i < slides.length; i++) {
 +
                    slides[i].style.display = "none";
 +
                }
 +
                for (i = 0; i < dots.length; i++) {
 +
                    dots[i].className = dots[i].className.replace(" active", "");
 +
                }
 +
                slides[slideIndex-1].style.display = "block";
 +
                dots[slideIndex-1].className += " active";
 +
                timer = setTimeout(showSlides, 4000);
 +
            }  
  
−
        AOS.init();
+
            AOS.init();
−
    </script>
+
        </script>
  
 
     </body>
 
     </body>

Revision as of 23:43, 13 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