Difference between revisions of "Team:TUDelft/Test"

Line 6: Line 6:
 
<html>
 
<html>
 
     <head>
 
     <head>
−
 
+
        <style>
−
 
+
            .column {
−
<style>
+
−
  .column {
+
 
                 box-sizing: border-box;
 
                 box-sizing: border-box;
 
                 vertical-align: middle;
 
                 vertical-align: middle;
 
                 display: table-cell;
 
                 display: table-cell;
 
             }
 
             }
−
          .left {
+
            .left {
−
        width: 50%;
+
                width: 50%;
−
        justify-content: center;
+
                justify-content: center;
−
        }
+
            }
−
 
+
            .right {
−
        .right {
+
                padding-right: 10%;
−
            padding-right: 10%;
+
                width: 50%;
−
            width: 50%;
+
                padding:10px;
−
            padding:10px;
+
                padding-right: 40px;
−
            padding-right: 40px;
+
            }
−
        }
+
            .row {
−
    .row {
+
 
                 display: table;
 
                 display: table;
 
             }
 
             }
−
          .row:after {
+
            .row:after {
 
                 content: "";
 
                 content: "";
 
                 display: table;
 
                 display: table;
 
                 clear: both;
 
                 clear: both;
 
             }
 
             }
−
        .centerjustify2 {
+
            .centerjustify2 {
 
                 margin-left: auto;
 
                 margin-left: auto;
 
                 margin-right: auto;
 
                 margin-right: auto;
Line 41: Line 38:
 
                 text-align: justify;
 
                 text-align: justify;
 
             }
 
             }
−
        .center2 {
+
            .center2 {
 
                 display: block;
 
                 display: block;
 
                 margin-left: auto;
 
                 margin-left: auto;
Line 56: Line 53:
 
                 width: 50%;
 
                 width: 50%;
 
                 justify-content: center;
 
                 justify-content: center;
−
  padding:10px;
+
                padding:10px;
 
                 padding-right: 40px;
 
                 padding-right: 40px;
 
                 padding-top:5%;
 
                 padding-top:5%;
 
             }
 
             }
−
 
 
−
 
 
             .buttontu {
 
             .buttontu {
−
 
 
                 border-color: #00A6D6;
 
                 border-color: #00A6D6;
 
                 border-style: solid;
 
                 border-style: solid;
Line 82: Line 76:
 
             }
 
             }
 
             .buttontu2 {
 
             .buttontu2 {
−
 
 
                 color: #00A6D6 !important;
 
                 color: #00A6D6 !important;
 
                 padding: 1%;
 
                 padding: 1%;
Line 95: Line 88:
 
                 color:#000000!important;
 
                 color:#000000!important;
 
             }
 
             }
−
 
−
 
−
 
 
 
             .boxhead{
 
             .boxhead{
 
                 background-color: rgba(0,110,167,0.9);
 
                 background-color: rgba(0,110,167,0.9);
Line 108: Line 98:
 
                 width:100%;
 
                 width:100%;
 
             }
 
             }
−
 
 
             .mySlides {display: none}
 
             .mySlides {display: none}
 
             img {vertical-align: middle;}
 
             img {vertical-align: middle;}
Line 118: Line 107:
 
                 margin: auto;
 
                 margin: auto;
 
             }
 
             }
−
 
−
 
 
             /* The dots/bullets/indicators */
 
             /* The dots/bullets/indicators */
 
             .dot {
 
             .dot {
Line 130: Line 117:
 
                 display: inline-block;
 
                 display: inline-block;
 
                 transition: background-color 0.6s ease;
 
                 transition: background-color 0.6s ease;
−
 
−
 
 
             }
 
             }
−
 
 
             .active, .dot:hover {
 
             .active, .dot:hover {
 
                 background-color: #717171;
 
                 background-color: #717171;
Line 149: Line 133:
 
                 from{opacity: 0}  
 
                 from{opacity: 0}  
 
                 to {opacity: 1}
 
                 to {opacity: 1}
−
 
 
             }
 
             }
  
Line 174: Line 157:
 
     <body>
 
     <body>
  
−
   
 
−
    <div class="video-container">
 
−
 
 
−
  <video autoplay muted loop width="100%">
 
−
<!--    <source type="video/mp4" src="https://static.igem.org/mediawiki/2019/3/3f/T--TUDelft--homevideo.mp4">-->
 
  
−
  </video>
+
<!--
−
    </div>
+
        <div class="video-container">
  
−
    <div class="centerjustify2t">
+
            <video autoplay muted loop width="100%">
 +
              <source type="video/mp4" src="https://static.igem.org/mediawiki/2019/3/3f/T--TUDelft--homevideo.mp4">
  
−
         <div data-aos="fade-zoom-in" data-aos-duration="2000">
+
            </video>
 +
         </div>
 +
-->
  
−
            <center class="boxhead" style=" font-size:xx-large;"> <b> Engineering non-model bacteria is extremely laborious and expensive </b> </center>
+
        <div class="centerjustify2">
  
 +
            <div  data-aos="fade-zoom-in" data-aos-duration="2000">
  
−
        </div>
+
                <center class="boxhead" style=" font-size:xx-large;"> <b> Engineering non-model bacteria is extremely laborious and expensive </b> </center>
−
        <br>
+
−
        <br>
+
−
        <div class="row">
+
−
            <div data-aos="fade-up" data-aos-duration="2000">
+
  
−
                <div class="left column">
 
  
−
                <img class="center2" src="https://static.igem.org/mediawiki/2019/7/78/T--TUDelft--Problem_image.png" alt="Problem" style="height:30%">  
+
            </div>
 +
            <br>
 +
            <br>
 +
            <div class="row">
 +
                <div data-aos="fade-up" data-aos-duration="2000">
  
 +
                    <div class="left column">
  
−
                </div>
+
                        <img class="center2" src="https://static.igem.org/mediawiki/2019/7/78/T--TUDelft--Problem_image.png" alt="Problem" style="height:30%">  
  
  
−
                <div class="right column">
+
                    </div>
  
−
                    <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 class="right column">
 +
 +
                        <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>
 
             </div>
−
        </div>
 
  
  
−
        <br>
+
            <br>
−
        <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="2000">
  
−
                <div class="left2 column">
+
                    <div class="left2 column">
−
                    <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>
+
                        <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>
−
                    <br>
+
                        <br>
−
                    <a target="_blank" href="https://static.igem.org/mediawiki/2019/d/d1/T--TUDelft--orthogonalitywhite.png" class="buttontu ">Read More</a>
+
                        <a target="_blank" href="https://static.igem.org/mediawiki/2019/d/d1/T--TUDelft--orthogonalitywhite.png" class="buttontu ">Read More</a>
  
−
                </div>
+
                    </div>
  
  
−
                <div class="right2 column">
+
                    <div class="right2 column">
  
−
                    <img src = "https://static.igem.org/mediawiki/2019/4/4e/T--TUDELFT--logowithtext.png" alt="Sci-Phi 29" style="width:80%";>  
+
                        <img src = "https://static.igem.org/mediawiki/2019/4/4e/T--TUDELFT--logowithtext.png" alt="Sci-Phi 29" style="width:80%";>  
  
  
 +
                    </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
        </div>
+
            <br>
−
        <br>
+
            <br>
−
        <br>
+
            <br>
−
        <br>
+
            <br>
−
        <br>
+
            <br>
−
        <br>
+
            <br>
−
        <br>
+
            <div data-aos="fade-zoom-in" data-aos-duration="2000">
−
        <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>
+
                <center class="boxhead" style=" font-size:xx-large;"> <b> How does Sci-Phi 29 works? </b> </center>
  
−
        </div>
+
            </div>
−
        <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="2000">
  
−
                <div class="left column">
+
                    <div class="left column">
  
−
                    <img class="center2" src = "https://static.igem.org/mediawiki/2019/c/ca/T--TUDELFT--overviewuniversality.png" alt="overview project" style="width:80%";>  
+
                        <img class="center2" src = "https://static.igem.org/mediawiki/2019/c/ca/T--TUDELFT--overviewuniversality.png" alt="overview project" style="width:80%";>  
  
  
−
                </div>
+
                    </div>
  
  
−
                <div class="right column">
+
                    <div class="right column">
−
                    <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>
+
                        <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>
−
                    <br>
+
                        <br>
−
                    <a target="_blank" href="https://static.igem.org/mediawiki/2019/d/d1/T--TUDelft--orthogonalitywhite.png" class="buttontu ">Read More</a>
+
                        <a target="_blank" href="https://static.igem.org/mediawiki/2019/d/d1/T--TUDelft--orthogonalitywhite.png" class="buttontu ">Read More</a>
  
 +
                    </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
        </div>
 
  
−
        <br>
+
            <br>
−
        <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="2000">
  
−
                <div class="left2">
+
                    <div class="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>
+
                        <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>
−
                    <br>
+
                        <br>
−
                    <a target="_blank" href="https://static.igem.org/mediawiki/2019/d/d1/T--TUDelft--orthogonalitywhite.png" class="buttontu ">Read More</a>
+
                        <a target="_blank" href="https://static.igem.org/mediawiki/2019/d/d1/T--TUDelft--orthogonalitywhite.png" class="buttontu ">Read More</a>
  
−
                </div>
+
                    </div>
  
  
−
                <div class="right2">
+
                    <div class="right2">
  
−
                    <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%;" >  
+
                        <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>
 +
 +
            <br>
 +
            <br>
 +
            <br>
 +
            <br>
 +
            <br>
 
         </div>
 
         </div>
  
−
        <br>
 
−
        <br>
 
−
        <br>
 
−
        <br>
 
−
        <br>
 
−
    </div>
 
  
 +
        <script>
 +
            var slideIndex = 1;
 +
            var timer = null;
 +
            showSlides(slideIndex);
  
−
    <script>
+
            function plusSlides(n) {
−
        var slideIndex = 1;
+
                clearTimeout(timer);
−
        var timer = null;
+
                showSlides(slideIndex += n);
−
        showSlides(slideIndex);
+
            }
  
−
        function plusSlides(n) {
+
            function currentSlide(n) {
−
            clearTimeout(timer);
+
                clearTimeout(timer);
−
            showSlides(slideIndex += n);
+
                showSlides(slideIndex = n);
−
        }
+
            }
  
−
        function currentSlide(n) {
+
             function showSlides(n) {
−
             clearTimeout(timer);
+
                var i;
−
            showSlides(slideIndex = n);
+
                var slides = document.getElementsByClassName("mySlides");
−
        }
+
                var dots = document.getElementsByClassName("dot");
−
 
+
                if (n==undefined){n = ++slideIndex}
−
        function showSlides(n) {
+
                if (n > slides.length) {slideIndex = 1}
−
            var i;
+
                if (n < 1) {slideIndex = slides.length}
−
            var slides = document.getElementsByClassName("mySlides");
+
                for (i = 0; i < slides.length; i++) {
−
            var dots = document.getElementsByClassName("dot");
+
                    slides[i].style.display = "none";
−
            if (n==undefined){n = ++slideIndex}
+
                }
−
            if (n > slides.length) {slideIndex = 1}
+
                for (i = 0; i < dots.length; i++) {
−
            if (n < 1) {slideIndex = slides.length}
+
                    dots[i].className = dots[i].className.replace(" active", "");
−
            for (i = 0; i < slides.length; i++) {
+
                }
−
                slides[i].style.display = "none";
+
                slides[slideIndex-1].style.display = "block";
−
            }
+
                dots[slideIndex-1].className += " active";
−
            for (i = 0; i < dots.length; i++) {
+
                timer = setTimeout(showSlides, 4000);
−
                dots[i].className = dots[i].className.replace(" active", "");
+
            }  
−
            }
+
        </script>
−
            slides[slideIndex-1].style.display = "block";
+
        <script>
−
            dots[slideIndex-1].className += " active";
+
            AOS.init();
−
            timer = setTimeout(showSlides, 4000);
+
        </script>
−
        }  
+
−
    </script>
+
−
    <script>
+
−
        AOS.init();
+
−
    </script>
+
  
 
     </body>
 
     </body>

Revision as of 19:03, 7 October 2019

Sci-Phi 29

Engineering non-model bacteria is extremely laborious and expensive


Problem

Engineering non-model bacteria is extremely laborious and expensive, which restricts the scope of synthetic biology to a small subset of the bacterial cosmos.



Read More




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

Sci-Phi 29 is a tool used to express genetic circuits independently of the bacterial host.



Read More




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