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

Line 8: Line 8:
 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  
<title>Transformation</title>
+
<title>Digestion</title>
  
 
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
 
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
Line 18: Line 18:
 
}
 
}
 
#page_background{
 
#page_background{
background-image: <!-- insert image here -->;
+
background-image: url("https://static.igem.org/mediawiki/2017/0/04/MARS_General_Background.png");
 
}
 
}
 
#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: 55%;
 +
margin-left: 22%;
 +
margin-top: 11%;
 +
}
 +
.main{
 +
margin-top: 2%;
 
}
 
}
 
.text{
 
.text{
Line 32: Line 47:
 
.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: 100px;
+
width: 80%;
width: 100%;
+
 
margin-top: 3%;
 
margin-top: 3%;
margin-bottom: 3%;
 
}
 
.pics2{
 
margin-top: 10%;
 
height: 30%;
 
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 63:
 
<!-- *************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/0/02/MARSbackground.png" id="BACKGROUND">
 +
<img src="https://static.igem.org/mediawiki/2017/2/22/MARSLogo2.png" id="MARS">
 +
<img src="https://static.igem.org/mediawiki/2017/7/7a/MARS_Digestion.png" id="TITLE">
 
</div>
 
</div>
<div class="main main-raised">
+
<div class="main main-raised" style="margin-bottom:5%;">
 
<div class="container">
 
<div class="container">
<div class="col-md-6 text-center">
+
<div class="col-md-9">
 
<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
+
DNA digestion, or DNA fragmentation, is a basic protocol in synthetic biology. This is typically performed prior to analysis of the DNA sequence, or in order to perform further protocols. Restriction enzymes are mixed and then incubated with DNA in a buffer solution. This yields DNA fragments cleaved at specific sites according to the enzymes used.
 +
</div>
 
</div>
 
</div>
 +
</div>
 +
<div class="col-md-3" style="text-align:center; margin:auto; vertical-align:middle;" >
 +
<a href="MARStest.zip"download>
 +
<button class="btn btn-primary btn-lg btn-danger">Download Files Here!<i class="material-icons">get_app</i></button>
 +
</a>
 +
</div>
 +
</div>
 +
<div class="container">
 +
<div class="col-md-9">
 
<div class="text">
 
<div class="text">
Fluid Functionality Score:
+
This microfluidic chip design performs DNA digestion. The desired DNA segment, restriction enzymes, water and buffer solution are inputted and mixed. The resulting solution is then sealed in an incubation chamber on top of which a heating element is placed. After the designated incubation time has passed, the liquid can then be transferred from the chip using a pipett
 +
</div>
 
</div>
 
</div>
<a href="MARStest.zip" download>Download File Here!<i class="material-icons">get_app</i> </a>
+
<div class="col-md-3">
</div>
+
<div class="text_section">
+
<h3>Description</h3>
+
<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
+
</div>
+
</div>
+
 
<div class="profile-tabs">
 
<div class="profile-tabs">
 
<div class="nav-align-center">
 
<div class="nav-align-center">
Line 111: Line 110:
 
</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/2/28/MARS_Digestion_F.png" alt="Picture" style="margin-top:20px; padding-top:18px;">
<b>Flow Layer</b>
+
<div class="row text-center" style="margin-bottom:5%;">
 +
<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/f/fa/MARS_Digestion_C.png" alt="Picture" style="margin-top:20px; padding-top:18px;">
 +
<div class="row text-center" style="margin-bottom:5%;">
 +
<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/6/6b/MARS_Digestion_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" style="margin-bottom:5%;"><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/2/25/MARS_Digestion_MC.png" alt="Picture" style="margin-top:20px; padding-top:18px;">
 +
<div class="row text-center">
 +
<button class="btn btn-danger btn-round" style="margin-bottom:5%;"><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>
 
<div class="container" id="Experiment">
 
<div class="col-md-3">
 
<img class="pics2" src="https://static.igem.org/mediawiki/2017/5/5f/LysisFlow.png" alt="Picture">
 
</div>
 
<div class="col-md-3">
 
<img class="pics2" src="https://static.igem.org/mediawiki/2017/5/5f/LysisFlow.png" alt="Picture">
 
</div>
 
<div class="col-md-6">
 
<h3>Experimentation</h3>
 
<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
 
</div>
 
</div>
 
</div>
 
 
</div>
 
</div>
 
</div>
 
</div>

Revision as of 04:59, 29 October 2017

BostonU_HW

Digestion

Summary

DNA digestion, or DNA fragmentation, is a basic protocol in synthetic biology. This is typically performed prior to analysis of the DNA sequence, or in order to perform further protocols. Restriction enzymes are mixed and then incubated with DNA in a buffer solution. This yields DNA fragments cleaved at specific sites according to the enzymes used.
This microfluidic chip design performs DNA digestion. The desired DNA segment, restriction enzymes, water and buffer solution are inputted and mixed. The resulting solution is then sealed in an incubation chamber on top of which a heating element is placed. After the designated incubation time has passed, the liquid can then be transferred from the chip using a pipett