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

Line 1: Line 1:
 
{{Global_Menubar}}
 
{{Global_Menubar}}
 
{{Team:BostonU_Hardware/CSS}}
 
{{Team:BostonU_Hardware/CSS}}
−
<!doctype html>
 
 
<html lang="en">
 
<html lang="en">
 
<head>
 
<head>
Line 15: Line 14:
 
<!-- EXTRA STYLING -->
 
<!-- EXTRA STYLING -->
 
<style>
 
<style>
−
#Title{
+
.Title{
 
color: red;
 
color: red;
 
}
 
}
 
#page_background{
 
#page_background{
 
background-image: <!-- insert image here -->;
 
background-image: <!-- insert image here -->;
−
}
 
−
#design_control,#design_flow,#mill_flow,#mill_control{
 
−
width: 100%;
 
−
height: 300px;
 
−
margin-top: 5%;
 
 
}
 
}
 
#Header_Pic{
 
#Header_Pic{
 
height: 60%;
 
height: 60%;
 
}
 
}
−
#parent {
+
#MARS{
 +
height: 100%;
 +
width: 100%;
 +
}
 +
.text{
  
 
}
 
}
−
#narrow {
+
.text_section{
−
  width: 35%;
+
 
−
float: left;
+
−
margin-left: 8%;
+
−
height: 85%;
+
 
}
 
}
−
#wide {
+
.center_text_section{
−
  width: 55%;
+
display: table;
−
float: left;
+
height: 400px;
−
height: 85%;
+
overflow: hidden;
−
margin-top: 2%;
+
 
}
 
}
−
#Pics{
+
.center_text{
−
width: 70%;
+
display: table-cell;
 +
vertical-align: middle;
 
text-align: center;
 
text-align: center;
−
top: 50%;
 
−
    transform: translate(30%);
 
 
}
 
}
−
#MARS{
+
.pics{
−
height: 100%;
+
height: 30%;
 
width: 100%;
 
width: 100%;
 +
margin-top: 3%;
 +
margin-bottom: 3%;
 +
}
 +
.pics2{
 +
margin-top: 10%;
 +
height: 30%;
 +
width: 100%;
 +
vertical-align: middle;
 +
}
 +
.profile-tabs{
 +
margin-top:3%;
 +
}
 +
#Experiment{
 +
margin-top: 5%;
 +
margin-bottom: 5%;
 
}
 
}
 
</style>
 
</style>
Line 64: Line 72:
 
<div id="page_background">
 
<div 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" alt="MARS" id="MARS">
+
<img src="assets/img/bg1.png" alt="MARS" id="MARS">
 
</div>
 
</div>
−
<div class="main main-raised" id = "main_text">
+
<div class="main main-raised">
−
<div class="parent">
+
<div class="container">
−
<div id="narrow">
+
<div class="col-md-6 text-center">
−
<div class="section text-center section-landing">
+
<div class="text_section">
−
<div class="row">
+
<h3>Cellular Lysis</h3>
−
<!-- This is the main text -->
+
<div class="text">
−
<div>
+
Creator: Dylan Samperi
−
<h2 class="title" id="Title">Cell Transformation</h2>
+
−
<h5 class="description" id="Description">Designed by Sarah N.</h5>
+
−
This is a chip that performs cellular transformation. There are three main regions.
+
−
First, is the metering section. Second, is a time dependent mixing section.
+
−
Lastly, is a recovery period. The control layer is also not very complicated. Etc.
+
−
<br>
+
−
</br>
+
−
+
−
</div>
+
−
<!-- This is the main text -->
+
−
 
+
−
<!-- This is the tabs -->
+
−
<div class="profile-tabs">
+
−
<div class="nav-align-center">
+
−
<ul class="nav nav-pills nav-pills-danger" role="tablist">
+
−
<li class="active">
+
−
<a href="#flow" role="tab" data-toggle="tab">
+
−
<i class="material-icons">camera</i>
+
−
Design
+
−
</a>
+
−
</li>
+
−
<li>
+
−
<a href="#control" role="tab" data-toggle="tab">
+
−
<i class="material-icons">memory</i>
+
−
Milled
+
−
</a>
+
−
</li>
+
−
</ul>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
 
</div>
 
</div>
−
 
+
<div class="text">
−
<div id="wide">
+
Fluid Functionality Score:
−
<div class="tab-content gallery">
+
</div>
−
<div class="tab-pane active" id="flow">
+
<a href="#" download>Download File Here!<i class="material-icons">get_app</i> </a>
−
<div class="row">
+
</div>
−
<div id="Pics">
+
<div class="text_section">
−
<img src="https://static.igem.org/mediawiki/2017/d/df/TransFlow.png" class="img-rounded" id="design_flow" />
+
<h3>Description</h3>
−
<h5><u>Flow Layer</u></h5>
+
<div class="text">
−
</div>
+
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 class="row">
+
−
<div id="Pics">
+
−
<img src="https://static.igem.org/mediawiki/2017/9/94/TransControl.png" class="img-rounded" id="design_control" />
+
−
<h5><u>Control Layer</u></h5>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="tab-pane text-center" id="control">
+
−
<div class="row">
+
−
<div id="Pics">
+
−
<img src="chips/mill.jpg" class="img-rounded" id="mill_flow"/>
+
−
<h5><u>Flow Layer</u></h5>
+
−
<img src="" class="img-rounded" />
+
−
</div>
+
−
<div id="Pics">
+
−
<img src="chips/mill.jpg" class="img-rounded" id="mill_flow"/>
+
−
<h5><u>Flow Layer</u></h5>
+
−
<img src="" class="img-rounded" />
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
 
</div>
 
</div>
 
</div>
 
</div>
−
<div class="container" style="background">
+
<div class="profile-tabs">
−
<div class="section text-center section-landing">
+
<div class="nav-align-center">
−
<div class="row">
+
<ul class="nav nav-pills nav-pills-danger" role="tablist">
−
<h2 class = "title">Experiment</h2>
+
<li class="active">
−
<h5 class = "description">Brief Description</h5>
+
<a href="#Design" role="tab" data-toggle="tab">
−
<iframe width="600" height="315" src="https://www.youtube.com/embed/H2e8ujMEEOY" frameborder="0" allowfullscreen></iframe>
+
<i class="material-icons">view_agenda</i>
−
<br>
+
Design
−
<b><a href= "https://github.com/CIDARLAB/MARS">Download Files to Build your Own!</a><b>
+
</a>
−
</br>
+
</li>
−
</div>
+
<li>
−
</div>
+
<a href="#Mill" role="tab" data-toggle="tab">
 +
<i class="material-icons">device_hub</i>
 +
Milled
 +
</a>
 +
</li>
 +
</ul>
 
</div>
 
</div>
 +
</div>
 +
</div>
  
 +
<div class="col-md-6">
  
−
</div>
+
<div class="tab-content gallery text-center">
 +
<div class="tab-pane active" id="Design">
 +
<div class="row">
 +
<img class="pics" src="https://static.igem.org/mediawiki/2017/d/df/TransFlow.png" alt="Picture">
 +
<b>Flow Layer</b>
 +
</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 class="tab-pane" id="Mill">
 +
<div class="row">
 +
<img class="pics" src="https://static.igem.org/mediawiki/2017/5/5f/LysisFlow.png" alt="Picture">
 +
<b>Flow Layer</b>
 +
</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 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>
 
</div>

Revision as of 04:19, 11 October 2017

BostonU_HW

Transformation
MARS

Cellular Lysis

Creator: Dylan Samperi
Fluid Functionality Score:
Download File Here!get_app

Description

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
Picture Flow Layer
Picture Control Layer
Picture Flow Layer
Picture Control Layer
Picture
Picture

Experimentation

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