Difference between revisions of "Team:Marburg"

Line 2: Line 2:
 
<html>
 
<html>
 
<style>
 
<style>
−
article {
+
body {
−
margin-top: 80px;
+
overflow-x: hidden !important;
−
margin-bottom: 40px;
+
}
 +
.home {
 +
  width: 100%;
 +
}
 +
 
 +
section {
 +
position: relative;
 +
overflow: hidden;
 +
width: 100%;
 +
background-color:black;
 +
height: 120vh;
 +
padding: 3%;
 +
box-sizing: border-box;
 +
}
 +
 
 +
.logoSection:before {
 +
position: absolute;
 +
width: 100%;
 +
height: 100%;
 +
left:0;
 +
top:0;
 +
content: "";
 +
opacity: 0.9;
 +
background-size: cover;
 +
background-position: center;
 +
}
 +
.logoSection {
 +
width: 100%;
 +
padding: 8% 5% 5% 5%;
 +
box-sizing: border-box;
 
text-align: center;
 
text-align: center;
−
max-width: 900px;
+
min-height: 100vh;
 +
background-color: white;
 +
background-size: cover;
 
}
 
}
−
article img {
+
.logoBackground {
 +
position: absolute;
 +
width: 100%;
 +
height: calc(100% + 54px);
 +
left:0;
 +
top:0;
 +
background-size: cover;
 +
background-image: url(http://212.224.125.161:8765/igem_2018/img/testbg2.png);
 +
}
 +
.logoSection img {
 +
position: absolute;
 +
display: inline-block;
 +
width: 60%;
 +
left:50%;
 +
top:50%;
 +
transform: translate(-50%, -50%);
 +
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
 +
padding-top: 4%;
 +
animation: mlogo_fadeIn 1s ease-in-out;
 +
}
 +
@keyframes mlogo_fadeIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.75); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }}
 +
.sectionBackground {
 +
position: absolute;
 +
width: 100%;
 +
height: 110%;
 +
left:0;
 +
top:-5%;
 +
background-size: cover;
 +
background-position: center;
 +
opacity: 0.3;
 +
background-color: black;
 +
}
 +
.sectionBackground:before {
 +
position: absolute;
 +
left: 0;
 +
top:0;
 +
content: "";
 +
width: 100%;
 +
height: 100%;
 +
 +
}
 +
 
 +
 
 +
.sectionContent {
 +
display: flex;
 +
justify-content: space-around;
 +
align-content: center;
 +
align-items: center;
 +
padding: 4%;
 +
height: 100%;
 +
box-sizing: border-box;
 +
}
 +
 
 +
.sectionContent figure img {
 
display:inline-block;
 
display:inline-block;
−
max-width: 100%;
+
width: 100%;
 
}
 
}
−
article div {
+
 
 +
.sectionContent figure {
 +
width: 25%;
 +
}
 +
 
 +
.sectionContent aside {
 
display:inline-block;
 
display:inline-block;
−
text-align: left;
+
align-self: center;
−
max-width: 100%;
+
position: relative;
 +
width: 70%;
 +
color:white;
 +
background-color: rgba(0, 0, 0, 0);
 +
font-size: 2.3vw;
 +
text-align: justify;
 +
}
 +
.spacer {
 +
position: relative;
 +
width: 100%;
 +
height: 2px;
 +
background-color:#fff;
 +
box-shadow: 0 0 15px rgba(255,255,255,1);
 +
z-index: 2;
 +
}
 +
.spacerH {
 +
position: absolute;
 +
text-align: center;
 +
background-color: white;
 +
font-size: 2.8vw;
 +
left:50%;
 +
top:50%;
 +
transform: translate(-50%, -50%);
 +
border-radius: 55px;
 +
padding: 1% 2% 1% 2%;
 +
text-align: center;
 +
}
 +
.scrollFade {
 +
opacity: 0;
 +
transition: all 1.5s ease-in-out;
 +
}
 +
.scaleIn {
 +
transform: scale(0.8);
 +
}
 +
.slideInLeft {
 +
transform: translate(-15%, 0);
 +
}
 +
.slideInRight {
 +
transform: translate(15%, 0);
 +
}
 +
.fadeIn {
 +
opacity: 1;
 +
}
 +
.transformIn {
 +
opacity: 1;
 +
transform: translate(0) scale(1.0);
 
}
 
}
−
@media only screen and (max-width: 1100px) {
 
  
 +
.logoSpacer {
 +
position: absolute;
 +
width: 100%;
 +
height: 15px;
 +
background-color:#fff;
 +
box-shadow: 0 0 15px rgba(255,255,255,1);z-index: 2;
 
}
 
}
−
@media only screen and (max-width: 992px) {  
+
 
−
article {
+
 
−
margin-top: 40px;
+
</style>
−
margin-bottom: 40px;
+
 
 +
<div class="home">
 +
<div class="logoSection">
 +
<div class="logoBackground"></div>
 +
<img class="scaleIn" fadeTo="transformIn" src="https://static.igem.org/mediawiki/2018/b/b5/T--Marburg--m_logo.png">
 +
</div>
 +
<!-- 1. VIBRIO BASICS -->
 +
<div class="spacer"></div>
 +
<section>
 +
<div class="sectionBackground parallax" speed="0.2" style="background-image:url(https://static.igem.org/mediawiki/2018/8/86/T--Marburg--home_1.jpg)"></div>
 +
<div class="sectionContent">
 +
<aside class="scrollFade slideInLeft" fadeTo="transformIn">
 +
Establishing Vibrio natriegens as the new chassis organism for synthetic biology
 +
</aside>
 +
<figure>
 +
<img src="https://static.igem.org/mediawiki/2018/a/a6/T--Marburg--VibrioNatriegensBig.gif">
 +
</figure>
 +
</div>
 +
</section>
 +
<!-- 2. STRAIN ENGINEERING -->
 +
<div class="spacer"><div class="spacerH">Strain Engineering</div></div>
 +
<section>
 +
<div class="sectionBackground parallax" speed="0.2" style="background-image:none"></div>
 +
<div class="sectionContent">
 +
<figure>
 +
<img src="https://static.igem.org/mediawiki/2018/6/60/T--Marburg--StrainEngineeringNoBG.png">
 +
</figure>
 +
<aside class="scrollFade slideInRight" fadeTo="transformIn">
 +
We established three new strains derived from the original wildtype strain as chassis organisms for cloning, protein expression and protein interaction studies.
 +
</aside>
 +
</div>
 +
</section>
 +
<!-- 3. PART COLLECTION -->
 +
<div class="spacer"><div class="spacerH">Part Collection</div></div>
 +
<section>
 +
<div class="sectionBackground parallax" speed="0.2" style="background-image:url(https://static.igem.org/mediawiki/2018/d/d8/T--Marburg--home_3.jpg)"></div>
 +
<div class="sectionContent">
 +
<aside class="scrollFade slideInLeft" fadeTo="transformIn">
 +
We created the Marburg Collection, a highly flexible golden-gate based cloning toolbox consisting of 123 individual parts. Our novel measurement workflow was applied to obtain highly reproducible data on the behavior of our parts in V. natriegens
 +
</aside>
 +
<figure>
 +
<img src="https://static.igem.org/mediawiki/2018/c/c8/T--Marburg--PartCollectionCell.gif">
 +
</figure>
 +
</div>
 +
</section>
 +
<!-- 4. METABOLIC -->
 +
<div class="spacer"><div class="spacerH">Metabolic Engineering</div></div>
 +
<section>
 +
<div class="sectionBackground parallax" speed="0.2" style="background-image:url(https://static.igem.org/mediawiki/2018/2/29/T--Marburg--home_4.jpg)"></div>
 +
<div class="sectionContent">
 +
<figure>
 +
<img src="https://static.igem.org/mediawiki/2018/c/c2/T--Marburg--Metabolic-EngineeringCell.gif">
 +
</figure>
 +
<aside class="scrollFade slideInRight" fadeTo="transformIn">
 +
We developed a workflow for accelerating metabolic engineering. As a proof of concept we established the first synthetic pathway in Vibrio natriegens to produce the platform chemical 3-hydroxypropionic acid.
 +
</aside>
 +
</div>
 +
</section>
 +
<!-- 5. INTERLAB -->
 +
<div class="spacer"><div class="spacerH">Interlab</div></div>
 +
<section>
 +
<div class="sectionBackground parallax" speed="0.2" style="background-image:url(https://static.igem.org/mediawiki/2018/a/a7/T--Marburg--home_5.jpg)"></div>
 +
<div class="sectionContent">
 +
<aside class="scrollFade slideInLeft" fadeTo="transformIn">
 +
To collaborate with other teams and spread the word to other scientists on Vibrio natriegens' advantages we had teams from all over Europe conduct a growth curve or a InterLab inspired experiment.
 +
</aside>
 +
<figure>
 +
<img src="http://212.224.125.161:8765/igem_2018/img/cells/Zelle_4.svg">
 +
</figure>
 +
</div>
 +
</section>
 +
<!-- 6. BLISTA -->
 +
<div class="spacer"><div class="spacerH">Accessible Science</div></div>
 +
<section>
 +
<div class="sectionBackground parallax" speed="0.2" style="background-image:url(https://static.igem.org/mediawiki/2018/b/bd/T--Marburg--home_6.jpg)"></div>
 +
<div class="sectionContent">
 +
<figure>
 +
<img src="http://212.224.125.161:8765/igem_2018/img/accessible_wiki_green.png">
 +
</figure>
 +
<aside class="scrollFade slideInRight" fadeTo="transformIn">
 +
This Wiki is designed to be accessible to/for everyone!
 +
For this years Human Practices, iGEM Marburg decided to partner up with the BLISTA again. The BLISTA is the only Highschool for visually impaired students in Europe. As part of our project we (and other teams) designed a barrier-free website to take this step to remove barriers in communication!
 +
</aside>
 +
</div>
 +
</section>
 +
 
 +
<!-- OTHER STUFF -->
 +
 
 +
<style>
 +
 
 +
 
 +
 
 +
 
 +
.sectionH {
 +
width: 100%;
 +
padding: 0 0 4% 0;
 +
text-align: center;
 +
font-size: 1.5em;
 +
box-sizing: border-box;
 +
}
 +
.sectionText {
 +
padding: 5% 0 15% 0;
 +
}
 +
.medal_container {
 +
position: relative;
 +
display:flex;
 +
justify-content: space-around;
 +
width: 100%;
 +
z-index: 2;
 +
}
 +
 
 +
.medal_container>div {
 +
position: relative;
 +
width: 20%;
 +
padding-bottom: 20%;
 +
margin-bottom: 2%;
 +
}
 +
 
 +
.medal_container>div>img {
 +
position: absolute;
 +
width: 100%;
 +
top:50%;
 +
left:50%;
 +
transform: translate(-50%,-50%);
 +
}
 +
.medal_content_container {
 +
  position: relative;
 +
margin-bottom: 10%;
 +
}
 +
.medal_content {
 +
position: absolute;
 +
opacity: 0;
 +
top:0;
 +
transform:translate(0,0);
 +
font-size: 1em;
 +
transition: all 0.3s ease-in-out;
 +
}
 +
.bottomSection .sectionContent aside {
 +
font-size: 2em;
 +
}
 +
.medal_content:first-of-type {
 +
position: relative;
 +
}
 +
 
 +
.medalButton {
 +
transition: transform 0.3s ease-in-out;
 +
cursor: pointer;
 +
}
 +
 
 +
.medalButton_selected {
 +
transform: scale(1.1);
 +
}
 +
 
 +
.noAnim {
 +
transition: none;
 +
}
 +
 
 +
.bottomSection {
 +
height: unset;
 +
background-color:white;
 +
}
 +
 
 +
.bottomSection aside {
 +
color: #333;
 +
}
 +
 
 +
.medal_table table {
 +
border-spacing: 0;
 +
border: 2px solid rgb(231, 231, 231) !important;
 +
font-size: 0.9em;
 +
width: 100%;
 +
border-collapse: unset !important;
 +
border-radius: 1vw;
 +
text-align: center;
 +
}
 +
.medal_table th, td {
 +
border-right: none !;
 +
padding:3% !important;
 +
color:#505050 !important;
 +
}
 +
.medal_table td {
 +
position: relative;
 +
}
 +
.medal_table th{
 +
border-top: none !important;
 +
border-right: none !important;
 +
border-left: none !important;
 +
border-bottom: 2px solid rgb(231, 231, 231) !important;
 +
background-color: white !important;
 +
}
 +
.medal_table tr td:first-of-type {
 +
border:none !important;
 +
}
 +
.medal_table tr td:last-of-type {
 +
border:none !important;
 +
border-left: 2px solid rgb(231, 231, 231) !important;*/
 +
}
 +
.medal_table tr:nth-child(even){
 +
background-color: rgb(255, 255, 255);
 +
}
 +
 
 +
.checkmark {
 +
position: absolute;
 +
width: 15%;
 +
padding-bottom: 15%;
 +
top:50%;
 +
left: 50%;
 +
transform: translate(-50%, -50%);
 +
background-position: center;
 +
background-size: contain;
 +
background-image:url(https://static.igem.org/mediawiki/2018/2/23/T--Marburg--checkmark.svg);
 +
opacity: 0.7;
 +
}
 +
 
 +
/* - - - - - - -  MEDIA QUERIES - - - - - - - */
 +
/* medium desktops */
 +
@media only screen and (max-width: 1800px) {
 +
 
 +
}
 +
@media only screen and (max-width: 1500px) {
 +
 
 +
}
 +
/* small desktops */
 +
@media only screen and (max-width: 1100px) {
 +
 
 +
}
 +
/* landscape tablets */
 +
@media only screen and (max-width: 992px) {
 +
.medal_content {
 +
font-size: 0.8em;
 
}
 
}
 
}
 
}
  
−
@media only screen and (max-width: 600px) {  
+
/* larger phones, portrait tablets */
−
article {
+
@media only screen and (max-width: 786px) {
−
font-size: 1.8em;
+
.logoSection img {
 +
width: 80%;
 
}
 
}
 +
.slideInLeft {
 +
transform: none;
 +
}
 +
.slideInRight {
 +
transform: none;
 +
}
 +
section:nth-of-type(even) .sectionContent {
 +
flex-wrap: wrap;
 +
}
 +
section:nth-of-type(odd) .sectionContent {
 +
flex-wrap: wrap-reverse;
 +
}
 +
.sectionContent figure {
 +
  width: 45%;
 +
  }
 +
.sectionContent aside {
 +
width: 100%;
 +
font-size: 1.5em;
 +
}
 +
.spacerH {
 +
font-size: 6vw;
 +
padding: 1% 3% 1% 3%;
 +
text-align: center;
 +
}
 +
.sectionH {
 +
font-size: 6vw;
 +
}
 +
/*.medal_table table {
 +
border: 2px solid rgb(231, 231, 231) !important;
 +
}
 +
.medal_table th{
 +
border-bottom: 2px solid rgb(231, 231, 231) !important;
 +
}
 +
.medal_table tr td:last-of-type {
 +
border-left: 2px solid rgb(231, 231, 231) !important;*/
 +
}*/
 
}
 
}
 +
/* small phones */
 +
@media only screen and (max-width: 600px) {
 +
.logoSection img {
 +
width: 100%;
 +
}
 +
}
 +
 +
 +
 +
 
</style>
 
</style>
−
<article>
+
<section class="bottomSection">
−
<img src="https://static.igem.org/mediawiki/2018/b/b5/T--Marburg--m_logo.png">
+
<div class="sectionContent">
−
<img src="https://static.igem.org/mediawiki/2018/b/b4/T--Marburg--team_0.png">
+
<aside>
−
<div>
+
<div class="sectionH scrollFade" fadeTo="fadeIn"><h1>Medal Criteria</h1></div>
−
<h2>Vibrigens - Accelerating Synbio:<br>Establishing <i>Vibrio natriegens</i> as the new chassis organism for synthetic biology</h2>
+
<div class="medal_container scrollFade" fadeTo="fadeIn">
−
Waiting for cells to grow is an enormous time sink for synthetic biologists. Cloning cycles with
+
<div class="medalButton" mContent="m_a">
−
the current standard, <i>Escherichia coli</i>, typically take up to three days. In our project Vibrigens
+
          <img src="https://static.igem.org/mediawiki/2018/4/41/T--Marburg--BronzeCriteria.png">
−
- Accelerating Synbio, we established the tools to turn <i>Vibrio natriegens</i> into the next
+
</div>
−
generation chassis for synthetic biology, ready to be used reliably. By taking advantage of its
+
<div class="medalButton" mContent="m_b">
−
unbeaten doubling time of 7 minutes, we substantially reduced waiting time and made oneday-cloning a reality. We built and characterized a flexible golden-gate-based part collection,
+
          <img src="https://static.igem.org/mediawiki/2018/3/38/T--Marburg--SilverCriteria.png">
−
consisting of more than 100 parts, which enables the creation of complex pathways in a short
+
</div>
−
amount of time. Our engineered <i>V. natriegens</i> strains VibriClone and VibriExpress are
+
<div class="medalButton" mContent="m_c">
−
designed for cloning and protein expression applications, respectively. Moreover, we
+
          <img src="https://static.igem.org/mediawiki/2018/0/01/T--Marburg--GoldCriteria.png">
−
established the first synthetic metabolic pathway in this organism by producing the platform
+
</div>
−
chemical 3-Hydroxypropionate and along the way developed an accelerated workflow for
+
<div class="medalButton" mContent="m_d">
−
metabolic engineering.</div>
+
          <img src="https://static.igem.org/mediawiki/2018/9/97/T--Marburg--CrystalCriteria.png">
−
</article>
+
</div>
 +
</div>
 +
<div class="medal_content_container">
 +
<div id="m_a" class="medal_content">
 +
<h1>Bronze</h1>
 +
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
 +
<h2>Register And Attend</h2>
 +
Sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 +
<h2>Deliverables</h2>
 +
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 +
<h2>Attributions</h2>
 +
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 +
<h2>Characterization / Contributoin</h2>
 +
Sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
 +
</div>
 +
<div id="m_b" class="medal_content">
 +
<h1>Silver</h1>
 +
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
 +
<h2>Register And Attend</h2>
 +
Sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 +
<h2>Deliverables</h2>
 +
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 +
<h2>Attributions</h2>
 +
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 +
<h2>Characterization / Contributoin</h2>
 +
Sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
 +
</div>
 +
<div id="m_c" class="medal_content">
 +
<h1>Gold</h1>
 +
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
 +
<h2>Register And Attend</h2>
 +
Sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 +
<h2>Deliverables</h2>
 +
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 +
<h2>Attributions</h2>
 +
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 +
<h2>Characterization / Contributoin</h2>
 +
Sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
 +
</div>
 +
<div id="m_d" class="medal_content">
 +
<h1>Special Prizes</h1>
 +
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
 +
<h2>Register And Attend</h2>
 +
Sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 +
<h2>Deliverables</h2>
 +
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 +
<h2>Attributions</h2>
 +
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 +
<h2>Characterization / Contributoin</h2>
 +
Sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
 +
</div>
 +
</div>
 +
<div class="medal_table">
 +
<table>
 +
<tr>
 +
<th>Results</th>
 +
<th>Achieved</th>
 +
</tr>
 +
<tr>
 +
<td>Example Text</td>
 +
<td><div class="checkmark"></div></td>
 +
</tr>
 +
<tr>
 +
<td>Example Text</td>
 +
<td><div class="checkmark"></div></td>
 +
</tr>
 +
<tr>
 +
<td>Example Text</td>
 +
<td><div class="checkmark"></div></td>
 +
</tr>
 +
<tr>
 +
<td>Example Text</td>
 +
<td><div class="checkmark"></div></td>
 +
</tr>
 +
<tr>
 +
<td>Example Text</td>
 +
<td><div class="checkmark"></div></td>
 +
</tr>
 +
<tr>
 +
<td>Example Text</td>
 +
<td><div class="checkmark"></div></td>
 +
</tr>
 +
<tr>
 +
<td>Example Text</td>
 +
<td><div class="checkmark"></div></td>
 +
</tr>
 +
<tr>
 +
<td>Example Text</td>
 +
<td><div class="checkmark"></div></td>
 +
</tr>
 +
<tr>
 +
<td>Example Text</td>
 +
<td><div class="checkmark"></div></td>
 +
</tr>
 +
<tr>
 +
<td>Example Text</td>
 +
<td><div class="checkmark"></div></td>
 +
</tr>
 +
</table>
 +
</div>
 +
</aside>
 +
</div>
 +
</section>
 +
</div>
 +
<script>
 +
$(document).ready(function() {
 +
var last = null;
 +
$(".medalButton").each(function(i){
 +
if(last == null){
 +
last = $(this).attr("mContent");
 +
$("#"+last).css({"opacity":"1"});
 +
$(this).addClass("medalButton_selected");
 +
}
 +
//lastX = 0;
 +
$(this).click(function(){
 +
if($(this).attr("mContent") != last){
 +
var content = $("#"+$(this).attr("mContent"));
 +
/*var x = $(this).position().left;
 +
var dir = x > lastX ? -1 : 1;*/
 +
$(content).css({"opacity":"1"});
 +
$("#"+last).css({"opacity":"0"});
 +
$(this).addClass("medalButton_selected");
 +
$(".medalButton[mContent='"+last+"']").removeClass("medalButton_selected");
 +
last = content.attr("id");
 +
//lastX = x;
 +
}
 +
});
 +
});
 +
});
 +
</script>
 
</html>
 
</html>
 
{{Marburg/footer}}
 
{{Marburg/footer}}

Revision as of 15:09, 17 October 2018

Strain Engineering
Part Collection
Metabolic Engineering
Interlab
Accessible Science
B. Marchal