Difference between revisions of "Team:Marburg"

 
(42 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{Marburg/bulma.css}}
+
{{Marburg}}
−
{{Marburg/styles.css}}
+
{{Marburg/index.css}}
 
<html>
 
<html>
−
 
+
   <script>
−
   <head>
+
     setTimeout(function () {
−
     <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300&display=swap" rel="stylesheet">
+
−
    <style>
+
−
      body,
+
−
      h1 {
+
−
        font-family: 'Roboto Condensed', sans-serif !important;
+
−
      }
+
−
 
+
−
      h1 {
+
−
        overflow: unset !important;
+
−
      }
+
−
 
+
−
      #HQ_page p {
+
−
        font-family: 'Roboto Condensed', sans-serif !important;
+
−
      }
+
−
    </style>
+
−
    <script>
+
−
      setTimeout(function () {
+
 
         $(".glitch").removeClass("glitch");
 
         $(".glitch").removeClass("glitch");
 
       }, 1500);
 
       }, 1500);
−
     </script>
+
     function inViewport(element) {
−
  </head>
+
       var bb = element.getBoundingClientRect();
−
 
+
       return !(bb.top > (innerHeight - 150) || bb.bottom < 50);
−
  <body>
+
    }
−
    <style>
+
    document.querySelector(".main").addEventListener("scroll", function (event) {
−
      .wrapper {
+
      var strain = document.querySelector(".main").querySelector("#strain");
−
        margin-left: -20px;
+
       var toolbox = document.querySelector(".main").querySelector("#toolbox");
−
        position: absolute;
+
      var measurement = document.querySelector(".main").querySelector("#measurement");
−
        top: 0;
+
       var automation = document.querySelector(".main").querySelector("#automation");
−
        left: 0;
+
       var awards = document.querySelector(".main").querySelector("#awards");
−
        width: 100vw;
+
       strain.style.opacity = inViewport(strain) ? "1" : "0";
−
        max-width: 100vw;
+
       toolbox.style.opacity = inViewport(toolbox) ? "1" : "0";
−
        height: calc(100vh - 18px);
+
       measurement.style.opacity = inViewport(measurement) ? "1" : "0";
−
        overflow: auto;
+
       automation.style.opacity = inViewport(automation) ? "1" : "0";
−
        background: #fff;
+
      awards.style.opacity = inViewport(awards) ? "1" : "0";
−
        max-height: calc(100vh - 18px);
+
    })
−
        min-height: calc(100vh - 18px);
+
  </script>
−
        background-color: #F5F5F5;
+
  <div>
−
      }
+
    <div class="hero-wrapper">
−
 
+
      <video playsinline autoplay muted loop>
−
      hr {
+
        <source src="https://static.igem.org/mediawiki/2019/5/5f/T--Marburg--hero_video.mp4" type="video/mp4">
−
        display: block;
+
      </video>
−
        height: 1px;
+
      <div class="words">
−
        border: 0;
+
        <p class="word glitch" data-text="F A S T E S T .">
−
        border-top: 2px solid #69A555;
+
          F A S T E S T .
−
        margin: 1em 0;
+
        </p>
−
        padding: 0;
+
        <p class="word glitch" data-text="P H O T O T R O P H I C .">
−
        margin-left: 15%;
+
           P H O T O T R O P H I C .
−
        margin-right: 15%;
+
         </p>
−
      }
+
         <p class="word glitch" data-text="O R G A N I S M .">
−
 
+
           O R G A N I S M .
−
       .navbar-link:not(.is-arrowless)::after {
+
−
        border-color: #69A555;
+
−
       }
+
−
 
+
−
      .navbar-menu a:hover {
+
−
        color: #69A555 !important;
+
−
      }
+
−
 
+
−
      .glitch {
+
−
        position: relative;
+
−
        color: white;
+
−
        letter-spacing: .15em;
+
−
      }
+
−
 
+
−
      .glitch::before {
+
−
        content: attr(data-text);
+
−
        position: absolute;
+
−
        top: 0;
+
−
        left: 0;
+
−
        width: 100%;
+
−
        height: 100%;
+
−
        left: 2px;
+
−
        text-shadow: -2px 0 #ff00c1;
+
−
        clip: rect(44px, 450px, 56px, 0);
+
−
        animation: glitch-anim 5s infinite linear alternate-reverse;
+
−
      }
+
−
 
+
−
      .glitch::after {
+
−
        content: attr(data-text);
+
−
        position: absolute;
+
−
        top: 0;
+
−
        left: 0;
+
−
        width: 100%;
+
−
        height: 100%;
+
−
        left: -2px;
+
−
        text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
+
−
        animation: glitch-anim2 1s infinite linear alternate-reverse;
+
−
      }
+
−
 
+
−
      .navbar {
+
−
        background-color: #F5F5F5;
+
−
      }
+
−
 
+
−
      @keyframes glitch-anim {
+
−
        0% {
+
−
          clip: rect(43px, 9999px, 85px, 0);
+
−
          transform: skew(0.57deg);
+
−
        }
+
−
 
+
−
        5% {
+
−
          clip: rect(77px, 9999px, 66px, 0);
+
−
          transform: skew(0.15deg);
+
−
        }
+
−
 
+
−
        10% {
+
−
          clip: rect(47px, 9999px, 42px, 0);
+
−
          transform: skew(0.88deg);
+
−
        }
+
−
 
+
−
        15% {
+
−
          clip: rect(91px, 9999px, 73px, 0);
+
−
          transform: skew(0.3deg);
+
−
        }
+
−
 
+
−
        20% {
+
−
          clip: rect(72px, 9999px, 52px, 0);
+
−
          transform: skew(0.46deg);
+
−
        }
+
−
 
+
−
        25% {
+
−
          clip: rect(7px, 9999px, 90px, 0);
+
−
          transform: skew(0.11deg);
+
−
        }
+
−
 
+
−
        30% {
+
−
          clip: rect(13px, 9999px, 58px, 0);
+
−
          transform: skew(0.11deg);
+
−
        }
+
−
 
+
−
        35% {
+
−
          clip: rect(36px, 9999px, 19px, 0);
+
−
          transform: skew(0.57deg);
+
−
        }
+
−
 
+
−
        40% {
+
−
          clip: rect(47px, 9999px, 25px, 0);
+
−
          transform: skew(0.92deg);
+
−
        }
+
−
 
+
−
        45% {
+
−
          clip: rect(40px, 9999px, 47px, 0);
+
−
          transform: skew(0.39deg);
+
−
        }
+
−
 
+
−
        50% {
+
−
          clip: rect(14px, 9999px, 72px, 0);
+
−
          transform: skew(0.94deg);
+
−
        }
+
−
 
+
−
        55% {
+
−
          clip: rect(27px, 9999px, 13px, 0);
+
−
          transform: skew(0.5deg);
+
−
        }
+
−
 
+
−
        60% {
+
−
          clip: rect(96px, 9999px, 71px, 0);
+
−
          transform: skew(0.83deg);
+
−
        }
+
−
 
+
−
        65% {
+
−
          clip: rect(67px, 9999px, 39px, 0);
+
−
          transform: skew(0.24deg);
+
−
        }
+
−
 
+
−
        70% {
+
−
          clip: rect(8px, 9999px, 22px, 0);
+
−
          transform: skew(0.52deg);
+
−
        }
+
−
 
+
−
        75% {
+
−
          clip: rect(83px, 9999px, 41px, 0);
+
−
          transform: skew(0.6deg);
+
−
        }
+
−
 
+
−
        80% {
+
−
          clip: rect(28px, 9999px, 92px, 0);
+
−
          transform: skew(0.89deg);
+
−
        }
+
−
 
+
−
        85% {
+
−
          clip: rect(29px, 9999px, 23px, 0);
+
−
          transform: skew(0.7deg);
+
−
        }
+
−
 
+
−
        90% {
+
−
          clip: rect(90px, 9999px, 26px, 0);
+
−
          transform: skew(0.75deg);
+
−
        }
+
−
 
+
−
        95% {
+
−
          clip: rect(73px, 9999px, 35px, 0);
+
−
          transform: skew(0.29deg);
+
−
        }
+
−
 
+
−
        100% {
+
−
          clip: rect(74px, 9999px, 39px, 0);
+
−
          transform: skew(1deg);
+
−
        }
+
−
       }
+
−
 
+
−
      @keyframes glitch-anim2 {
+
−
        0% {
+
−
          clip: rect(98px, 9999px, 61px, 0);
+
−
          transform: skew(0.63deg);
+
−
        }
+
−
 
+
−
        5% {
+
−
          clip: rect(78px, 9999px, 5px, 0);
+
−
          transform: skew(0.78deg);
+
−
        }
+
−
 
+
−
        10% {
+
−
          clip: rect(67px, 9999px, 67px, 0);
+
−
          transform: skew(0.19deg);
+
−
        }
+
−
 
+
−
        15% {
+
−
          clip: rect(61px, 9999px, 86px, 0);
+
−
          transform: skew(0.76deg);
+
−
        }
+
−
 
+
−
        20% {
+
−
          clip: rect(70px, 9999px, 12px, 0);
+
−
          transform: skew(0.22deg);
+
−
        }
+
−
 
+
−
        25% {
+
−
          clip: rect(14px, 9999px, 36px, 0);
+
−
          transform: skew(0.83deg);
+
−
        }
+
−
 
+
−
        30% {
+
−
          clip: rect(32px, 9999px, 99px, 0);
+
−
          transform: skew(0.96deg);
+
−
        }
+
−
 
+
−
        35% {
+
−
          clip: rect(58px, 9999px, 60px, 0);
+
−
          transform: skew(0.39deg);
+
−
        }
+
−
 
+
−
        40% {
+
−
          clip: rect(47px, 9999px, 41px, 0);
+
−
          transform: skew(0.45deg);
+
−
        }
+
−
 
+
−
        45% {
+
−
          clip: rect(40px, 9999px, 8px, 0);
+
−
          transform: skew(0.76deg);
+
−
        }
+
−
 
+
−
        50% {
+
−
          clip: rect(60px, 9999px, 62px, 0);
+
−
          transform: skew(0.47deg);
+
−
        }
+
−
 
+
−
        55% {
+
−
          clip: rect(86px, 9999px, 86px, 0);
+
−
          transform: skew(0.1deg);
+
−
        }
+
−
 
+
−
        60% {
+
−
          clip: rect(98px, 9999px, 34px, 0);
+
−
          transform: skew(0.2deg);
+
−
        }
+
−
 
+
−
        65% {
+
−
          clip: rect(38px, 9999px, 31px, 0);
+
−
          transform: skew(0.66deg);
+
−
        }
+
−
 
+
−
        70% {
+
−
          clip: rect(5px, 9999px, 1px, 0);
+
−
          transform: skew(0.22deg);
+
−
        }
+
−
 
+
−
        75% {
+
−
          clip: rect(26px, 9999px, 45px, 0);
+
−
          transform: skew(0.04deg);
+
−
        }
+
−
 
+
−
        80% {
+
−
          clip: rect(1px, 9999px, 56px, 0);
+
−
          transform: skew(0.45deg);
+
−
        }
+
−
 
+
−
        85% {
+
−
          clip: rect(51px, 9999px, 31px, 0);
+
−
          transform: skew(0.7deg);
+
−
        }
+
−
 
+
−
        90% {
+
−
          clip: rect(30px, 9999px, 6px, 0);
+
−
          transform: skew(0.95deg);
+
−
        }
+
−
 
+
−
        95% {
+
−
          clip: rect(57px, 9999px, 97px, 0);
+
−
          transform: skew(0.01deg);
+
−
        }
+
−
 
+
−
        100% {
+
−
          clip: rect(80px, 9999px, 54px, 0);
+
−
          transform: skew(0.97deg);
+
−
        }
+
−
      }
+
−
 
+
−
       .as_hero {
+
−
        position: relative;
+
−
        background-color: #333;
+
−
        -webkit-background-size: cover;
+
−
        -moz-background-size: cover;
+
−
        -o-background-size: cover;
+
−
        background-size: cover;
+
−
        background-repeat: no-repeat;
+
−
        background-attachment: fixed;
+
−
        background-position: top;
+
−
        height: 100vh;
+
−
      }
+
−
 
+
−
      .logo {
+
−
        background: url("https://static.igem.org/mediawiki/2019/3/3f/T--Marburg--header_logo.svg");
+
−
        min-height: 100%;
+
−
        width: inherit;
+
−
        background-repeat: no-repeat;
+
−
        margin-top: 5px;
+
−
      }
+
−
 
+
−
      .as_hero .as_hero_content {
+
−
        position: relative;
+
−
        z-index: 99;
+
−
        display: flex;
+
−
        align-items: center;
+
−
        background: transparent;
+
−
        border-radius: 0;
+
−
        min-height: calc(100vh - 52px);
+
−
        padding-left: 50%;
+
−
        overflow: hidden;
+
−
       }
+
−
 
+
−
      .navbar {
+
−
        -webkit-transition: background-color 0.4s ease;
+
−
        -moz-transition: background-color 0.4s ease;
+
−
        -o-transition: background-color 0.4s ease;
+
−
        transition: background-color 0.4s ease;
+
−
      }
+
−
 
+
−
      .transparent {
+
−
        background-color: transparent;
+
−
        -webkit-transition: background-color 0.4s ease;
+
−
        -moz-transition: background-color 0.4s ease;
+
−
        -o-transition: background-color 0.4s ease;
+
−
        transition: background-color 0.4s ease;
+
−
      }
+
−
 
+
−
      .transparent.navbar {
+
−
        background-color: rgba(100, 0, 35, .5);
+
−
      }
+
−
 
+
−
      .transparent .logo {
+
−
        background: url("https://static.igem.org/mediawiki/2019/3/3a/T--Marburg--header_logo_white.svg");
+
−
        background-repeat: no-repeat;
+
−
      }
+
−
 
+
−
      .transparent .navbar-link {
+
−
        color: #F5F5F5;
+
−
      }
+
−
 
+
−
      .transparent .navbar-item {
+
−
        color: #F5F5F5;
+
−
      }
+
−
 
+
−
      .transparent .navbar-menu a:visited {
+
−
        color: #F5F5F5;
+
−
      }
+
−
 
+
−
      .transparent .navbar-dropdown {
+
−
        background: rgba(2, 2, 2, .5);
+
−
      }
+
−
 
+
−
      .transparent .navbar-burger {
+
−
        color: #F5F5F5;
+
−
      }
+
−
 
+
−
      .transparent .navbar-menu.is-active .navbar-dropdown {
+
−
        background: transparent !important;
+
−
      }
+
−
 
+
−
      .transparent .navbar-item.has-dropdown:hover .navbar-link {
+
−
        background: rgba(2, 2, 2, .5);
+
−
       }
+
−
 
+
−
      .transparent .navbar-menu.is-active .navbar-item.has-dropdown:hover .navbar-link {
+
−
        background: transparent !important;
+
−
      }
+
−
 
+
−
      .transparent .navbar-menu.is-active {
+
−
        background: rgba(2, 2, 2, .7);
+
−
      }
+
−
 
+
−
      .transparent .navbar-menu.is-active .navbar-item {
+
−
        background: transparent !important;
+
−
      }
+
−
 
+
−
      .grid-wrapper {
+
−
        display: flex;
+
−
        align-items: center;
+
−
        flex-direction: row;
+
−
      }
+
−
 
+
−
      .text1 {
+
−
        margin-left: -125px;
+
−
        z-index: 10;
+
−
        padding: 1em;
+
−
      }
+
−
 
+
−
      .grid1 {
+
−
        display: grid;
+
−
        grid-auto-columns: min-content;
+
−
        float: left;
+
−
      }
+
−
 
+
−
      .grid1 #img1 {
+
−
        grid-column: 2;
+
−
        grid-row: 1 / span 2;
+
−
        margin-left: -150px;
+
−
        min-width: 200px;
+
−
        height: 200px;
+
−
        background-color: #418D2A;
+
−
       }
+
−
 
+
−
      .grid1 #img2 {
+
−
        grid-column: 1;
+
−
        grid-row: 2 / span 2;
+
−
        z-index: 1;
+
−
        margin-top: -75px;
+
−
        min-width: 200px;
+
−
        height: 200px;
+
−
        background-color: #186703;
+
−
      }
+
−
 
+
−
      .grid1 #img3 {
+
−
        grid-column: 3;
+
−
        grid-row: 3;
+
−
        z-index: 2;
+
−
        margin-left: -125px;
+
−
        margin-top: -75px;
+
−
        min-width: 200px;
+
−
        height: 150px;
+
−
        background-color: #6FB05A;
+
−
      }
+
−
 
+
−
      header {
+
−
        z-index: 1;
+
−
      }
+
−
 
+
−
      video {
+
−
        min-width: 100%;
+
−
        max-width: none !important;
+
−
        min-height: 100%;
+
−
        position: absolute;
+
−
        top: 50%;
+
−
        left: 50%;
+
−
        transform: translateX(-50%) translateY(-50%);
+
−
      }
+
−
 
+
−
      .video-container {
+
−
        height: 100%;
+
−
        width: 100%;
+
−
        overflow: hidden;
+
−
        position: relative;
+
−
       }
+
−
 
+
−
      .navbar-link {
+
−
        font-weight: bold;
+
−
      }
+
−
 
+
−
      .navbar-item {
+
−
        font-weight: bold;
+
−
      }
+
−
 
+
−
      @media screen and (max-width: 1550px) {
+
−
        .as_hero_content p {
+
−
          margin: 0 !important;
+
−
        }
+
−
       }
+
−
 
+
−
      @media screen and (max-width: 1375px) {
+
−
        .as_hero_content {
+
−
          padding-left: 25% !important;
+
−
        }
+
−
      }
+
−
 
+
−
      @media screen and (max-width: 925px) {
+
−
        .as_hero_content {
+
−
          padding-left: 10% !important;
+
−
        }
+
−
 
+
−
        .grid-wrapper {
+
−
          flex-direction: column !important;
+
−
        }
+
−
 
+
−
        .footer-container {
+
−
          flex-direction: column !important;
+
−
          width: fit-content;
+
−
        }
+
−
 
+
−
        .text1 {
+
−
          margin-left: 0;
+
−
          z-index: unset;
+
−
        }
+
−
      }
+
−
 
+
−
      @media screen and (max-width: 785px) {
+
−
        .as_hero_content {
+
−
          padding-left: 5% !important;
+
−
        }
+
−
      }
+
−
    </style>
+
−
 
+
−
    <script>
+
−
      window.onload = function () {
+
−
        $("#container").scroll(function () {
+
−
          var scroll = $("#container").scrollTop();
+
−
          if (scroll > 160) {
+
−
            $("#nav").removeClass("transparent");
+
−
          } else {
+
−
            $("#nav").addClass("transparent");
+
−
          }
+
−
        });
+
−
      }
+
−
    </script>
+
−
 
+
−
    <div id="container" class="wrapper" style="max-height: 100vh; overflow: auto;">
+
−
      <div class="as_hero">
+
−
        <div class="video-container">
+
−
          <video playsinline autoplay muted loop>
+
−
            <source src="https://static.igem.org/mediawiki/2019/5/5f/T--Marburg--hero_video.mp4" type="video/mp4">
+
−
          </video>
+
−
          <div class="as_hero_content">
+
−
            <div style="color: white;">
+
−
              <p class="glitch" data-text="Fastest." style="font-size: 4em; line-height: 1em; letter-spacing: .15em;">Fastest.</p>
+
−
              <p class="glitch" data-text="Phototrophic." style="font-size: 4em; line-height: 1em; letter-spacing: .15em; margin-left: 1em;">
+
−
                Phototrophic.</p>
+
−
              <p class="glitch" data-text="Organism." style="font-size: 4em; line-height: 1em; letter-spacing: .15em; margin-left: 2em;">Organism.</p>
+
−
            </div>
+
−
           </div>
+
−
         </div>
+
−
         <header style="box-shadow: none; background-color: transparent; position: fixed; margin-top: 18px; z-index: 100; padding-right: 15px;">
+
−
          <nav id="nav" class="navbar transparent" role="navigation" aria-label="main navigation">
+
−
            <div class="navbar-brand">
+
−
              <a href="https://2019.igem.org/Team:Marburg" class="navbar-item" style="padding: 0; width: 150px;">
+
−
                <span class="logo"></span>
+
−
              </a>
+
−
              <a id="burger" role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbar">
+
−
                <span aria-hidden="true"></span>
+
−
                <span aria-hidden="true"></span>
+
−
                <span aria-hidden="true"></span>
+
−
              </a>
+
−
            </div>
+
−
            <div id="navbar" class="navbar-menu">
+
−
              <div class="navbar-end">
+
−
                <div class="navbar-item has-dropdown is-hoverable">
+
−
                  <span class="navbar-link">
+
−
                    Team
+
−
                  </span>
+
−
                  <div class="navbar-dropdown">
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Team">
+
−
                      Team Members
+
−
                    </a>
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Collaborations">
+
−
                      Collaboration
+
−
                    </a>
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Attributions">
+
−
                      Attribution
+
−
                    </a>
+
−
                  </div>
+
−
                </div>
+
−
                <div class="navbar-item has-dropdown is-hoverable">
+
−
                  <span class="navbar-link">
+
−
                    Project
+
−
                  </span>
+
−
                  <div class="navbar-dropdown">
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Description">
+
−
                      Description
+
−
                    </a>
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Design">
+
−
                      Design
+
−
                    </a>
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Experiments">
+
−
                      Experiments
+
−
                    </a>
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Notebook">
+
−
                      Notebook
+
−
                    </a>
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Contribution">
+
−
                      Contribution
+
−
                    </a>
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Results">
+
−
                      Results
+
−
                    </a>
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Demonstrate">
+
−
                      Demonstrate
+
−
                    </a>
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Measurement">
+
−
                      Measurement
+
−
                    </a>
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Model">
+
−
                      Model
+
−
                    </a>
+
−
                  </div>
+
−
                </div>
+
−
                <div class="navbar-item has-dropdown is-hoverable">
+
−
                  <span class="navbar-link">
+
−
                    Parts
+
−
                  </span>
+
−
                  <div class="navbar-dropdown">
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Parts">
+
−
                      Parts Overview
+
−
                    </a>
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Basic_Part">
+
−
                      Basic Parts
+
−
                    </a>
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Composite_Part">
+
−
                      Composite Part
+
−
                    </a>
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Part_Collection">
+
−
                      Part Collection
+
−
                    </a>
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Improve">
+
−
                      Improve
+
−
                    </a>
+
−
                  </div>
+
−
                </div>
+
−
                <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Safety">
+
−
                  Safety
+
−
                </a>
+
−
                <div class="navbar-item has-dropdown is-hoverable">
+
−
                  <span class="navbar-link">
+
−
                    Human Practices
+
−
                  </span>
+
−
                  <div class="navbar-dropdown">
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Human_Practices">
+
−
                      Human Practices
+
−
                    </a>
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Integrated_Human_Practices">
+
−
                      Integrated Human Practice
+
−
                    </a>
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Public_Engagement">
+
−
                      Public Engagement
+
−
                    </a>
+
−
                  </div>
+
−
                </div>
+
−
                <div class="navbar-item has-dropdown is-hoverable">
+
−
                  <span class="navbar-link">
+
−
                    Awards
+
−
                  </span>
+
−
                  <div class="navbar-dropdown">
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Integrated_Human_Practices">
+
−
                      Integrated Human Practice
+
−
                    </a>
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Public_Engagement">
+
−
                      Education and Public Engagement
+
−
                    </a>
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Model">
+
−
                      Model
+
−
                    </a>
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Measurement">
+
−
                      Measurement
+
−
                    </a>
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Basic_Part">
+
−
                      Best New Basic Part
+
−
                    </a>
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Composite_Part">
+
−
                      Best New Composite Part
+
−
                    </a>
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Part_Collection">
+
−
                      Best New Part Collection
+
−
                    </a>
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Software">
+
−
                      Software
+
−
                    </a>
+
−
                    <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Synthetic_Biology">
+
−
                      Best Plant Synthetic Biology
+
−
                    </a>
+
−
                  </div>
+
−
                </div>
+
−
                <a class="navbar-item" href="https://igem.org/2019_Judging_Form?team=Marburg">
+
−
                  Judging Form
+
−
                </a>
+
−
                <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/Labautomation">
+
−
                  Labautomation
+
−
                </a>
+
−
              </div>
+
−
            </div>
+
−
          </nav>
+
−
        </header>
+
−
      </div>
+
−
      <div style="width: 100%; padding: 2rem; display: flex; align-items: center; justify-content: center;">
+
−
        <p style="text-align: center; font-size: 1.5em;">
+
−
          Establishing the fastest growing phototrophic organism with a doubling time of 90 min as a chassis for synthetic biology and the iGEM
+
−
           community.
+
 
         </p>
 
         </p>
 
       </div>
 
       </div>
−
       <div style="width: 100%; padding: 2rem; display: flex; align-items: center; justify-content: center;">
+
       <img class="bobbel" src="https://static.igem.org/mediawiki/2019/a/a6/T--Marburg--bobbel.svg"
−
         <p style="text-align: center; font-size: 1em;">
+
        onclick="$('.main').animate({ scrollTop: window.innerHeight - 52 }, 500);">
−
          We created an easy to use toolbox for Synechococcus elongatus UTEX 2973 to empower rapid design testing, including genome engineering tools,
+
    </div>
−
          self-replicating plasmid systems, natural competence and a Golden Gate-based part library. By providing our fast phototrophic chassis to the
+
    <div class="hero-text">
−
          community, we are paving the way for other phototrophic organisms in synthetic biology.
+
      <p class="hero-first">
 +
         By providing the fastest growing phototrophic chassis to the community, we are paving the way for other
 +
        phototrophic organisms in Synthetic Biology.
 +
      </p>
 +
      <hr class="line" style="transform: unset;">
 +
      <p class="hero-second">
 +
        We created an easy to use toolbox for <i>Synechococcus elongatus</i> UTEX 2973 to empower rapid design
 +
        testing, including genome engineering tools, self-replicating plasmid systems, natural competence and a Golden
 +
        Gate-based part library. By providing the fastest growing phototrophic chassis with a doubling time of <b>under 80 minutes</b> to the community, we are paving the way
 +
        for other phototrophic organisms in Synthetic Biology.
 +
      </p>
 +
    </div>
 +
    <div>
 +
      <div class="box-light">
 +
        <img id="strain" src="https://static.igem.org/mediawiki/2019/9/91/T--Marburg--hero_strain.jpg"
 +
          alt="Strain Engineering Photo" style="margin-top: unset !important;">
 +
      </div>
 +
      <div class="box-dark left">
 +
        <img src="https://static.igem.org/mediawiki/2019/6/6f/T--Marburg--logo_strain.svg" class="logo"
 +
          alt="Strain Engineering Logo">
 +
        <h1 class="heading">
 +
          S T R A I N
 +
          <br><br>
 +
          E N G I N E E R I N G
 +
        </h1>
 +
        <hr class="line">
 +
        <p class="text">
 +
          We created an "easy to use" phototrophic chassis by restoring the natural competence of <i>S. elongatus</i>
 +
          UTEX 2973 in order to enormously simplify the transformation process. We established a genome modification
 +
          system via the CRISPR/Cas12a and enabled the usage of self-replicating plasmids overcoming the drawbacks of time
 +
          intensive genome integration for genetic design testing.
 
         </p>
 
         </p>
 
       </div>
 
       </div>
−
      <hr>
+
    </div>
−
      <div style="width: 100%; padding: 2rem; display: flex; align-items: center; justify-content: center;">
+
    <div>
−
        <div class="grid-wrapper">
+
      <div class="box-light">
−
          <div class="grid1">
+
        <img id="toolbox" src="https://static.igem.org/mediawiki/2019/c/ca/T--Marburg--hero_toolbox.jpg" alt="Toolbox Photo">
−
            <img id="img1" />
+
−
            <img id="img2" />
+
−
            <img id="img3" />
+
−
          </div>
+
−
          <div class="text1">
+
−
            <h1 style="font-size: 1.5em;">Strain engineering</h1>
+
−
            <p style="font-size: 1em;">
+
−
              With the help of our MoClo compatible CRISPR/cpf1 system we were able to restore the natural
+
−
              competence of S. elongatus UTEX 2973. Curing it of its endogenous plasmid enabled us to use its origin of replication for
+
−
              self-replicating
+
−
              plasmids.
+
−
            </p>
+
−
          </div>
+
−
        </div>
+
 
       </div>
 
       </div>
−
       <div style="width: 100%; padding: 2rem; display: flex; align-items: center; justify-content: center;">
+
       <div class="box-dark right">
−
         <div class="grid-wrapper">
+
         <img src="https://static.igem.org/mediawiki/2019/a/a9/T--Marburg--logo_toolbox.svg" class="logo" alt="Toolbox Logo">
−
          <div>
+
        <h1 class="heading">
−
            <h1 style="font-size: 1.5em;">The Toolbox</h1>
+
          T O O L B O X
−
            <p style="font-size: 1em;">
+
        </h1>
−
            </p>
+
        <hr class="line">
−
           </div>
+
        <p class="text">
−
         </div>
+
           We constructed the green expansion, a set of biobricks to accompany our new chassis. It contains the first
 +
          MoClo compatible shuttle vector for cyanobacteria. Additionally users can design plasmids for genomic
 +
          integrations using novel rationally designed integration sites. To improve standardization in phototrophic
 +
          research we deliver standardized measurement entry vectors to test BioBricks in cyanobacteria.
 +
         </p>
 
       </div>
 
       </div>
−
      <div style="width: 100%; padding: 2rem; display: flex; align-items: center; justify-content: center;">
+
    </div>
−
        <div class="grid-wrapper">
+
    <div>
−
          <div>
+
      <div class="box-light">
−
            <h1 style="font-size: 1.5em;">Drylab</h1>
+
        <img id="measurement" src="https://static.igem.org/mediawiki/2019/c/c3/T--Marburg--hero_measurement.jpg"
−
            <p style="font-size: 1em;">
+
          alt="Measurement Photo">
−
            </p>
+
−
          </div>
+
−
        </div>
+
 
       </div>
 
       </div>
−
       <div style="width: 100%; padding: 2rem; display: flex; align-items: center; justify-content: center;">
+
       <div class="box-dark left">
−
         <div class="grid-wrapper">
+
         <img src="https://static.igem.org/mediawiki/2019/8/8a/T--Marburg--logo_measurement.svg" class="logo"
−
           <div>
+
           alt="Measurement Logo">
−
            <h1 style="font-size: 1.5em;">Measurement</h1>
+
        <h1 class="heading" style="margin-top: 3em;">
−
            <p style="font-size: 1em;">
+
          M E A S U R E M E N T
−
            </p>
+
        </h1>
−
           </div>
+
        <hr class="line">
−
         </div>
+
        <p class="text">
 +
           Following the call for long needed standardization in the cyanobacterial community, we ventured out to rationalize important measurements hugely affecting the growth of our cultures. As using fluorescence for part characterization proves difficult in self-fluorescent cyanobacteria, we showed that the use of bioluminescence reporters as well as the use of flow cytometry offer promising alternatives to improve these characterizations.
 +
         </p>
 
       </div>
 
       </div>
−
      <div style="width: 100%; padding: 2rem; display: flex; align-items: center; justify-content: center;">
+
    </div>
−
        <div class="grid-wrapper">
+
    <div>
−
          <div>
+
      <div class="box-light">
−
            <h1 style="font-size: 1.5em;">Metabolic Engineering</h1>
+
        <img id="automation" src="https://static.igem.org/mediawiki/2019/f/f9/T--Marburg--hero_automation.jpg"
−
            <p style="font-size: 1em;">
+
          alt="Automation Photo">
−
            </p>
+
−
          </div>
+
−
        </div>
+
 
       </div>
 
       </div>
−
       <hr>
+
       <div class="box-dark right">
−
      <footer class="footer is-unselectable" style="padding: 1.5rem; background-color: #3D404D;">
+
         <img src="https://static.igem.org/mediawiki/2019/3/3f/T--Marburg--logo_automation.svg" class="logo"
−
         <div class="container is-flex footer-container" style="justify-content: space-between;">
+
          alt="Automation Logo">
−
          <div style="width: max-content;">
+
        <h1 class="heading">
−
            <a href="https://www.facebook.com/IGEMMarburg2019/">
+
          A U T O M A T I O N
−
              <img src="https://static.igem.org/mediawiki/2019/f/f5/T--Marburg--logo_thm.svg" alt="THM" style="height: 100px;" />
+
        </h1>
−
            </a>
+
        <hr class="line">
−
            <a href="https://www.facebook.com/IGEMMarburg2019/">
+
        <p class="text">
−
              <img src="https://static.igem.org/mediawiki/2019/d/d6/T--Marburg--logo_marburg.svg" alt="Marburg" style="height: 100px;" />
+
          The goal of the automation lab was to completely automate the process of cloning using OT-2 Pipetting robots. This was achieved using a state of the art faster-RCNN neural network and a self made camera module and light table for colony picking. We also automated large scale purification of plasmids. Our
−
            </a>
+
          software as well as the hardware blueprints are published on GitHub to give everybody access to scalable and affordable automation.
−
          </div>
+
        </p>
−
          <div style="display: flex; align-items: center; justify-content: center;">
+
      </div>
−
            <a href="mailto:igem2019@synmikro.uni-marburg.de">
+
    </div>
−
              <img src="https://static.igem.org/mediawiki/2019/2/2c/T--Marburg--m_icon_ma.svg" alt="Mail" style="height: 50px;" />
+
    <div id="awards" class="box-light awards" onclick="window.location.href = '/Team:Marburg/MedalCriteria'">
−
            </a>
+
      <h1 class="award-title title">Achievements</h1>
−
            <a href="https://www.instagram.com/igem.marburg.2019">
+
      <img class="award" src="https://static.igem.org/mediawiki/2019/a/ae/T--Marburg--medal_bronze.svg">
−
              <img src="https://static.igem.org/mediawiki/2019/e/e7/T--Marburg--m_icon_in.svg" alt="Instagram" style="height: 50px;" />
+
      <img class="award" src="https://static.igem.org/mediawiki/2019/c/cc/T--Marburg--medal_silver.svg">
−
            </a>
+
      <img class="award" src="https://static.igem.org/mediawiki/2019/6/6f/T--Marburg--medal_gold.svg">
−
            <a href="https://twitter.com/igemmarburg2019">
+
      <img class="award" src="https://static.igem.org/mediawiki/2019/b/bd/T--Marburg--medal_special.svg">
−
              <img src="https://static.igem.org/mediawiki/2019/4/43/T--Marburg--m_icon_tw.svg" alt="Twitter" style="height: 50px;" />
+
−
            </a>
+
−
            <a href="https://www.facebook.com/IGEMMarburg2019/">
+
−
              <img src="https://static.igem.org/mediawiki/2019/b/b1/T--Marburg--m_icon_fa.svg" alt="Facbook" style="height: 50px;" />
+
−
            </a>
+
−
          </div>
+
−
        </div>
+
−
      </footer>
+
 
     </div>
 
     </div>
−
   </body>
+
   </div>
−
 
+
 
</html>
 
</html>
−
{{Marburg/scripts.js}}
+
{{Marburg/footer}}

Latest revision as of 17:00, 11 December 2019

F A S T E S T .

P H O T O T R O P H I C .

O R G A N I S M .

By providing the fastest growing phototrophic chassis to the community, we are paving the way for other phototrophic organisms in Synthetic Biology.

We created an easy to use toolbox for Synechococcus elongatus UTEX 2973 to empower rapid design testing, including genome engineering tools, self-replicating plasmid systems, natural competence and a Golden Gate-based part library. By providing the fastest growing phototrophic chassis with a doubling time of under 80 minutes to the community, we are paving the way for other phototrophic organisms in Synthetic Biology.

Strain Engineering Photo

S T R A I N

E N G I N E E R I N G

We created an "easy to use" phototrophic chassis by restoring the natural competence of S. elongatus UTEX 2973 in order to enormously simplify the transformation process. We established a genome modification system via the CRISPR/Cas12a and enabled the usage of self-replicating plasmids overcoming the drawbacks of time intensive genome integration for genetic design testing.

Toolbox Photo

T O O L B O X

We constructed the green expansion, a set of biobricks to accompany our new chassis. It contains the first MoClo compatible shuttle vector for cyanobacteria. Additionally users can design plasmids for genomic integrations using novel rationally designed integration sites. To improve standardization in phototrophic research we deliver standardized measurement entry vectors to test BioBricks in cyanobacteria.

Measurement Photo

M E A S U R E M E N T

Following the call for long needed standardization in the cyanobacterial community, we ventured out to rationalize important measurements hugely affecting the growth of our cultures. As using fluorescence for part characterization proves difficult in self-fluorescent cyanobacteria, we showed that the use of bioluminescence reporters as well as the use of flow cytometry offer promising alternatives to improve these characterizations.

Automation Photo

A U T O M A T I O N

The goal of the automation lab was to completely automate the process of cloning using OT-2 Pipetting robots. This was achieved using a state of the art faster-RCNN neural network and a self made camera module and light table for colony picking. We also automated large scale purification of plasmids. Our software as well as the hardware blueprints are published on GitHub to give everybody access to scalable and affordable automation.

Achievements