Difference between revisions of "Team:TUDelft/Example5"

 
(37 intermediate revisions by 2 users not shown)
Line 6: Line 6:
 
<html>
 
<html>
 
     <head>
 
     <head>
−
 
+
 
 
         <style>
 
         <style>
−
            body{
 
−
                background-color:#ffffff}
 
−
            .Banner{
 
−
                background: linear-gradient( rgba(255, 255, 255,1), rgba(0, 0, 0,1));
 
−
                background-repeat: no-repeat;
 
−
                background-size:100% 100%;
 
−
                width:100%;
 
  
−
             } 
+
             #left{
−
            .boxx {
+
−
                border: 1px solid #888888;
+
−
                padding: 10px;
+
−
                box-shadow: 2.5px 5px rgba(136, 136, 136,0.8);
+
−
                heigth:12%
+
−
                    width:12%
+
−
            }
+
−
            .boxx3 {
+
−
                padding: 10px;
+
−
                box-shadow: 2.5px 5px rgba(136, 136, 136,0.8);
+
−
                border-radius:0.4em;
+
−
                heigth:12%
+
−
                    width:12%;
+
−
            }
+
−
            .rowhm{
+
−
                display:flex;}
+
−
            /* Create three equal columns that sits next to each other */
+
−
            .columnhm {
+
−
                flex: 20%;
+
−
                padding: 5px;
+
−
                margin:0.5%;
+
−
            }
+
−
 
+
−
            .left{
+
 
                 float: left;
 
                 float: left;
 
                 box-sizing: border-box;
 
                 box-sizing: border-box;
 
                 width: 50%;
 
                 width: 50%;
−
                height:auto;
 
 
                 display: flex;
 
                 display: flex;
 
                 justify-content: center;
 
                 justify-content: center;
−
                 background-color:#000000;
+
                 max-height: 300px;
−
                padding:10px;
+
 
             }
 
             }
−
             .right{
+
             #right{
 
                 float: left;
 
                 float: left;
 
                 padding-right: 10%;
 
                 padding-right: 10%;
Line 56: Line 23:
 
                 width: 50%;
 
                 width: 50%;
 
                 padding:10px;
 
                 padding:10px;
−
                 background-color:#fbfbfb;
+
                 padding-right: 40px;
 +
 
 
             }
 
             }
−
             .left2{
+
             #left2{
 
                 float: left;
 
                 float: left;
 
                 padding-right: 10%;
 
                 padding-right: 10%;
Line 65: Line 33:
 
                 padding:10px;
 
                 padding:10px;
 
                 padding-right: 40px;
 
                 padding-right: 40px;
−
                background-color:#fbfbfb;
 
 
             }
 
             }
−
             .right2{
+
             #right2{
 
                 float: left;
 
                 float: left;
 +
max-height: 200px;
 
                 box-sizing: border-box;
 
                 box-sizing: border-box;
 
                 width: 50%;
 
                 width: 50%;
 
                 display: flex;
 
                 display: flex;
 
                 justify-content: center;
 
                 justify-content: center;
−
                background-color:#C0C0C0;
 
 
             }
 
             }
 
             .row:after {
 
             .row:after {
Line 86: Line 53:
  
 
             }
 
             }
−
            .hero-text {
+
 
−
                text-align: center;
+
−
                position: absolute;
+
−
                top: 90%;
+
−
                left: 50%;
+
−
                transform: translate(-50%, -50%);
+
−
                color: white;
+
−
            }
+
 
             .buttontu {
 
             .buttontu {
−
 
+
               
−
                 border-color: #0072b2;
+
                 border-color: #00A6D6;
−
                border-style: solid;
+
border-style: solid;
−
                border-width:medium;
+
border-width:thin;
−
                 color: #0072b2 !important;
+
                 color: #00A6D6 !important;
−
                 padding: 1%;
+
                 padding: 2%;
 
                 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;
+
                 border-radius: 10px;
 
             }
 
             }
−
            .buttontu:hover {
+
.buttontu:hover {
−
                background-color: #0072b2;
+
background-color: #00A6D6;
−
                opacity: 0.75;  
+
opacity: 0.65;  
−
                text-decoration:none;
+
text-decoration:none;
−
                color:#fff !important;
+
color:#fff !important;
−
            }
+
}
−
            .buttontu2 {
+
.buttontu2 {
−
 
+
               
 
                 color: #00A6D6 !important;
 
                 color: #00A6D6 !important;
 
                 padding: 1%;
 
                 padding: 1%;
Line 121: Line 81:
 
                 display: inline-block;
 
                 display: inline-block;
 
                 cursor: pointer;
 
                 cursor: pointer;
−
 
+
                  
−
            }
+
−
            .buttontu2:hover {
+
−
                 text-decoration: none;
+
−
                color:#ffffff!important;
+
 
             }
 
             }
 +
.buttontu2:hover {
 +
text-decoration: none;
 +
color:#000000!important;
 +
}
  
  
−
            .centerjustify2 {
+
.centerjustify2 {
 
                 margin-left: auto;
 
                 margin-left: auto;
 
                 margin-right: auto;
 
                 margin-right: auto;
Line 137: Line 97:
 
                 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: 60%;
+
                 text-align: center;
−
                 margin-top: 60px;
+
                 text-decoration: none;
−
                margin-bottom: 60px;
+
−
                 text-align: justify;
+
−
            }
+
−
            .mySlides {display: none}
+
−
            img {vertical-align: middle;}
+
−
 
+
−
            /* Slideshow container */
+
−
            .slideshow-container {
+
−
                max-width: 100%;
+
−
                position: relative;
+
−
                margin: auto;
+
−
            }
+
−
 
+
−
 
+
−
            /* The dots/bullets/indicators */
+
−
            .dot {
+
−
                cursor: pointer;
+
−
                height: 20px;
+
−
                width: 20px;
+
−
                margin: 0 2px;
+
−
                background-color: #bbb;
+
−
                border-radius: 50%;
+
 
                 display: inline-block;
 
                 display: inline-block;
−
                 transition: background-color 0.6s ease;
+
                 border-radius: 10px;
−
 
+
width:100%;
−
 
+
 
             }
 
             }
  
−
            .active, .dot:hover {
+
.mySlides {display: none}
−
                background-color: #717171;
+
img {vertical-align: middle;}
−
            }
+
  
−
            /* Fading animation */
+
/* Slideshow container */
−
            .fade {
+
.slideshow-container {
−
                -webkit-animation-name: fade;
+
  max-width: 100%;
−
                -webkit-animation-duration: 3s;
+
  position: relative;
−
                animation-name: fade;
+
  margin: auto;
−
                animation-duration: 3s;
+
}
−
            }
+
  
−
            @-webkit-keyframes fade {
 
−
                from{opacity: 0}
 
−
                to {opacity: 1}
 
  
−
            }
+
/* 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;
 +
 
 +
 
 +
}
  
−
            @keyframes fade {
+
.active, .dot:hover {
−
                from{opacity: 0}
+
  background-color: #717171;
−
                to {opacity: 1}
+
}
−
            }
+
  
−
            /* On smaller screens, decrease text size */
+
/* Fading animation */
−
            @media only screen and (max-width: 300px) {
+
.fade {
−
                .prev, .next,.text {font-size: 11px}
+
  -webkit-animation-name: fade;
−
            }
+
  -webkit-animation-duration: 3s;
 +
  animation-name: fade;
 +
  animation-duration: 3s;
 +
}
  
 +
@-webkit-keyframes fade {
 +
  from{opacity: 0}
 +
  to {opacity: 1}
 +
 
 +
}
  
−
            @media screen and (max-width: 800px) {
+
@keyframes fade {
−
                .row {
+
  from{opacity: 0}  
−
                    display: flex;
+
  to {opacity: 1}
−
                    flex-wrap: wrap;
+
}
−
                }
+
−
                .left{
+
−
                    flex: 0 0 100%;
+
−
                    max-width: 100%;
+
−
                    width:100%;
+
−
                    padding:25px;
+
−
                    background-color:#000000;
+
−
                }
+
−
                .right {
+
−
                    flex: 0 0 100%;
+
−
                    max-width: 100%;
+
−
                    width:100%;
+
−
                    padding:25px;
+
−
                    background-color:#fbfbfb;
+
−
                }
+
−
                .right2,
+
−
                {
+
−
                    flex: 0 0 100%;
+
−
                    max-width: 100%;
+
−
                    width:100%;
+
−
                    background-color:#C0C0C0;
+
−
                }
+
−
                .left2
+
−
                {
+
−
                    flex: 0 0 100%;
+
−
                    max-width: 100%;
+
−
                    width:100%;
+
−
                    padding:25px;
+
−
                    background-color:#fbfbfb;
+
−
                }  
+
  
−
                img.sponsorpage {
+
/* On smaller screens, decrease text size */
−
                    display: block;
+
@media only screen and (max-width: 300px) {
−
                    margin:auto;
+
  .prev, .next,.text {font-size: 11px}
−
                    width:40%;
+
}
−
                }
+
−
            }
+
  
 +
.centerfoto {
 +
  display: block;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  width: 85%;
 +
}
 
         </style>
 
         </style>
  
Line 249: Line 175:
  
  
 +
        <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=" ">
+
<div class="mySlides fade">
 +
  <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/5/5b/T--TUDelft--HomeAfter5.png" alt="slide 2" >
  
−
            <video autoplay muted width="100%">
+
</div>
−
                <source type="video/mp4" src="https://static.igem.org/mediawiki/2019/3/3f/T--TUDelft--homevideo.mp4">
+
−
            </video>
+
−
            <div class="hero-text">
+
−
                <a href="#ScrollDown1" class="buttontu2 jump"><p style="font-size:xx-large; "> <b> <i class='fas fa-angle-double-down'></i></b></p></a>
+
−
            </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 id="ScrollDown1"></div>
 
−
        <br> 
 
−
        <div style="background-color:#fbfbfb;">
 
−
            <br>
 
−
            <br>
 
−
            <br>
 
  
−
            <div class="centerjustify2">
+
<div class="mySlides fade">
−
                <div class="rowhm">
+
  
−
                    <a href="https://2019.igem.org/Team:TUDelft/Description"><div class="boxx columnhm">
+
  <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/2/2e/T--TUDelft--HomeAfter4.png" alt="slide 4" >
−
                        <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">
+
</div>
−
                        <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">
+
<div class="mySlides fade">
−
                        <img src = "https://static.igem.org/mediawiki/2019/8/88/T--TUDelft--Minilogoparts_logo.png" alt="Parts logo" style="width:100%";>
+
−
                        </div>
+
  
−
                        <a href="https://2019.igem.org/Team:TUDelft/Model"><div class="boxx columnhm">
+
  <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/e/e4/T--TUDelft--HomeAfter3.png" alt="slide 5" >
−
                            <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">
+
</div>
−
                            <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>
+
<div class="mySlides fade">
−
                <br>
+
−
                <br>
+
−
                <br>
+
−
            </div>
+
  
−
            <br>
+
  <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/9/95/T--TUDelft--HomeAfter7.png" alt="slide 6" >
  
−
            <div style="background-color:#fbfbfb;cursor: pointer;" onclick="window.location='https://2019.igem.org/Team:TUDelft/Description';">
+
</div>
  
−
                <br>
+
<div class="mySlides fade">
−
                <div class="centerjustify2" style="text-align: center;">
+
  
−
                    <div  data-aos="fade-up" data-aos-duration="3000">
+
  <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/8/85/T--TUDelft--HomeAfter6.png" alt="slide 7" >
  
−
                        <div class="centerjustify2" style="text-align: center;"><p style=" font-size:xx-large;"> <b> Engineering organism specific parts and utilizing existing parts across different species is extremely laborious and expensive </b> </p>
+
</div>
−
                            <p>which restricts the scope of synthetic biology to a small subset of the bacterial cosmos.</p></div>
+
−
                        <br>
+
−
                        <img src = "https://static.igem.org/mediawiki/2019/8/84/T--TUDelft--steps_parts.png" alt="Parts road" style="width:60%";>
+
−
                    </div>
+
−
                </div>
+
−
                <br>
+
−
                <br>
+
−
            </div>
+
  
−
            <br>
+
<div class="mySlides fade">
  
 +
  <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/e/e3/T--TUDelft--HomeAfter2.png" alt="slide 8" >
  
−
            <div class="row">
+
</div>
−
                <div data-aos="fade-up" data-aos-duration="3000">
+
</div>
  
−
                    <div class="left" style="text-align:center;">
+
<div style="text-align:center">
−
                        <div class="centerjustify2">
+
  <span class="dot" onclick="currentSlide(1)"></span>  
−
                            <br>
+
  <span class="dot" onclick="currentSlide(2)"></span>  
−
                            <br>
+
  <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>
  
−
                            <img src = "https://static.igem.org/mediawiki/2019/e/e7/T--TUDELFT--logonavbar-white.png" alt="Sci-Phi 29" style="width:100%";>  
+
            </div>           
 +
        </div>       
 +
        </div>
  
−
                            <br>
+
    <br>
−
                            <br>  
+
    <br>
−
                            <br>
+
    <br>
 +
<br>
 +
   
 +
<br>
 +
    <br>
 +
<div class="centerjustify2">
  
−
                        </div>
+
    <div  data-aos="fade-zoom-in" data-aos-duration="2000">
−
                    </div> 
+
 
−
                </div>
+
        <center class="boxhead" style=" font-size:xx-large;"> <b> Engineering non-model bacteria is extremely laborious and expensive </b> </center>
−
                <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>
−
                            <div class="centerjustify2">
+
<br>
−
                                <p style="font-size:large; line-height: 200%;"> In our project, we developed the <b style="font-size:xx-large;color:#0072b2;">Sci-Phi 29 tool</b> that aims to expand the repertoire of bacterial species and broaden the range of substrates and environmental conditions which is currently used in synthetic biology.</p>
+
−
                                <br>
+
−
                                <br>
+
−
                                <a target="_blank" href="https://2019.igem.org/Team:TUDelft/Description" class="buttontu "><b>Read More</b></a>                     
+
−
                            </div>       
+
−
                        </div>
+
−
                    </div>
+
−
                </div>
+
 
                 <br>
 
                 <br>
 +
    <div class="row">
 +
        <div data-aos="fade-up" data-aos-duration="2000">
 +
           
 +
                <div id="left"  style="margin-top:0%;">
 +
                   
 +
                        <img class="center2"src = "https://static.igem.org/mediawiki/2019/7/78/T--TUDelft--Problem_image.png" alt="Problem" style="width:60%";>
 +
                   
 +
             
 
             </div>
 
             </div>
 +
       
 +
           
 +
                <div id="right">
  
−
            <br>
+
                    <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>
 +
                    <br>
 +
                    <br>
 +
                    <a href="https://2019.igem.org/Team:TUDelft/Description" class="buttontu">Read More</a>
 +
               
 +
            </div>
 +
        </div>
 +
    </div>
  
−
            <div style="background-color:#fbfbfb;cursor: pointer;" onclick="window.location='https://2019.igem.org/Team:TUDelft/Design';">
+
   
 +
<br>
 +
<br><br>
 +
<br>
  
−
                <br>
 
−
                <div class="centerjustify2" style="text-align: center;">
 
−
 
−
                    <div  data-aos="fade-up" data-aos-duration="3000">
 
−
 
−
                        <center style="font-size:xx-large;"> <b> How does Sci-Phi 29 works? </b> </center>
 
−
                        <div class="centerjustify3">
 
−
                            <div class="rowhm">
 
−
 
−
                                <div class="boxx3 columnhm" style="background-color:#0072b2;">
 
−
 
−
                                    <br>
 
−
                                    <br>
 
−
                                    <br>
 
−
                                    <br>
 
−
                                    <br>
 
−
                                    <p style="color:#ffffff;text-align:center; font-size:large;">Orthogonal Replication</p>
 
−
                                    <br>
 
−
                                    <br>
 
−
                                    <br>
 
−
                                    <br>
 
−
                                    <br>
 
−
 
−
                                </div>
 
−
 
−
 
−
                                <div class="boxx3 columnhm" style="background-color:#009e73;">
 
−
 
−
                                    <br>
 
−
                                    <br>
 
−
                                    <br>
 
−
                                    <br>
 
−
                                    <br>
 
−
                                    <p style="color:#ffffff;text-align:center; font-size:large;">Predictable Expression</p>
 
−
                                    <br>
 
−
                                    <br>
 
−
                                    <br>
 
−
                                    <br>
 
−
                                    <br>
 
−
 
−
                                </div>
 
−
 
−
                                <div class="boxx3 columnhm" style="background-color:#d55e00;">
 
−
 
−
                                    <br>
 
−
                                    <br>
 
−
                                    <br>
 
−
                                    <br>
 
−
                                    <br>
 
−
                                    <p style="color:#ffffff;text-align:center; font-size:large;">Cross Species</p>
 
−
                                    <br>
 
−
                                    <br>
 
−
                                    <br>
 
−
                                    <br>
 
−
                                    <br>
 
−
                                </div>
 
−
                            </div>
 
−
                        </div>
 
−
                    </div>
 
−
                </div>
 
−
                <br>
 
−
                <br>
 
  
 +
    <div class="row">
 +
        <div data-aos="fade-up" data-aos-duration="2000">
 +
           
 +
                <div id="left2">
 +
                    <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>
 +
                    <br>
 +
                    <br>
 +
                    <a target="_blank" href="https://static.igem.org/mediawiki/2019/d/d1/T--TUDelft--orthogonalitywhite.png" class="buttontu ">Read More</a>
 +
               
 
             </div>
 
             </div>
 +
       
 +
           
 +
                <div id="right2"  style="margin-top:0%;">
 +
                   
 +
                        <img src = "https://static.igem.org/mediawiki/2019/4/4e/T--TUDELFT--logowithtext.png" alt="Sci-Phi 29" style="width:80%";>
 +
                   
 +
               
 +
            </div>
 +
        </div>
 +
    </div>
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
<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>
 +
       
 +
    </div>
 +
<br>
 +
<br>
 +
    <div class="row">
 +
        <div data-aos="fade-up" data-aos-duration="2000">
 +
           
 +
                <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%";>
 +
                   
 +
               
 +
            </div>
 +
       
 +
           
 +
                <div id="right">
 +
                    <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>
 +
                    <br>
 +
                    <br>
 +
                    <a target="_blank" href="https://static.igem.org/mediawiki/2019/d/d1/T--TUDelft--orthogonalitywhite.png" class="buttontu ">Read More</a>
 +
               
 +
            </div>
 +
        </div>
 +
    </div>
 +
   
 +
<br>
 +
<br><br>
 +
<br>
 +
    <div class="row">
 +
        <div data-aos="fade-up" data-aos-duration="2000">
 +
           
 +
                <div id="left2">
  
−
            <br>
+
                     <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>
−
 
+
                    <br>
−
 
+
                    <br>
−
            <div class="row">
+
                    <a target="_blank" href="https://static.igem.org/mediawiki/2019/d/d1/T--TUDelft--orthogonalitywhite.png" class="buttontu ">Read More</a>
−
                <div  data-aos="fade-up" data-aos-duration="3000">
+
               
−
                     <div style="cursor: pointer;" onclick="window.location='https://2019.igem.org/Team:TUDelft/Human_Practices';">             
+
            </div>
−
                        <div class="left2">
+
     
−
                            <div class="centerjustify2">
+
       
−
                                <br>
+
                <div id="right2" style="margin-top:0%;">
−
                                <p style="font-size:x-large; line-height: 200%;"> Explore the bacterial world</p>
+
                   
−
                                <br>
+
                        <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%;" >  
−
                                <br>
+
                      
−
                                <a href="https://2019.igem.org/Team:TUDelft/Human_Practices" class="buttontu ">Read More</a>
+
                  
−
                            </div>   
+
−
                        </div> 
+
−
                    </div>
+
−
 
+
−
 
+
−
                    <div class="right2">
+
−
                        <div class="centerjustify2">
+
−
                            <div class="slideshow-container" style="text-align:center">
+
−
 
+
−
                                <img class="mySlides fade" style="border-radius:10px; width:100%;" src = "https://static.igem.org/mediawiki/2019/9/9b/T--TUDelft--fold3.png" alt="Fold Scope Event" >
+
−
 
+
−
                                <img class="mySlides fade" style="border-radius:10px; width:100%;"  src = "https://static.igem.org/mediawiki/2019/d/d6/T--TUDelft--fold2.png" >
+
−
 
+
−
                                <img class="mySlides fade" style="border-radius:10px; width:100%;" src = "https://static.igem.org/mediawiki/2019/1/1d/T--TUDelft--fold1.png">
+
−
 
+
−
                                <img class="mySlides fade" style="border-radius:10px; width:100%;" src = "https://static.igem.org/mediawiki/2019/c/c6/T--TUDelft--fold4.png">
+
−
 
+
−
                                <span class="dot" onclick="currentSlide(1)"></span>
+
−
                                <span class="dot" onclick="currentSlide(2)"></span>
+
−
                                <span class="dot" onclick="currentSlide(3)"></span>
+
−
                                <span class="dot" onclick="currentSlide(4)"></span>
+
−
                            </div> 
+
−
                        </div>
+
−
 
+
−
                     </div>                           
+
−
                 </div>
+
 
             </div>
 
             </div>
−
 
 
         </div>
 
         </div>
 +
    </div>
  
−
        <br>
+
    <br>
−
        <br>
+
    <br>
−
        <br>
+
    <br>
−
        <br>  
+
    <br>
 +
    <br>
 +
</div>
  
−
        <script>
 
−
            var slideIndex = 1;
 
−
            var timer = null;
 
−
            showSlides(slideIndex);
 
  
−
            function plusSlides(n) {
+
<script>
−
                clearTimeout(timer);
+
var slideIndex = 1;
−
                showSlides(slideIndex += n);
+
var timer = null;
−
            }
+
showSlides(slideIndex);
  
−
            function currentSlide(n) {
+
function plusSlides(n) {
−
                clearTimeout(timer);
+
  clearTimeout(timer);
−
                showSlides(slideIndex = n);
+
  showSlides(slideIndex += n);
−
            }
+
}
  
−
            function showSlides(n) {
+
function currentSlide(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}
+
−
                if (n < 1) {slideIndex = slides.length}
+
−
                for (i = 0; i < slides.length; i++) {
+
−
                    slides[i].style.display = "none";
+
−
                }
+
−
                for (i = 0; i < dots.length; i++) {
+
−
                    dots[i].className = dots[i].className.replace(" active", "");
+
−
                }
+
−
                slides[slideIndex-1].style.display = "block";
+
−
                dots[slideIndex-1].className += " active";
+
−
                timer = setTimeout(showSlides, 4000);
+
−
            }  
+
  
−
            AOS.init();
+
function showSlides(n) {
−
        </script>
+
  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);
 +
}
 +
</script>
 +
<script>
 +
        AOS.init();
 +
    </script>
  
 
     </body>
 
     </body>

Latest revision as of 06:02, 6 December 2019

Sci-Phi 29







Engineering non-model bacteria is extremely laborious and expensive


Problem




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.



Read More
Sci-Phi 29






How does Sci-Phi 29 works?


overview project




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.



Read More
Foldscope Event