Difference between revisions of "Team:BostonU HW/Transformation"

 
(21 intermediate revisions by 3 users not shown)
Line 18: Line 18:
 
}
 
}
 
#page_background{
 
#page_background{
−
background-image: <!-- insert image here -->;
+
background-image: url("https://static.igem.org/mediawiki/2017/9/94/LARGE_background_MARS.png");
 +
background-size:100%;
 
}
 
}
 
#Header_Pic{
 
#Header_Pic{
 
height: 60%;
 
height: 60%;
 
}
 
}
−
#MARS{
+
#BACKGROUND{
−
height: 100%;
+
 
width: 100%;
 
width: 100%;
 +
position: absolute;
 +
}
 +
#MARS{
 +
width: 15%;
 +
position: absolute;
 +
margin-top: 8%;
 +
margin-left: 5%;
 +
}
 +
#TITLE{
 +
position: absolute;
 +
width: 70%;
 +
margin-left: 22%;
 +
margin-top: 11%;
 +
}
 +
.main{
 +
margin-top: 2%;
 
}
 
}
 
.text{
 
.text{
Line 32: Line 48:
 
.text_section{
 
.text_section{
  
−
}
 
−
.center_text_section{
 
−
display: table;
 
−
height: 400px;
 
−
overflow: hidden;
 
−
}
 
−
.center_text{
 
−
display: table-cell;
 
−
vertical-align: middle;
 
−
text-align: center;
 
 
}
 
}
 
.pics{
 
.pics{
−
height: 400px;
+
width: 80%;
−
width: 100%;
+
 
margin-top: 3%;
 
margin-top: 3%;
−
margin-bottom: 3%;
 
−
}
 
−
.pics2{
 
−
margin-top: 10%;
 
−
height: 10%;
 
−
width: 100%;
 
−
vertical-align: middle;
 
 
}
 
}
 
.profile-tabs{
 
.profile-tabs{
 
margin-top:3%;
 
margin-top:3%;
−
}
 
−
#Experiment{
 
−
margin-top: 5%;
 
−
margin-bottom: 5%;
 
 
}
 
}
 
</style>
 
</style>
Line 70: Line 64:
 
<!-- *************THIS IS WHERE PAGE STARTS************* -->
 
<!-- *************THIS IS WHERE PAGE STARTS************* -->
 
<div class="landing-page">
 
<div class="landing-page">
−
<div id="page_background">
+
<div class="wrapper" id="page_background">
 
<div class="header" id="Header_Pic">
 
<div class="header" id="Header_Pic">
−
<img src="https://static.igem.org/mediawiki/2017/f/f9/MARS_Background1.png" id="MARS">
+
<img src="https://static.igem.org/mediawiki/2017/9/94/LARGE_background_MARS.png" id="BACKGROUND">
 +
<div class="container" margin-top:"2%;">
 +
<div class="col-md-3">
 +
 
 +
<img src="https://static.igem.org/mediawiki/2017/2/22/MARSLogo2.png" width="100%" style="margin-top:-37%;">
 +
</div>
 +
<div class="col-md-9" style="color:#eef1f5; font-size:100px; font-family:Arial,Gadget,sans-serif; margin-top:1%;">
 +
Transformation
 +
</div>
 +
</div>
 
</div>
 
</div>
−
<div class="main main-raised">
+
<div class="main main-raised" style="margin-top:2%;">
 
<div class="container">
 
<div class="container">
−
<div class="col-md-6 text-center">
+
<div class="col-md-12">
 
<div class="text_section">
 
<div class="text_section">
−
<h3>Cellular Lysis</h3>
+
<h1>Summary</h1>
−
<div class="text">
+
<div class="text" style="margin-bottom:3%;">
−
Creator: Dylan Samperi
+
Bacterial transformation is a commonly used protocol in synthetic biology. It can be used for a variety of functions, such as testing whether or not a genetic circuit is functional. Transformation allows bacterial cells, such as Escherichia coli, to take in and express external DNA fragments. Transformation consists of heat shock to damage cells and promote the taking up of external plasmids, recovery to prevent cells from dying, and a final culturing. From there, cells are analyzed.
 +
</div>
 
</div>
 
</div>
 +
</div>
 +
</div>
 +
<div class="container">
 +
<div class="col-md-9">
 
<div class="text">
 
<div class="text">
−
Fluid Functionality Score:
+
This microfluidic chip is designed to perform transformation. Suspended cells and plasmid are metered on the chip and are then mixed together. The solution then undergoes heat shock in a time-dependent mixing element for exactly 30 seconds. The solution can then be pipetted out from the chip into a recovery tube on ice.
 +
                                <br><br>
 +
This chip has been milled and tested, but not deemed fully fluid functional as of this time. For a more complete understanding of the chip, click the download button in order to access its CNC millable SVG files, JSON file, full device documentation and PNG files of its flow and control layers.
 +
 
 +
</div>
 
</div>
 
</div>
−
<a href="#" download>Download File Here!<i class="material-icons">get_app</i> </a>
+
<div class="col-md-3">
 +
<div style="text-align:center; margin:auto; vertical-align:middle;" >
 +
  <a href="https://2017.igem.org/Team:BostonU_HW/Demonstrate#Chips">
 +
    <button class="btn btn-primary btn-lg btn-danger" style="margin-top:0px;">MARS Repository<i class="material-icons">replay</i></button>
 +
  </a>
 
</div>
 
</div>
−
<div class="text_section">
+
<div style="text-align:center; margin:auto; vertical-align:middle;" >
−
<h3>Description</h3>
+
<a href="https://static.igem.org/mediawiki/2017/6/66/MARSTransformation.zip"download>
−
<div class="text">
+
<button class="btn btn-primary btn-lg btn-danger">Download Files Here!<i class="material-icons">get_app</i></button>
−
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla sed est id molestie. Vivamus porttitor, dui sit amet aliquam feugiat, nisi mauris lobortis tortor, non tristique dolor felis vitae arcu. Nunc id facilisis justo. Sed sem eros, accumsan quis faucibus nec, blandit quis tortor. Aliquam in risus sodales, mollis est a, facilisis libero. Ut dignissim euismod scelerisque. Etiam elementum, augue vitae faucibus luctus, felis dui blandit mi, et laoreet ex dolor non est. Duis consectetur lobortis enim, eu fermentum libero iaculis eget. Nunc suscipit lacus non orci lobortis condimentum. In tincidunt enim ex. Vestibulum semper feugiat est eu fermentum. Sed nulla urna, consequat quis lobortis sed, hendrerit et lorem. Phasellus lacinia arcu sed diam vestibulum, non aliquet mi vulputate
+
</a>
−
</div>
+
 
</div>
 
</div>
 
<div class="profile-tabs">
 
<div class="profile-tabs">
Line 111: Line 126:
 
</div>
 
</div>
 
</div>
 
</div>
 +
</div>
 
</div>
 
</div>
  
−
<div class="col-md-6">
+
<div class="container">
−
 
+
 
<div class="tab-content gallery text-center">
 
<div class="tab-content gallery text-center">
 
<div class="tab-pane active" id="Design">
 
<div class="tab-pane active" id="Design">
−
<div class="row">
+
<div class="col-md-6 text-center">
−
<img class="pics" src="https://static.igem.org/mediawiki/2017/d/df/TransFlow.png" alt="Picture">
+
<img class="pics" src="https://static.igem.org/mediawiki/2017/8/83/MARS_Transformation_F.png" alt="Picture" style="margin-top:20px; padding-top:18px;">
−
<b>Flow Layer</b>
+
<div class="row text-center">
 +
<button class="btn btn-info btn-round"><span style="font-size:17px;">Flow Layer</span></button>
 +
</div>
 +
</div>
 +
<div class="col-md-6 text-center">
 +
<img class="pics" src="https://static.igem.org/mediawiki/2017/c/c8/MARS_Transformation_C.png" alt="Picture" style="margin-top:20px; padding-top:18px;">
 +
<div class="row text-center">
 +
<button class="btn btn-danger btn-round"><span style="font-size:17px;">Control Layer</span></button>
 
</div>
 
</div>
−
<div class="row">
 
−
<img class="pics" src="https://static.igem.org/mediawiki/2017/9/94/TransControl.png" alt="Picture">
 
−
<b>Control Layer</b>
 
 
</div>
 
</div>
 
</div>
 
</div>
 
<div class="tab-pane" id="Mill">
 
<div class="tab-pane" id="Mill">
−
<div class="row">
+
<div class="col-md-6 text-center">
−
<img class="pics" src="https://static.igem.org/mediawiki/2017/5/5f/LysisFlow.png" alt="Picture">
+
<img class="pics" src="https://static.igem.org/mediawiki/2017/4/41/MARS_Transformation_MF.png" alt="Picture" style="margin-top:20px; padding-top:18px;">
−
<b>Flow Layer</b>
+
<div class="row">
 +
<button class="btn btn-info btn-round"><span style="font-size:17px;">Flow Layer</span></button>
 +
</div>
 +
</div>
 +
<div class="col-md-6 text-center">
 +
<img class="pics" src="https://static.igem.org/mediawiki/2017/7/76/MARS_Transformation_MC.png" alt="Picture" style="margin-top:20px; padding-top:18px;">
 +
<div class="row text-center">
 +
<button class="btn btn-danger btn-round"><span style="font-size:17px;">Control Layer</span></button>
 
</div>
 
</div>
−
<div class="row">
 
−
<img class="pics" src="https://static.igem.org/mediawiki/2017/5/5f/LysisFlow.png" alt="Picture">
 
−
<b>Control Layer</b>
 
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 +
</div>
  
−
</div>
+
<div class="container">
−
</div>
+
<div class="col-md-6" style="margin-bottom:5%;">
−
<div class="container" id="Experiment">
+
<video style="width:100%; margin-top:20px; padding-top:18px;" controls>
−
<div class="col-md-3">
+
  <source src="https://static.igem.org/mediawiki/2017/d/d0/MARS_TransformationVid.mp4" type="video/mp4">
−
<img class="pics2" src="https://static.igem.org/mediawiki/2017/5/5f/LysisFlow.png" alt="Picture">
+
</video>
−
</div>
+
−
<div class="col-md-3">
+
−
<img class="pics2" src="https://static.igem.org/mediawiki/2017/5/5f/LysisFlow.png" alt="Picture">
+
 
</div>
 
</div>
 
<div class="col-md-6">
 
<div class="col-md-6">
−
<h3>Experimentation</h3>
+
<h1>Testing</h1>
 
<div class="text">
 
<div class="text">
−
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla sed est id molestie. Vivamus porttitor, dui sit amet aliquam feugiat, nisi mauris lobortis tortor, non tristique dolor felis vitae arcu. Nunc id facilisis justo. Sed sem eros, accumsan quis faucibus nec, blandit quis tortor. Aliquam in risus sodales, mollis est a, facilisis libero. Ut dignissim euismod scelerisque. Etiam elementum, augue vitae faucibus luctus, felis dui blandit mi, et laoreet ex dolor non est. Duis consectetur lobortis enim, eu fermentum libero iaculis eget. Nunc suscipit lacus non orci lobortis condimentum. In tincidunt enim ex. Vestibulum semper feugiat est eu fermentum. Sed nulla urna, consequat quis lobortis sed, hendrerit et lorem. Phasellus lacinia arcu sed diam vestibulum, non aliquet mi vulputate
+
This following video shows a test of the chip using colored water. This is to show the functionality of the chip.
 +
No biological material was inserted into this chip.
 
</div>
 
</div>
 
</div>
 
</div>
Line 156: Line 178:
 
</div>
 
</div>
 
</div>
 
</div>
 +
 +
<!-- THIS IS FOOTER -->
 +
<div class="wrapper" style="background:#1c1f1f; margin-top:0px;margin-right:0px !important; margin-left:0px !important;" id="Footer">
 +
<div class="container" style="text-align:center !important">
 +
 +
<div class="col-md-2" style="color:white; margin-bottom:30px; margin-top:5px;">
 +
<h3>CONTACT US</h3>
 +
<div style="text-align:center;">
 +
<a href="mailto:igembuhw@gmail.com">
 +
<img src="https://static.igem.org/mediawiki/2017/7/74/MARS_WHITEEmail.png" style="height:60px; margin-top:20px;">
 +
</a>
 +
<a href="https://www.instagram.com/buigemhardware/?hl=en">
 +
<img src="https://static.igem.org/mediawiki/2017/9/93/MARS_Final_insta.png" style="height:60px; margin-top:20px;">
 +
</a>
 +
<a href="https://twitter.com/igemhwbu">
 +
<img src="https://static.igem.org/mediawiki/2017/b/b6/MARS_Twitter_White.png" style="height:60px; margin-top:20px;">
 +
</a>
 +
</div>
 +
</div>
 +
<div class="col-md-10" style="margin-bottom:30px;">
 +
<img src="https://static.igem.org/mediawiki/2017/0/0e/MARS_SponsorsFinal.png" style="width:100%; margin-top:30px;" usemap="#image-map">
 +
</div>
 +
</div>
 +
 +
</div>
 +
 +
 
</div>
 
</div>
 
</body>
 
</body>

Latest revision as of 16:25, 30 November 2017

BostonU_HW

Transformation
Transformation

Summary

Bacterial transformation is a commonly used protocol in synthetic biology. It can be used for a variety of functions, such as testing whether or not a genetic circuit is functional. Transformation allows bacterial cells, such as Escherichia coli, to take in and express external DNA fragments. Transformation consists of heat shock to damage cells and promote the taking up of external plasmids, recovery to prevent cells from dying, and a final culturing. From there, cells are analyzed.
This microfluidic chip is designed to perform transformation. Suspended cells and plasmid are metered on the chip and are then mixed together. The solution then undergoes heat shock in a time-dependent mixing element for exactly 30 seconds. The solution can then be pipetted out from the chip into a recovery tube on ice.

This chip has been milled and tested, but not deemed fully fluid functional as of this time. For a more complete understanding of the chip, click the download button in order to access its CNC millable SVG files, JSON file, full device documentation and PNG files of its flow and control layers.
Picture
Picture
Picture
Picture

Testing

This following video shows a test of the chip using colored water. This is to show the functionality of the chip. No biological material was inserted into this chip.