Difference between revisions of "Team:BostonU HW"

Line 300: Line 300:
 
<div class="row">
 
<div class="row">
  
−
<div class="col-md-8" style="margin-bottom:50px">
+
<div class="col-md-10 col-md-offset-1" style="margin-bottom:50px">
  
−
<div id="first-slider" class="">
+
<div id="first-slider" class="">
−
<div id="carousel-example-generic" class="carousel slide carousel-fade">
+
<div id="carousel-example-generic" class="carousel slide carousel-fade">
−
<!-- Indicators -->
+
<!-- Indicators -->
−
<ol class="carousel-indicators">
+
<ol class="carousel-indicators">
−
<li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
+
<li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
−
<li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li>
+
<li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li>
−
<li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
+
<li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
−
<li data-target="#carousel-example-generic" data-slide-to="3" class=""></li>
+
<li data-target="#carousel-example-generic" data-slide-to="3" class=""></li>
−
</ol>
+
</ol>
−
<!-- Wrapper for slides -->
+
<!-- Wrapper for slides -->
−
<div class="carousel-inner" role="listbox">
+
<div class="carousel-inner" role="listbox">
−
<!-- Item 1 -->
+
<!-- Item 1 -->
−
<div class="item slide1">
+
<div class="item slide1">
−
<div class="row">
+
<div class="row">
−
<div class="container">
+
<div class="container">
−
<div class="col-md-3 text-right">
+
<div class="col-md-3 text-right">
−
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="https://s20.postimg.org/pfmmo6qj1/window_domain.png"
+
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="https://s20.postimg.org/pfmmo6qj1/window_domain.png"
−
class="">
+
class="">
−
</div>
+
</div>
−
<div class="col-md-9 text-left">
+
<div class="col-md-9 text-left">
−
<h3 data-animation="animated bounceInDown" class="">Add images, or even your logo!</h3>
+
<h3 data-animation="animated bounceInDown" class="">Add images, or even your logo!</h3>
  
−
<h4 data-animation="animated bounceInUp" class="">Easily use stunning effects</h4>
+
<h4 data-animation="animated bounceInUp" class="">Easily use stunning effects</h4>
 +
</div>
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
</div>
+
<!-- Item 2 -->
−
</div>
+
<div class="item slide2 active">
−
<!-- Item 2 -->
+
<div class="row">
−
<div class="item slide2 active">
+
<div class="container">
−
<div class="row">
+
<div class="col-md-7 text-left">
−
<div class="container">
+
<h3 data-animation="animated bounceInDown" class=""> 50 animation options A beautiful</h3>
−
<div class="col-md-7 text-left">
+
−
<h3 data-animation="animated bounceInDown" class=""> 50 animation options A beautiful</h3>
+
  
−
<h4 data-animation="animated bounceInUp" class="">Create beautiful slideshows </h4>
+
<h4 data-animation="animated bounceInUp" class="">Create beautiful slideshows </h4>
  
−
</div>
+
</div>
−
<div class="col-md-5 text-right">
+
<div class="col-md-5 text-right">
−
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="https://s20.postimg.org/sp11uneml/rack_server_unlock.png"
+
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="https://s20.postimg.org/sp11uneml/rack_server_unlock.png"
−
class="">
+
class="">
 +
</div>
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
</div>
+
<!-- Item 3 -->
−
</div>
+
<div class="item slide3">
−
<!-- Item 3 -->
+
<div class="row">
−
<div class="item slide3">
+
<div class="container">
−
<div class="row">
+
<div class="col-md-7 text-left">
−
<div class="container">
+
<h3 data-animation="animated bounceInDown" class="">Simple Bootstrap Carousel</h3>
−
<div class="col-md-7 text-left">
+
−
<h3 data-animation="animated bounceInDown" class="">Simple Bootstrap Carousel</h3>
+
  
−
<h4 data-animation="animated bounceInUp" class="">Bootstrap Image Carousel Slider with Animate.css</h4>
+
<h4 data-animation="animated bounceInUp" class="">Bootstrap Image Carousel Slider with Animate.css</h4>
  
−
</div>
+
</div>
−
<div class="col-md-5 text-right">
+
<div class="col-md-5 text-right">
−
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="https://s20.postimg.org/eq8xvxeq5/globe_network.png"
+
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="https://s20.postimg.org/eq8xvxeq5/globe_network.png"
−
class="">
+
class="">
 +
</div>
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
</div>
+
<!-- Item 4 -->
−
</div>
+
<div class="item slide4">
−
<!-- Item 4 -->
+
<div class="row">
−
<div class="item slide4">
+
<div class="container">
−
<div class="row">
+
<div class="col-md-7 text-left">
−
<div class="container">
+
<h3 data-animation="animated bounceInDown" class="">We are creative</h3>
−
<div class="col-md-7 text-left">
+
−
<h3 data-animation="animated bounceInDown" class="">We are creative</h3>
+
  
−
<h4 data-animation="animated bounceInUp" class="">Get start your next awesome project</h4>
+
<h4 data-animation="animated bounceInUp" class="">Get start your next awesome project</h4>
  
−
</div>
+
</div>
−
<div class="col-md-5 text-right">
+
<div class="col-md-5 text-right">
−
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="https://s20.postimg.org/9vf8xngel/internet_speed.png"
+
<img style="max-width: 200px;" data-animation="animated zoomInLeft" src="https://s20.postimg.org/9vf8xngel/internet_speed.png"
−
class="">
+
class="">
 +
</div>
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 +
<!-- End Item 4 -->
 
</div>
 
</div>
−
</div>
+
<!-- End Wrapper for slides--> <a class="left carousel-control" href="#carousel-example-generic" role="button"
−
<!-- End Item 4 -->
+
data-slide="prev">
−
</div>
+
<i class="fa fa-angle-left"></i><span class="sr-only">Previous</span>
−
<!-- End Wrapper for slides--> <a class="left carousel-control" href="#carousel-example-generic" role="button"
+
</a>
−
data-slide="prev">
+
<a class="right carousel-control" href="#carousel-example-generic"
−
<i class="fa fa-angle-left"></i><span class="sr-only">Previous</span>
+
role="button" data-slide="next">
−
</a>
+
<i class="fa fa-angle-right"></i><span class="sr-only">Next</span>
−
<a class="right carousel-control" href="#carousel-example-generic"
+
</a>
−
role="button" data-slide="next">
+
−
<i class="fa fa-angle-right"></i><span class="sr-only">Next</span>
+
−
</a>
+
  
−
</div>
+
</div>
−
</div>
+
</div>
  
 
</div>
 
</div>

Revision as of 20:23, 31 October 2017

BostonU_HW

BostonU_HW Main Page

Welcome to the 2017 BostonU HW Project: MARS

Microfluidics is often an overlooked tool in the field of synthetic biology because designing and using microfluidic chips requires specialized knowledge. Our project, MARS (Microfluidic Applications for Research in Synbio), aims to increase the accessibility of low-cost and easy to use microfluidic systems for the synthetic biology community.

The typical design, build and fabrication flow utilized in microfluidics requires significant intellectual investment, technical agility, a high startup cost and time investment. The previous iGEM Hardware Team in conjunction with CIDAR Lab created an alternative software workflow tackling design and manufacturing barriers. What our team focused on is the implementation stage of this workflow, ensuring that synthetic biologists are able to effectively use the tools provided to them.

The main goals of MARS are to:
  1. Increase accessibilty of Microfluidics
  2. Design chips that are relevant to the day to day protocols in synthetic biology labs which can be used together to perform more complex protocols
  3. Create and provide a standardized method of evaluating chip functionality

These three goals led to the creation of the three main branches of MARS: Microfluidics 101, the MARS Repository and Fluid Functionality. Using this end to end system, microfluidics can become a more accessible and practical tool for synthetic biologists to integrate into their labs.

Use the graphic below to navigate the the three branches of MARS and get a more in-depth look at what we have created over the summer.