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

(Created page with "{{Global_Menubar}} {{Team:BostonU_Hardware/CSS}} <html lang="en"> <head> <meta charset="utf-8" /> <link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png"...")
 
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>Videos</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{
Line 24: Line 24:
 
}
 
}
 
#MARS{
 
#MARS{
−
height: 100%;
+
height: 25%;
 +
position: absolute;
 +
z-index: 1;
 +
transform: translate(45%,65%);
 +
}
 +
#BACKGROUND{
 
width: 100%;
 
width: 100%;
 +
position: absolute;
 +
}
 +
#TITLE{
 +
position: absolute;
 +
width: 70%;
 +
z-index: 2;
 +
transform: translate(35%,145%);
 +
}
 +
.main{
 +
margin-top: 2%;
 
}
 
}
 
.text{
 
.text{
Line 43: Line 58:
 
text-align: center;
 
text-align: center;
 
}
 
}
−
.pics{
+
#Shane{
−
height: 100px;
+
height:50%;
−
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>
−
 
  
 
</head>
 
</head>
Line 70: Line 68:
 
<!-- *************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/75/MARS_Videos.png" id="TITLE">
 
</div>
 
</div>
 
<div class="main main-raised">
 
<div class="main main-raised">
 
<div class="container">
 
<div class="container">
−
<div class="col-md-6 text-center">
+
<h1 class="text-center">Check out MARS Tutorial Videos</h1>
−
<div class="text_section">
+
<div class="row">
−
<h3>Cellular Lysis</h3>
+
<div class="col-md-6">
−
<div class="text">
+
<h3>Summary</h3>
−
Creator: Dylan Samperi
+
<div class="text_section">
−
</div>
+
<div class="text">
−
<div class="text">
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lacinia urna ut lectus dictum ultricies. Phasellus euismod tellus quis felis condimentum ullamcorper. Aenean blandit rutrum viverra. Nam at nisl feugiat, gravida magna non, porttitor libero. Suspendisse at purus mattis, ullamcorper odio at, fringilla mi. Sed ultrices viverra est, eu fermentum justo feugiat vitae. Nunc sed egestas enim. Sed sed eros ac mauris suscipit aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque tincidunt nisi justo, a volutpat risus eleifend non.
−
Fluid Functionality Score:
+
</div>
−
</div>
+
−
<a href="MARStest.zip" download>Download File Here!<i class="material-icons">get_app</i> </a>
+
−
</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>
 +
<ul class="col-md-4 col-md-offset-4">
 +
<li><a href="#Video1">Video 1</a></li>
 +
<li><a href="#Video2">Video 2</a></li>
 +
<li><a href="#Video3">Video 3</a></li>
 +
<li><a href="#Video4">Video 4</a></li>
 +
</ul>
 
</div>
 
</div>
−
<div class="profile-tabs">
+
<div class="col-md-6">
−
<div class="nav-align-center">
+
<img src="assets/img/TEST.jpg" alt="Picture" id="Shane">
−
<ul class="nav nav-pills nav-pills-danger" role="tablist">
+
−
<li class="active">
+
−
<a href="#Design" role="tab" data-toggle="tab">
+
−
<i class="material-icons">view_agenda</i>
+
−
Design
+
−
</a>
+
−
</li>
+
−
<li>
+
−
<a href="#Mill" role="tab" data-toggle="tab">
+
−
<i class="material-icons">device_hub</i>
+
−
Milled
+
−
</a>
+
−
</li>
+
−
</ul>
+
−
</div>
+
 
</div>
 
</div>
 
</div>
 
</div>
 +
</div>
  
 +
<div class="container" id="Video1">
 
<div class="col-md-6">
 
<div class="col-md-6">
 +
<h3>Video 1</h3>
 +
<!-- <video>
 +
<source="#" type="#">
 +
</video> -->
 +
<iframe width="560" height="315" src="https://www.youtube.com/embed/dVPqgxbNlK4" frameborder="0" allowfullscreen></iframe>
 +
</div>
 +
<div class="col-md-6">
 +
<div class="center_text_section">
 +
<div class="center_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
 +
<br>
 +
<a href="#" download>Download File Here!<i class="material-icons">get_app</i> </a>
 +
</br>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
  
−
<div class="tab-content gallery text-center">
+
<div class="container" id="Video2">
−
<div class="tab-pane active" id="Design">
+
<div class="col-md-6">
−
<div class="row">
+
<h3>Video 2</h3>
−
<img class="pics" src="https://static.igem.org/mediawiki/2017/d/df/TransFlow.png" alt="Picture">
+
<!-- <video>
−
<b>Flow Layer</b>
+
<source="#" type="#">
−
</div>
+
</video> -->
−
<div class="row">
+
<iframe width="560" height="315" src="https://www.youtube.com/embed/dVPqgxbNlK4" frameborder="0" allowfullscreen></iframe>
−
<img class="pics" src="https://static.igem.org/mediawiki/2017/9/94/TransControl.png" alt="Picture">
+
</div>
−
<b>Control Layer</b>
+
<div class="col-md-6">
−
</div>
+
<div class="center_text_section">
−
</div>
+
<div class="center_text">
−
<div class="tab-pane" id="Mill">
+
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 class="row">
+
<br>
−
<img class="pics" src="https://static.igem.org/mediawiki/2017/5/5f/LysisFlow.png" alt="Picture">
+
<a href="#" download>Download File Here!<i class="material-icons">get_app</i> </a>
−
<b>Flow Layer</b>
+
</br>
−
</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" id="Video3">
 +
<div class="col-md-6">
 +
<h3>Video 3</h3>
 +
<!-- <video>
 +
<source="#" type="#">
 +
</video> -->
 +
<iframe width="560" height="315" src="https://www.youtube.com/embed/dVPqgxbNlK4" frameborder="0" allowfullscreen></iframe>
 
</div>
 
</div>
−
<div class="container" id="Experiment">
+
<div class="col-md-6">
−
<div class="col-md-3">
+
<div class="center_text_section">
−
<img class="pics2" src="https://static.igem.org/mediawiki/2017/5/5f/LysisFlow.png" alt="Picture">
+
<div class="center_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 class="col-md-3">
+
<br>
−
<img class="pics2" src="https://static.igem.org/mediawiki/2017/5/5f/LysisFlow.png" alt="Picture">
+
<a href="#" download>Download File Here!<i class="material-icons">get_app</i> </a>
−
</div>
+
</br>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
 
 +
<div class="container" id="Video4">
 
<div class="col-md-6">
 
<div class="col-md-6">
−
<h3>Experimentation</h3>
+
<h3>Video 4</h3>
−
<div class="text">
+
<!-- <video>
−
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
+
<source="#" type="#">
−
</div>
+
</video> -->
−
</div>
+
<iframe width="560" height="315" src="https://www.youtube.com/embed/dVPqgxbNlK4" frameborder="0" allowfullscreen></iframe>
 +
</div>
 +
<div class="col-md-6">
 +
<div class="center_text_section">
 +
<div class="center_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
 +
<br>
 +
<a href="#" download>Download File Here!<i class="material-icons">get_app</i> </a>
 +
</br>
 +
</div>
 +
</div>
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
</div>
+
  </div>
 
</div>
 
</div>
 
</body>
 
</body>

Revision as of 23:40, 28 October 2017

BostonU_HW

Videos

Check out MARS Tutorial Videos

Summary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lacinia urna ut lectus dictum ultricies. Phasellus euismod tellus quis felis condimentum ullamcorper. Aenean blandit rutrum viverra. Nam at nisl feugiat, gravida magna non, porttitor libero. Suspendisse at purus mattis, ullamcorper odio at, fringilla mi. Sed ultrices viverra est, eu fermentum justo feugiat vitae. Nunc sed egestas enim. Sed sed eros ac mauris suscipit aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque tincidunt nisi justo, a volutpat risus eleifend non.
Picture

Video 1

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
Download File Here!get_app

Video 2

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
Download File Here!get_app

Video 3

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
Download File Here!get_app

Video 4

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
Download File Here!get_app