Difference between revisions of "Team:Marburg"
| Line 2: | Line 2: | ||
{{Marburg/styles.css}} | {{Marburg/styles.css}} | ||
<html> | <html> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | h1 { | + | <head> |
| − | + | <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"); | ||
| + | }, 1500); | ||
| + | </script> | ||
| + | </head> | ||
| − | + | <body> | |
| − | + | <style> | |
| − | + | .wrapper { | |
| − | < | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
margin-left: -20px; | margin-left: -20px; | ||
position: absolute; | position: absolute; | ||
| Line 39: | Line 43: | ||
} | } | ||
| − | hr { display: block; height: 1px; | + | hr { |
| − | + | display: block; | |
| − | + | height: 1px; | |
| + | border: 0; | ||
| + | border-top: 2px solid #69A555; | ||
| + | margin: 1em 0; | ||
| + | padding: 0; | ||
| + | margin-left: 15%; | ||
| + | margin-right: 15%; | ||
| + | } | ||
| − | + | .navbar-link:not(.is-arrowless)::after { | |
| − | + | border-color: #69A555; | |
| − | + | } | |
| − | + | .navbar-menu a:hover { | |
| − | + | color: #69A555 !important; | |
| − | + | } | |
| − | .glitch { | + | .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 { | |
| − | background: url("https://static.igem.org/mediawiki/2019/3/3f/T--Marburg--header_logo.svg"); | + | 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; | z-index: 99; | ||
display: flex; | display: flex; | ||
| Line 288: | Line 342: | ||
padding-left: 50%; | padding-left: 50%; | ||
overflow: hidden; | overflow: hidden; | ||
| − | + | } | |
| − | .navbar { | + | .navbar { |
| − | -webkit-transition: background-color 0.4s ease; | + | -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; | + | -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 { | + | .grid-wrapper { |
| − | + | display: flex; | |
| − | + | align-items: center; | |
| − | + | flex-direction: row; | |
| − | } | + | } |
| − | .text1 { | + | .text1 { |
| − | + | margin-left: -125px; | |
| − | + | z-index: 10; | |
| − | + | padding: 1em; | |
| − | } | + | } |
| − | + | .grid1 { | |
display: grid; | display: grid; | ||
grid-auto-columns: min-content; | grid-auto-columns: min-content; | ||
| Line 402: | Line 456: | ||
} | } | ||
| − | header { | + | header { |
| − | z-index: 1; | + | z-index: 1; |
| − | } | + | } |
| − | video { | + | video { |
| − | + | min-width: 100%; | |
| − | + | max-width: none !important; | |
| − | + | min-height: 100%; | |
| − | + | position: absolute; | |
| − | + | top: 50%; | |
| − | + | left: 50%; | |
| − | + | transform: translateX(-50%) translateY(-50%); | |
| − | } | + | } |
| − | .video-container { | + | .video-container { |
| − | + | height: 100%; | |
| − | + | width: 100%; | |
| − | + | overflow: hidden; | |
| − | + | position: relative; | |
| − | } | + | } |
| − | .navbar-link { | + | .navbar-link { |
| − | + | font-weight: bold; | |
| − | } | + | } |
| − | .navbar-item { | + | .navbar-item { |
| − | + | font-weight: bold; | |
| − | } | + | } |
| − | @media screen and (max-width: 1550px) { | + | @media screen and (max-width: 1550px) { |
| − | + | .as_hero_content p { | |
| − | + | margin: 0 !important; | |
| − | + | } | |
| − | } | + | } |
| − | @media screen and (max-width: 1375px) { | + | @media screen and (max-width: 1375px) { |
| − | + | .as_hero_content { | |
| − | + | padding-left: 25% !important; | |
| − | + | } | |
| − | } | + | } |
| − | @media screen and (max-width: 925px) { | + | @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"); | |
| − | <div class="as_hero_content"> | + | } 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;"> | <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> | </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> | ||
| − | + | <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> | ||
| − | + | <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> | </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 | Human Practices | ||
| − | </ | + | </span> |
| − | <a class="navbar-item" href="https://2019.igem.org/Team:Marburg/ | + | <div class="navbar-dropdown"> |
| − | Integrated Human Practice | + | <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> | ||
| − | + | <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> | </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> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</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> | ||
| + | </div> | ||
| + | <div style="width: 100%; padding: 2rem; display: flex; align-items: center; justify-content: center;"> | ||
| + | <p style="text-align: center; font-size: 1em;"> | ||
| + | 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 our fast phototrophic chassis to the | ||
| + | community, we are paving the way for other phototrophic organisms in synthetic biology. | ||
| + | </p> | ||
| + | </div> | ||
| + | <hr> | ||
| + | <div style="width: 100%; padding: 2rem; display: flex; align-items: center; justify-content: center;"> | ||
| + | <div class="grid-wrapper"> | ||
| + | <div class="grid1"> | ||
| + | <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> | </div> | ||
| + | <hr> | ||
| + | <footer class="footer is-unselectable" style="padding: 1.5rem; background-color: #3D404D;"> | ||
| + | <div class="container is-flex footer-container" style="justify-content: space-between;"> | ||
| + | <div style="width: max-content;"> | ||
| + | <a href="https://www.facebook.com/IGEMMarburg2019/"> | ||
| + | <img src="https://static.igem.org/mediawiki/2019/f/f5/T--Marburg--logo_thm.svg" alt="THM" style="height: 100px;" /> | ||
| + | </a> | ||
| + | <a href="https://www.facebook.com/IGEMMarburg2019/"> | ||
| + | <img src="https://static.igem.org/mediawiki/2019/d/d6/T--Marburg--logo_marburg.svg" alt="Marburg" style="height: 100px;" /> | ||
| + | </a> | ||
| + | </div> | ||
| + | <div style="display: flex; align-items: center; justify-content: center;"> | ||
| + | <a href="mailto:igem2019@synmikro.uni-marburg.de"> | ||
| + | <img src="https://static.igem.org/mediawiki/2019/2/2c/T--Marburg--m_icon_ma.svg" alt="Mail" style="height: 50px;" /> | ||
| + | </a> | ||
| + | <a href="https://www.instagram.com/igem.marburg.2019"> | ||
| + | <img src="https://static.igem.org/mediawiki/2019/e/e7/T--Marburg--m_icon_in.svg" alt="Instagram" style="height: 50px;" /> | ||
| + | </a> | ||
| + | <a href="https://twitter.com/igemmarburg2019"> | ||
| + | <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> | </body> | ||
</html> | </html> | ||
{{Marburg/scripts.js}} | {{Marburg/scripts.js}} | ||
Revision as of 06:23, 11 September 2019
Fastest.
Phototrophic.
Organism.
Establishing the fastest growing phototrophic organism with a doubling time of 90 min as a chassis for synthetic biology and the iGEM community.
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 our fast phototrophic chassis to the community, we are paving the way for other phototrophic organisms in synthetic biology.
Strain engineering
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.