Difference between revisions of "Team:TUDelft"

 
(17 intermediate revisions by the same user not shown)
Line 10: Line 10:
 
         <style>
 
         <style>
  
−
            .containerhome {
 
−
                width: 100%;
 
−
                height:100%;
 
−
                margin: 0 auto 40px;
 
−
 
−
            }
 
−
 
−
            .cardhome {
 
−
                width: 100%;
 
−
                height: 100%;
 
−
                position: absolute;
 
−
                -webkit-transition: -webkit-transform 2s;
 
−
                -moz-transition: -moz-transform 2s;
 
−
                -o-transition: -o-transform 2s;
 
−
                transition: transform 2s;
 
−
                -webkit-transform-style: preserve-3d;
 
−
                -moz-transform-style: preserve-3d;
 
−
                -o-transform-style: preserve-3d;
 
−
                transform-style: preserve-3d;
 
−
                -webkit-transform-origin: right center;
 
−
                -moz-transform-origin: right center;
 
−
                -o-transform-origin: right center;
 
−
                transform-origin: right center;
 
−
            }
 
−
 
−
            .cardhome.flipped {
 
−
                -webkit-transform: translateX( -100%) rotateY( -180deg);
 
−
                -moz-transform: translateX( -100%) rotateY( -180deg);
 
−
                -o-transform: translateX( -100%) rotateY( -180deg);
 
−
                transform: translateX( -100%) rotateY( -180deg);
 
−
            }
 
−
 
−
            .cardhome div {
 
−
                height: 100%;
 
−
                width: 100%;
 
−
                color: black;
 
−
                text-align: center;
 
−
                font-weight: bold;
 
−
                position: absolute;
 
−
                -webkit-backface-visibility: hidden;
 
−
                -moz-backface-visibility: hidden;
 
−
                -o-backface-visibility: hidden;
 
−
                backface-visibility: hidden;
 
−
            }
 
−
 
−
            .cardhome .front {
 
−
                background: black;
 
−
                display: flex;
 
−
                justify-content: center;
 
−
                align-items: center;
 
−
            }
 
−
 
−
            .cardhome .front p {
 
−
                margin:auto;
 
−
            }
 
−
 
−
            .cardhome .back p {
 
−
                margin: auto;
 
−
            }
 
−
 
−
            .cardhome .back {
 
−
                background: black;
 
−
                -webkit-transform: rotateY( 180deg);
 
−
                -moz-transform: rotateY( 180deg);
 
−
                -o-transform: rotateY( 180deg);
 
−
                transform: rotateY( 180deg);
 
−
                display: flex;
 
−
                justify-content: center;
 
−
                align-items: center;
 
−
            }
 
−
            .homepage {
 
−
 
−
                height:100%;
 
−
                width:100%;
 
−
            }
 
 
             body{
 
             body{
 
                 background-color:#ffffff}
 
                 background-color:#ffffff}
−
            .as_hero{position:relative;background-size:cover;background-repeat:no-repeat;background-attachment:fixed;background-position:top;height:100vh}
 
−
 
−
            video{min-width:100%;max-width:none!important;min-height:100%;position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%)}
 
−
 
−
            .video-container{height:100%;width:100%;overflow:hidden;position:relative}
 
  
  
 
             .Banner{
 
             .Banner{
−
                background: linear-gradient( rgba(255, 255, 255,1), rgba(0, 0, 0,1));
+
              background: linear-gradient( rgba(188, 233, 246,1), rgba(251, 251, 251,1));
 
                 background-repeat: no-repeat;
 
                 background-repeat: no-repeat;
 
                 background-size:100% 100%;  
 
                 background-size:100% 100%;  
Line 219: Line 139:
 
                 border-style: solid;
 
                 border-style: solid;
 
                 border-width:medium;
 
                 border-width:medium;
−
                 color: #0072b2 !important;
+
                 color: #0072b2!important;
 
                 padding: 1%;
 
                 padding: 1%;
 
                 text-align: center;
 
                 text-align: center;
Line 235: Line 155:
 
             .buttontu2 {
 
             .buttontu2 {
  
−
                 border-color: #ffffff;
+
                 border-color: #0072b2;
 
                 border-style: solid;
 
                 border-style: solid;
 
                 border-width:medium;
 
                 border-width:medium;
−
                 color: #ffffff!important;
+
                 color: #0072b2;!important;
 
                 padding: 0.5%;
 
                 padding: 0.5%;
 
                 text-align: center;
 
                 text-align: center;
Line 250: Line 170:
 
             }
 
             }
 
             .buttontu2:hover {
 
             .buttontu2:hover {
−
                 background-color: #ffffff;
+
                 background-color: #0072b2;
 
                 opacity: 0.75;  
 
                 opacity: 0.75;  
 
                 text-decoration:none;
 
                 text-decoration:none;
−
                 color:#000000!important;
+
                 color:#ffffff!important;
 
             }
 
             }
  
Line 309: Line 229:
 
                 max-width: 100%;
 
                 max-width: 100%;
 
                 position: relative;
 
                 position: relative;
 +
                margin:auto;
 
             }
 
             }
  
Line 317: Line 238:
 
                 height: 20px;
 
                 height: 20px;
 
                 width: 20px;
 
                 width: 20px;
−
                 margin: 0 2px;
+
                 margin: 0.6%;
 +
                margin-top:1%;
 
                 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;
−
 
−
 
 
             }
 
             }
  
Line 514: Line 434:
  
 
             }
 
             }
−
.cardhome {
 
−
                width: 100%;
 
−
                height: auto;
 
 
}
 
}
−
.cardhome div {
 
−
                height: auto;
 
−
                width: 100%;
 
−
}}
 
 
#my_centered_buttons { display: flex; justify-content: center; }
 
#my_centered_buttons { display: flex; justify-content: center; }
  
 +
.centerfoto {
 +
  display: block;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  margin-top:4%;
 +
  width: 80%;
 +
}
 +
 +
@media screen and (max-width: 800px) {
 +
.centerfoto {
 +
  display: block;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  margin-top:18%;
 +
  margin-bottom:6%;
 +
  width: 85%;
 +
}
 +
}
 
         </style>
 
         </style>
  
Line 529: Line 460:
  
 
     <body>
 
     <body>
−
        <div class="as_hero">
+
        <div class="Banner">
−
            <section class="containerhome">
+
  
−
                <div class="cardhome">
+
            <div class="display-2 mb-0">  
−
                    <div class="front">
+
              <div class="slideshow-container">
−
                        <img src="https://static.igem.org/mediawiki/2019/a/a9/T--TUDelft--homepagefront.jpeg" alt="bacteria1" class="homepage">
+
<br>
−
                    </div>
+
<div class="mySlides fade">
−
                    <div class="back">
+
  <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/c/c8/T--TUDelft--HomeAfter.png" alt="slide 1" >
 +
 
 +
</div>
  
−
                        <img src="https://static.igem.org/mediawiki/2019/6/68/T--TUDelft--achterkant.jpg" alt="bacteria2" class="homepage">
+
<div class="mySlides fade">
 +
  <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/5/5b/T--TUDelft--HomeAfter5.png" alt="slide 2" >
  
 
</div>
 
</div>
−
<div class="hero-home" style="margin-top:90%">
 
  
−
<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 class="mySlides fade">
−
                    </div>
+
−
                </div>
+
  
−
            </section>
+
  <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/3/3b/T--TUDelft--HomeAfter8.png" alt="slide 3" >
−
        </div>
+
  
 +
</div>
 +
 +
 +
<div class="mySlides fade">
 +
 +
  <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/2/2e/T--TUDelft--HomeAfter4.png" alt="slide 4" >
 +
 +
</div>
 +
 +
<div class="mySlides fade">
 +
 +
  <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/e/e4/T--TUDelft--HomeAfter3.png" alt="slide 5" >
 +
 +
</div>
 +
 +
<div class="mySlides fade">
 +
 +
  <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/9/95/T--TUDelft--HomeAfter7.png" alt="slide 6" >
 +
 +
</div>
 +
 +
<div class="mySlides fade">
 +
 +
  <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/8/85/T--TUDelft--HomeAfter6.png" alt="slide 7" >
 +
 +
</div>
 +
 +
<div class="mySlides fade">
 +
 +
  <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/e/e3/T--TUDelft--HomeAfter2.png" alt="slide 8" >
 +
 +
</div>
 +
</div>
 +
 +
<div style="text-align:center">
 +
  <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>
 +
  <span class="dot" onclick="currentSlide(5)"></span>
 +
  <span class="dot" onclick="currentSlide(6)"></span>
 +
  <span class="dot" onclick="currentSlide(7)"></span>
 +
  <span class="dot" onclick="currentSlide(8)"></span>
 +
</div>
 +
 +
            </div>           
 +
        </div>       
 +
        </div>
  
 
         <div style="background-color:#fbfbfb;">
 
         <div style="background-color:#fbfbfb;">
Line 579: Line 556:
 
                 </div>
 
                 </div>
  
−
                <br>
 
−
                <br>
 
 
                 <br>
 
                 <br>
 
                 <br>
 
                 <br>
Line 591: Line 566:
 
                 <div class="centerjustify2" style="text-align:center;">
 
                 <div class="centerjustify2" style="text-align:center;">
 
                     <br>
 
                     <br>
−
                     <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 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 style="font-size:large;">which restricts the scope of synthetic biology to a small subset of the bacterial cosmos.</p>
 
                         <p style="font-size:large;">which restricts the scope of synthetic biology to a small subset of the bacterial cosmos.</p>
 
                     <br>  
 
                     <br>  
Line 599: Line 574:
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 +
        <br>
 
         <br>
 
         <br>
 
         <br>
 
         <br>
Line 607: Line 583:
 
                 <div class="left" style="text-align:center;">
 
                 <div class="left" style="text-align:center;">
 
                     <div class="centerjustify2">
 
                     <div class="centerjustify2">
−
                         <p>hm</p>
+
                         <p style="color:rgba(0,0,0,0);">.</p>
 
                         <br>
 
                         <br>
  
Line 614: Line 590:
 
                         <br>
 
                         <br>
 
                         <br>  
 
                         <br>  
−
                         <p>hm</p>
+
                         <p style="color:rgba(0,0,0,0);">.</p>
  
 
                     </div>  
 
                     </div>  
Line 624: Line 600:
 
                     <div class="right">
 
                     <div class="right">
 
                         <div class="centerjustify2">
 
                         <div class="centerjustify2">
−
                             <p style="font-size:large; line-height: 200%;"> We developed <b style="font-size:xx-large;color:#0072b2;">Sci-Phi 29</b>, A platform that expands the scope of synthetic biology by providing essential tools required to engineer a repertoire of bacterial species.</p>
+
                             <p style="font-size:large; line-height: 200%;"> We developed <b style="font-size:xx-large;color:#0072b2;">Sci-Phi 29</b>, a platform that expands the scope of synthetic biology by providing essential tools required to engineer a repertoire of bacterial species.</p>
 
                             <br>
 
                             <br>
 
                             <br>
 
                             <br>
Line 693: Line 669:
 
                         <center style="font-size:large;"><b>Find more about how we applied this unique system in our project!</b></center>
 
                         <center style="font-size:large;"><b>Find more about how we applied this unique system in our project!</b></center>
 
                         <br>
 
                         <br>
−
                         <center><a target="_blank" href="https://2019.igem.org/Team:TUDelft/Design" class="buttontu "><b>Read More</b></a></center>                       
+
                         <center><a href="https://2019.igem.org/Team:TUDelft/Design#orthorep" class="buttontu "><b>Read More</b></a></center>                       
 
                     </div>  
 
                     </div>  
 
                 </div>   
 
                 </div>   
Line 728: Line 704:
 
                         <br><br> <center style="font-size:large;"><b>Do you want to learn more about the details?</b></center>
 
                         <br><br> <center style="font-size:large;"><b>Do you want to learn more about the details?</b></center>
 
                         <br>
 
                         <br>
−
                         <center><a href="https://2019.igem.org/Team:TUDelft/Design" class="buttontu"><b>Click here</b></a></center>  
+
                         <center><a href="https://2019.igem.org/Team:TUDelft/Design#control" class="buttontu"><b>Click here</b></a></center>  
  
 
                     </div>         
 
                     </div>         
Line 744: Line 720:
 
                     <br><br> <center style="font-size:x-large;"><i>Are you curious about the impact of our Sci-Phi 29 platform?</i></center>
 
                     <br><br> <center style="font-size:x-large;"><i>Are you curious about the impact of our Sci-Phi 29 platform?</i></center>
 
                     <br>
 
                     <br>
−
                     <center><a target="_blank" href="https://2019.igem.org/Team:TUDelft/Human_Practices" class="buttontu2"><b>Click Here</b></a></center>
+
                     <center><a href="https://2019.igem.org/Team:TUDelft/Human_Practices" class="buttontu2"><b>Click Here</b></a></center>
 
                     <br>
 
                     <br>
 
</div>
 
</div>
Line 756: Line 732:
 
<p style=" font-size:xx-large;color:#0072b2;"> <b>Explore the microbial world with us! </b> </p>
 
<p style=" font-size:xx-large;color:#0072b2;"> <b>Explore the microbial world with us! </b> </p>
 
                         <br>
 
                         <br>
−
                         <p style="font-size:large;"> We as a team are <b style="font-size:x-large;color:#0072b2;">fascinated by this microbial diversity</b> and wanted to share our fascination with the rest of the world. That is why our goal this year was to introduce the general public, from children to your neighbor to your teacher, to the hidden world of microbes. We organized <b style="font-size:x-large;color:#0072b2;">multiple events</b> because we wanted to make sure that everyone has <b style="font-size:x-large;color:#0072b2;">access</b> to the invisible microbial world.</p>
+
                         <p style="font-size:large;"> We as a team are <b style="font-size:x-large;color:#0072b2;">fascinated by this microbial diversity</b> and wanted to share our fascination with the rest of the world. That is why our goal was to introduce the hidden world of microbes to the general public, from children to your neighbor to your teacher. We organized <b style="font-size:x-large;color:#0072b2;">multiple events</b> because we wanted to make sure that everyone has <b style="font-size:x-large;color:#0072b2;">access</b> to the invisible microbial world.</p>
 
<br>
 
<br>
−
                         <center><a target="_blank" href="https://2019.igem.org/Team:TUDelft/Public_Engagement" class="buttontu2"><b>Read More</b></a></center>
+
                         <center><a href="https://2019.igem.org/Team:TUDelft/Public_Engagement" class="buttontu2"><b>Read More</b></a></center>
 
                     </div>
 
                     </div>
 
                     <div class="hmcontainer">
 
                     <div class="hmcontainer">
Line 862: Line 838:
 
             AOS.init();
 
             AOS.init();
  
 +
 +
var slideIndex = 1;
 +
var timer = null;
 +
showSlides(slideIndex);
 +
 +
function plusSlides(n) {
 +
  clearTimeout(timer);
 +
  showSlides(slideIndex += n);
 +
}
 +
 +
function currentSlide(n) {
 +
  clearTimeout(timer);
 +
  showSlides(slideIndex = n);
 +
}
 +
 +
function showSlides(n) {
 +
  var i;
 +
  var slides = document.getElementsByClassName("mySlides");
 +
  var dots = document.getElementsByClassName("dot");
 +
  if (n==undefined){n = ++slideIndex}
 +
  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, 4500);
 +
}
  
 
             var $st = $('.pagination');
 
             var $st = $('.pagination');
Line 911: Line 919:
  
 
             })
 
             })
 +
 
         </script>
 
         </script>
  

Latest revision as of 04:43, 14 December 2019

Sci-Phi 29


Project logo
Results logo
Parts logo
Model logo
Human Pratices logo



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

.

We developed Sci-Phi 29, a platform that expands the scope of synthetic biology by providing essential tools required to engineer a repertoire of bacterial species.



Read More


How does Sci-Phi 29 work?



Different Bacteria
Arrow
Different Bacteria

Sci-Phi 29

A user-friendly platform that allows engineering your bacteria of choice through:


Arrow split

Orthogonality

To express genetic tools across multiple bacterial species, we were inspired by the replication machinery of the phi29 bacteriophage. Its unique protein-primed based replication greatly simplifies the design of replication systems. This system is able to replicate a linear piece of DNA by using only four proteins.



Orthogonal Replication System


Find more about how we applied this unique system in our project!

Read More
Controllability

To tackle the issue of variation in expression across bacterial species, we applied control systems thinking to achieve controllability.


We included the following variables in our model and experiments:



Logo Plasmid Copy Number
Logo Transcriptional Variations
Logo Translational Variations


Do you want to learn more about the details?

Click here


Sci-Phi 29 applications

To envision a future where our Sci-Phi 29 platform can be used to tackle a real world problem, we created a hypothetical use-case scenario. We theoretically applied Sci-Phi 29 to engineer P. putida to be able to convert microplastics from waste water streams.



Are you curious about the impact of our Sci-Phi 29 platform?

Click Here


Explore the microbial world with us!


We as a team are fascinated by this microbial diversity and wanted to share our fascination with the rest of the world. That is why our goal was to introduce the hidden world of microbes to the general public, from children to your neighbor to your teacher. We organized multiple events because we wanted to make sure that everyone has access to the invisible microbial world.


Read More
Fold Scope Event




Find out more about other aspects of our project

Project logo
Results logo
Parts logo

Click here to meet our team!


Team Picture