Difference between revisions of "Team:Technion Israel/Design"

 
(66 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;}
−
width: 800px;
+
#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;
 
padding: 20px;
 
padding: 20px;
 
margin: auto;
 
margin: auto;
Line 18: Line 48:
 
#placeholder1 {height: 300px;}
 
#placeholder1 {height: 300px;}
 
#slide1-text-top {float: right;
 
#slide1-text-top {float: right;
−
height: 100px; width: 450px;}
+
height: 100px; width: 370px;}
−
#slide1-text{width: 450px;
+
#slide1-text{width: 370px;
 
height: 100px;}
 
height: 100px;}
−
#slide2-text-top {width: 400px; float: right;}
+
#slide2-text-top {width: 370px; float: right;}
 
#slide3-text-top {float: right;
 
#slide3-text-top {float: right;
−
height: 100px; width: 400px;}
+
height: 150px; width: 340px;}
−
#slide3-text{width: 400px;}
+
#slide3-text{width: 330px; float: left;}
−
#slide4-text-top{float: right; width: 400px;}
+
#slide4-text-top{float: right; width: 330px;}
−
#slide4-text-top h4{font-size: 16px;}
+
−
+
  
−
+
.sp-slideshow {
−
</style>
+
  position: relative;
 +
  margin: 0px auto;
 +
  width: 840px;
 +
  max-width: 1000px;
 +
  min-width: 260px;
 +
  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 rgba(255,255,255,0.9);
 +
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
 +
}
 +
 
 +
.sp-content {
 +
  position: relative;
 +
  width: 100%;
 +
  height: 100%;
 +
  overflow: hidden;
 +
}
 +
 
 +
.sp-contents {
 +
  position: relative;
 +
  width: 100%;
 +
  height: 100%;
 +
  overflow: hidden;
 +
}
 +
 
 +
.sp-parallax-bg {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  background-size: cover;
 +
  width: 100%;
 +
  height: 100%;
 +
  overflow: hidden;
 +
}
 +
 
 +
.sp-parallax-bgs {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  background-size: cover;
 +
  width: 100%;
 +
  height: 100%;
 +
  overflow: hidden;
 +
}
 +
 
 +
.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;
 +
  bottom: 15px;
 +
  left: 50%;
 +
  width: 9px;
 +
  height: 9px;
 +
  z-index: 1001;
 +
  cursor: pointer;
 +
  opacity: 0;
 +
}
 +
 
 +
.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;
 +
  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-slideshow input:checked + label {
 +
  background-color: white;
 +
  background-color: navy;
 +
}
 +
 
 +
.sp-slideshows input:checked + label {
 +
  background-color: white;
 +
  background-color: navy;
 +
}
 +
 
 +
.sp-selector-1, .button-label-1 {
 +
  margin-left: -36px;
 +
}
 +
 
 +
.sp-selector-2, .button-label-2 {
 +
  margin-left: -18px;
 +
}
 +
 
 +
.sp-selector-3, .button-label-3 {
 +
  margin-left: 0px;
 +
}
 +
.sp-selector-4, .button-label-4 {
 +
  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 {
 +
    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;
 +
    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-arrow:hover {
 +
    opacity:1; }
 +
 
 +
.sp-arrow:active {
 +
    margin-top:-35px; }
 +
 +
.sp-arrows:hover {
 +
    opacity:1; }
 +
 
 +
.sp-arrows:active {
 +
    margin-top:-35px; }
 +
 +
.sp-selector-1:checked ~ .sp-arrow.sp-a2,
 +
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
 +
.sp-selector-3:checked ~ .sp-arrow.sp-a4 {
 +
  right: 15px;
 +
  display: block;
 +
  background-position: top right;
 +
}
 +
.sp-selector-2:checked ~ .sp-arrow.sp-a1,
 +
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
 +
.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;
 +
  display: block;
 +
  background-position: top left;
 +
}
 +
 
 +
.sp-slideshow input:checked ~ .sp-content {
 +
  transition: background-position linear 0.6s, background-color linear 0.8s;
 +
}
 +
 
 +
.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;
 +
}
 +
 
 +
input.sp-selector-1:checked ~ .sp-content {
 +
  background-position: 0 0;
 +
  background-color: white;
 +
}
 +
 
 +
input.sp-selector-2:checked ~ .sp-content {
 +
  background-position: 0 0;
 +
  background-color: white;
 +
}
 +
 
 +
input.sp-selector-3:checked ~ .sp-content {
 +
  background-position: 0 0;
 +
  background-color: white;
 +
}
 +
 
 +
input.sp-selector-4:checked ~ .sp-content {
 +
  background-position: 0 0;
 +
  background-color: white;
 +
}
 +
 
 +
 
 +
input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {
 +
    background-position: 0 0;
 +
}
 +
 +
input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {
 +
    background-position: 0 0;
 +
}
 +
 +
input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {
 +
    background-position: 0 0;
 +
}
 +
 +
input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {
 +
    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;
 +
}
 +
 
 +
 
 +
 
 +
.sp-slider {
 +
  position: relative;
 +
  left: 0;
 +
  width: 500%;
 +
  height: 100%;
 +
  list-style: none;
 +
  margin: 0;
 +
  padding: 0;
 +
  transition: left ease-in 0.8s;
 +
}
 +
 
 +
.sp-slider > 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-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;
 +
  display: block;
 +
  margin: 0 auto;
 +
  padding: 40px 0 50px 0;
 +
  max-height: 100%;
 +
  max-width: 100%;
 +
}
 +
 
 +
input.sp-selector-1:checked ~ .sp-content .sp-slider {
 +
    left: 0;
 +
}
 +
 +
input.sp-selector-2:checked ~ .sp-content .sp-slider {
 +
    left: -100%;
 +
}
 +
 +
input.sp-selector-3:checked ~ .sp-content .sp-slider {
 +
    left: -200%;
 +
}
 +
 +
input.sp-selector-4:checked ~ .sp-content .sp-slider {
 +
    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%;
 +
}
 +
 +
 
 +
input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
 +
input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
 +
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){
 +
    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;
 +
}
 +
 
 +
 
 +
 
 +
</style>
 
<title>Team: Technion 2015</title>
 
<title>Team: Technion 2015</title>
 
</head>
 
</head>
 
<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&nbsp;Notebook</div>
−
<span class="btn-bg1"></span>
+
<div id="Human_Practices" class="main_button">Human&nbsp;Practices</div>
−
<div class="sub1">
+
<div id="Judging_Criteria" class="main_button">Judging&nbsp;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&nbsp;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&nbsp;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&nbsp;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&nbsp;Research</a>
+
−
</div>
+
−
</div>
+
−
<div class="main5">
+
−
<a href="https://2015.igem.org/Team:Technion_Israel/Judging_Criteria">Judging&nbsp;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&nbsp;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>
−
<ul class="show_me_them_pics!" nav="thumbs" style="list-style:none;margin:0px;">
+
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------->
 +
 
 +
<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="sp-slideshow">
 +
 
 +
  <input type="radio" id="button-1" name="radio-set" class="sp-selector-1" checked="checked" />
 +
  <label for="button-1" class="button-label-1"></label>
 +
 
 +
  <input type="radio" id="button-2" name="radio-set" class="sp-selector-2" />
 +
  <label for="button-2" class="button-label-2"></label>
 +
 
 +
  <input type="radio" id="button-3" name="radio-set" class="sp-selector-3" />
 +
  <label for="button-3" class="button-label-3"></label>
 +
 
 +
  <input type="radio" id="button-4" name="radio-set" class="sp-selector-4" />
 +
  <label for="button-4" class="button-label-4"></label>
 +
 +
 
 +
  <label for="button-1" class="sp-arrow sp-a1"></label>
 +
  <label for="button-2" class="sp-arrow sp-a2"></label>
 +
  <label for="button-3" class="sp-arrow sp-a3"></label>
 +
  <label for="button-4" class="sp-arrow sp-a4"></label>
 +
 
 +
 
 +
    <div class="sp-content">
 +
    <div class="sp-parallax-bg"></div>
 +
    <ul class="sp-slider clearfix">
 
<li>
 
<li>
−
<div class="slides"  style="background-image: url(https://static.igem.org/mediawiki/2015/4/45/Technion_Israel_2015_Comb-1-1.png); background-size: 100%;">
+
<div class="slides"  style="background-image: url(https://static.igem.org/mediawiki/2015/4/45/Technion_Israel_2015_Comb-1-1.png); background-repeat: no-repeat; background-size: 100%;">
 
<div id="placeholder1">
 
<div id="placeholder1">
 
<div id="slide1-text-top">
 
<div id="slide1-text-top">
Line 117: 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>
 
</li>
 
</li>
 
<li>
 
<li>
−
<div class="slides"  style="background-image: url(https://static.igem.org/mediawiki/2015/9/9e/Technion_Israel_2015_Comb-2.png); background-size: 100%;">
+
<div class="slides"  style="background-image: url(https://static.igem.org/mediawiki/2015/9/9e/Technion_Israel_2015_Comb-2.png); background-repeat: no-repeat; background-size: 100%;">
 
<div id="placeholder1">
 
<div id="placeholder1">
 
<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, with the help and advice of Prof. ___________.  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 132: Line 641:
 
</li>
 
</li>
 
<li>
 
<li>
−
<div class="slides"  style="background-image: url(https://static.igem.org/mediawiki/2015/6/6b/Technion_Israel_2015_Comb-3.png); background-size: 100%;">
+
<div class="slides"  style="background-image: url(https://static.igem.org/mediawiki/2015/6/6b/Technion_Israel_2015_Comb-3.png); background-repeat: no-repeat; background-size: 100%;">
 
<div id="placeholder1">
 
<div id="placeholder1">
 
<div id="slide3-text-top">
 
<div id="slide3-text-top">
Line 138: Line 647:
 
<p>A mechanism for even flow was used. To obtain even flow in each pathway and comb tooth,  
 
<p>A mechanism for even flow was used. To obtain even flow in each pathway and comb tooth,  
 
we consulted with Dr. Moran Bercovici from Technion's Microfluidic Laboratory.  The result was a specially designed tube geometry.  
 
we consulted with Dr. Moran Bercovici from Technion's Microfluidic Laboratory.  The result was a specially designed tube geometry.  
−
From the syringe entry at the top of the comb, each pathway splits,</br> resulting in 16</br> parallel, even-flow,</br> square tubes at</br> the fluid exit to the</br> scalp.</p>
+
From the syringe entry at the top of the comb, each pathway splits, resulting</br> in 16 parallel,</br> even-flow, square</br> tubes at the fluid</br> exit to the scalp.</p>
 
</div>
 
</div>
 
</div>
 
</div>
 
<div id="slide3-text">
 
<div id="slide3-text">
−
<p>For flow equations, we selected a viscosity, bearing in mind that our formula must stay on the scalp and, of course, must not reach to the user's eyes and clothes.
+
<p>For flow equations, we selected a viscosity, bearing in mind</br> that our formula must stay on the scalp and, of course, must not reach to the user's eyes and clothes.
 
With the help of industrial engineer Ms. Lotem Shmuel, a handle was designed and added to the comb for extra comfort in use.</p>
 
With the help of industrial engineer Ms. Lotem Shmuel, a handle was designed and added to the comb for extra comfort in use.</p>
 
</div>
 
</div>
Line 148: Line 657:
 
</li>
 
</li>
 
<li>
 
<li>
−
<div class="slides"  style="background-image: url(https://static.igem.org/mediawiki/2015/2/21/Technion_Israel_2015_Comb-4.png); background-size: 100%;">
+
<div class="slides"  style="background-image: url(https://static.igem.org/mediawiki/2015/2/21/Technion_Israel_2015_Comb-4.png); background-repeat: no-repeat; background-size: 100%;">
 
<div id="placeholder1">
 
<div id="placeholder1">
 
<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. </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, 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>
 
</li>
 
</li>
−
</ul>
+
    </ul>
−
</div>
+
  </div><!-- sp-content -->
 +
   
 +
 
 +
</div> <!-- sp-slideshow -->
 +
</div>
 +
<!-------end of slider------->
 +
</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>
 
</div>
Line 185: 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>

Latest revision as of 23:58, 18 September 2015

Team: Technion 2015

Home
Home
Project
Lab Notebook
Human Practices
Judging Criteria
Team
UP
Scroll to top

The Comb

Why design?

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. 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 Escherichia coli from reaching the consumer's scalp, in order to increase the chances of the Bacillus subtilis's survival, and to minimize side effects that may occur with the use of such a product.

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.

The Brainstorming Process

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.

The Comb Prototypes

The comb was designed in "Solidworks" and was printed in a 3D printer.

  • Prototype #1

    We started from a very basic design, focusing on the initial solution for applying the formula onto the user's scalp. At first, it looks very simple- like nothing special characterizes it.

    However, within, the pathways are structured in such a way to uniformly distribute the treatment formula to the scalp. Simultaneously, the comb massages the scalp and gives the consumer full control of the spread of the product.

  • Prototype #2

    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.

  • Prototype #3

    A mechanism for even flow was used. To obtain even flow in each pathway and comb tooth, we consulted with Dr. Moran Bercovici from Technion's Microfluidic Laboratory. The result was a specially designed tube geometry. From the syringe entry at the top of the comb, each pathway splits, resulting
    in 16 parallel,
    even-flow, square
    tubes at the fluid
    exit to the scalp.

    For flow equations, we selected a viscosity, bearing in mind
    that our formula must stay on the scalp and, of course, must not reach to the user's eyes and clothes. With the help of industrial engineer Ms. Lotem Shmuel, a handle was designed and added to the comb for extra comfort in use.

  • Prototype #4

    The final prototype for the iGEM 2015 competition

    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).

    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).

    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 which intrigues the user from first sight.


The Mathematics Behind the Comb

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.

Figure 1: Flow equations for the determination of ideal tube dimensions

The Syringe

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.

The syringe below is an illustration of our syringe design.

syringe
Figure 2: 2-dimensional illustration of the syringe for inserting the engineered bacterium into the comb

Explanation:

  • The E. coli overproducing NADPH is represented by the red section. It will be present in the syringe at the time the consumer purchases it.
  • The blue section represents the B. subtilis engineered to secrete the 3α-HSD enzyme. The B. subtilis will be sucked into the syringe from a container also purchased by the consumer as part of the kit.
  • In between the sections is a filter membrane- small enough to allow the NADPH to pass through, while preventing the E. coli from reaching the user's scalp. As the piston is pressed during use, the NADPH will pass through the membrane and into the B. subtilis-containing solution. In other words, while pushing down the piston, the NADPH mixes with the enzyme, making the process more efficient.

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.

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.

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.


The movie below simulates the structure of the comb.


Checking Real-life Conditions

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 -18oC (same temperature in home freezer). Check out our protocols to see how we did the experiment.

Click here to see the full results.

Focus Group Survey

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.



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:

  • New aesthetic design
  • Adjustable handle which can easily be modified to fit any hand size

Conclusion

After much thought and effort, the final result is the design that will be presented at the Giant Jamboree.

The comb provides clear and defined benefits compared to a topical mixture applied with the hands or gloves:

  1. Cleanliness- The comb and syringe combination allows the consumer to apply the product, whilst never having to touch the bacteria.

  2. Reusable-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.

  3. Uniform application-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.

  4. Safety- 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.


And last, but certainly not least....a demonstration of using the comb and syringe, complete with the final prototype for the competition. Enjoy!

Contact Us