Difference between revisions of "Team:TUDelft/Test"

 
(448 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
{{:Team:TUDelft/Head}}
 
{{:Team:TUDelft/Head}}
 
{{:Team:TUDelft/Header}}
 
{{:Team:TUDelft/Header}}
−
{{:Team:TUDelft/Banner}}
 
  
 
<html>
 
<html>
 
     <head>
 
     <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>
 
         <style>
−
.video-container {
 
−
  position: absolute;
 
−
  top: 0;
 
−
  bottom: 0;
 
−
  width: 100%;
 
−
  height: 100%;
 
−
  overflow: hidden;
 
−
}
 
  
−
.video-container video {
+
            body{
−
  /* Make video to at least 100% wide and tall */
+
                background-color:#ffffff}
−
  min-width: 100%;
+
−
  min-height: 100%;
+
−
 
+
−
  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
+
−
  width: auto;
+
−
  height: auto;
+
−
 
+
−
  /* Center the video */
+
−
  position: absolute;
+
−
  top: 50%;
+
−
  left: 50%;
+
−
  transform: translate(-50%,-50%);
+
−
}
+
  
  
−
////////////////////////////////////////
+
            .Banner{
 +
              background: linear-gradient( rgba(188, 233, 246,1), rgba(251, 251, 251,1));
 +
                background-repeat: no-repeat;
 +
                background-size:100% 100%;
 +
                width:100%;
  
−
body {  
+
            } 
−
  background: #000;
+
            .boxx {
−
  color: #fff;
+
                border: 1px solid #888888;
−
  font-family: 'Oxygen', sans-serif;
+
                padding: 10px;
−
}
+
                box-shadow: 2.5px 5px rgba(136, 136, 136,0.8);
−
 
+
−
.overlay {
+
−
  background: rgba(0,0,0,0.5);
+
−
  position: absolute;
+
−
  bottom: 0;
+
−
  left: 0;
+
−
  right: 0;
+
−
  width: 95%;
+
−
  max-width: 45em;
+
−
  margin: auto auto 1em;
+
−
  box-sizing: border-box;
+
−
  padding: 2em;
+
−
  line-height: 1.5;
+
−
  text-align: center;
+
−
 
+
−
  :last-child { margin-bottom: 0; }
+
  
−
  h1 {
+
            }
−
    font-size: 14pt;
+
            .boxx3 {
−
    font-weight: normal;
+
                padding: 10px;
−
    text-shadow: 0 0 .3em #000;
+
                box-shadow: 2.5px 5px rgba(136, 136, 136,0.8);
−
    margin: 0 0 1em;
+
                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;
 +
            }
  
−
  p {
+
            .rowhm{
−
    font-size: 11pt;
+
                display:flex;}
−
    text-shadow: 0 0 .3em #000;
+
            /* Create three equal columns that sits next to each other */
−
    margin: 1em 0;
+
            .columnhm {
−
  }
+
                flex: 20%;
−
  a {
+
                padding: 5px;
−
    color: #fff;
+
                margin:0.5%;
−
  }
+
            }
−
}
+
  
−
code { font-family: monospace; }
+
             .left{
−
 
+
−
             #left{
+
 
                 float: left;
 
                 float: left;
−
 
 
                 box-sizing: border-box;
 
                 box-sizing: border-box;
 
                 width: 50%;
 
                 width: 50%;
 
                 display: flex;
 
                 display: flex;
 
                 justify-content: center;
 
                 justify-content: center;
−
                 max-height:  
+
                 background-color:#000000;
 +
                padding:10px;
 +
                padding-bottom: 99999px;
 +
                margin-bottom: -99999px;
 
             }
 
             }
−
             #right{
+
             .right{
 
                 float: left;
 
                 float: left;
 
                 padding-right: 10%;
 
                 padding-right: 10%;
Line 94: Line 66:
 
                 width: 50%;
 
                 width: 50%;
 
                 padding:10px;
 
                 padding:10px;
−
                 padding-right: 40px;
+
                background-color:#fbfbfb;
 +
                 padding-bottom: 99999px;
 +
                margin-bottom: -99999px;
 
             }
 
             }
−
             #left2{
+
             .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;
 
                 float: left;
 
                 padding-right: 10%;
 
                 padding-right: 10%;
Line 103: Line 97:
 
                 padding:10px;
 
                 padding:10px;
 
                 padding-right: 40px;
 
                 padding-right: 40px;
 +
                background-color:#fbfbfb;
 +
                padding-bottom: 99999px;
 +
                margin-bottom: -99999px;
 
             }
 
             }
−
             #right2{
+
             .right2{
 
                 float: left;
 
                 float: left;
−
 
 
                 box-sizing: border-box;
 
                 box-sizing: border-box;
 
                 width: 50%;
 
                 width: 50%;
 
                 display: flex;
 
                 display: flex;
 
                 justify-content: center;
 
                 justify-content: center;
 +
                background-color:#000000;
 +
                padding:10px;
 +
                padding-bottom: 99999px;
 +
                margin-bottom: -99999px;
 
             }
 
             }
 +
            .row{
 +
            overflow: hidden;
 +
            }
 
             .row:after {
 
             .row:after {
 
                 content: "";
 
                 content: "";
Line 123: Line 126:
  
 
             }
 
             }
−
 
+
            .hero-home {
 +
                text-align: center;
 +
                position: absolute;
 +
                top: 90%;
 +
                left: 50%;
 +
                transform: translate(-50%, -50%);
 +
                color: white;
 +
            }
 
             .buttontu {
 
             .buttontu {
  
−
                 border-color: #00A6D6;
+
                 border-color: #0072b2;
 
                 border-style: solid;
 
                 border-style: solid;
−
                 border-width:thin;
+
                 border-width:medium;
−
                 color: #00A6D6 !important;
+
                 color: #0072b2!important;
−
                 padding: 2%;
+
                 padding: 1%;
 
                 text-align: center;
 
                 text-align: center;
 
                 text-decoration: none;
 
                 text-decoration: none;
 
                 display: inline-block;
 
                 display: inline-block;
 
                 cursor: pointer;
 
                 cursor: pointer;
−
                 border-radius: 10px;
+
                 border-radius: 8px;
 
             }
 
             }
 
             .buttontu:hover {
 
             .buttontu:hover {
−
                 background-color: #00A6D6;
+
                 background-color: #0072b2;
−
                 opacity: 0.65;  
+
                 opacity: 0.75;  
 
                 text-decoration:none;
 
                 text-decoration:none;
 
                 color:#fff !important;
 
                 color:#fff !important;
Line 145: Line 155:
 
             .buttontu2 {
 
             .buttontu2 {
  
−
                 color: #00A6D6 !important;
+
                 border-color: #0072b2;
−
                 padding: 1%;
+
                border-style: solid;
 +
                border-width:medium;
 +
                color: #0072b2;!important;
 +
                 padding: 0.5%;
 
                 text-align: center;
 
                 text-align: center;
 
                 text-decoration: none;
 
                 text-decoration: none;
 
                 display: inline-block;
 
                 display: inline-block;
 
                 cursor: pointer;
 
                 cursor: pointer;
 +
                border-radius: 8px;
 +
                margin-left:auto;
 +
                margin-right:auto;
  
 
             }
 
             }
 
             .buttontu2:hover {
 
             .buttontu2:hover {
−
                 text-decoration: none;
+
                background-color: #0072b2;
−
                 color:#000000!important;
+
                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;
 +
 +
            }
 +
            .buttontu3:hover {
 +
                background-color: #ffffff;
 +
                opacity: 0.75;
 +
                text-decoration:none;
 +
                color:#000000!important;
 +
            }
 
             .centerjustify2 {
 
             .centerjustify2 {
 
                 margin-left: auto;
 
                 margin-left: auto;
Line 167: Line 206:
 
                 text-align: justify;
 
                 text-align: justify;
 
             }
 
             }
−
             .boxhead{
+
             .centerjustify3 {
−
                 background-color: rgba(0,110,167,0.9);
+
                 margin-left: auto;
−
                 color: #fff !important;
+
                 margin-right: auto;
−
                 padding: 2%;
+
                 width: 30%;
 +
                margin-top: 60px;
 +
                margin-bottom: 60px;
 +
                text-align: justify;
 +
            }
 +
            .hero-home {
 
                 text-align: center;
 
                 text-align: center;
−
                 text-decoration: none;
+
                 position: absolute;
−
                 display: inline-block;
+
                 top: 90%;
−
                 border-radius: 10px;
+
                 left: 50%;
−
                 width:100%;
+
                 transform: translate(-50%, -50%);
 +
                color: white;
 
             }
 
             }
−
 
 
             .mySlides {display: none}
 
             .mySlides {display: none}
 
             img {vertical-align: middle;}
 
             img {vertical-align: middle;}
Line 185: Line 229:
 
                 max-width: 100%;
 
                 max-width: 100%;
 
                 position: relative;
 
                 position: relative;
−
                 margin: auto;
+
                 margin:auto;
 
             }
 
             }
  
Line 194: 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 214: Line 257:
 
                 animation-duration: 3s;
 
                 animation-duration: 3s;
 
             }
 
             }
−
 
+
            .w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
 
             @-webkit-keyframes fade {
 
             @-webkit-keyframes fade {
 
                 from{opacity: 0}  
 
                 from{opacity: 0}  
Line 225: Line 268:
 
                 to {opacity: 1}
 
                 to {opacity: 1}
 
             }
 
             }
 +
            /*****************************************
 +
            *  --------------------------------------*
 +
            *  Vars                                  *
 +
            *  --------------------------------------*
 +
            *****************************************/
  
−
             /* On smaller screens, decrease text size */
+
            $bg: #34495e;
−
             @media only screen and (max-width: 300px) {
+
            $white: #fff;
−
                .prev, .next,.text {font-size: 11px}
+
            $raleway: 'Raleway', sans-serif;
 +
 
 +
             /*****************************************
 +
             *  --------------------------------------*
 +
            *  General                              *
 +
            *  --------------------------------------*
 +
            *****************************************/
 +
 
 +
            .hmcontainer {  
 +
                padding: 50px;
 
             }
 
             }
  
−
             .centerfoto {
+
 
−
                display: block;
+
             /*****************************************
−
                margin-left: auto;
+
            *  --------------------------------------*
−
                 margin-right: auto;
+
            *  Slick                                *
−
                 width: 50%;
+
            *  --------------------------------------*
 +
            *****************************************/
 +
 
 +
            .cl {
 +
                 padding:0%;
 +
                 cursor:pointer;
 
             }
 
             }
 +
 +
            .slick-active {
 +
                padding: 20px 0;
 +
            }
 +
 +
            .slick-center {
 +
                transform: scale(1.08)
 +
            }
 +
 +
            .slick-slide:not(.slick-active) {
 +
                margin: 20px 0;
 +
            }
 +
 +
            .child {
 +
                width:100%;
 +
            }
 +
 +
            .hmcontainer.slide:not(.slick-active) {
 +
                cursor: pointer;
 +
            }
 +
 +
            .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;
 +
  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 242: Line 459:
  
 
     <body>
 
     <body>
 +
        <div class="Banner">
  
 +
            <div class="display-2 mb-0">
 +
              <div class="slideshow-container">
 +
<br>
 +
<br>
 +
<br>
 +
<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>
  
 +
<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" >
  
−
</style>
+
</div>
−
</head>
+
−
<body>
+
  
−
   
 
−
    <div class="video-container">
 
−
 
 
−
  <video autoplay muted loop>
 
−
    <source type="video/mp4" src="https://static.igem.org/mediawiki/2019/3/3f/T--TUDelft--homevideo.mp4">
 
  
−
  </video>
+
<div class="mySlides fade">
−
 
+
  
−
   
+
  <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/2/2e/T--TUDelft--HomeAfter4.png" alt="slide 4" >
−
   
+
−
<video autoplay muted loop id="myVideo">
+
−
  <source src="https://static.igem.org/mediawiki/2019/3/3f/T--TUDelft--homevideo.mp4" type="video/mp4">
+
−
  Your browser does not support HTML5 video.
+
−
</video>
+
  
−
    <div class="centerjustify2 content">
+
</div>
  
−
        <div data-aos="fade-zoom-in" data-aos-duration="2000">
+
<div class="mySlides fade">
  
−
            <center class="boxhead" style=" font-size:xx-large;"> <b> Engineering non-model bacteria is extremely laborious and expensive </b> </center>
+
  <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/e/e4/T--TUDelft--HomeAfter3.png" alt="slide 5" >
  
 +
</div>
  
−
        </div>
+
<div class="mySlides fade">
−
        <br>
+
−
        <br>
+
−
        <div class="row">
+
−
            <div data-aos="fade-up" data-aos-duration="2000">
+
  
−
                <div id="left" style="margin-top:0%;">
+
  <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/9/95/T--TUDelft--HomeAfter7.png" alt="slide 6" >
  
−
                    <img class="center2"src = "https://static.igem.org/mediawiki/2019/7/78/T--TUDelft--Problem_image.png" alt="Problem" style="width:60%";>  
+
</div>
  
 +
<div class="mySlides fade">
  
−
                </div>
+
  <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/8/85/T--TUDelft--HomeAfter6.png" alt="slide 7" >
  
 +
</div>
  
−
                <div id="right">
+
<div class="mySlides fade">
  
−
                    <p style="font-size:large; line-height: 200%;"> Engineering non-model bacteria is <b>extremely laborious and expensive</b>, which restricts the scope of synthetic biology to a small subset of the bacterial cosmos.</p>
+
  <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/e/e3/T--TUDelft--HomeAfter2.png" alt="slide 8" >
−
                    <br>
+
−
                    <br>
+
−
                    <a href="https://2019.igem.org/Team:TUDelft/Description" class="buttontu">Read More</a>
+
  
 +
</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>
 
                 </div>
 +
 +
                <br>
 +
                <br>
 +
                <br>
 +
                <br>
 
             </div>
 
             </div>
 
         </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><br>
 
 
         <br>
 
         <br>
−
 
  
 
         <div class="row">
 
         <div class="row">
−
             <div data-aos="fade-up" data-aos-duration="2000">
+
             <div data-aos="fade-up" data-aos-duration="3000">
  
−
                 <div id="left2">
+
                 <div class="left" style="text-align:center;">
−
                    <p style="font-size:large; line-height: 200%;"> In our project, we developed a tool that aims to expand the repertoire of bacterial species and broaden the range of substrates and environmental conditions which is currently used in synthetic biology.</p>
+
                     <div class="centerjustify2">
−
                     <br>
+
                        <p>hm</p>
−
                    <br>
+
                        <br>
−
                    <a target="_blank" href="https://static.igem.org/mediawiki/2019/d/d1/T--TUDelft--orthogonalitywhite.png" class="buttontu ">Read More</a>
+
  
 +
                        <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>hm</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>
 
                 </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 id="right2" style="margin-top:0%;">
+
                 <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>
  
−
                    <img src = "https://static.igem.org/mediawiki/2019/4/4e/T--TUDELFT--logowithtext.png" alt="Sci-Phi 29" style="width:80%";>
 
  
 +
                </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>
+
        <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>
 
         </div>
−
        <br>
+
         <div data-aos="fade-up" data-aos-duration="3000">
−
        <br>
+
             <div style="text-align:center; background-color:#fbfbfb;cursor: pointer;" onclick="window.location='https://2019.igem.org/Team:TUDelft/Design';">
−
        <br>
+
                <img class="banneroh18" src = "https://static.igem.org/mediawiki/2019/d/d3/T--TUDelft--Sci-PhiKit.png" alt="Different Bacteria">
−
        <br>
+
                <p><b style="font-size:xx-large;color:#0072b2;">Sci-Phi 29</b></p>  
−
        <br>
+
−
        <br>
+
−
         <div data-aos="fade-zoom-in" data-aos-duration="2000">
+
−
 
+
−
             <center class="boxhead" style=" font-size:xx-large;"> <b> How does Sci-Phi 29 works? </b> </center>
+
  
 +
                <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>
−
         <br>
+
         <div data-aos="fade-up" data-aos-duration="3000">
−
        <br>
+
            <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 class="row">
−
             <div data-aos="fade-up" data-aos-duration="2000">
+
             <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>
  
−
                <div id="left"  style="margin-top:0%;">
 
  
−
                    <img class="center2" src = "https://static.igem.org/mediawiki/2019/c/ca/T--TUDELFT--overviewuniversality.png" alt="overview project" style="width:80%";>  
+
                        <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 target="_blank" href="https://2019.igem.org/Team:TUDelft/Design" class="buttontu "><b>Read More</b></a></center>                     
 +
                    </div>
 +
                </div> 
 +
            </div>
  
 +
            <div  data-aos="fade-up" data-aos-duration="3000">
  
−
                 </div>
+
                 <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" >
  
−
                <div id="right">
+
                                <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>
−
                    <p style="font-size:large; line-height: 200%;"> Sci-Phi 29 is a tool used to express genetic circuits independently of the bacterial host.</p>
+
                            </div>
−
                    <br>
+
−
                    <br>
+
−
                    <a target="_blank" href="https://static.igem.org/mediawiki/2019/d/d1/T--TUDelft--orthogonalitywhite.png" class="buttontu ">Read More</a>
+
  
 +
 +
                            <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" class="buttontu"><b>Click here</b></a></center>
 +
 +
                    </div>       
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
  
−
        <br>
+
            <div data-aos="fade-up" data-aos-duration="3000">
−
        <br><br>
+
                <div style="text-align:center; background-color:#fbfbfb;cursor: pointer;" onclick="window.location='https://2019.igem.org/Team:TUDelft/Human_Practices';">
−
        <br>  
+
<div class="centerjustify2" style="text-align:center;">
−
        <div class="row">
+
                    <br>
−
            <div data-aos="fade-up" data-aos-duration="2000">
+
                    <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 target="_blank" href="https://2019.igem.org/Team:TUDelft/Human_Practices" class="buttontu2"><b>Click Here</b></a></center>
 +
                    <br>
 +
</div>
 +
                </div>
 +
            </div>
  
−
                 <div id="left2">
+
            <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 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>
 +
                    </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" >
  
−
                    <p style="font-size:large; line-height: 200%;"> In our project, we developed a tool that aims to expand the repertoire of bacterial species and broaden the range of substrates and environmental conditions which is currently used in synthetic biology.</p>
+
                                </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>
 
                     <br>
 
                     <br>
−
                     <a target="_blank" href="https://static.igem.org/mediawiki/2019/d/d1/T--TUDelft--orthogonalitywhite.png" class="buttontu ">Read More</a>
+
                     <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">
  
−
                </div>
+
                                <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>
  
−
                <div id="right2" style="margin-top:0%;">
+
                                <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>
  
−
                    <img  class="center2" style="border-radius:25px;" src = "https://static.igem.org/mediawiki/2019/c/c7/T--TUDelft--Foldscope_Event.gif" alt="Foldscope Event" width="80%;" >  
+
                               
 +
                            </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>
−
        </div>
+
 
 +
 
  
 
         <br>
 
         <br>
 
         <br>
 
         <br>
−
        <br>
 
−
        <br>
 
−
        <br>
 
−
    </div>
 
  
 +
        <script>
  
−
    <script>
+
            AOS.init();
−
        var slideIndex = 1;
+
−
        var timer = null;
+
−
        showSlides(slideIndex);
+
  
−
        function plusSlides(n) {
 
−
            clearTimeout(timer);
 
−
            showSlides(slideIndex += n);
 
−
        }
 
  
−
        function currentSlide(n) {
+
var slideIndex = 1;
−
            clearTimeout(timer);
+
var timer = null;
−
            showSlides(slideIndex = n);
+
showSlides(slideIndex);
−
        }
+
  
−
        function showSlides(n) {
+
function plusSlides(n) {
−
            var i;
+
  clearTimeout(timer);
−
            var slides = document.getElementsByClassName("mySlides");
+
  showSlides(slideIndex += n);
−
            var dots = document.getElementsByClassName("dot");
+
}
−
            if (n==undefined){n = ++slideIndex}
+
 
−
            if (n > slides.length) {slideIndex = 1}
+
function currentSlide(n) {
−
            if (n < 1) {slideIndex = slides.length}
+
  clearTimeout(timer);
−
            for (i = 0; i < slides.length; i++) {
+
  showSlides(slideIndex = n);
−
                slides[i].style.display = "none";
+
}
−
            }
+
 
−
            for (i = 0; i < dots.length; i++) {
+
function showSlides(n) {
−
                dots[i].className = dots[i].className.replace(" active", "");
+
  var i;
−
            }
+
  var slides = document.getElementsByClassName("mySlides");
−
            slides[slideIndex-1].style.display = "block";
+
  var dots = document.getElementsByClassName("dot");
−
            dots[slideIndex-1].className += " active";
+
  if (n==undefined){n = ++slideIndex}
−
            timer = setTimeout(showSlides, 4000);
+
  if (n > slides.length) {slideIndex = 1}
−
        }  
+
  if (n < 1) {slideIndex = slides.length}
−
    </script>
+
  for (i = 0; i < slides.length; i++) {
−
    <script>
+
      slides[i].style.display = "none";
−
        AOS.init();
+
  }
−
    </script>
+
  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>
 
     </body>

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