|
|
(60 intermediate revisions by 5 users not shown) |
Line 5: |
Line 5: |
| | | |
| <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Technion/CSS?action=raw&ctype=text/css" /> | | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Technion/CSS?action=raw&ctype=text/css" /> |
| + | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Technion/navbar/css?action=raw&ctype=text/css" /> |
| <style type="text/css"> | | <style type="text/css"> |
| body { | | body { |
− | background-color: rgb(173, 201, 219);} | + | background-color: rgb(255, 184, 106);} |
− |
| + | header{background-image: url("https://static.igem.org/mediawiki/2015/0/06/Technion_Israel_2015_newcomb.jpg"); background-size: 100%; background-repeat: no-repeat; width: 100%; height: 420px; margin-bottom: 0px;} |
− | .slides {height: 470px; | + | .title h1{ color: rgb(255, 184, 106); font-weight: bold; font-size: 100px; text-align: center; background: rgba(0, 0, 0, 0.8); font-family: sans-serif; font-style: Arial; height: 100px; text-shadow: black 6px 6px 6px; line-height: 80px;} |
| + | #bodyContent h1{margin-bottom: 0em;} |
| + | |
| + | .content{padding: 20px; margin-top: 0px; font-size: 16px;} |
| + | |
| + | .bottom{font-family: MV Boli; margin-bottom: 20px; width: 100%;} |
| + | .previous{width: 160px; float: left; text-align: center; background-color: rgb(255, 184, 106); border: 2px solid black; border-radius: 10px;} |
| + | .next{width: 160px; 30px; float: right; text-align: center; background-color: rgb(255, 184, 106); border: 2px solid black; border-radius: 10px;} |
| + | |
| + | .previous:hover{border: 4px solid black; font-weight: bold;} |
| + | .next:hover{border: 4px solid black; font-weight: bold;} |
| + | |
| + | .video_wrapper{margin-left: auto; margin-right:auto; text-align:center;} |
| + | |
| + | .img_center{text-align: center;} |
| + | .img_center{position: relative; |
| + | top: 50%; |
| + | text-align: center;} |
| + | .img_mid{text-align: center; margin-left: auto; margin-right: auto; width: 500px;} |
| + | |
| + | figure {text-align: center; color: gray;} |
| + | |
| + | .slides {height: 470px; |
| + | width: 700px; |
| + | padding: 20px; |
| + | margin: auto; |
| + | color: navy; |
| + | font-size: 12px;} |
| + | |
| + | .slidess {height: 370px; |
| width: 700px; | | width: 700px; |
| padding: 20px; | | padding: 20px; |
Line 23: |
Line 53: |
| #slide2-text-top {width: 370px; float: right;} | | #slide2-text-top {width: 370px; float: right;} |
| #slide3-text-top {float: right; | | #slide3-text-top {float: right; |
− | height: 150px; width: 330px;} | + | height: 150px; width: 340px;} |
| #slide3-text{width: 330px; float: left;} | | #slide3-text{width: 330px; float: left;} |
− | #slide4-text-top{float: right; width: 370px;} | + | #slide4-text-top{float: right; width: 330px;} |
− | #slide4-text-top h4{font-size: 16px;}
| + | |
− |
| + | |
− | | + | |
− | | + | |
− | | + | |
| | | |
| .sp-slideshow { | | .sp-slideshow { |
| + | position: relative; |
| + | margin: 0px auto; |
| width: 840px; | | width: 840px; |
| max-width: 1000px; | | max-width: 1000px; |
| min-width: 260px; | | min-width: 260px; |
| height: 560px; | | height: 560px; |
| + | border: 10px solid #ddd; |
| + | border: 10px solid rgba(255,255,255,0.9); |
| + | box-shadow: 0 2px 6px rgba(0,0,0,0.4); |
| + | } |
| + | .sp-slideshows { |
| + | position: relative; |
| + | margin: 0px auto; |
| + | width: 840px; |
| + | max-width: 1000px; |
| + | min-width: 260px; |
| + | height: 400px; |
| border: 10px solid #ddd; | | border: 10px solid #ddd; |
| border: 10px solid rgba(255,255,255,0.9); | | border: 10px solid rgba(255,255,255,0.9); |
Line 43: |
Line 81: |
| | | |
| .sp-content { | | .sp-content { |
− |
| + | position: relative; |
− | position: relative; | + | width: 100%; |
| + | height: 100%; |
| + | overflow: hidden; |
| + | } |
| + | |
| + | .sp-contents { |
| + | position: relative; |
| width: 100%; | | width: 100%; |
| height: 100%; | | height: 100%; |
Line 51: |
Line 95: |
| | | |
| .sp-parallax-bg { | | .sp-parallax-bg { |
− |
| + | position: absolute; |
| + | top: 0; |
| + | left: 0; |
| background-size: cover; | | background-size: cover; |
− | position: absolute; | + | width: 100%; |
| + | height: 100%; |
| + | overflow: hidden; |
| + | } |
| + | |
| + | .sp-parallax-bgs { |
| + | position: absolute; |
| top: 0; | | top: 0; |
| left: 0; | | left: 0; |
| + | background-size: cover; |
| width: 100%; | | width: 100%; |
| height: 100%; | | height: 100%; |
Line 62: |
Line 115: |
| | | |
| .sp-slideshow input { | | .sp-slideshow input { |
| + | position: absolute; |
| + | bottom: 15px; |
| + | left: 50%; |
| + | width: 9px; |
| + | height: 9px; |
| + | z-index: 1001; |
| + | cursor: pointer; |
| + | opacity: 0; |
| + | } |
| + | |
| + | .sp-slideshows input { |
| position: absolute; | | position: absolute; |
| bottom: 15px; | | bottom: 15px; |
Line 73: |
Line 137: |
| | | |
| .sp-slideshow input + label { | | .sp-slideshow input + label { |
| + | position: absolute; |
| + | bottom: 15px; |
| + | left: 50%; |
| + | width: 6px; |
| + | height: 6px; |
| + | display: block; |
| + | z-index: 1000; |
| + | border: 3px solid white; |
| + | border: 3px solid navy; |
| + | border-radius: 50%; |
| + | transition: background-color linear 0.1s; |
| + | } |
| + | |
| + | .sp-slideshows input + label { |
| position: absolute; | | position: absolute; |
| bottom: 15px; | | bottom: 15px; |
Line 87: |
Line 165: |
| | | |
| .sp-slideshow input:checked + label { | | .sp-slideshow input:checked + label { |
| + | background-color: white; |
| + | background-color: navy; |
| + | } |
| + | |
| + | .sp-slideshows input:checked + label { |
| background-color: white; | | background-color: white; |
| background-color: navy; | | background-color: navy; |
Line 97: |
Line 180: |
| .sp-selector-2, .button-label-2 { | | .sp-selector-2, .button-label-2 { |
| margin-left: -18px; | | margin-left: -18px; |
| + | } |
| + | |
| + | .sp-selector-3, .button-label-3 { |
| + | margin-left: 0px; |
| } | | } |
| .sp-selector-4, .button-label-4 { | | .sp-selector-4, .button-label-4 { |
| margin-left: 18px; | | margin-left: 18px; |
| + | } |
| + | |
| + | .sp-selectors-1, .button-labels-1 { |
| + | margin-left: -36px; |
| + | } |
| + | |
| + | .sp-selectors-2, .button-labels-2 { |
| + | margin-left: -18px; |
| + | } |
| + | .sp-selectors-3, .button-labels-3 { |
| + | margin-left: 0px; |
| + | } |
| + | .sp-selectors-4, .button-labels-4 { |
| + | margin-left: 18px; |
| + | } |
| + | .sp-selectors-5, .button-labels-5 { |
| + | margin-left: 36px; |
| } | | } |
| | | |
| | | |
| .sp-arrow { | | .sp-arrow { |
| + | position:absolute; |
| + | top:50%; |
| + | width:26px; |
| + | height:33px; |
| + | margin-top:-35px; |
| + | display:none; |
| + | opacity:0.8; |
| + | cursor:pointer; |
| + | z-index:1000; |
| + | background: url(http://i.imgur.com/L6FjFzo.png) no-repeat; |
| + | -webkit-transition:opacity linear 0.3s; |
| + | -moz-transition:opacity linear 0.3s; |
| + | -o-transition:opacity linear 0.3s; |
| + | -ms-transition:opacity linear 0.3s; |
| + | transition:opacity linear 0.3s; } |
| + | |
| + | .sp-arrows { |
| position:absolute; | | position:absolute; |
| top:50%; | | top:50%; |
Line 124: |
Line 245: |
| | | |
| .sp-arrow:active { | | .sp-arrow:active { |
| + | margin-top:-35px; } |
| + | |
| + | .sp-arrows:hover { |
| + | opacity:1; } |
| + | |
| + | .sp-arrows:active { |
| margin-top:-35px; } | | margin-top:-35px; } |
| | | |
Line 136: |
Line 263: |
| .sp-selector-3:checked ~ .sp-arrow.sp-a2, | | .sp-selector-3:checked ~ .sp-arrow.sp-a2, |
| .sp-selector-4:checked ~ .sp-arrow.sp-a3 { | | .sp-selector-4:checked ~ .sp-arrow.sp-a3 { |
| + | left: 15px; |
| + | display: block; |
| + | background-position: top left; |
| + | } |
| + | |
| + | .sp-selectors-1:checked ~ .sp-arrows.sps-a2, |
| + | .sp-selectors-2:checked ~ .sp-arrows.sps-a3, |
| + | .sp-selectors-3:checked ~ .sp-arrows.sps-a4, |
| + | .sp-selectors-4:checked ~ .sp-arrows.sps-a5 { |
| + | right: 15px; |
| + | display: block; |
| + | background-position: top right; |
| + | } |
| + | .sp-selectors-2:checked ~ .sp-arrows.sps-a1, |
| + | .sp-selectors-3:checked ~ .sp-arrows.sps-a2, |
| + | .sp-selectors-4:checked ~ .sp-arrows.sps-a3, |
| + | .sp-selectors-5:checked ~ .sp-arrows.sps-a4{ |
| left: 15px; | | left: 15px; |
| display: block; | | display: block; |
Line 146: |
Line 290: |
| | | |
| .sp-slideshow input:checked ~ .sp-content .sp-parallax-bg { | | .sp-slideshow input:checked ~ .sp-content .sp-parallax-bg { |
| + | transition: background-position linear 0.7s; |
| + | } |
| + | |
| + | .sp-slideshows input:checked ~ .sp-contents { |
| + | transition: background-position linear 0.6s, background-color linear 0.8s; |
| + | } |
| + | |
| + | .sp-slideshows input:checked ~ .sp-contents .sp-parallax-bgs { |
| transition: background-position linear 0.7s; | | transition: background-position linear 0.7s; |
| } | | } |
Line 185: |
Line 337: |
| background-position: 0 0; | | background-position: 0 0; |
| } | | } |
| + | |
| + | |
| + | input.sp-selectors-1:checked ~ .sp-contents { |
| + | background-position: 0 0; |
| + | background-color: white; |
| + | } |
| + | |
| + | input.sp-selectors-2:checked ~ .sp-contents { |
| + | background-position: 0 0; |
| + | background-color: white; |
| + | } |
| + | |
| + | input.sp-selectors-3:checked ~ .sp-contents { |
| + | background-position: 0 0; |
| + | background-color: white; |
| + | } |
| + | |
| + | input.sp-selectors-4:checked ~ .sp-contents { |
| + | background-position: 0 0; |
| + | background-color: white; |
| + | } |
| + | |
| + | input.sp-selectors-5:checked ~ .sp-contents { |
| + | background-position: 0 0; |
| + | background-color: white; |
| + | } |
| + | |
| + | |
| + | input.sp-selectors-1:checked ~ .sp-contents .sp-parallax-bgs { |
| + | background-position: 0 0; |
| + | } |
| + | |
| + | input.sp-selectors-2:checked ~ .sp-contents .sp-parallax-bgs { |
| + | background-position: 0 0; |
| + | } |
| + | |
| + | input.sp-selectors-3:checked ~ .sp-contents .sp-parallax-bgs { |
| + | background-position: 0 0; |
| + | } |
| + | |
| + | input.sp-selectors-4:checked ~ .sp-contents .sp-parallax-bgs { |
| + | background-position: 0 0; |
| + | } |
| + | |
| + | input.sp-selectors-5:checked ~ .sp-contents .sp-parallax-bgs { |
| + | background-position: 0 0; |
| + | } |
| + | |
| | | |
| | | |
Line 206: |
Line 406: |
| float: left; | | float: left; |
| opacity: 1; | | opacity: 1; |
− | transition: opactiy ease-in 0.4s 0.8s; | + | transition: opacity ease-in 0.4s 0.8s; |
| } | | } |
| | | |
| .sp-slider > li img { | | .sp-slider > li img { |
| + | box-sizing: border-box; |
| + | display: block; |
| + | margin: 0 auto; |
| + | padding: 40px 0 50px 0; |
| + | max-height: 100%; |
| + | max-width: 100%; |
| + | } |
| + | |
| + | .sp-sliders { |
| + | position: relative; |
| + | left: 0; |
| + | width: 500%; |
| + | height: 100%; |
| + | list-style: none; |
| + | margin: 0; |
| + | padding: 0; |
| + | transition: left ease-in 0.8s; |
| + | } |
| + | .sp-sliders > li { |
| + | color: white; |
| + | width: 20%; |
| + | box-sizing: border-box; |
| + | height: 100%; |
| + | padding: 0 0px; |
| + | float: left; |
| + | opacity: 1; |
| + | transition: opacity ease-in 0.4s 0.8s; |
| + | } |
| + | |
| + | |
| + | .sp-sliders > li img { |
| box-sizing: border-box; | | box-sizing: border-box; |
| display: block; | | display: block; |
Line 232: |
Line 463: |
| input.sp-selector-4:checked ~ .sp-content .sp-slider { | | input.sp-selector-4:checked ~ .sp-content .sp-slider { |
| left: -300%; | | left: -300%; |
| + | } |
| + | |
| + | |
| + | input.sp-selectors-1:checked ~ .sp-contents .sp-sliders { |
| + | left: 0; |
| + | } |
| + | |
| + | input.sp-selectors-2:checked ~ .sp-contents .sp-sliders { |
| + | left: -100%; |
| + | } |
| + | |
| + | input.sp-selectors-3:checked ~ .sp-contents .sp-sliders { |
| + | left: -200%; |
| + | } |
| + | |
| + | input.sp-selectors-4:checked ~ .sp-contents .sp-sliders { |
| + | left: -300%; |
| + | } |
| + | |
| + | input.sp-selectors-5:checked ~ .sp-contents .sp-sliders { |
| + | left: -400%; |
| } | | } |
| | | |
Line 239: |
Line 491: |
| input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3), | | input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3), |
| input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4){ | | input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4){ |
| + | opacity: 1; |
| + | } |
| + | |
| + | input.sp-selectors-1:checked ~ .sp-contents .sp-sliders > li:first-child, |
| + | input.sp-selectors-2:checked ~ .sp-contents .sp-sliders > li:nth-child(2), |
| + | input.sp-selectors-3:checked ~ .sp-contents .sp-sliders > li:nth-child(3), |
| + | input.sp-selectors-4:checked ~ .sp-contents .sp-sliders > li:nth-child(4), |
| + | input.sp-selectors-5:checked ~ .sp-contents .sp-sliders > li:nth-child(5){ |
| opacity: 1; | | opacity: 1; |
| } | | } |
Line 249: |
Line 509: |
| <body> | | <body> |
| | | |
− | <!---------------------------------------dropdown menu-----------------------------------> | + | <!-------------------------------------nav-bar----------------------------------------------> |
− | <div class="dropdown"> | + | <div class="nav_menu"> |
− | <a href="https://2015.igem.org/Team:Technion_Israel">
| + | |
− | <img src="https://static.igem.org/mediawiki/2015/c/c1/Team_Technion_Navbar_Home.png" alt="Home" id="home_nav" /> | + | <a href="https://2015.igem.org/Team:Technion_Israel" style="position:fixed; width: 170px; display:inline-block; text-decoration: none;" class="nav_home_link"> |
− | <!--<div id="home_text">Navigate</div>-->
| + | <img src="https://static.igem.org/mediawiki/2015/c/c1/Team_Technion_Navbar_Home.png" alt="Home" id="nav_home" /><div class="home_text">Home</div></a> |
− | </a>
| + | |
− | <nav>
| + | <div class="main_buttons"> |
− | <div class="main1">
| + | <div id="project" class="main_button">Project</div> |
− | <a href="https://2015.igem.org/Team:Technion_Israel/Project">Project</a>
| + | <div id="Lab_Notebook" class="main_button">Lab Notebook</div> |
− | <span class="btn-bg1"></span>
| + | <div id="Human_Practices" class="main_button">Human Practices</div> |
− | <div class="sub1">
| + | <div id="Judging_Criteria" class="main_button">Judging Criteria</div> |
− | <a href="https://2015.igem.org/Team:Technion_Israel/Project/Overview">Overview</a>
| + | <div id="Team" class="main_button">Team</div> |
− | <a href="https://2015.igem.org/Team:Technion_Israel/Project/Bacillus">Bacillus</a>
| + | |
− | <a href="https://2015.igem.org/Team:Technion_Israel/Project/E_Coli">E.Coli</a>
| + | |
− | <a href="https://2015.igem.org/Team:Technion_Israel/Project/NADPH">NADPH</a>
| + | |
− | <a href="https://2015.igem.org/Team:Technion_Israel/Project/Comb">Comb</a>
| + | |
− | <a href="https://2015.igem.org/Team:Technion_Israel/Modeling">Modeling</a>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | <div class="main2">
| + | |
− | <a href="https://2015.igem.org/Team:Technion_Israel/Team">Team</a>
| + | |
− | <span class="btn-bg2"></span>
| + | |
− | <div class="sub2">
| + | |
− | <a href="https://2015.igem.org/Team:Technion_Israel/Team/About_Us">About Us</a>
| + | |
− | <a href="https://2015.igem.org/Team:Technion_Israel/Attributions">Attributions</a>
| + | |
− | <a href="https://2015.igem.org/Team:Technion_Israel/Team/Sponsors">Sponsors</a>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | <div class="main3">
| + | |
− | <a href="https://2015.igem.org/Team:Technion_Israel/Lab_Notebook">Lab Notebook</a>
| + | |
− | <span class="btn-bg3"></span>
| + | |
− | <div class="sub3">
| + | |
− | <a href="https://2015.igem.org/Team:Technion_Israel/Lab_Notebook/Overview">Overview</a>
| + | |
− | <a href="https://2015.igem.org/Team:Technion_Israel/Lab_Notebook/Protocols">Protocols</a>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | <div class="main4">
| + | |
− | <a href="https://2015.igem.org/Team:Technion_Israel/Practices">Human Practices</a>
| + | |
− | <span class="btn-bg4"></span>
| + | |
− | <div class="sub4">
| + | |
− | <a href="https://2015.igem.org/Team:Technion_Israel/Practices/Education">Education</a>
| + | |
− | <a href="https://2015.igem.org/Team:Technion_Israel/Practices/Publications">Publications</a>
| + | |
− | <a href="https://2015.igem.org/Team:Technion_Israel/Practices/Market_Research">Market Research</a>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | <div class="main5">
| + | |
− | <a href="https://2015.igem.org/Team:Technion_Israel/Judging_Criteria">Judging Criteria</a>
| + | |
− | <span class="btn-bg5"></span>
| + | |
− | <div class="sub5">
| + | |
− | <a href="https://2015.igem.org/Team:Technion_Israel/Parts">Parts</a>
| + | |
− | <a href="https://2015.igem.org/Team:Technion_Israel/Judging_Criteria/Achievements">Achievements</a>
| + | |
− | <a href="https://2015.igem.org/Team:Technion_Israel/Collaborations">Collaborations</a>
| + | |
− | <a href="https://2015.igem.org/Team:Technion_Israel/Design">Design</a>
| + | |
− | <a href="https://2015.igem.org/Team:Technion_Israel/Entrepreneurship">Entrepreneurship</a>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | </nav>
| + | |
| </div> | | </div> |
− | <!---------------------------------------dropdown menu-end-----------------------------------> | + | <nav> |
| + | <div id="Team_Links" class="main_links"> |
| + | <a href="https://2015.igem.org/Team:Technion_Israel/Team/About_Us" id="Team_Links_About_Us">About Us</a> |
| + | <a href="https://2015.igem.org/Team:Technion_Israel/Attributions" id="Team_Links_Attributions">Attributions</a> |
| + | <a href="https://2015.igem.org/Team:Technion_Israel/Team/Sponsors" id="Team_Links_Sponsors">Sponsors</a> |
| + | <a href="https://2015.igem.org/Team:Technion_Israel/Team/gallery" id="Team_Links_gallery">Gallery</a> |
| + | </div> |
| + | <div id="Judging_Criteria_Links" class="main_links"> |
| + | <a href="https://2015.igem.org/Team:Technion_Israel/Parts" id="Judging_Criteria_Links_Parts">Parts</a> |
| + | <a href="https://2015.igem.org/Team:Technion_Israel/Judging_Criteria/Achievements" id="Judging_Criteria_Links_Achievements">Achievements</a> |
| + | <a href="https://2015.igem.org/Team:Technion_Israel/Collaborations" id="Judging_Criteria_Links_Collaborations">Collaborations</a> |
| + | </div> |
| + | <div id="Human_Practices_Links" class="main_links"> |
| + | <a href="https://2015.igem.org/Team:Technion_Israel/Practices">Practices</a> |
| + | <a href="https://2015.igem.org/Team:Technion_Israel/Practices/safety">Safety</a> |
| + | </div> |
| + | <div id="Lab_Notebook_Links" class="main_links"> |
| + | <a href="https://2015.igem.org/Team:Technion_Israel/Lab_Notebook/Overview">Overview</a> |
| + | <a href="https://2015.igem.org/Team:Technion_Israel/Lab_Notebook/Protocols">Protocols</a> |
| + | </div> |
| + | <div id="project_Links" class="main_links"> |
| + | <a href="https://2015.igem.org/Team:Technion_Israel/Project/Overview">Overview</a> |
| + | <a href="https://2015.igem.org/Team:Technion_Israel/Project/Secretion">Secretion</a> |
| + | <a href="https://2015.igem.org/Team:Technion_Israel/Project/Expression">Expression</a> |
| + | <a href="https://2015.igem.org/Team:Technion_Israel/Project/Cofactor">Cofactor</a> |
| + | <a href="https://2015.igem.org/Team:Technion_Israel/Design">Comb</a> |
| + | <a href="https://2015.igem.org/Team:Technion_Israel/Modeling">Modeling</a> |
| + | <a href="https://2015.igem.org/Team:Technion_Israel/Project/Results">Results</a> |
| + | </div> |
| + | </nav> |
| + | </div> |
| + | <!-------------------------------------nav-bar-end------------------------------------------> |
| | | |
− | <div class="content"> | + | <!-------------------------------------up-button--------------------------------------------> |
− | <header> | + | <div class="up_button" style="text-decoration: none;"> |
− | <img src="https://static.igem.org/mediawiki/2015/5/52/Technion_Israel_2015_Design-heading.jpg" alt="Design" width="914px" height="300px"/> | + | <a href="#" class="up_link" style="text-decoration: none;"> |
− | </header> | + | <div class="up_button_text" style="text-decoration: none;">UP</div> |
| + | <img src="https://static.igem.org/mediawiki/2015/b/b8/Technion_2015_Up_geek.png" alt="Scroll to top" /> |
| + | </a> |
| + | </div> |
| + | <!-------------------------------------up-button-end----------------------------------------> |
| + | <header> |
| + | </header> |
| + | <div class="title"> |
| + | <h1><b>The Comb</b></h1> |
| + | </div> |
| + | |
| + | <div class="content"> |
| <div class="text"> | | <div class="text"> |
− | <h1><b>Why design?</b></h1> | + | <h2><b>Why design?</b></h2> |
− | <p>When we came up with the idea of having two different types of bacteria work together to break down dihydrotestosteron (DHT), we were faced with a serious | + | <p>When we came up with the idea of having two different types of bacteria work together to break down dihydrotestosterone (DHT), we were faced with a serious |
− | challenge. We suspected that consumers would be discouraged by a product requiring the application of two different types of bacteria and,in addition, we were hesitant about the safety repercussions. | + | challenge. We suspected that consumers would be discouraged by a product requiring the application of two different types of bacteria and, in addition, we were hesitant about the safety repercussions. |
− | We were faced with another problem as well: </p>
| + | While our project involved using genetically engineered bacteria for two purposes, and therefore two types of bacteria, we wanted to find a way to prevent the <i>Escherichia coli</i> |
| + | from reaching the consumer's scalp, in order to increase the chances of the <i>Bacillus subtilis's</i> survival, and to minimize |
| + | side effects that may occur with the use of such a product. </p> |
| + | |
| + | <p>The solution was found through consulting with multiple academics and an industrial engineer. Before the final prototype was printed, we conducted a focus group survey about the comfort and efficiency of using the comb, which helped us plan important changes for the final prototype.</p> |
| + | |
| + | <h2><b>The Brainstorming Process</b></h2> |
| + | <p>Once we set out to search for a solution for combining the components of our project, we quickly came to consider the idea of a comb. After much consultation with academic staff, an industrial engineer, and friends, we designed a comb composed of a comb body with inner tubes/liquid pathways, a handle, and a syringe.</p> |
| | | |
| | | |
| <!-------begin slider-------> | | <!-------begin slider-------> |
| | | |
| + | <h2><b>The Comb Prototypes</b></h2> |
| + | <p>The comb was designed in "Solidworks" and was printed in a 3D printer.</p> |
| <div class="container"> | | <div class="container"> |
| | | |
Line 360: |
Line 626: |
| <p>However, within, the pathways are structured in such a way to | | <p>However, within, the pathways are structured in such a way to |
| uniformly distribute the treatment formula to the scalp. Simultaneously, | | uniformly distribute the treatment formula to the scalp. Simultaneously, |
− | the comb massages the scalp, removing excessive fat and helping restoring the hair follicle growth.</p> | + | the comb massages the scalp and gives the consumer full control of the spread of the product.</p> |
| </div> | | </div> |
| </div> | | </div> |
Line 369: |
Line 635: |
| <div id="slide2-text-top"> | | <div id="slide2-text-top"> |
| <h1><b>Prototype #2</b></h1> | | <h1><b>Prototype #2</b></h1> |
− | <p>We directed our focus on improving the flow through the pathways. We moved the entranceway for the treatment formula to the middle and started considering about a comfortable way for the patient to hold the comb.</p> | + | <p>We directed our focus on improving the flow through the pathways. We moved the entranceway for the treatment formula to the middle and started considering about a comfortable way for the user to hold the comb.</p> |
| </div> | | </div> |
| </div> | | </div> |
Line 395: |
Line 661: |
| <div id="slide4-text-top"> | | <div id="slide4-text-top"> |
| <h1><b>Prototype #4</b></h1> | | <h1><b>Prototype #4</b></h1> |
− | <h4><i>The final prototype for the iGEM 2015 competition</i></h4> | + | <p><b><i>The final prototype for the iGEM 2015 competition</i></b></p> |
− | <p>The final model has a unique, aesthetic design. It can be easily adjusted to fit any hand size.</p> | + | <p>The final design has a unique, aesthetic appearance. It can be easily adjusted to fit any hand size- an additional feature we added thanks to the responses from the focus group survey we conducted(see below).</p> |
| </div> | | </div> |
| </div> | | </div> |
| <div id="slide1-text"> | | <div id="slide1-text"> |
| <p>After fulfilling the criteria for efficiency and cleanness, we turned our attention to the aesthetic demands as well as accommodating the responses we received from our focus group (see results below). </p> | | <p>After fulfilling the criteria for efficiency and cleanness, we turned our attention to the aesthetic demands as well as accommodating the responses we received from our focus group (see results below). </p> |
− | <p>From the first draft to the final product presented to you,</br> the comb planning process focused on the ease of use,</br> together with an innovative | + | <p>From the first draft to the final product presented to you, the comb planning process focused on the ease of use, together with an innovative |
− | and eye-catching design</br> which intrigues the user from first sight. </p> | + | and eye-catching design which intrigues the user from first sight. </p> |
| </div> | | </div> |
| </div> | | </div> |
Line 413: |
Line 679: |
| </div> | | </div> |
| <!-------end of slider-------> | | <!-------end of slider-------> |
− | </div> | + | </br><h2><b>The Mathematics Behind the Comb</b></h2> |
| + | <p>As explained in the slideshow above, prototype #3 took into consideration the flow geometry required for uniform distribution of liquids exiting the comb. To obtain even flow for each tube and each comb tooth, we used a specially designed tube geometry. From the syringe entry at the top of the comb, each tube splits into two tubes, periodically, resulting 16 parallel, even-flow tubes at the comb fluid exit to the scalp. We used fluid mechanics equations with different tube sizes (different widths, lengths, and shapes) until we converged to our current ideal dimensions. The equations we used are presented in Figure 1 below.</p> |
| + | <figure><img class="img_mid" src="https://static.igem.org/mediawiki/2015/4/4b/Technion_Israel_2015_comb-equations.png"><figcaption>Figure 1: Flow equations for the determination of ideal tube dimensions</figcaption></figure> |
| + | |
| + | </br><h2><b>The Syringe</b></h2> |
| + | |
| + | <p>The comb, on its own, is not customized enough to fit our purposes. Therefore, we needed to consider how exactly our formula would be incorporated into the comb. At first we considered using two small containers which would be opened by the consumer and placed in the comb. However, after putting some thought into it, we realized that this strategy could be messy and inconvenient. It also left us with a product requiring two different types of genetically modified bacteria being placed on the head from separate containers. Therefore, we developed the idea of using a syringe.</p> |
| + | <p>The syringe below is an illustration of our syringe design.</p> |
| + | <figure><img src="https://static.igem.org/mediawiki/2015/2/25/Techion_Israel_2015_Design_syringe.png" width="100%" alt="syringe"/><figcaption>Figure 2: 2-dimensional illustration of the syringe for inserting the engineered bacterium into the comb</figcaption></figure> |
| + | <p><b>Explanation:</b></br> |
| + | <ul style="list-style: circle;"><li>The <i>E. coli</i> overproducing NADPH is represented by the <span style="color:red; font-weight:bold;">red</span> section. It will be present in the syringe at the time the consumer purchases it.</li> |
| + | <li>The <span style="color:blue; font-weight:bold;">blue</span> section represents the <i>B. subtilis</i> engineered to secrete the 3α-HSD enzyme. The <i>B. subtilis</i> will be sucked into the syringe from a container also purchased by the consumer as part of the kit.</li> |
| + | <li>In between the sections is a filter membrane- small enough to allow the NADPH to pass through, while preventing the <i>E. coli</i> from reaching the user's scalp. As the piston is pressed during use, the NADPH will pass through the membrane and into the <i>B. subtilis</i>-containing solution. In other words, while pushing down the piston, the NADPH mixes with the enzyme, making the process more efficient.</li></ul></p> |
| + | |
| + | <p>This mixture will reach the scalp of the user, creating an engineered microbiome environment which contains enough NADPH for the 3α-HSD enzyme to work efficiently to break down the DHT in the hair follicles.</p> |
| + | |
| + | <p>For now, we have printed the comb from white polymer resin using a 3-D printer, but an advantage to using 3-D printing is that, in the future, it will easily allow us to print the comb in various materials (which can be softer), so the touch with the scalp and hair will be much softer.</p> |
| + | <p>In addition to our purposes for the comb, we believe that it has many other potential applications and can be used with different substances such as a lice cream, or to be used by hair stylists to apply hair color on the hair, and more.</p></br> |
| + | <p>The movie below simulates the structure of the comb.</p> |
| + | |
| + | <div class="video_wrapper" width="100%"> |
| + | <video controls poster="https://static.igem.org/mediawiki/2015/2/28/Team_Technion_Logo_White.png" width="100%" height="500px"> |
| + | <source src="https://static.igem.org/mediawiki/2015/4/46/Technion_Israel_2015_combnew.mp4" type="video/mp4" width="100%"> |
| + | Your browser does not support the video tag. |
| + | </video> |
| + | </div> |
| + | |
| + | |
| + | </br><h2><b>Checking Real-life Conditions</b></h2> |
| + | |
| + | <p>Our final tube dimensions suit the viscosity we chose to work with. In order to test out the comb, we created a solution with the proper viscosity, composed of 80% glycerol and 20% LB. In order to check if this solution would allow our bacteria to live, we did a “shelf-life” experiment. In that experiment, we also checked the conditions in which our bacteria could exist inside the syringe and containers, respectively. We found out that the most suitable temperature is at -18<sup>o</sup>C (same temperature in home freezer). Check out our <a href="https://2015.igem.org/Team:Technion_Israel/Lab_Notebook/Protocols" target="_blank">protocols</a> to see how we did the experiment. </p> |
| + | <p>Click <a href="https://2015.igem.org/Team:Technion_Israel/Project/Results#shelf-life_results" target="_blank">here</a> to see the full results.</p> |
| + | |
| + | <h2><a id="focusgroup name="focusgroup"></a><b>Focus Group Survey</b></h2> |
| + | <p>Consumer feedback and comfort of use was one of our main concerns when developing the comb and syringe. Once the final prototype of the comb was printed, we developed a focus group survey. The 15 respondents including balding and bald men. Their responses to our questions are featured below.</p> |
| + | </br> |
| + | <div class="containers"> |
| + | |
| + | <div class="sp-slideshows"> |
| + | |
| + | <input type="radio" id="buttons-1" name="radio-sets" class="sp-selectors-1" checked="checked" /> |
| + | <label for="buttons-1" class="button-labels-1"></label> |
| + | |
| + | <input type="radio" id="buttons-2" name="radio-sets" class="sp-selectors-2" /> |
| + | <label for="buttons-2" class="button-labels-2"></label> |
| + | |
| + | <input type="radio" id="buttons-3" name="radio-sets" class="sp-selectors-3" /> |
| + | <label for="buttons-3" class="button-labels-3"></label> |
| + | |
| + | <input type="radio" id="buttons-4" name="radio-sets" class="sp-selectors-4" /> |
| + | <label for="buttons-4" class="button-labels-4"></label> |
| + | |
| + | <input type="radio" id="buttons-5" name="radio-sets" class="sp-selectors-5" /> |
| + | <label for="buttons-5" class="button-labels-5"></label> |
| + | |
| + | |
| + | <label for="buttons-1" class="sp-arrows sps-a1"></label> |
| + | <label for="buttons-2" class="sp-arrows sps-a2"></label> |
| + | <label for="buttons-3" class="sp-arrows sps-a3"></label> |
| + | <label for="buttons-4" class="sp-arrows sps-a4"></label> |
| + | <label for="buttons-5" class="sp-arrows sps-a5"></label> |
| + | |
| + | |
| + | <div class="sp-contents"> |
| + | <div class="sp-parallax-bgs"></div> |
| + | <ul class="sp-sliders clearfix"> |
| + | <li> |
| + | <div class="slidess" style="background-image: url(https://static.igem.org/mediawiki/2015/1/1d/Technion_iGEM_2015_Design_Focus_survey_1.png); background-repeat: no-repeat; background-size: 100%;"> |
| + | </div> |
| + | </li> |
| + | <li> |
| + | <div class="slidess" style="background-image: url(https://static.igem.org/mediawiki/2015/f/fe/Technion_iGEM_2015_Design_Focus_survey_2.png); background-repeat: no-repeat; background-size: 100%;"> |
| + | </div></li> |
| + | <li> |
| + | <div class="slidess" style="background-image: url(https://static.igem.org/mediawiki/2015/2/24/Technion_Israel_2015_design_survey_3.png); background-repeat: no-repeat; background-size: 100%;"> |
| + | </div></li> |
| + | <li> |
| + | <div class="slidess" style="background-image: url(https://static.igem.org/mediawiki/2015/e/ec/Techion_Israel_2015_Design_survey_4.png); background-repeat: no-repeat; background-size: 100%;"> |
| + | </div></li> |
| + | <li> |
| + | <div class="slidess" style="background-image: url(https://static.igem.org/mediawiki/2015/e/e1/Techion_Israel_2015_Design_survey_5.png); background-repeat: no-repeat; background-size: 100%;"> |
| + | </div></li> |
| + | </ul> |
| + | |
| + | </div><!-- sp-contents --> |
| + | |
| + | |
| + | </div> <!-- sp-slideshows --> |
| + | </div> |
| + | <!-------end of slider2-------> |
| + | </br><p>As a result of the feedback we receive through this survey, we made key changes to our comb, which can be seen in the final prototype:</br> |
| + | <ul style="list-style: circle"><li>New aesthetic design</li> |
| + | <li>Adjustable handle which can easily be modified to fit any hand size</li></ul></p> |
| + | <h2><b>Conclusion</b></h2> |
| + | <p>After much thought and effort, the final result is the design that will be presented at the Giant Jamboree.</p> |
| + | <p>The comb provides clear and defined benefits compared to a topical mixture applied with the hands or gloves:</br></br> |
| + | <ol><li><b>Cleanliness-</b> The comb and syringe combination allows the consumer to apply the product, whilst never having to touch the bacteria.</li></br> |
| + | <li><b>Reusable-</b>The reusable comb can be sterilized with ethanol between uses, while the syringe can be sterilized with ethanol as well and then discarded. The result |
| + | is a relatively environmentally friendly product.</li></br> |
| + | <li><b>Uniform application-</b>The comb, along with the syringe, offers an integrative solution to combining the components of our formula, while allowing for comfortable |
| + | and uniform application on the scalp of the consumer. This helps ensure that each hair follicle is reached, making our product as effective as possible.</li></br> |
| + | <li><b>Safety- </b>Besides cleanliness, the fact that the waste stays in the syringe, makes it easier to treat. Furthermore, the use itself is safe, since the consumer doesn't come in contect with the solution and the latter doesn't influence his natural skin microbiome and the person's environment.</li> |
| + | |
| + | </ol> |
| + | </p> |
| + | </br> |
| + | <p><b>And last, but certainly not least....a demonstration of using the comb and syringe, complete with the final prototype for the competition. Enjoy!</b></p> |
| + | <div class="video_wrapper" width="100%"> |
| + | <video controls poster="https://static.igem.org/mediawiki/2015/2/28/Team_Technion_Logo_White.png" width="100%"> |
| + | <source src="https://static.igem.org/mediawiki/2015/e/ec/Technion_Israel_2015_combdemo.mp4" type="video/mp4" width="100%"> |
| + | Your browser does not support the video tag. |
| + | </video> |
| + | </div> |
| + | |
| + | <div class="bottom"> |
| + | <div class="previous"> |
| + | <a href="https://2015.igem.org/Team:Technion_Israel/Project/Cofactor">Previous<small>(Cofactor)</small></a> |
| + | </div> |
| + | <div class="next"> |
| + | <a href="https://2015.igem.org/Team:Technion_Israel/Modeling">Next<small>(Modeling)</small></a> |
| + | </div> |
| + | </div> |
| + | </div> |
| </div> | | </div> |
| | | |
Line 433: |
Line 821: |
| | | |
| <script type="text/javascript" src="jquery-1.8.0.min.js"></script> | | <script type="text/javascript" src="jquery-1.8.0.min.js"></script> |
| + | <script type="text/javascript" src="https://2015.igem.org/Template:Technion/navbar/javascript? |
| + | action=raw&ctype=text/javascript"></script> |
| <script type="text/javascript" src="https://2015.igem.org/Template:Technion/Javascript? | | <script type="text/javascript" src="https://2015.igem.org/Template:Technion/Javascript? |
| action=raw&ctype=text/javascript"></script> | | action=raw&ctype=text/javascript"></script> |
| </body> | | </body> |
| </html> | | </html> |