Difference between revisions of "Team:TUDelft/Test"

 
(97 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 137: Line 57:
 
                 background-color:#000000;
 
                 background-color:#000000;
 
                 padding:10px;
 
                 padding:10px;
 +
                padding-bottom: 99999px;
 +
                margin-bottom: -99999px;
 
             }
 
             }
 
             .right{
 
             .right{
Line 145: Line 67:
 
                 padding:10px;
 
                 padding:10px;
 
                 background-color:#fbfbfb;
 
                 background-color:#fbfbfb;
 +
                padding-bottom: 99999px;
 +
                margin-bottom: -99999px;
 
             }
 
             }
 
             .left3{
 
             .left3{
Line 153: Line 77:
 
                 justify-content: center;
 
                 justify-content: center;
 
                 background-color:#e1e1e1;
 
                 background-color:#e1e1e1;
 +
                padding-bottom: 99999px;
 +
                margin-bottom: -99999px;
 
             }
 
             }
 
             .right3{
 
             .right3{
Line 160: Line 86:
 
                 background-color:#d4d4d4;
 
                 background-color:#d4d4d4;
 
                 justify-content: center;
 
                 justify-content: center;
 +
                padding-bottom: 99999px;
 +
                margin-bottom: -99999px;
 
             }
 
             }
  
Line 170: Line 98:
 
                 padding-right: 40px;
 
                 padding-right: 40px;
 
                 background-color:#fbfbfb;
 
                 background-color:#fbfbfb;
 +
                padding-bottom: 99999px;
 +
                margin-bottom: -99999px;
 
             }
 
             }
 
             .right2{
 
             .right2{
Line 179: Line 109:
 
                 background-color:#000000;
 
                 background-color:#000000;
 
                 padding:10px;
 
                 padding:10px;
 +
                padding-bottom: 99999px;
 +
                margin-bottom: -99999px;
 
             }
 
             }
 +
            .row{
 +
            overflow: hidden;
 +
            }
 
             .row:after {
 
             .row:after {
 
                 content: "";
 
                 content: "";
Line 191: Line 126:
  
 
             }
 
             }
−
             .hero-text {
+
             .hero-home {
 
                 text-align: center;
 
                 text-align: center;
 
                 position: absolute;
 
                 position: absolute;
Line 204: 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 223: Line 158:
 
                 border-style: solid;
 
                 border-style: solid;
 
                 border-width:medium;
 
                 border-width:medium;
−
                 color: #0072b2 !important;
+
                 color: #0072b2;!important;
 
                 padding: 0.5%;
 
                 padding: 0.5%;
 
                 text-align: center;
 
                 text-align: center;
Line 230: Line 165:
 
                 cursor: pointer;
 
                 cursor: pointer;
 
                 border-radius: 8px;
 
                 border-radius: 8px;
 +
                margin-left:auto;
 +
                margin-right:auto;
  
 
             }
 
             }
Line 236: Line 173:
 
                 opacity: 0.75;  
 
                 opacity: 0.75;  
 
                 text-decoration:none;
 
                 text-decoration:none;
−
                 color:#fff !important;
+
                 color:#ffffff!important;
 
             }
 
             }
  
 +
            .buttontu3 {
  
 +
                border-color: #ffffff;
 +
                border-style: solid;
 +
                border-width:medium;
 +
                color: #ffffff!important;
 +
                padding: 0.5%;
 +
                text-align: center;
 +
                text-decoration: none;
 +
                display: inline-block;
 +
                cursor: pointer;
 +
                border-radius: 8px;
 +
                margin-left:auto;
 +
                margin-right:auto;
 +
 +
            }
 +
            .buttontu3:hover {
 +
                background-color: #ffffff;
 +
                opacity: 0.75;
 +
                text-decoration:none;
 +
                color:#000000!important;
 +
            }
 
             .centerjustify2 {
 
             .centerjustify2 {
 
                 margin-left: auto;
 
                 margin-left: auto;
Line 251: Line 209:
 
                 margin-left: auto;
 
                 margin-left: auto;
 
                 margin-right: auto;
 
                 margin-right: auto;
−
                 width: 60%;
+
                 width: 30%;
 
                 margin-top: 60px;
 
                 margin-top: 60px;
 
                 margin-bottom: 60px;
 
                 margin-bottom: 60px;
 
                 text-align: justify;
 
                 text-align: justify;
 
             }
 
             }
−
 
+
            .hero-home {
 +
                text-align: center;
 +
                position: absolute;
 +
                top: 90%;
 +
                left: 50%;
 +
                transform: translate(-50%, -50%);
 +
                color: white;
 +
            }
 
             .mySlides {display: none}
 
             .mySlides {display: none}
 
             img {vertical-align: middle;}
 
             img {vertical-align: middle;}
Line 264: Line 229:
 
                 max-width: 100%;
 
                 max-width: 100%;
 
                 position: relative;
 
                 position: relative;
 +
                margin:auto;
 
             }
 
             }
  
Line 272: 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 361: Line 326:
 
                 font-size: 1.2rem;
 
                 font-size: 1.2rem;
 
             }
 
             }
−
 
+
            .banneroh10{
 +
            width:10%;
 +
            }
 +
            .banneroh40{
 +
            width:40%;
 +
            }
 +
            .banneroh18{
 +
            width:18%;
 +
            }
 
             @media screen and (max-width: 800px) {
 
             @media screen and (max-width: 800px) {
 
                 .row {
 
                 .row {
Line 373: Line 346:
 
                     padding:25px;
 
                     padding:25px;
 
                     background-color:#000000;
 
                     background-color:#000000;
 +
                    padding-bottom: 0px;
 +
                    margin-bottom: 0px;
 
                 }
 
                 }
 
                 .right {
 
                 .right {
Line 380: Line 355:
 
                     padding:25px;
 
                     padding:25px;
 
                     background-color:#fbfbfb;
 
                     background-color:#fbfbfb;
 +
                    padding-bottom: 0px;
 +
                    margin-bottom: 0px;
 
                 }   
 
                 }   
 
                 .left3{
 
                 .left3{
Line 387: Line 364:
 
                     padding:25px;
 
                     padding:25px;
 
                     background-color:#e1e1e1;
 
                     background-color:#e1e1e1;
 +
                    padding-bottom: 0px;
 +
                    margin-bottom: 0px;
 
                 }
 
                 }
 
                 .right3 {
 
                 .right3 {
Line 394: Line 373:
 
                     padding:25px;
 
                     padding:25px;
 
                     background-color:#eeeeee;
 
                     background-color:#eeeeee;
 +
                    padding-bottom: 0px;
 +
                    margin-bottom: 0px;
 
                 }   
 
                 }   
  
Line 403: Line 384:
 
                     padding:25px;
 
                     padding:25px;
 
                     background-color:#000000;
 
                     background-color:#000000;
 +
                    padding-bottom: 0px;
 +
                    margin-bottom: 0px;
 
                 }
 
                 }
 
                 .left2
 
                 .left2
Line 411: Line 394:
 
                     padding:25px;
 
                     padding:25px;
 
                     background-color:#fbfbfb;
 
                     background-color:#fbfbfb;
 +
                    padding-bottom: 0px;
 +
                    margin-bottom: 0px;
 
                 }  
 
                 }  
  
Line 416: Line 401:
 
                     display: block;
 
                     display: block;
 
                     margin:auto;
 
                     margin:auto;
−
                     width:40%;
+
                     width:100%;
 
                 }
 
                 }
 
                 .centerjustify2 {
 
                 .centerjustify2 {
Line 434: Line 419:
 
                     text-align: justify;
 
                     text-align: justify;
 
                 }
 
                 }
 +
            .banneroh10{
 +
            width:25%;
 +
            }
 +
            .banneroh40{
 +
            width:100%;
 +
            }
 +
            .banneroh18{
 +
            width:80%;
 +
            }
 +
.containerhome {
 +
                width: 100%;
 +
                height: auto;
 +
                margin: 0 auto 40px;
 +
 
             }
 
             }
 +
}
 +
#my_centered_buttons { display: flex; justify-content: center; }
  
 +
.centerfoto {
 +
  display: block;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  width: 85%;
 +
}
  
 +
@media screen and (max-width: 800px) {
 +
.centerfoto {
 +
  display: block;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  margin-top:10%;
 +
  margin-bottom:6%;
 +
  width: 85%;
 +
}
 +
}
 
         </style>
 
         </style>
  
Line 442: Line 459:
  
 
     <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>
+
<br>
−
                    <div class="back">
+
<br>
−
                        <img src="https://static.igem.org/mediawiki/2019/6/68/T--TUDelft--achterkant.jpg" alt="bacteria2" class="homepage">
+
<br>
−
                    </div>
+
<div class="mySlides fade">
−
                </div>
+
  <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/c/c8/T--TUDelft--HomeAfter.png" alt="slide 1" >
  
−
            </section>
+
</div>
−
        </div>
+
  
 +
<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 class="mySlides fade">
 +
 +
  <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/3/3b/T--TUDelft--HomeAfter8.png" alt="slide 3" >
 +
 +
</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 462: Line 534:
  
 
             <div class="centerjustify2">
 
             <div class="centerjustify2">
 +
<div id="ScrollDown1"></div>
 
                 <div class="rowhm">
 
                 <div class="rowhm">
  
Line 495: Line 568:
 
             <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';">
  
−
                 <div class="centerjustify2" style="text-align: center;">
+
                 <div class="centerjustify2" style="text-align:center;">
 
                     <br>
 
                     <br>
−
                     <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 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></div>
+
                         <p style="font-size:large;">which restricts the scope of synthetic biology to a small subset of the bacterial cosmos.</p>
 
                     <br>  
 
                     <br>  
−
                     <img src = "https://static.igem.org/mediawiki/2019/8/84/T--TUDelft--steps_parts.png" alt="Parts road" style="width:60%";>
+
                     <img class="banneroh" src = "https://static.igem.org/mediawiki/2019/8/84/T--TUDelft--steps_parts.png" alt="Parts road">
 
                 </div>  
 
                 </div>  
 
                 <br>
 
                 <br>
Line 513: Line 586:
 
                 <div class="left" style="text-align:center;">
 
                 <div class="left" style="text-align:center;">
 
                     <div class="centerjustify2">
 
                     <div class="centerjustify2">
−
                         <p></p>
+
                         <p>hm</p>
 
                         <br>
 
                         <br>
  
Line 520: Line 593:
 
                         <br>
 
                         <br>
 
                         <br>  
 
                         <br>  
−
                         <p></p>
+
                         <p>hm</p>
  
 
                     </div>  
 
                     </div>  
Line 530: Line 603:
 
                     <div class="right">
 
                     <div class="right">
 
                         <div class="centerjustify2">
 
                         <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 platform</b> that aims to expand the repertoire of bacterial species and broaden the range of substrates and environmental conditions which is currently applied in synthetic biology.</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 557: Line 630:
 
             <div style="text-align:center; background-color:#fbfbfb;" >
 
             <div style="text-align:center; background-color:#fbfbfb;" >
 
                 <br>  
 
                 <br>  
−
                 <img src = "https://static.igem.org/mediawiki/2019/1/1c/T--TUDelft--Bacteria_home.png" alt="Different Bacteria" style="width:40%";>
+
                 <img class="banneroh40" src = "https://static.igem.org/mediawiki/2019/1/1c/T--TUDelft--Bacteria_home.png" alt="Different Bacteria" >
 
             </div>
 
             </div>
 
         </div>
 
         </div>
Line 563: Line 636:
 
         <div data-aos="fade-up" data-aos-duration="3000">
 
         <div data-aos="fade-up" data-aos-duration="3000">
 
             <div style="text-align:center; background-color:#fbfbfb;" >
 
             <div style="text-align:center; background-color:#fbfbfb;" >
−
                 <img src = "https://static.igem.org/mediawiki/2019/d/de/T--TUDelft--ArrowPattern.png" alt="Arrow" style="width:7%";>
+
                 <img class="banneroh10" src = "https://static.igem.org/mediawiki/2019/d/de/T--TUDelft--ArrowPattern.png" alt="Arrow">
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
         <div data-aos="fade-up" data-aos-duration="3000">
 
         <div data-aos="fade-up" data-aos-duration="3000">
−
             <div style="text-align:center; background-color:#fbfbfb;cursor: pointer;" onclick="window.location='https://2019.igem.org/Team:TUDelft/Description';">
+
             <div style="text-align:center; background-color:#fbfbfb;cursor: pointer;" onclick="window.location='https://2019.igem.org/Team:TUDelft/Design';">
−
                 <img src = "https://static.igem.org/mediawiki/2019/d/d3/T--TUDelft--Sci-PhiKit.png" alt="Different Bacteria" style="width:16%";>
+
                 <img class="banneroh18" src = "https://static.igem.org/mediawiki/2019/d/d3/T--TUDelft--Sci-PhiKit.png" alt="Different Bacteria">
 
                 <p><b style="font-size:xx-large;color:#0072b2;">Sci-Phi 29</b></p>  
 
                 <p><b style="font-size:xx-large;color:#0072b2;">Sci-Phi 29</b></p>  
  
−
                 <p style="width:60%;margin-left:auto; margin-right:auto;">is a standardized and user-friendly platform which allows expressing of your gene of interest in a controllable manner across different bacterial species and independently of the host.</p><br>
+
                 <p style="width:60%;margin-left:auto; margin-right:auto;font-size:x-large;"> A user-friendly platform that allows engineering your bacteria of choice through:</p><br>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
         <div data-aos="fade-up" data-aos-duration="3000">
 
         <div data-aos="fade-up" data-aos-duration="3000">
 
             <div style="text-align:center; background-color:#fbfbfb;" >
 
             <div style="text-align:center; background-color:#fbfbfb;" >
−
                 <img src = "https://static.igem.org/mediawiki/2019/9/9e/T--TUDelft--Arrowpatternsplit.png" alt="Arrow split" style="width:45%";>
+
                 <img class="banneroh" src = "https://static.igem.org/mediawiki/2019/9/9e/T--TUDelft--Arrowpatternsplit.png" alt="Arrow split">
 
                 <br>
 
                 <br>
 
                 <br>
 
                 <br>
Line 600: Line 673:
 
                         <br>
 
                         <br>
 
                         <center><a target="_blank" href="https://2019.igem.org/Team:TUDelft/Design" class="buttontu "><b>Read More</b></a></center>                       
 
                         <center><a target="_blank" href="https://2019.igem.org/Team:TUDelft/Design" class="buttontu "><b>Read More</b></a></center>                       
−
 
−
 
 
                     </div>  
 
                     </div>  
 
                 </div>   
 
                 </div>   
Line 611: Line 682:
 
                     <div class="centerjustify2">
 
                     <div class="centerjustify2">
 
                         <center><img src = "https://static.igem.org/mediawiki/2019/5/56/T--TUDelft--logocontrol.png" alt="Controllability" style="width:49.7%;"></center>
 
                         <center><img src = "https://static.igem.org/mediawiki/2019/5/56/T--TUDelft--logocontrol.png" alt="Controllability" style="width:49.7%;"></center>
−
                         <p style="font-size:large; line-height: 200%;"> To tackle the issue of <b style="font-size:x-large;color:#0072b2;">variation in expression</b> across species, we took our platform to the next level by integrating the concept of controllability, which is based on a <b style="font-size:x-large;color:#0072b2;">systems engineering</b> approach. </p>
+
                         <p style="font-size:large; line-height: 200%;"> To tackle the issue of <b style="font-size:x-large;color:#0072b2;">variation in expression</b> across bacterial species, we applied <b style="font-size:x-large;color:#0072b2;">control systems</b> thinking to achieve controllability. </p>
 
                         <br>
 
                         <br>
 
                         <p style="font-size:large; line-height: 200%;">We included the following variables in our <a href="https://2019.igem.org/Team:TUDelft/Model"><u style="font-size:x-large;color:#0072b2;">model</u></a> and <a href="https://2019.igem.org/Team:TUDelft/Results"><u style="font-size:x-large;color:#0072b2;">experiments</u></a>:</p>
 
                         <p style="font-size:large; line-height: 200%;">We included the following variables in our <a href="https://2019.igem.org/Team:TUDelft/Model"><u style="font-size:x-large;color:#0072b2;">model</u></a> and <a href="https://2019.igem.org/Team:TUDelft/Results"><u style="font-size:x-large;color:#0072b2;">experiments</u></a>:</p>
Line 620: Line 691:
 
                             <div class="boxx3 columnhm" >
 
                             <div class="boxx3 columnhm" >
  
−
                                 <img src = "https://static.igem.org/mediawiki/2019/3/33/T--TUDelft--logoplasmidcopynumber.png" alt="Logo Plasmid Copy Number" style="width:100%;">
+
                                 <a href="https://2019.igem.org/Team:TUDelft/Model#PlasmidCopyNumber"> <img src = "https://static.igem.org/mediawiki/2019/3/33/T--TUDelft--logoplasmidcopynumber.png" alt="Logo Plasmid Copy Number" style="width:100%;"></a>
 
                             </div>
 
                             </div>
  
Line 626: Line 697:
 
                             <div class="boxx3 columnhm" >
 
                             <div class="boxx3 columnhm" >
  
−
                                 <img src = "https://static.igem.org/mediawiki/2019/6/6f/T--TUDelft--logo_transcription2.png" alt="Logo Transcriptional Variations" style="width:100%;">
+
                                 <a href="https://2019.igem.org/Team:TUDelft/Model#TranscriptionalVariations"><img src = "https://static.igem.org/mediawiki/2019/6/6f/T--TUDelft--logo_transcription2.png" alt="Logo Transcriptional Variations" style="width:100%;"></a>
  
 
                             </div>
 
                             </div>
  
 
                             <div class="boxx3 columnhm">
 
                             <div class="boxx3 columnhm">
−
                                 <img src = "https://static.igem.org/mediawiki/2019/b/b4/T--TUDelft--logo_transcription.png" alt="Logo Translational Variations" style="width:100%;">
+
                                 <a href="https://2019.igem.org/Team:TUDelft/Model#TranslationalVariations"><img src = "https://static.igem.org/mediawiki/2019/b/b4/T--TUDelft--logo_transcription.png" alt="Logo Translational Variations" style="width:100%;"></a>
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
Line 645: Line 716:
 
             <div data-aos="fade-up" data-aos-duration="3000">
 
             <div data-aos="fade-up" data-aos-duration="3000">
 
                 <div style="text-align:center; background-color:#fbfbfb;cursor: pointer;" onclick="window.location='https://2019.igem.org/Team:TUDelft/Human_Practices';">
 
                 <div style="text-align:center; background-color:#fbfbfb;cursor: pointer;" onclick="window.location='https://2019.igem.org/Team:TUDelft/Human_Practices';">
 +
<div class="centerjustify2" style="text-align:center;">
 
                     <br>
 
                     <br>
 
                     <br>
 
                     <br>
−
                     <img src = "https://static.igem.org/mediawiki/2019/2/21/T--TUDelft--sci-phitogether.png" alt="Sci-Phi 29 applications" style="width:18%; align:center;">  
+
                     <img class="banneroh18" src = "https://static.igem.org/mediawiki/2019/2/21/T--TUDelft--sci-phitogether.png" alt="Sci-Phi 29 applications" style="align:center;">  
−
                     <p style="width:60%;margin-left:auto; margin-right:auto;text-align:justify;">To envision a future where our Sci-Phi 29 platform can be used to tackle a real world problem, we created a <b style="font-size:x-large;color:#0072b2;">hypothetical use-case scenario</b>. We theoretically applied Sci-Phi 29 to engineer <b style="font-size:x-large;color:#0072b2;"><i>P. putida</i></b> to be able to convert <b style="font-size:x-large;color:#0072b2;">microplastics</b> from waste water streams.</p>
+
                     <p style="font-size:large;">To envision a future where our Sci-Phi 29 platform can be used to tackle a real world problem, we created a <b style="font-size:x-large;color:#0072b2;">hypothetical use-case scenario</b>. We theoretically applied Sci-Phi 29 to engineer <b style="font-size:x-large;color:#0072b2;"><i>P. putida</i></b> to be able to convert <b style="font-size:x-large;color:#0072b2;">microplastics</b> from waste water streams.</p>
−
                     <br><br> <center style="font-size:x-large;"><i>Are you curiuos about the impact of our Sci-Phi 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 target="_blank" href="https://2019.igem.org/Team:TUDelft/Human_Practices" class="buttontu2"><b>Click Here</b></a></center>
 
                     <br>
 
                     <br>
−
 
+
</div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
            <br>
 
−
 
−
 
−
            <br>
 
  
 
             <div  data-aos="fade-up" data-aos-duration="3000">
 
             <div  data-aos="fade-up" data-aos-duration="3000">
−
                 <div style="background-color:#fbfbfb;" >
+
                 <div style="background-color:#e1e1e1;" >
 
                     <br>
 
                     <br>
−
                     <div style="text-align: center;"><p style=" font-size:xx-large;color:#0072b2;"> <b>Explore the microbial world with us! </b> </p>
+
                     <div class="centerjustify2" style="text-align:center;">
 +
<p style=" font-size:xx-large;color:#0072b2;"> <b>Explore the microbial world with us! </b> </p>
 
                         <br>
 
                         <br>
−
                         <p style="width:60%;margin-left:auto; margin-right:auto;text-align:justify;"> 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;">accessworld</b> to the invisible microbial .</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 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>
−
 
+
<br>
 
                         <center><a target="_blank" href="https://2019.igem.org/Team:TUDelft/Public_Engagement" class="buttontu2"><b>Read More</b></a></center>
 
                         <center><a target="_blank" href="https://2019.igem.org/Team:TUDelft/Public_Engagement" class="buttontu2"><b>Read More</b></a></center>
 
                     </div>
 
                     </div>
Line 728: Line 797:
 
                         <br>
 
                         <br>
 
                         <br>
 
                         <br>
−
                         <p style=" font-size:xx-large;text-align:center;"> <b>Find more about the different aspects of our project</b> </p>
+
                         <p style=" font-size:xx-large;text-align:center;"> <b>Find out more about other aspects of our project</b> </p>
 
                         <div class="centerjustify3">
 
                         <div class="centerjustify3">
 
                             <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/Demonstrate"><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/d/d3/T--TUDelft--Demonstrate_mini_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/Safety"><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/8/8e/T--TUDelft--Safety_mini_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/Collaborations"><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/b/bd/T--TUDelft--Collaborations_mini_logo.png" alt="Parts logo" style="width:100%;">  
 
                                     </div></a>
 
                                     </div></a>
  
−
                                 <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>
  
−
                            <br>
 
−
                            <br>
 
 
                         </div>
 
                         </div>
  
 
                     </div>  
 
                     </div>  
 
                 </div>
 
                 </div>
 +
               
 +
               
 +
               
 +
                                            <p  style="font-size:xx-large;color:#0072b2;text-align: center;"><a href="https://2019.igem.org/Team:TUDelft/Team" ><b>Click here</b></a> to meet our team!</p>
 +
<br>
 +
                    <div>
 +
                                    <img src = "https://static.igem.org/mediawiki/2019/2/23/T--TUDelft--Team2.png" alt="Team Picture" style="width:100%;">
 +
 +
                    </div>
 +
             
 
             </div>
 
             </div>
  
 
    
 
    
  
 +
        <br>
 
         <br>
 
         <br>
  
 +
        <script>
  
 +
            AOS.init();
  
  
 +
var slideIndex = 1;
 +
var timer = null;
 +
showSlides(slideIndex);
  
 +
function plusSlides(n) {
 +
  clearTimeout(timer);
 +
  showSlides(slideIndex += n);
 +
}
  
−
        <br>
+
function currentSlide(n) {
−
        <br>
+
  clearTimeout(timer);
−
        <br>
+
  showSlides(slideIndex = n);
−
        <br>
+
}
−
 
+
−
        <script>
+
−
 
+
−
            AOS.init();
+
  
 +
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 828: Line 922:
  
 
             })
 
             })
 +
 
         </script>
 
         </script>
  

Latest revision as of 06:41, 6 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



hm


Sci-Phi 29

hm

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 this year was to introduce the general public, from children to your neighbor to your teacher, to the hidden world of microbes. 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