Difference between revisions of "Team:TUDelft/Test"

Line 6: Line 6:
 
<html>
 
<html>
 
     <head>
 
     <head>
−
       
+
 
−
       
+
 
  
 
         <style>
 
         <style>
Line 56: Line 56:
  
 
             .buttontu {
 
             .buttontu {
−
               
+
 
 
                 border-color: #00A6D6;
 
                 border-color: #00A6D6;
−
border-style: solid;
+
                border-style: solid;
−
border-width:thin;
+
                border-width:thin;
 
                 color: #00A6D6 !important;
 
                 color: #00A6D6 !important;
 
                 padding: 2%;
 
                 padding: 2%;
Line 68: Line 68:
 
                 border-radius: 10px;
 
                 border-radius: 10px;
 
             }
 
             }
−
.buttontu:hover {
+
            .buttontu:hover {
−
background-color: #00A6D6;
+
                background-color: #00A6D6;
−
opacity: 0.65;  
+
                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 82: Line 82:
 
                 display: inline-block;
 
                 display: inline-block;
 
                 cursor: pointer;
 
                 cursor: pointer;
−
                  
+
 
 +
            }
 +
            .buttontu2:hover {
 +
                 text-decoration: none;
 +
                color:#000000!important;
 
             }
 
             }
−
.buttontu2:hover {
 
−
text-decoration: none;
 
−
color:#000000!important;
 
−
}
 
  
  
−
.centerjustify2 {
+
            .centerjustify2 {
 
                 margin-left: auto;
 
                 margin-left: auto;
 
                 margin-right: auto;
 
                 margin-right: auto;
Line 98: Line 98:
 
                 text-align: justify;
 
                 text-align: justify;
 
             }
 
             }
−
.boxhead{
+
            .boxhead{
−
background-color: rgba(0,110,167,0.9);
+
                background-color: rgba(0,110,167,0.9);
 
                 color: #fff !important;
 
                 color: #fff !important;
 
                 padding: 2%;
 
                 padding: 2%;
Line 106: Line 106:
 
                 display: inline-block;
 
                 display: inline-block;
 
                 border-radius: 10px;
 
                 border-radius: 10px;
−
width:100%;
+
                width:100%;
 
             }
 
             }
  
−
.mySlides {display: none}
+
            .mySlides {display: none}
−
img {vertical-align: middle;}
+
            img {vertical-align: middle;}
  
−
/* Slideshow container */
+
            /* Slideshow container */
−
.slideshow-container {
+
            .slideshow-container {
−
  max-width: 100%;
+
                max-width: 100%;
−
  position: relative;
+
                position: relative;
−
  margin: auto;
+
                margin: auto;
−
}
+
            }
  
  
−
/* The dots/bullets/indicators */
+
            /* The dots/bullets/indicators */
−
.dot {
+
            .dot {
−
  cursor: pointer;
+
                cursor: pointer;
−
  height: 20px;
+
                height: 20px;
−
  width: 20px;
+
                width: 20px;
−
  margin: 0 2px;
+
                margin: 0 2px;
−
  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;
−
 
+
−
 
+
−
}
+
  
−
.active, .dot:hover {
 
−
  background-color: #717171;
 
−
}
 
  
−
/* Fading animation */
+
            }
−
.fade {
+
−
  -webkit-animation-name: fade;
+
−
  -webkit-animation-duration: 3s;
+
−
  animation-name: fade;
+
−
  animation-duration: 3s;
+
−
}
+
  
−
@-webkit-keyframes fade {
+
            .active, .dot:hover {
−
  from{opacity: 0}
+
                background-color: #717171;
−
  to {opacity: 1}
+
            }
−
 
+
−
}
+
  
−
@keyframes fade {
+
            /* Fading animation */
−
  from{opacity: 0}
+
            .fade {
−
  to {opacity: 1}
+
                -webkit-animation-name: fade;
−
}
+
                -webkit-animation-duration: 3s;
 +
                animation-name: fade;
 +
                animation-duration: 3s;
 +
            }
  
−
/* On smaller screens, decrease text size */
+
            @-webkit-keyframes fade {
−
@media only screen and (max-width: 300px) {
+
                from{opacity: 0}  
−
  .prev, .next,.text {font-size: 11px}
+
                to {opacity: 1}
−
}
+
  
−
.centerfoto {
+
            }
−
  display: block;
+
 
−
  margin-left: auto;
+
            @keyframes fade {
−
  margin-right: auto;
+
                from{opacity: 0}
−
  width: 50%;
+
                to {opacity: 1}
−
}
+
            }
 +
 
 +
            /* On smaller screens, decrease text size */
 +
            @media only screen and (max-width: 300px) {
 +
                .prev, .next,.text {font-size: 11px}
 +
            }
 +
 
 +
            .centerfoto {
 +
                display: block;
 +
                margin-left: auto;
 +
                margin-right: auto;
 +
                width: 50%;
 +
            }
 
         </style>
 
         </style>
  
Line 175: Line 175:
  
  
−
        <div class="Banner">
+
 
 +
<div class="Banner container-fluid text-center mb-0 align-items-center ">
  
−
            <div class="display-2 mb-0">
+
        <div class="display-2 mb-0">  
−
              <div class="slideshow-container">
+
−
<br>
+
 
<br>
 
<br>
 
<br>
 
<br>
 
<br>
 
<br>
 
<br>
 
<br>
−
<div class="mySlides fade">
+
<video width="100%" playsinline autoplay muted loop>
−
  <img class="centerfoto" style="border-radius:25px; width:30%;" src = "https://static.igem.org/mediawiki/2019/a/a8/T--TUDelft--Weronika.png" alt="Weronika" >
+
  <source src="https://static.igem.org/mediawiki/2019/3/3f/T--TUDelft--homevideo.mp4" type="video/mp4">
 +
 
 +
Your browser does not support the video tag.
 +
</video>
 +
                   
  
 
</div>
 
</div>
−
 
+
</div>    
−
<div class="mySlides fade">
+
−
 
+
−
  <img class="centerfoto" style="border-radius:25px; width:30%;"  src = "https://static.igem.org/mediawiki/2019/2/25/T--TUDelft--Esther.png" alt="Esther" >
+
−
 
+
 
</div>
 
</div>
 +
         
  
−
<div class="mySlides fade">
+
    <br>
 +
    <br>
 +
    <br>
 +
    <br>
 +
    <div id="ScrollDown1"></div>
  
−
  <img class="centerfoto" style="border-radius:25px; width:30%;" src = "https://static.igem.org/mediawiki/2019/3/3a/T--TUDelft--Hafsa.png" alt="Hafsa" >
+
    <br>
 +
    <br>
 +
    <div class="centerjustify2">
  
−
</div>
+
        <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 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>
+
−
<br>
+
−
<br>
+
−
<a href="#ScrollDown1" class="buttontu2"><p style="font-size:xx-large; line-height: 50%;"> <b> <i class='fas fa-angle-double-down'></i></b></p></a>
+
  
  
 +
        </div>
 +
        <br>
 +
        <br>
 +
        <div class="row">
 +
            <div data-aos="fade-up" data-aos-duration="2000">
  
 +
                <div id="left"  style="margin-top:0%;">
  
−
</div>
+
                    <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>
+
  
−
    <br>
 
−
    <br>
 
−
    <br>
 
−
<br>
 
−
<div id="ScrollDown1"></div>
 
−
   
 
−
<br>
 
−
    <br>
 
−
<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>
 
−
 
 
−
   
 
−
</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 id="right">
 
                 <div id="right">
  
Line 255: Line 230:
 
                     <br>
 
                     <br>
 
                     <a href="https://2019.igem.org/Team:TUDelft/Description" class="buttontu">Read More</a>
 
                     <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 data-aos="fade-up" data-aos-duration="2000">
  
−
    <div class="row">
 
−
        <div data-aos="fade-up" data-aos-duration="2000">
 
−
           
 
 
                 <div id="left2">
 
                 <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>
 
                     <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>
Line 274: Line 249:
 
                     <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 id="right2"  style="margin-top:0%;">
 
                 <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%";>  
+
                    <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 id="left"  style="margin-top:0%;">
 
                 <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%";>  
+
                    <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 id="right">
 
                 <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>
 
                     <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>
Line 315: Line 290:
 
                     <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 id="left2">
 
                 <div id="left2">
  
Line 332: Line 307:
 
                     <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 id="right2"  style="margin-top:0%;">
 
                 <div id="right2"  style="margin-top:0%;">
−
                   
+
 
−
                        <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";
+
−
  timer = setTimeout(showSlides, 4000);
+
−
}  
+
−
</script>
+
−
<script>
+
 
         AOS.init();
 
         AOS.init();
 
     </script>
 
     </script>

Revision as of 22:49, 6 October 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