Difference between revisions of "Team:TUDelft"

 
(68 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{TUDelft}}
+
{{:Team:TUDelft/Load}}
 +
{{:Team:TUDelft/Head}}
 +
{{:Team:TUDelft/Header}}
 +
 
 
<html>
 
<html>
 +
    <head>
 +
        <link rel="stylesheet" href="https://2019.igem.org/Team:TUDelft/SlickCSS?action=raw&ctype=text/css">
 +
        <script src="https://2019.igem.org/Team:TUDelft/Slickjs2?action=raw&ctype=text/javascript" crossorigin="anonymous"></script>
 +
        <script src="https://2019.igem.org/Team:TUDelft/Slickjs1?action=raw&ctype=text/javascript" crossorigin="anonymous"></script>
 +
        <style>
  
 +
            body{
 +
                background-color:#ffffff}
  
  
 +
            .Banner{
 +
              background: linear-gradient( rgba(188, 233, 246,1), rgba(251, 251, 251,1));
 +
                background-repeat: no-repeat;
 +
                background-size:100% 100%;
 +
                width:100%;
  
−
<div class="column full_size" >
+
            } 
−
<h1> Welcome to iGEM 2019! </h1>
+
            .boxx {
−
<p>Your team has been approved and you are ready to start the iGEM season! </p>
+
                border: 1px solid #888888;
 +
                padding: 10px;
 +
                box-shadow: 2.5px 5px rgba(136, 136, 136,0.8);
  
 +
            }
 +
            .boxx3 {
 +
                padding: 10px;
 +
                box-shadow: 2.5px 5px rgba(136, 136, 136,0.8);
 +
                border-radius:0.4em;
 +
                background-color:#f3f3f3;
 +
            }
 +
            .boxx4 {
 +
                padding: 10px;
 +
                box-shadow: 2.5px 5px rgba(136, 136, 136,0.8);
 +
                border-radius:0.4em;
 +
                background-color:#d4d4d4;
 +
            }
  
−
<img src="https://placehold.it/1080x320">
+
            .rowhm{
−
+
                display:flex;}
 +
            /* Create three equal columns that sits next to each other */
 +
            .columnhm {
 +
                flex: 20%;
 +
                padding: 5px;
 +
                margin:0.5%;
 +
            }
  
−
</div>
+
            .left{
 +
                float: left;
 +
                box-sizing: border-box;
 +
                width: 50%;
 +
                display: flex;
 +
                justify-content: center;
 +
                background-color:#000000;
 +
                padding:10px;
 +
                padding-bottom: 99999px;
 +
                margin-bottom: -99999px;
 +
            }
 +
            .right{
 +
                float: left;
 +
                padding-right: 10%;
 +
                box-sizing: border-box;
 +
                width: 50%;
 +
                padding:10px;
 +
                background-color:#fbfbfb;
 +
                padding-bottom: 99999px;
 +
                margin-bottom: -99999px;
 +
            }
 +
            .left3{
 +
                float: left;
 +
                box-sizing: border-box;
 +
                width: 50%;
 +
                display: flex;
 +
                justify-content: center;
 +
                background-color:#e1e1e1;
 +
                padding-bottom: 99999px;
 +
                margin-bottom: -99999px;
 +
            }
 +
            .right3{
 +
                float: left;
 +
                box-sizing: border-box;
 +
                width: 50%;
 +
                background-color:#d4d4d4;
 +
                justify-content: center;
 +
                padding-bottom: 99999px;
 +
                margin-bottom: -99999px;
 +
            }
  
 +
            .left2{
 +
                float: left;
 +
                padding-right: 10%;
 +
                box-sizing: border-box;
 +
                width: 50%;
 +
                padding:10px;
 +
                padding-right: 40px;
 +
                background-color:#fbfbfb;
 +
                padding-bottom: 99999px;
 +
                margin-bottom: -99999px;
 +
            }
 +
            .right2{
 +
                float: left;
 +
                box-sizing: border-box;
 +
                width: 50%;
 +
                display: flex;
 +
                justify-content: center;
 +
                background-color:#000000;
 +
                padding:10px;
 +
                padding-bottom: 99999px;
 +
                margin-bottom: -99999px;
 +
            }
 +
            .row{
 +
            overflow: hidden;
 +
            }
 +
            .row:after {
 +
                content: "";
 +
                display: table;
 +
                clear: both;
 +
            }
 +
            .center2 {
 +
                display: block;
 +
                margin-left: auto;
 +
                margin-right: auto;
  
−
<div class="column full_size" >
+
            }
 +
            .hero-home {
 +
                text-align: center;
 +
                position: absolute;
 +
                top: 90%;
 +
                left: 50%;
 +
                transform: translate(-50%, -50%);
 +
                color: white;
 +
            }
 +
            .buttontu {
  
−
<h3>Before you start</h3>
+
                border-color: #0072b2;
−
<p> Please read the following pages:</p>
+
                border-style: solid;
−
<ul>
+
                border-width:medium;
−
<li> <a href="https://2019.igem.org/Competition">Competition Hub</a> </li>
+
                color: #0072b2!important;
−
<li> <a href="https://2019.igem.org/Competition/Deliverables/Wiki">Wiki Requirements page</a></li>
+
                padding: 1%;
−
<li> <a href="https://2019.igem.org/Resources/Template_Documentation">Template documentation</a></li>
+
                text-align: center;
−
</ul>
+
                text-decoration: none;
−
</div>
+
                display: inline-block;
 +
                cursor: pointer;
 +
                border-radius: 8px;
 +
            }
 +
            .buttontu:hover {
 +
                background-color: #0072b2;
 +
                opacity: 0.75;
 +
                text-decoration:none;
 +
                color:#fff !important;
 +
            }
 +
            .buttontu2 {
  
 +
                border-color: #0072b2;
 +
                border-style: solid;
 +
                border-width:medium;
 +
                color: #0072b2;!important;
 +
                padding: 0.5%;
 +
                text-align: center;
 +
                text-decoration: none;
 +
                display: inline-block;
 +
                cursor: pointer;
 +
                border-radius: 8px;
 +
                margin-left:auto;
 +
                margin-right:auto;
  
−
<div class="clear extra_space"></div>
+
            }
−
<div class="line_divider"></div>
+
            .buttontu2:hover {
−
<div class="clear extra_space"></div>
+
                background-color: #0072b2;
 +
                opacity: 0.75;
 +
                text-decoration:none;
 +
                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;
  
−
<div class="column full_size" >
+
            }
−
<h3> Styling your wiki </h3>
+
            .buttontu3:hover {
−
<p>You may style this page as you like or you can simply leave the style as it is. You can easily keep the styling and edit the content of these default wiki pages with your project information and completely fulfill the requirement to document your project.</p>
+
                background-color: #ffffff;
−
<p>While you may not win Best Wiki with this styling, your team is still eligible for all other awards. This default wiki meets the requirements, it improves navigability and ease of use for visitors, and you should not feel it is necessary to style beyond what has been provided.</p>
+
                opacity: 0.75;
 +
                text-decoration:none;
 +
                color:#000000!important;
 +
            }
 +
            .centerjustify2 {
 +
                margin-left: auto;
 +
                margin-right: auto;
 +
                width: 80%;
 +
                margin-top: 60px;
 +
                margin-bottom: 60px;
 +
                text-align: justify;
 +
            }
 +
            .centerjustify3 {
 +
                margin-left: auto;
 +
                margin-right: auto;
 +
                width: 30%;
 +
                margin-top: 60px;
 +
                margin-bottom: 60px;
 +
                text-align: justify;
 +
            }
 +
            .hero-home {
 +
                text-align: center;
 +
                position: absolute;
 +
                top: 90%;
 +
                left: 50%;
 +
                transform: translate(-50%, -50%);
 +
                color: white;
 +
            }
 +
            .mySlides {display: none}
 +
            img {vertical-align: middle;}
  
−
</div>
+
            /* Slideshow container */
 +
            .slideshow-container {
 +
                max-width: 100%;
 +
                position: relative;
 +
                margin:auto;
 +
            }
  
  
 +
            /* The dots/bullets/indicators */
 +
            .dot {
 +
                cursor: pointer;
 +
                height: 20px;
 +
                width: 20px;
 +
                margin: 0.6%;
 +
                margin-top:1%;
 +
                background-color: #bbb;
 +
                border-radius: 50%;
 +
                display: inline-block;
 +
                transition: background-color 0.6s ease;
 +
            }
  
 +
            .active, .dot:hover {
 +
                background-color: #717171;
 +
            }
  
−
<div class="clear extra_space"></div>
+
            /* Fading animation */
 +
            .fade {
 +
                -webkit-animation-name: fade;
 +
                -webkit-animation-duration: 3s;
 +
                animation-name: fade;
 +
                animation-duration: 3s;
 +
            }
 +
            .w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
 +
            @-webkit-keyframes fade {
 +
                from{opacity: 0}
 +
                to {opacity: 1}
  
 +
            }
  
 +
            @keyframes fade {
 +
                from{opacity: 0}
 +
                to {opacity: 1}
 +
            }
 +
            /*****************************************
 +
            *  --------------------------------------*
 +
            *  Vars                                  *
 +
            *  --------------------------------------*
 +
            *****************************************/
  
−
<div class="column third_size" >
+
            $bg: #34495e;
 +
            $white: #fff;
 +
            $raleway: 'Raleway', sans-serif;
  
−
<h3> Uploading pictures and files </h3>
+
            /*****************************************
−
<p> You must upload any pictures and files to the iGEM 2019 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name. </p>
+
            *  --------------------------------------*
 +
            *  General                              *
 +
            *  --------------------------------------*
 +
            *****************************************/
  
 +
            .hmcontainer {
 +
                padding: 50px;
 +
            }
  
−
<p>When you upload, set the "Destination Filename" to <b> T--YourOfficialTeamName--NameOfFile.jpg</b>. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)</p>
 
  
−
<div class="button_link">
+
            /*****************************************
−
<a href="https://2019.igem.org/Special:Upload">
+
            *  --------------------------------------*
−
UPLOAD FILES
+
            *  Slick                                *
−
</a>
+
            *  --------------------------------------*
−
</div>
+
            *****************************************/
  
−
</div>
+
            .cl {
 +
                padding:0%;
 +
                cursor:pointer;
 +
            }
  
−
<div class="column third_size" >
+
            .slick-active {
−
<h3> Wiki template information </h3>
+
                padding: 20px 0;
−
<p>We have created these wiki template pages to help you get started and to help you think about how your team will be evaluated. You can find a list of all the pages tied to awards here at the <a href="https://2019.igem.org/Judging/Pages_for_Awards">Pages for awards</a> link. You must edit these pages to be evaluated for medals and awards, but ultimately the design, layout, style and all other elements of your team wiki is up to you!</p>
+
            }
  
−
</div>
+
            .slick-center {
 +
                transform: scale(1.08)
 +
            }
  
 +
            .slick-slide:not(.slick-active) {
 +
                margin: 20px 0;
 +
            }
  
 +
            .child {
 +
                width:100%;
 +
            }
  
−
<div class="column third_size" >
+
            .hmcontainer.slide:not(.slick-active) {
−
<div class="highlight decoration_B_full">
+
                cursor: pointer;
−
<h3> Editing your wiki </h3>
+
            }
−
<p>On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world! </p>  
+
 
−
<p>Use WikiTools - Edit in the black menu bar to edit this page</p>
+
            .pagination {
 +
                text-align: center;
 +
                color: $white;
 +
                font-family: $raleway;
 +
                font-size: 1.2rem;
 +
            }
 +
            .banneroh10{
 +
            width:10%;
 +
            }
 +
            .banneroh40{
 +
            width:40%;
 +
            }
 +
            .banneroh18{
 +
            width:18%;
 +
            }
 +
            @media screen and (max-width: 800px) {
 +
                .row {
 +
                    display: flex;
 +
                    flex-wrap: wrap;
 +
                }
 +
                .left{
 +
                    flex: 0 0 100%;
 +
                    max-width: 100%;
 +
                    width:100%;
 +
                    padding:25px;
 +
                    background-color:#000000;
 +
                    padding-bottom: 0px;
 +
                    margin-bottom: 0px;
 +
                }
 +
                .right {
 +
                    flex: 0 0 100%;
 +
                    max-width: 100%;
 +
                    width:100%;
 +
                    padding:25px;
 +
                    background-color:#fbfbfb;
 +
                    padding-bottom: 0px;
 +
                    margin-bottom: 0px;
 +
                } 
 +
                .left3{
 +
                    flex: 0 0 100%;
 +
                    max-width: 100%;
 +
                    width:100%;
 +
                    padding:25px;
 +
                    background-color:#e1e1e1;
 +
                    padding-bottom: 0px;
 +
                    margin-bottom: 0px;
 +
                }
 +
                .right3 {
 +
                    flex: 0 0 100%;
 +
                    max-width: 100%;
 +
                    width:100%;
 +
                    padding:25px;
 +
                    background-color:#eeeeee;
 +
                    padding-bottom: 0px;
 +
                    margin-bottom: 0px;
 +
                } 
 +
 
 +
                .right2
 +
                {
 +
                    flex: 0 0 100%;
 +
                    max-width: 100%;
 +
                    width:100%;
 +
                    padding:25px;
 +
                    background-color:#000000;
 +
                    padding-bottom: 0px;
 +
                    margin-bottom: 0px;
 +
                }
 +
                .left2
 +
                {
 +
                    flex: 0 0 100%;
 +
                    max-width: 100%;
 +
                    width:100%;
 +
                    padding:25px;
 +
                    background-color:#fbfbfb;
 +
                    padding-bottom: 0px;
 +
                    margin-bottom: 0px;
 +
                }
 +
 
 +
                img.sponsorpage {
 +
                    display: block;
 +
                    margin:auto;
 +
                    width:100%;
 +
                }
 +
                .centerjustify2 {
 +
                    margin-left: auto;
 +
                    margin-right: auto;
 +
                    width: 90%;
 +
                    margin-top: 60px;
 +
                    margin-bottom: 60px;
 +
                    text-align: justify;
 +
                }
 +
                .centerjustify3 {
 +
                    margin-left: auto;
 +
                    margin-right: auto;
 +
                    width: 90%;
 +
                    margin-top: 60px;
 +
                    margin-bottom: 60px;
 +
                    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;
 +
  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>
 +
 
 +
    </head>
 +
 
 +
    <body>
 +
        <div class="Banner">
 +
 
 +
            <div class="display-2 mb-0">  
 +
              <div class="slideshow-container">
 +
<br>
 +
<div class="mySlides fade">
 +
  <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/c/c8/T--TUDelft--HomeAfter.png" alt="slide 1" >
  
−
<div class="button_link">
 
−
<a href="https://2019.igem.org/wiki/index.php?title=Team:TUDelft&action=edit">
 
−
EDIT PAGE
 
−
</a>
 
 
</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>
 +
 +
<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>
  
  
 +
<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="clear extra_space"></div>
+
<div class="mySlides fade">
−
<div class="line_divider"></div>
+
 
−
<div class="clear extra_space"></div>
+
  <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 class="column two_thirds_size" >
 
−
<h3>Tips</h3>
 
−
<p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p>
 
−
<ul>
 
−
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
 
−
<li>Be clear about what you are doing and how you plan to do this.</li>
 
−
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
 
−
<li>Make sure information is easy to find; nothing should be more than 3 clicks away.  </li>
 
−
<li>Avoid using very small fonts and low contrast colors; information should be easy to read.  </li>
 
−
<li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="https://2019.igem.org/Calendar">iGEM 2019 calendar</a> </li>
 
−
<li>Have lots of fun! </li>
 
−
</ul>
 
 
</div>
 
</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 class="column third_size">
 
−
<div class="highlight decoration_A_full">
 
−
<h3>Inspiration</h3>
 
−
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
 
−
<ul>
 
−
<li> <a href="https://2014.igem.org/Team:SDU-Denmark/"> 2014 SDU Denmark </a> </li>
 
−
<li> <a href="https://2014.igem.org/Team:Aalto-Helsinki">2014 Aalto-Helsinki</a> </li>
 
−
<li> <a href="https://2014.igem.org/Team:LMU-Munich">2014 LMU-Munich</a> </li>
 
−
<li> <a href="https://2014.igem.org/Team:Michigan"> 2014 Michigan</a></li>
 
−
<li> <a href="https://2014.igem.org/Team:ITESM-Guadalajara">2014 ITESM-Guadalajara </a></li>
 
−
<li> <a href="https://2014.igem.org/Team:SCU-China"> 2014 SCU-China </a></li>
 
−
</ul>
 
 
</div>
 
</div>
 
</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;">
 +
            <br>
  
 +
            <div class="centerjustify2">
 +
<div id="ScrollDown1"></div>
 +
                <div class="rowhm">
 +
 +
                    <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%;">
 +
                        </div></a>
 +
 +
                    <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%;">
 +
                        </div></a>
 +
 +
                    <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%;">
 +
                        </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>
 +
 +
                <br>
 +
                <br>
 +
            </div>
 +
        </div>
 +
 +
        <div  data-aos="fade-up" data-aos-duration="3000">
 +
            <div style="background-color:#fbfbfb;cursor: pointer;" onclick="window.location='https://2019.igem.org/Team:TUDelft/Description';">
 +
 +
                <div class="centerjustify2" style="text-align:center;">
 +
                    <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:large;">which restricts the scope of synthetic biology to a small subset of the bacterial cosmos.</p>
 +
                    <br>
 +
                    <img class="banneroh" src = "https://static.igem.org/mediawiki/2019/8/84/T--TUDelft--steps_parts.png" alt="Parts road">
 +
                </div>
 +
                <br>
 +
            </div>
 +
        </div>
 +
        <br>
 +
        <br>
 +
        <br>
 +
 +
        <div class="row">
 +
            <div data-aos="fade-up" data-aos-duration="3000">
 +
 +
                <div class="left" style="text-align:center;">
 +
                    <div class="centerjustify2">
 +
                        <p style="color:rgba(0,0,0,0);">.</p>
 +
                        <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>
 +
                        <p style="color:rgba(0,0,0,0);">.</p>
 +
 +
                    </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%;"> 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>
 +
                            <a href="https://2019.igem.org/Team:TUDelft/Description" class="buttontu "><b>Read More</b></a>                     
 +
                        </div>       
 +
                    </div>
 +
                </div>
 +
                <br>
 +
            </div>
 +
        </div>
 +
 +
        <div  data-aos="fade-up" data-aos-duration="3000">
 +
            <div style="background-color:#fbfbfb;cursor: pointer;" onclick="window.location='https://2019.igem.org/Team:TUDelft/Description';">
 +
 +
                <div class="centerjustify2" style="text-align: center;">
 +
                    <br>
 +
                    <div class="centerjustify2" style="text-align: center;"><p style=" font-size:xx-large;"> <b> How does Sci-Phi 29 work? </b> </p>
 +
                    </div>
 +
 +
 +
                </div>
 +
                <br>
 +
            </div>
 +
        </div>
 +
        <div data-aos="fade-up" data-aos-duration="3000">
 +
            <div style="text-align:center; background-color:#fbfbfb;" >
 +
                <br>
 +
                <img class="banneroh40" src = "https://static.igem.org/mediawiki/2019/1/1c/T--TUDelft--Bacteria_home.png" alt="Different Bacteria" >
 +
            </div>
 +
        </div>
 +
 +
        <div data-aos="fade-up" data-aos-duration="3000">
 +
            <div style="text-align:center; background-color:#fbfbfb;" >
 +
                <img class="banneroh10" src = "https://static.igem.org/mediawiki/2019/d/de/T--TUDelft--ArrowPattern.png" alt="Arrow">
 +
            </div>
 +
        </div>
 +
        <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/Design';">
 +
                <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 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 data-aos="fade-up" data-aos-duration="3000">
 +
            <div style="text-align:center; background-color:#fbfbfb;" >
 +
                <img class="banneroh" src = "https://static.igem.org/mediawiki/2019/9/9e/T--TUDelft--Arrowpatternsplit.png" alt="Arrow split">
 +
                <br>
 +
                <br>
 +
            </div>
 +
        </div>
 +
 +
 +
        <div class="row">
 +
            <div data-aos="fade-up" data-aos-duration="3000">
 +
                <div class="left3" style="text-align:center;">
 +
                    <div class="centerjustify2">
 +
                        <center><img src = "https://static.igem.org/mediawiki/2019/f/f0/T--TUDelft--logorepli.png" alt="Orthogonality" style="width:46%;"></center>
 +
 +
 +
                        <br>
 +
                        <p style="font-size:large; line-height: 200%;"> To express genetic tools <b style="font-size:x-large;color:#0072b2;">across multiple bacterial species</b>, we were inspired by the replication machinery of the phi29 bacteriophage. Its unique <b style="font-size:x-large;color:#0072b2;">protein-primed</b> based replication greatly simplifies the design of replication systems. This system is able to replicate a linear piece of DNA by using <b style="font-size:x-large;color:#0072b2;">only four proteins</b>.</p>
 +
                        <br>
 +
                        <br>
 +
                        <div class="boxx3"><center><img src = "https://static.igem.org/mediawiki/2019/2/2d/T--TUDelft--orthoreplihome.png" alt="Orthogonal Replication System" style="width:79%;"></center></div>
 +
                        <br>
 +
                        <br>
 +
                        <center style="font-size:large;"><b>Find more about how we applied this unique system in our project!</b></center>
 +
                        <br>
 +
                        <center><a href="https://2019.igem.org/Team:TUDelft/Design#orthorep" class="buttontu "><b>Read More</b></a></center>                     
 +
                    </div>
 +
                </div> 
 +
            </div>
 +
 +
            <div  data-aos="fade-up" data-aos-duration="3000">
 +
 +
                <div class="right3">
 +
                    <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>
 +
                        <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>
 +
                        <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>
 +
                        <br>
 +
                        <br>
 +
                        <div class="rowhm">
 +
 +
                            <div class="boxx3 columnhm" >
 +
 +
                                <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 class="boxx3 columnhm" >
 +
 +
                                <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 class="boxx3 columnhm">
 +
                                <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>
 +
                        <br><br> <center style="font-size:large;"><b>Do you want to learn more about the details?</b></center>
 +
                        <br>
 +
                        <center><a href="https://2019.igem.org/Team:TUDelft/Design#control" class="buttontu"><b>Click here</b></a></center>
 +
 +
                    </div>       
 +
                </div>
 +
            </div>
 +
        </div>
 +
 +
            <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 class="centerjustify2" style="text-align:center;">
 +
                    <br>
 +
                    <br>
 +
                    <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="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 curious about the impact of our Sci-Phi 29 platform?</i></center>
 +
                    <br>
 +
                    <center><a href="https://2019.igem.org/Team:TUDelft/Human_Practices" class="buttontu2"><b>Click Here</b></a></center>
 +
                    <br>
 +
</div>
 +
                </div>
 +
            </div>
 +
 +
            <div  data-aos="fade-up" data-aos-duration="3000">
 +
                <div style="background-color:#e1e1e1;" >
 +
                    <br>
 +
                    <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>
 +
                        <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>
 +
                        <center><a href="https://2019.igem.org/Team:TUDelft/Public_Engagement" class="buttontu2"><b>Read More</b></a></center>
 +
                    </div>
 +
                    <div class="hmcontainer">
 +
                        <div class="slider center">     
 +
                            <div class="slide">
 +
                                <div class="cl"><img style="width:100%;" src = "https://static.igem.org/mediawiki/2019/b/b7/T--TUDelft--Joris.png" alt="Fold Scope Event" ></div>
 +
                            </div>
 +
                            <div class="slide">
 +
                                <div class="cl"><img style="width:100%;"  src = "https://static.igem.org/mediawiki/2019/d/d6/T--TUDelft--fold2.png" >
 +
 +
                                </div>
 +
                            </div>
 +
                            <div class="slide">
 +
                                <div class="cl">
 +
                                    <img style="width:100%;" src = "https://static.igem.org/mediawiki/2019/b/b2/T--TUDelft--Foldscope6tu.png"></div>
 +
                            </div>
 +
                            <div class="slide">
 +
                                <div class="cl"><img style="width:100%;" src = " https://static.igem.org/mediawiki/2019/7/78/T--TUDelft--foldscopegeenidee.png"></div>
 +
                            </div>     
 +
                            <div class="slide">
 +
                                <div class="cl"><img style="width:100%;" src = "https://static.igem.org/mediawiki/2019/1/1d/T--TUDelft--fold1.png"></div>
 +
                            </div>
 +
                            <div class="slide">
 +
                                <div class="cl">
 +
                                    <img style="width:100%;" src = "https://static.igem.org/mediawiki/2019/8/8c/T--TUDelft--Foldscopein1.png"></div>
 +
                            </div>
 +
                            <div class="slide">
 +
                                <div class="cl"><img style="width:100%;" src = " https://static.igem.org/mediawiki/2019/1/17/T--TUDelft--Foldscope7tu.png"></div>
 +
                            </div>
 +
                            <div class="slide">
 +
                                <div class="cl"><img style="width:100%;" src = "https://static.igem.org/mediawiki/2019/1/1d/T--TUDelft--fold1.png"></div>
 +
                            </div>
 +
                            <div class="slide">
 +
                                <div class="cl"><img style="width:100%;" src = "https://static.igem.org/mediawiki/2019/d/dc/T--TUDelft--Foldscope8tu.png "></div>
 +
                            </div>
 +
                            <div class="slide">
 +
                                <div class="cl "><img style="width:100%;" src = "https://static.igem.org/mediawiki/2019/c/c9/T--TUDelft--Foldscopein2.png"></div>
 +
                            </div>
 +
                            <div class="slide">
 +
                                <div class="cl "><img style="width:100%;" src = "https://static.igem.org/mediawiki/2019/4/47/T--TUDelft--Foldscope11tu.png "></div>
 +
                            </div>
 +
                            <div class="slide">
 +
                                <div class="cl "><img style="width:100%;" src = "https://static.igem.org/mediawiki/2019/a/ad/T--TUDelft--Foldscopein4.png"></div>
 +
                            </div>
 +
                            <div class="slide">
 +
                                <div class="cl "><img style="width:100%;" src = "https://static.igem.org/mediawiki/2019/3/34/T--TUDelft--Foldscope5tu.png "></div>
 +
                            </div>
 +
                            <div class="slide">
 +
                                <div class="cl "><img style="width:100%;" src = " https://static.igem.org/mediawiki/2019/d/d9/T--TUDelft--Foldscope9tu.png"></div>
 +
                            </div>
 +
                            <div class="slide">
 +
                                <div class="cl "><img style="width:100%;" src = "https://static.igem.org/mediawiki/2019/4/4e/T--TUDelft--Foldscopein7.png"></div>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                    <br>
 +
                    <br>
 +
                    <div style="background-color:#ffffff;">
 +
                        <br>
 +
                        <br>
 +
                        <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="rowhm">
 +
 +
                                <a href="https://2019.igem.org/Team:TUDelft/Demonstrate"><div class="boxx columnhm">
 +
                                    <img src = "https://static.igem.org/mediawiki/2019/d/d3/T--TUDelft--Demonstrate_mini_logo.png" alt="Project logo" style="width:100%;">
 +
                                    </div></a>
 +
 +
                                <a href="https://2019.igem.org/Team:TUDelft/Safety"><div class="boxx columnhm">
 +
                                    <img src = "https://static.igem.org/mediawiki/2019/8/8e/T--TUDelft--Safety_mini_logo.png" alt="Results logo" style="width:100%;">
 +
                                    </div></a>
 +
 +
                                <a href="https://2019.igem.org/Team:TUDelft/Collaborations"><div class="boxx columnhm">
 +
                                    <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>
 +
 +
                        </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>
 +
 +
 
 +
 +
        <br>
 +
        <br>
 +
 +
        <script>
 +
 +
            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 $slickEl = $('.center');
 +
 +
            $slickEl.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
 +
                var i = (currentSlide ? currentSlide : 0) + 1;
 +
                $st.text(i + ' of ' + slick.slideCount);
 +
            });
 +
 +
            $slickEl.slick({
 +
                centerMode: true,
 +
 +
                slidesToShow: 3,
 +
                focusOnSelect: true,
 +
                dots: false,
 +
                autoplay: true,
 +
                infinite: true,
 +
                prevArrow: false,
 +
                nextArrow: false,
 +
                responsive: [
 +
                    {
 +
                        breakpoint: 768,
 +
                        settings: {
 +
                            arrows: false,
 +
                            centerMode: true,
 +
                            centerPadding: '60px',
 +
                            slidesToShow: 1
 +
                        }
 +
                    },
 +
                    {
 +
                        breakpoint: 480,
 +
                        settings: {
 +
                            arrows: false,
 +
                            centerMode: true,
 +
                            centerPadding: '60px',
 +
                            slidesToShow: 1
 +
                        }
 +
                    }
 +
                ]
 +
            });
 +
        </script>
 +
        <script>
 +
 +
            $(document).ready(function() {
 +
 +
                setTimeout(() => { $(".cardhome").addClass('flipped')},3000)
 +
 +
 +
            })
 +
 +
        </script>
 +
 +
    </body>
 
</html>
 
</html>
 +
 +
{{:Team:TUDelft/Footer}}

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