Weronika77 (Talk | contribs) |
|||
Line 2: | Line 2: | ||
{{:Team:TUDelft/Head}} | {{:Team:TUDelft/Head}} | ||
{{:Team:TUDelft/Header}} | {{:Team:TUDelft/Header}} | ||
− | |||
<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> | ||
+ | |||
+ | .containerhome { | ||
+ | width: 100%; | ||
+ | height:100%; | ||
+ | margin: 0; | ||
+ | |||
+ | } | ||
+ | |||
+ | .cardhome { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | position: absolute; | ||
+ | -webkit-transition: -webkit-transform 2s; | ||
+ | -moz-transition: -moz-transform 2s; | ||
+ | -o-transition: -o-transform 2s; | ||
+ | transition: transform 2s; | ||
+ | -webkit-transform-style: preserve-3d; | ||
+ | -moz-transform-style: preserve-3d; | ||
+ | -o-transform-style: preserve-3d; | ||
+ | transform-style: preserve-3d; | ||
+ | -webkit-transform-origin: right center; | ||
+ | -moz-transform-origin: right center; | ||
+ | -o-transform-origin: right center; | ||
+ | transform-origin: right center; | ||
+ | } | ||
+ | |||
+ | .cardhome.flipped { | ||
+ | -webkit-transform: translateX( -100%) rotateY( -180deg); | ||
+ | -moz-transform: translateX( -100%) rotateY( -180deg); | ||
+ | -o-transform: translateX( -100%) rotateY( -180deg); | ||
+ | transform: translateX( -100%) rotateY( -180deg); | ||
+ | } | ||
+ | |||
+ | .cardhome div { | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | color: black; | ||
+ | text-align: center; | ||
+ | font-weight: bold; | ||
+ | position: absolute; | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | -moz-backface-visibility: hidden; | ||
+ | -o-backface-visibility: hidden; | ||
+ | backface-visibility: hidden; | ||
+ | } | ||
+ | |||
+ | .cardhome .front { | ||
+ | background: black; | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | } | ||
+ | |||
+ | .cardhome .front p { | ||
+ | margin:auto; | ||
+ | } | ||
+ | |||
+ | .cardhome .back p { | ||
+ | margin: auto; | ||
+ | } | ||
+ | |||
+ | .cardhome .back { | ||
+ | background: black; | ||
+ | -webkit-transform: rotateY( 180deg); | ||
+ | -moz-transform: rotateY( 180deg); | ||
+ | -o-transform: rotateY( 180deg); | ||
+ | transform: rotateY( 180deg); | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | } | ||
+ | .homepage { | ||
+ | |||
+ | height:100%; | ||
+ | width:100%; | ||
+ | } | ||
body{ | body{ | ||
background-color:#ffffff} | background-color:#ffffff} | ||
− | .as_hero{position:relative;background-size:cover;background-repeat:no-repeat;background-attachment:fixed;background-position:top;height:100vh} | + | .as_hero{position:relative;background-size:cover;background-repeat:no-repeat;background-attachment:fixed;background-position:top;height:100vh} |
− | video{min-width:100%;max-width:none!important;min-height:100%;position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%)} | + | video{min-width:100%;max-width:none!important;min-height:100%;position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%)} |
− | .video-container{height:100%;width:100%;overflow:hidden;position:relative} | + | .video-container{height:100%;width:100%;overflow:hidden;position:relative} |
Line 28: | Line 105: | ||
padding: 10px; | padding: 10px; | ||
box-shadow: 2.5px 5px rgba(136, 136, 136,0.8); | box-shadow: 2.5px 5px rgba(136, 136, 136,0.8); | ||
− | + | ||
− | + | ||
} | } | ||
.boxx3 { | .boxx3 { | ||
Line 35: | Line 111: | ||
box-shadow: 2.5px 5px rgba(136, 136, 136,0.8); | box-shadow: 2.5px 5px rgba(136, 136, 136,0.8); | ||
border-radius:0.4em; | 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; | ||
+ | } | ||
+ | |||
.rowhm{ | .rowhm{ | ||
display:flex;} | display:flex;} | ||
Line 55: | Line 137: | ||
background-color:#000000; | background-color:#000000; | ||
padding:10px; | padding:10px; | ||
+ | padding-bottom: 99999px; | ||
+ | margin-bottom: -99999px; | ||
} | } | ||
.right{ | .right{ | ||
Line 63: | Line 147: | ||
padding:10px; | padding:10px; | ||
background-color:#fbfbfb; | background-color:#fbfbfb; | ||
+ | padding-bottom: 99999px; | ||
+ | margin-bottom: -99999px; | ||
} | } | ||
+ | .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{ | .left2{ | ||
float: left; | float: left; | ||
Line 72: | Line 178: | ||
padding-right: 40px; | padding-right: 40px; | ||
background-color:#fbfbfb; | background-color:#fbfbfb; | ||
+ | padding-bottom: 99999px; | ||
+ | margin-bottom: -99999px; | ||
} | } | ||
.right2{ | .right2{ | ||
Line 81: | Line 189: | ||
background-color:#000000; | background-color:#000000; | ||
padding:10px; | padding:10px; | ||
+ | padding-bottom: 99999px; | ||
+ | margin-bottom: -99999px; | ||
} | } | ||
+ | .row{ | ||
+ | overflow: hidden; | ||
+ | } | ||
.row:after { | .row:after { | ||
content: ""; | content: ""; | ||
Line 93: | Line 206: | ||
} | } | ||
− | .hero- | + | .hero-home { |
text-align: center; | text-align: center; | ||
position: absolute; | position: absolute; | ||
Line 122: | Line 235: | ||
.buttontu2 { | .buttontu2 { | ||
− | color: # | + | border-color: #ffffff; |
− | padding: | + | border-style: solid; |
+ | border-width:medium; | ||
+ | color: #ffffff!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: #ffffff; |
− | color:# | + | opacity: 0.75; |
+ | text-decoration:none; | ||
+ | color:#000000!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 144: | Line 286: | ||
text-align: justify; | text-align: justify; | ||
} | } | ||
− | |||
.centerjustify3 { | .centerjustify3 { | ||
margin-left: auto; | margin-left: auto; | ||
margin-right: auto; | margin-right: auto; | ||
− | width: | + | width: 30%; |
margin-top: 60px; | margin-top: 60px; | ||
margin-bottom: 60px; | margin-bottom: 60px; | ||
text-align: justify; | text-align: justify; | ||
+ | } | ||
+ | .hero-home { | ||
+ | text-align: center; | ||
+ | position: absolute; | ||
+ | top: 90%; | ||
+ | left: 50%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | color: white; | ||
} | } | ||
.mySlides {display: none} | .mySlides {display: none} | ||
Line 160: | Line 309: | ||
max-width: 100%; | max-width: 100%; | ||
position: relative; | position: relative; | ||
− | + | } | |
Line 188: | Line 337: | ||
animation-duration: 3s; | animation-duration: 3s; | ||
} | } | ||
− | .w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)} | + | .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 199: | Line 348: | ||
to {opacity: 1} | to {opacity: 1} | ||
} | } | ||
+ | /***************************************** | ||
+ | * --------------------------------------* | ||
+ | * Vars * | ||
+ | * --------------------------------------* | ||
+ | *****************************************/ | ||
+ | $bg: #34495e; | ||
+ | $white: #fff; | ||
+ | $raleway: 'Raleway', sans-serif; | ||
+ | |||
+ | /***************************************** | ||
+ | * --------------------------------------* | ||
+ | * General * | ||
+ | * --------------------------------------* | ||
+ | *****************************************/ | ||
+ | |||
+ | .hmcontainer { | ||
+ | padding: 50px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /***************************************** | ||
+ | * --------------------------------------* | ||
+ | * Slick * | ||
+ | * --------------------------------------* | ||
+ | *****************************************/ | ||
+ | |||
+ | .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) { | @media screen and (max-width: 800px) { | ||
.row { | .row { | ||
Line 211: | Line 426: | ||
padding:25px; | padding:25px; | ||
background-color:#000000; | background-color:#000000; | ||
+ | padding-bottom: 0px; | ||
+ | margin-bottom: 0px; | ||
} | } | ||
.right { | .right { | ||
Line 218: | Line 435: | ||
padding:25px; | padding:25px; | ||
background-color:#fbfbfb; | 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 | .right2 | ||
{ | { | ||
Line 226: | Line 464: | ||
padding:25px; | padding:25px; | ||
background-color:#000000; | background-color:#000000; | ||
+ | padding-bottom: 0px; | ||
+ | margin-bottom: 0px; | ||
} | } | ||
.left2 | .left2 | ||
Line 234: | Line 474: | ||
padding:25px; | padding:25px; | ||
background-color:#fbfbfb; | background-color:#fbfbfb; | ||
+ | padding-bottom: 0px; | ||
+ | margin-bottom: 0px; | ||
} | } | ||
Line 239: | Line 481: | ||
display: block; | display: block; | ||
margin:auto; | margin:auto; | ||
− | width: | + | 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; | ||
− | + | } | |
− | + | .cardhome { | |
− | + | width: 100%; | |
− | + | height: auto; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | .cardhome div { | ||
+ | height: auto; | ||
+ | width: 100%; | ||
+ | }} | ||
+ | #my_centered_buttons { display: flex; justify-content: center; } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</style> | </style> | ||
Line 340: | Line 529: | ||
<body> | <body> | ||
+ | <div class="as_hero"> | ||
+ | <section class="containerhome"> | ||
+ | <div class="cardhome"> | ||
+ | <div class="front"> | ||
+ | <img src="https://static.igem.org/mediawiki/2019/a/a9/T--TUDelft--homepagefront.jpeg" alt="bacteria1" class="homepage"> | ||
+ | </div> | ||
+ | <div class="back"> | ||
− | + | <img src="https://static.igem.org/mediawiki/2019/6/68/T--TUDelft--achterkant.jpg" alt="bacteria2" class="homepage"> | |
− | + | <div class="hero-home" style="margin-top:90%"> | |
− | + | ||
− | + | <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> | ||
− | + | ||
− | </div> | + | </div> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
− | + | ||
− | + | </section> | |
− | </ | + | |
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<div style="background-color:#fbfbfb;"> | <div style="background-color:#fbfbfb;"> | ||
− | |||
− | |||
<br> | <br> | ||
<div class="centerjustify2"> | <div class="centerjustify2"> | ||
+ | <div id="ScrollDown1"></div> | ||
<div class="rowhm"> | <div class="rowhm"> | ||
<a href="https://2019.igem.org/Team:TUDelft/Description"><div class="boxx columnhm"> | <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% | + | <img src = "https://static.igem.org/mediawiki/2019/9/96/T--TUDelft--mini_project_logo.png" alt="Project logo" style="width:100%;"> |
</div></a> | </div></a> | ||
<a href="https://2019.igem.org/Team:TUDelft/Results"><div class="boxx columnhm"> | <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% | + | <img src = "https://static.igem.org/mediawiki/2019/f/f5/T--TUDelft--Minilogoresults_logo.png" alt="Results logo" style="width:100%;"> |
</div></a> | </div></a> | ||
<a href="https://2019.igem.org/Team:TUDelft/Parts"><div class="boxx columnhm"> | <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% | + | <img src = "https://static.igem.org/mediawiki/2019/8/88/T--TUDelft--Minilogoparts_logo.png" alt="Parts logo" style="width:100%;"> |
− | </div> | + | </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> | ||
Line 408: | Line 584: | ||
<br> | <br> | ||
</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 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> | <br> | ||
− | + | </div> | |
+ | </div> | ||
+ | <br> | ||
+ | <br> | ||
− | + | <div class="row"> | |
+ | <div data-aos="fade-up" data-aos-duration="3000"> | ||
− | + | <div class="left" style="text-align:center;"> | |
− | + | <div class="centerjustify2"> | |
+ | <p>hm</p> | ||
+ | <br> | ||
+ | |||
+ | <img src = "https://static.igem.org/mediawiki/2019/e/e7/T--TUDELFT--logonavbar-white.png" alt="Sci-Phi 29" style="width:100%;"> | ||
+ | |||
+ | <br> | ||
<br> | <br> | ||
− | < | + | <p>hm</p> |
+ | |||
</div> | </div> | ||
− | </div> | + | </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"> | <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> | ||
<br> | <br> | ||
− | + | <a href="https://2019.igem.org/Team:TUDelft/Description" class="buttontu "><b>Read More</b></a> | |
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
<br> | <br> | ||
</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> | ||
+ | <div class="centerjustify2" style="text-align: center;"><p style=" font-size:xx-large;"> <b> How does Sci-Phi 29 work? </b> </p> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
<br> | <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 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 data-aos="fade-up" data-aos-duration="3000"> | ||
+ | <div style="text-align:center; background-color:#fbfbfb;cursor: pointer;" onclick="window.location='https://2019.igem.org/Team:TUDelft/Design';"> | ||
+ | <img class="banneroh18" src = "https://static.igem.org/mediawiki/2019/d/d3/T--TUDelft--Sci-PhiKit.png" alt="Different Bacteria"> | ||
+ | <p><b style="font-size:xx-large;color:#0072b2;">Sci-Phi 29</b></p> | ||
− | + | <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 data-aos="fade-up" data-aos-duration="3000"> | ||
+ | <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 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> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
+ | <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 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 class="boxx3 columnhm" | + | <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> |
+ | </div> | ||
+ | |||
+ | |||
+ | <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> | ||
</div> | </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 data-aos="fade-up" data-aos-duration="3000"> | ||
+ | <div style="text-align:center; background-color:#fbfbfb;cursor: pointer;" onclick="window.location='https://2019.igem.org/Team:TUDelft/Human_Practices';"> | ||
+ | <div class="centerjustify2" style="text-align:center;"> | ||
+ | <br> | ||
+ | <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> | ||
− | <br> | + | <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" > | ||
+ | </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> | ||
+ | <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"> | ||
− | + | <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> | |
− | <div class=" | + | |
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
− | <div class=" | + | <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> | ||
− | < | + | <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> | ||
− | < | + | |
+ | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</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> | ||
− | + | ||
<br> | <br> | ||
<br> | <br> | ||
− | |||
− | |||
<script> | <script> | ||
− | |||
− | |||
− | |||
− | + | AOS.init(); | |
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | + | 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> | </script> | ||
Revision as of 01:21, 22 October 2019
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](https://static.igem.org/mediawiki/2019/8/84/T--TUDelft--steps_parts.png)
hm
![Sci-Phi 29](https://static.igem.org/mediawiki/2019/e/e7/T--TUDELFT--logonavbar-white.png)
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](https://static.igem.org/mediawiki/2019/1/1c/T--TUDelft--Bacteria_home.png)
![Arrow](https://static.igem.org/mediawiki/2019/d/de/T--TUDelft--ArrowPattern.png)
![Different Bacteria](https://static.igem.org/mediawiki/2019/d/d3/T--TUDelft--Sci-PhiKit.png)
Sci-Phi 29
A user-friendly platform that allows engineering your bacteria of choice through:
![Arrow split](https://static.igem.org/mediawiki/2019/9/9e/T--TUDelft--Arrowpatternsplit.png)
![Orthogonality](https://static.igem.org/mediawiki/2019/f/f0/T--TUDelft--logorepli.png)
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](https://static.igem.org/mediawiki/2019/2/2d/T--TUDelft--orthoreplihome.png)
![Controllability](https://static.igem.org/mediawiki/2019/5/56/T--TUDelft--logocontrol.png)
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:
![Sci-Phi 29 applications](https://static.igem.org/mediawiki/2019/2/21/T--TUDelft--sci-phitogether.png)
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.
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.
Click here to meet our team!
![Team Picture](https://static.igem.org/mediawiki/2019/2/23/T--TUDelft--Team2.png)