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.