Difference between revisions of "Team:TUDelft/Example5"

Line 2: Line 2:
 
{{:Team:TUDelft/Head}}
 
{{:Team:TUDelft/Head}}
 
{{:Team:TUDelft/Header}}
 
{{:Team:TUDelft/Header}}
 +
{{:Team:TUDelft/Banner}}
  
 
<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 {
+
             #left{
−
                 width: 100%;
+
                 float: left;
−
                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:0px;
 
−
            }
 
−
 
−
            .cardhome .back p {
 
−
                margin: 0px;
 
−
            }
 
−
 
−
            .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{
 
−
                background-color:#ffffff}
 
−
            .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-container{height:100%;width:100%;overflow:hidden;position:relative}
 
−
 
−
 
−
            .Banner{
 
−
                background: linear-gradient( rgba(255, 255, 255,1), rgba(0, 0, 0,1));
 
−
                background-repeat: no-repeat;
 
−
                background-size:100% 100%;
 
−
                width:100%;
 
−
 
−
            } 
 
−
            .boxx {
 
−
                border: 1px solid #888888;
 
−
                padding: 10px;
 
−
                box-shadow: 2.5px 5px rgba(136, 136, 136,0.8);
 
−
 
−
            }
 
−
            .boxx3 {
 
−
                padding: 10px;
 
−
                box-shadow: 2.5px 5px rgba(136, 136, 136,0.8);
 
−
                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{
 
−
                display:flex;}
 
−
            /* Create three equal columns that sits next to each other */
 
−
            .columnhm {
 
−
                flex: 20%;
 
−
                padding: 5px;
 
−
                margin:0.5%;
 
−
            }
 
−
 
−
            .left{
 
−
                float: left;
 
 
                 box-sizing: border-box;
 
                 box-sizing: border-box;
 
                 width: 50%;
 
                 width: 50%;
 
                 display: flex;
 
                 display: flex;
 
                 justify-content: center;
 
                 justify-content: center;
−
                background-color:#000000;
+
max-height: 300px;
−
                padding:10px;
+
−
                padding-bottom: 99999px;
+
−
                margin-bottom: -99999px;
+
 
             }
 
             }
−
             .right{
+
             #right{
 
                 float: left;
 
                 float: left;
 
                 padding-right: 10%;
 
                 padding-right: 10%;
Line 146: Line 24:
 
                 width: 50%;
 
                 width: 50%;
 
                 padding:10px;
 
                 padding:10px;
−
                background-color:#fbfbfb;
+
                 padding-right: 40px;
−
                 padding-bottom: 99999px;  
+
 
−
                margin-bottom: -99999px;
+
 
             }
 
             }
−
             .left3{
+
             #left2{
−
                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{
+
 
                 float: left;
 
                 float: left;
 
                 padding-right: 10%;
 
                 padding-right: 10%;
Line 177: Line 34:
 
                 padding:10px;
 
                 padding:10px;
 
                 padding-right: 40px;
 
                 padding-right: 40px;
−
                background-color:#fbfbfb;
 
−
                padding-bottom: 99999px;
 
−
                margin-bottom: -99999px;
 
 
             }
 
             }
−
             .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:#000000;
 
−
                padding:10px;
 
−
                padding-bottom: 99999px;
 
−
                margin-bottom: -99999px;
 
 
             }
 
             }
−
            .row{
 
−
            overflow: hidden;
 
−
            }
 
 
             .row:after {
 
             .row:after {
 
                 content: "";
 
                 content: "";
Line 206: Line 54:
  
 
             }
 
             }
−
            .hero-home {
+
 
−
                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 {
−
 
+
                  
−
                 border-color: #ffffff;
+
                 color: #00A6D6 !important;
−
                border-style: solid;
+
                 padding: 1%;
−
                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 {
+
−
                background-color: #ffffff;
+
−
                opacity: 0.75;
+
−
                text-decoration:none;
+
−
                color:#000000!important;
+
 
             }
 
             }
 +
.buttontu2:hover {
 +
text-decoration: none;
 +
color:#000000!important;
 +
}
  
−
            .buttontu3 {
 
  
−
                border-color: #ffffff;
+
.centerjustify2 {
−
                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 {
+
 
                 margin-left: auto;
 
                 margin-left: auto;
 
                 margin-right: auto;
 
                 margin-right: auto;
Line 286: Line 98:
 
                 text-align: justify;
 
                 text-align: justify;
 
             }
 
             }
−
            .centerjustify3 {
+
.boxhead{
−
                margin-left: auto;
+
background-color: rgba(0,110,167,0.9);
−
                 margin-right: auto;
+
                 color: #fff !important;
−
                 width: 30%;
+
                 padding: 2%;
−
                margin-top: 60px;
+
−
                margin-bottom: 60px;
+
−
                text-align: justify;
+
−
            }
+
−
            .hero-home {
+
 
                 text-align: center;
 
                 text-align: center;
−
                 position: absolute;
+
                 text-decoration: none;
−
                top: 90%;
+
−
                left: 50%;
+
−
                transform: translate(-50%, -50%);
+
−
                color: white;
+
−
            }
+
−
            .mySlides {display: none}
+
−
            img {vertical-align: middle;}
+
−
 
+
−
            /* Slideshow container */
+
−
            .slideshow-container {
+
−
                max-width: 100%;
+
−
                position: relative;
+
−
            }
+
−
 
+
−
 
+
−
            /* 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;
+
}
−
            }
+
−
            .w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
+
−
            @-webkit-keyframes fade {
+
−
                from{opacity: 0}
+
−
                to {opacity: 1}
+
  
−
            }
 
  
−
            @keyframes fade {
+
/* The dots/bullets/indicators */
−
                from{opacity: 0}
+
.dot {
−
                to {opacity: 1}
+
  cursor: pointer;
−
            }
+
  height: 20px;
−
            /*****************************************
+
  width: 20px;
−
            *  --------------------------------------*
+
  margin: 0 2px;
−
            *  Vars                                  *
+
  background-color: #bbb;
−
            *  --------------------------------------*
+
  border-radius: 50%;
−
            *****************************************/
+
  display: inline-block;
 +
  transition: background-color 0.6s ease;
 +
 
 +
 
 +
}
  
−
            $bg: #34495e;
+
.active, .dot:hover {
−
            $white: #fff;
+
  background-color: #717171;
−
            $raleway: 'Raleway', sans-serif;
+
}
  
−
            /*****************************************
+
/* Fading animation */
−
            *  --------------------------------------*
+
.fade {
−
            *  General                              *
+
  -webkit-animation-name: fade;
−
            *  --------------------------------------*
+
  -webkit-animation-duration: 3s;
−
            *****************************************/
+
  animation-name: fade;
 +
  animation-duration: 3s;
 +
}
  
−
            .hmcontainer {  
+
@-webkit-keyframes fade {
−
                padding: 50px;
+
  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) {
−
            *  Slick                                *
+
  .prev, .next,.text {font-size: 11px}
−
            *  --------------------------------------*
+
}
−
            *****************************************/
+
  
−
            .cl {
+
.centerfoto {
−
                padding:0%;
+
  display: block;
−
                cursor:pointer;
+
  margin-left: auto;
−
            }
+
  margin-right: auto;
−
 
+
  width: 50%;
−
            .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) {
+
−
                .row {
+
−
                    display: flex;
+
−
                    flex-wrap: wrap;
+
−
                }
+
−
                .left{
+
−
                    flex: 0 0 100%;
+
−
                    max-width: 100%;
+
−
                    width:100%;
+
−
                    padding:25px;
+
−
                    background-color:#000000;
+
−
                    padding-bottom: 0px;
+
−
                    margin-bottom: 0px;
+
−
                }
+
−
                .right {
+
−
                    flex: 0 0 100%;
+
−
                    max-width: 100%;
+
−
                    width:100%;
+
−
                    padding:25px;
+
−
                    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
+
−
                {
+
−
                    flex: 0 0 100%;
+
−
                    max-width: 100%;
+
−
                    width:100%;
+
−
                    padding:25px;
+
−
                    background-color:#000000;
+
−
                    padding-bottom: 0px;
+
−
                    margin-bottom: 0px;
+
−
                }
+
−
                .left2
+
−
                {
+
−
                    flex: 0 0 100%;
+
−
                    max-width: 100%;
+
−
                    width:100%;
+
−
                    padding:25px;
+
−
                    background-color:#fbfbfb;
+
−
                    padding-bottom: 0px;
+
−
                    margin-bottom: 0px;
+
−
                }
+
−
 
+
−
                img.sponsorpage {
+
−
                    display: block;
+
−
                    margin:auto;
+
−
                    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: 0px;
+
−
 
+
−
            }
+
−
.cardhome {
+
−
                width: 100%;
+
−
                height: auto;
+
 
}
 
}
−
.cardhome div {
 
−
                height: auto;
 
−
                width: 100%;
 
−
}}
 
−
#my_centered_buttons { display: flex; justify-content: center; }
 
−
 
 
         </style>
 
         </style>
  
Line 529: Line 173:
  
 
     <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="Banner">
−
<div class="hero-home">
+
 
 +
            <div class="display-2 mb-0">
 +
              <div class="slideshow-container">
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
<div class="mySlides fade">
 +
  <img class="centerfoto" style="border-radius:25px; width:30%;" src = "https://static.igem.org/mediawiki/2019/c/c8/T--TUDelft--HomeAfter.png" alt="Weronika" >
  
−
<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 class="mySlides fade">
−
                </div>
+
  
−
            </section>
+
  <img class="centerfoto" style="border-radius:25px; width:30%;"  src = "https://static.igem.org/mediawiki/2019/c/c8/T--TUDelft--HomeAfter.png" alt="Esther" >
−
        </div>
+
  
 +
</div>
  
−
        <div style="background-color:#fbfbfb;">
+
<div class="mySlides fade">
−
            <br>
+
  
−
            <div class="centerjustify2">
+
  <img class="centerfoto" style="border-radius:25px; width:30%;" src = "https://static.igem.org/mediawiki/2019/c/c8/T--TUDelft--HomeAfter.png" alt="Hafsa" >
−
<div id="ScrollDown1"></div>
+
−
                <div class="rowhm">
+
  
−
                    <a href="https://2019.igem.org/Team:TUDelft/Description"><div class="boxx columnhm">
+
</div>
−
                        <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%;">  
+
<br>
−
                        </div></a>
+
<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> &#xfe40; </b> <br> <b> &#xfe40;</b></p></a>
  
−
                    <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%;">
 
−
                        </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>
 
  
−
                <br>
+
</div>
−
                <br>
+
            </div>          
−
                <br>
+
        </div>      
−
                <br>
+
−
            </div>
+
 
         </div>
 
         </div>
  
−
        <div data-aos="fade-up" data-aos-duration="3000">
+
    <br>
−
            <div style="background-color:#fbfbfb;cursor: pointer;" onclick="window.location='https://2019.igem.org/Team:TUDelft/Description';">
+
    <br>
 +
    <br>
 +
<br>
 +
<div id="ScrollDown1"></div>
 +
   
 +
<br>
 +
    <br>
 +
<div class="centerjustify2">
  
−
                <div class="centerjustify2" style="text-align:center;">
+
    <div data-aos="fade-zoom-in" data-aos-duration="2000">
−
                    <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>
+
−
            </div>
+
−
        </div>
+
−
        <br>
+
−
        <br>
+
  
−
         <div class="row">
+
         <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 class="left" style="text-align:center;">
+
</div>
−
                    <div class="centerjustify2">
+
<br>
−
                        <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>
+
−
                        <p>hm</p>
+
−
 
+
−
                    </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">
+
−
                            <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>
+
−
                            <a href="https://2019.igem.org/Team:TUDelft/Description" class="buttontu "><b>Read More</b></a>                     
+
−
                        </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>
+
          
 +
           
 +
                <div id="right">
  
−
        <div  data-aos="fade-up" data-aos-duration="3000">
+
                    <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>
−
            <div style="background-color:#fbfbfb;cursor: pointer;" onclick="window.location='https://2019.igem.org/Team:TUDelft/Description';">
+
                    <br>
−
 
+
−
                <div class="centerjustify2" style="text-align: center;">
+
 
                     <br>
 
                     <br>
−
                     <div class="centerjustify2" style="text-align: center;"><p style=" font-size:xx-large;"> <b> How does Sci-Phi 29 work? </b> </p>
+
                     <a href="https://2019.igem.org/Team:TUDelft/Description" class="buttontu">Read More</a>
−
                    </div>
+
               
−
 
+
−
 
+
−
                </div>
+
−
                <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>
 
         </div>
 +
    </div>
  
−
        <div data-aos="fade-up" data-aos-duration="3000">
+
   
−
            <div style="text-align:center; background-color:#fbfbfb;" >
+
<br>
−
                <img class="banneroh10" src = "https://static.igem.org/mediawiki/2019/d/de/T--TUDelft--ArrowPattern.png" alt="Arrow">
+
<br><br>
−
            </div>
+
<br>
−
        </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 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>
+
          
−
        <div data-aos="fade-up" data-aos-duration="3000">
+
           
−
            <div style="text-align:center; background-color:#fbfbfb;" >
+
                <div id="right2" style="margin-top:0%;">
−
                <img class="banneroh" src = "https://static.igem.org/mediawiki/2019/9/9e/T--TUDelft--Arrowpatternsplit.png" alt="Arrow split">
+
                   
−
                <br>
+
                        <img src = "https://static.igem.org/mediawiki/2019/4/4e/T--TUDELFT--logowithtext.png" alt="Sci-Phi 29" style="width:80%";>  
−
                 <br>
+
                   
 +
                  
 
             </div>
 
             </div>
 
         </div>
 
         </div>
−
 
+
    </div>
−
 
+
<br>
−
        <div class="row">
+
<br>
−
            <div data-aos="fade-up" data-aos-duration="3000">
+
<br>
−
                <div class="left3" style="text-align:center;">
+
<br>
−
                    <div class="centerjustify2">
+
<br>
−
                        <center><img src = "https://static.igem.org/mediawiki/2019/f/f0/T--TUDelft--logorepli.png" alt="Orthogonality" style="width:46%;"></center>
+
<br>
−
 
+
        <div data-aos="fade-zoom-in" data-aos-duration="2000">
−
 
+
       
−
                        <br>
+
            <center class="boxhead" style=" font-size:xx-large;"> <b> How does Sci-Phi 29 works? </b> </center>
−
                        <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>
+
    </div>
−
                         <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>
+
    <div class="row">
−
                        <br>
+
        <div data-aos="fade-up" data-aos-duration="2000">
−
                        <center style="font-size:large;"><b>Find more about how we applied this unique system in our project!</b></center>
+
           
−
                        <br>
+
                <div id="left" style="margin-top:0%;">
−
                        <center><a target="_blank" href="https://2019.igem.org/Team:TUDelft/Design" class="buttontu "><b>Read More</b></a></center>                     
+
                   
−
                     </div>
+
                         <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>
−
 
+
       
−
             <div  data-aos="fade-up" data-aos-duration="3000">
+
              
−
 
+
                 <div id="right">
−
                 <div class="right3">
+
                     <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>
−
                     <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" >
+
−
 
+
−
                                <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>
+
−
                        <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 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>
 
                     <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;">
+
                     <a target="_blank" href="https://static.igem.org/mediawiki/2019/d/d1/T--TUDelft--orthogonalitywhite.png" class="buttontu ">Read More</a>
−
                    <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>
 +
        </div>
 +
    </div>
 +
   
 +
<br>
 +
<br><br>
 +
<br>
 +
    <div class="row">
 +
        <div data-aos="fade-up" data-aos-duration="2000">
 +
           
 +
                <div id="left2">
  
−
            <div  data-aos="fade-up" data-aos-duration="3000">
+
                    <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>
−
                <div style="background-color:#e1e1e1;" >
+
 
                     <br>
 
                     <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>
−
                     <br>
+
                     <a target="_blank" href="https://static.igem.org/mediawiki/2019/d/d1/T--TUDelft--orthogonalitywhite.png" class="buttontu ">Read More</a>
−
                    <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>
+
−
 
+
−
                                <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 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%;" >
 +
                   
 
                  
 
                  
−
               
 
−
                                            <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>
 
             </div>
 +
        </div>
 +
    </div>
  
−
 
+
    <br>
 +
    <br>
 +
    <br>
 +
    <br>
 +
    <br>
 +
</div>
  
−
        <br>
 
−
        <br>
 
  
−
        <script>
+
<script>
 +
var slideIndex = 1;
 +
var timer = null;
 +
showSlides(slideIndex);
  
−
            AOS.init();
+
function plusSlides(n) {
−
 
+
  clearTimeout(timer);
−
 
+
  showSlides(slideIndex += n);
−
            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)
+
  
 +
function currentSlide(n) {
 +
  clearTimeout(timer);
 +
  showSlides(slideIndex = n);
 +
}
  
−
            })
+
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, 4000);
 +
}
 +
</script>
 +
<script>
 +
         AOS.init();
 +
    </script>
  
 
     </body>
 
     </body>

Revision as of 03:45, 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