(25 intermediate revisions by 2 users not shown) | |||
Line 6: | Line 6: | ||
<html> | <html> | ||
<head> | <head> | ||
− | + | ||
<style> | <style> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | #left{ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
float: left; | float: left; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
Line 46: | Line 15: | ||
display: flex; | display: flex; | ||
justify-content: center; | justify-content: center; | ||
− | + | max-height: 300px; | |
− | + | ||
} | } | ||
− | + | #right{ | |
float: left; | float: left; | ||
padding-right: 10%; | padding-right: 10%; | ||
Line 55: | Line 23: | ||
width: 50%; | width: 50%; | ||
padding:10px; | padding:10px; | ||
− | + | padding-right: 40px; | |
+ | |||
} | } | ||
− | + | #left2{ | |
float: left; | float: left; | ||
padding-right: 10%; | padding-right: 10%; | ||
Line 64: | Line 33: | ||
padding:10px; | padding:10px; | ||
padding-right: 40px; | padding-right: 40px; | ||
− | |||
} | } | ||
− | + | #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; | ||
− | |||
− | |||
} | } | ||
.row:after { | .row:after { | ||
Line 86: | Line 53: | ||
} | } | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
.buttontu { | .buttontu { | ||
− | + | ||
− | border-color: # | + | border-color: #00A6D6; |
− | + | border-style: solid; | |
− | + | border-width:thin; | |
− | color: # | + | color: #00A6D6 !important; |
− | padding: | + | 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: | + | border-radius: 10px; |
} | } | ||
− | + | .buttontu:hover { | |
− | + | background-color: #00A6D6; | |
− | + | opacity: 0.65; | |
− | + | text-decoration:none; | |
− | + | color:#fff !important; | |
− | + | } | |
− | + | .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:#000000!important; | ||
+ | } | ||
− | + | .centerjustify2 { | |
margin-left: auto; | margin-left: auto; | ||
margin-right: auto; | margin-right: auto; | ||
Line 137: | Line 97: | ||
text-align: justify; | text-align: justify; | ||
} | } | ||
− | + | .boxhead{ | |
− | + | background-color: rgba(0,110,167,0.9); | |
− | + | color: #fff !important; | |
− | + | padding: 2%; | |
− | + | text-align: center; | |
− | + | text-decoration: none; | |
− | + | display: inline-block; | |
− | + | border-radius: 10px; | |
+ | width:100%; | ||
} | } | ||
− | |||
− | |||
− | + | .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.6%; | ||
+ | margin-top:1%; | ||
+ | background-color: #bbb; | ||
+ | border-radius: 50%; | ||
+ | display: inline-block; | ||
+ | transition: background-color 0.6s ease; | ||
+ | |||
+ | |||
+ | } | ||
− | + | .active, .dot:hover { | |
+ | background-color: #717171; | ||
+ | } | ||
− | + | /* Fading animation */ | |
− | + | .fade { | |
− | + | -webkit-animation-name: fade; | |
+ | -webkit-animation-duration: 3s; | ||
+ | animation-name: fade; | ||
+ | animation-duration: 3s; | ||
+ | } | ||
− | + | @-webkit-keyframes fade { | |
− | + | from{opacity: 0} | |
− | + | to {opacity: 1} | |
− | + | ||
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | @keyframes fade { | |
+ | from{opacity: 0} | ||
+ | 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: 85%; | ||
+ | } | ||
</style> | </style> | ||
Line 243: | 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="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" > | ||
+ | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | <div class="mySlides fade"> | |
− | + | ||
− | + | <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/2/2e/T--TUDelft--HomeAfter4.png" alt="slide 4" > | |
− | + | ||
− | + | ||
− | + | </div> | |
− | + | ||
− | + | ||
− | + | <div class="mySlides fade"> | |
− | + | ||
− | + | ||
− | + | <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/e/e4/T--TUDelft--HomeAfter3.png" alt="slide 5" > | |
− | + | ||
− | + | ||
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <div class="mySlides fade"> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/9/95/T--TUDelft--HomeAfter7.png" alt="slide 6" > | |
− | + | </div> | |
− | + | <div class="mySlides fade"> | |
− | + | ||
− | + | <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/8/85/T--TUDelft--HomeAfter6.png" alt="slide 7" > | |
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <div class="mySlides fade"> | |
+ | <img class="centerfoto" src = "https://static.igem.org/mediawiki/2019/e/e3/T--TUDelft--HomeAfter2.png" alt="slide 8" > | ||
− | + | </div> | |
− | + | </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> | ||
− | + | <br> | |
− | + | <br> | |
− | + | <br> | |
+ | <br> | ||
+ | |||
+ | <br> | ||
+ | <br> | ||
+ | <div class="centerjustify2"> | ||
− | + | <div data-aos="fade-zoom-in" data-aos-duration="2000"> | |
− | + | ||
− | + | <center class="boxhead" style=" font-size:xx-large;"> <b> Engineering non-model bacteria is extremely laborious and expensive </b> </center> | |
− | + | ||
− | + | ||
− | + | </div> | |
− | + | <br> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<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"> | ||
− | + | <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> | ||
− | + | ||
+ | <br> | ||
+ | <br><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 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"> | ||
+ | <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 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> | ||
− | + | <br> | |
− | + | <br> | |
− | + | <br> | |
− | + | <br> | |
− | + | <br> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
− | |||
− | |||
− | + | <script> | |
+ | var slideIndex = 1; | ||
+ | var timer = null; | ||
+ | showSlides(slideIndex); | ||
− | + | function plusSlides(n) { | |
− | + | clearTimeout(timer); | |
− | + | showSlides(slideIndex += n); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | function currentSlide(n) { | |
− | + | clearTimeout(timer); | |
− | + | showSlides(slideIndex = n); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | function showSlides(n) { | |
− | + | var i; | |
+ | var slides = document.getElementsByClassName("mySlides"); | ||
+ | var dots = document.getElementsByClassName("dot"); | ||
+ | if (n==undefined){n = ++slideIndex} | ||
+ | if (n > slides.length) {slideIndex = 1} | ||
+ | if (n < 1) {slideIndex = slides.length} | ||
+ | for (i = 0; i < slides.length; i++) { | ||
+ | slides[i].style.display = "none"; | ||
+ | } | ||
+ | for (i = 0; i < dots.length; i++) { | ||
+ | dots[i].className = dots[i].className.replace(" active", ""); | ||
+ | } | ||
+ | slides[slideIndex-1].style.display = "block"; | ||
+ | dots[slideIndex-1].className += " active"; | ||
+ | timer = setTimeout(showSlides, 4500); | ||
+ | } | ||
+ | </script> | ||
+ | <script> | ||
+ | AOS.init(); | ||
+ | </script> | ||
</body> | </body> |
Latest revision as of 06:02, 6 December 2019
![Problem](https://static.igem.org/mediawiki/2019/7/78/T--TUDelft--Problem_image.png)
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](https://static.igem.org/mediawiki/2019/4/4e/T--TUDELFT--logowithtext.png)
![overview project](https://static.igem.org/mediawiki/2019/c/ca/T--TUDELFT--overviewuniversality.png)
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](https://static.igem.org/mediawiki/2019/c/c7/T--TUDelft--Foldscope_Event.gif)