Difference between revisions of "Team:Tuebingen/einweiterer"
(Created page with "<html lang="en" dir="ltr" class="client-nojs" xmlns="http://www.w3.org/1999/html"> <meta charset="UTF-8"/> <head> <meta name="viewport" content="width=device-width, initi...") |
|||
| Line 1: | Line 1: | ||
| − | <html lang="en" dir="ltr" class="client-nojs | + | <html lang="en" dir="ltr" class="client-nojs"> |
| − | <meta charset="UTF-8 | + | <meta charset="UTF-8" content="width=device-width, initial-scale=1.0"/> |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
<style> | <style> | ||
/*! | /*! | ||
| Line 134: | Line 60: | ||
display: block | display: block | ||
} | } | ||
| − | |||
body { | body { | ||
| Line 164: | Line 89: | ||
p { | p { | ||
margin-top: 0; | margin-top: 0; | ||
| − | margin-bottom: 1rem | + | margin-bottom: 1rem |
| − | + | ||
} | } | ||
| Line 417: | Line 341: | ||
.h1, h1 { | .h1, h1 { | ||
| − | font-size: 2.5rem | + | font-size: 2.5rem |
| − | + | ||
} | } | ||
.h2, h2 { | .h2, h2 { | ||
| − | font-size: 2rem | + | font-size: 2rem |
| − | + | ||
} | } | ||
.h3, h3 { | .h3, h3 { | ||
| − | font-size: 1.75rem | + | font-size: 1.75rem |
| − | + | ||
} | } | ||
| Line 2,981: | Line 2,902: | ||
.btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-dark.dropdown-toggle:focus { | .btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-dark.dropdown-toggle:focus { | ||
box-shadow: 0 0 0 .2rem rgba(52, 58, 64, .5) | box-shadow: 0 0 0 .2rem rgba(52, 58, 64, .5) | ||
| + | } | ||
| + | |||
| + | .btn-link { | ||
| + | font-weight: 400; | ||
| + | color: #007bff; | ||
| + | background-color: transparent | ||
| + | } | ||
| + | |||
| + | .btn-link:hover { | ||
| + | color: #0056b3; | ||
| + | text-decoration: underline; | ||
| + | background-color: transparent; | ||
| + | border-color: transparent | ||
| + | } | ||
| + | |||
| + | .btn-link.focus, .btn-link:focus { | ||
| + | text-decoration: underline; | ||
| + | border-color: transparent; | ||
| + | box-shadow: none | ||
| + | } | ||
| + | |||
| + | .btn-link.disabled, .btn-link:disabled { | ||
| + | color: #6c757d; | ||
| + | pointer-events: none | ||
} | } | ||
| Line 3,936: | Line 3,881: | ||
font-size: 1.25rem; | font-size: 1.25rem; | ||
line-height: inherit; | line-height: inherit; | ||
| − | white-space: nowrap | + | white-space: nowrap |
} | } | ||
| Line 6,038: | Line 5,983: | ||
.bg-dark { | .bg-dark { | ||
| − | background-color: # | + | background-color: #343a40 !important |
} | } | ||
| Line 9,264: | Line 9,209: | ||
| − | /* sponsor | + | /* sponsor footer */ |
.sponsorLogo img { | .sponsorLogo img { | ||
padding: 8px; | padding: 8px; | ||
| Line 9,287: | Line 9,232: | ||
.dropdown-menu { | .dropdown-menu { | ||
| − | background-color: | + | background-color: rgba(100, 100, 100, 1); |
} | } | ||
| Line 9,299: | Line 9,244: | ||
} | } | ||
| − | + | /*++++++++++++++++++++++++++++++++ | |
contents CSS ++++++++++++++++++++++++++++++*/ | contents CSS ++++++++++++++++++++++++++++++*/ | ||
| − | + | * { | |
| − | + | box-sizing: border-box; | |
| − | + | } | |
| − | + | .glpContainer { | |
| − | + | display: flex; | |
| − | + | width: 100%; | |
| − | + | margin: 0; | |
| − | + | padding: 1em auto 0; | |
| − | + | } | |
| − | + | .glpContainer > * { | |
| − | + | padding: 20px 25px; | |
| − | + | } | |
| + | /* Both Needed */ | ||
| + | #glpContentsOuter{ | ||
| + | position: relative; | ||
| + | flex-basis: 15vw; | ||
| + | width: 15vw; | ||
| − | + | } | |
| − | + | /* Both Needed */ | |
| − | + | .table-of-contents { | |
| − | + | position: relative; | |
| − | + | flex-basis: 15vw; | |
| + | width: 15vw; | ||
| − | + | } | |
| + | .stickyContents { | ||
| + | position: fixed; | ||
| + | top: 120px; | ||
| + | } | ||
| + | .table-of-contents p { | ||
| + | text-transform: uppercase; | ||
| + | letter-spacing: 0.125em; | ||
| + | color: #555; | ||
| + | } | ||
| − | + | .table-of-contents ul { | |
| − | + | position: fixed; | |
| − | + | /* Chrome (asshole) */ | |
| − | + | position: sticky; | |
| − | + | /* Firefox */ | |
| + | margin-top: 2em; | ||
| + | top: 4em; | ||
| + | } | ||
| − | + | h1:first-child { | |
| + | margin-top: 0; | ||
| + | } | ||
| − | + | .post-content { | |
| − | + | flex-basis: 70vw; | |
| − | + | max-width: 100%; | |
| − | + | margin-left: 5vw; | |
| + | } | ||
| + | /* important to the link position of the headings */ | ||
| + | .post-content h1{ | ||
| + | padding-top: 30px; | ||
| + | color:rgba(0, 158, 198,1); | ||
| + | } | ||
| − | + | /* important to the link position of the headings */ | |
| − | + | .post-content h2{ | |
| − | + | padding-top: 150px; | |
| − | + | color:rgba(0, 158, 198,1); | |
| − | + | } | |
| − | + | /* link color */ | |
| − | + | .post-content a{ | |
| − | + | color:#009EC6; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | #glpreferences a{ | |
| − | + | color:#009EC6; | |
| − | + | } | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | /* TOC part */ | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .table-of-contents svg { | |
| − | + | position: absolute; | |
| − | + | left: 0; | |
| − | + | top: 50%; | |
| − | + | bottom: auto; | |
| + | display: none; | ||
| + | stroke: #009EC6; | ||
| + | transform: translateY(-50%); | ||
| + | } | ||
| − | + | .toc-reading svg { | |
| − | + | display: block; | |
| − | + | } | |
| − | + | ||
| − | + | .table-of-contents ul { | |
| − | + | width: 200px; | |
| − | + | counter-reset: articles; | |
| + | padding: 0; | ||
| + | margin-left: 0; | ||
| + | } | ||
| + | .table-of-contents li { | ||
| + | display: block; | ||
| + | counter-increment: articles; | ||
| + | } | ||
| − | + | .table-of-contents li + li { | |
| + | margin-top: 2em; | ||
| + | } | ||
| − | + | .table-of-contents a { | |
| − | + | display: block; | |
| − | + | padding: 0 1.1em 0 3.2em; | |
| − | + | position: relative; | |
| − | + | text-decoration: none; | |
| − | + | color: #333; | |
| − | + | font-weight: bold; | |
| − | + | } | |
| − | + | ||
| − | + | a.toc-reading, | |
| − | + | a.toc-already-read.toc-reading { | |
| − | + | color: #009EC6; | |
| + | opacity: 1; | ||
| + | } | ||
| − | + | a.toc-already-read { | |
| − | + | opacity: 0.4; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .table-of-contents a:before { | |
| − | + | content: counter(articles, decimal); | |
| − | + | position: absolute; | |
| − | + | bottom: auto; | |
| + | left: 0; | ||
| + | top: 50%; | ||
| + | width: 36px; | ||
| + | height: 36px; | ||
| + | line-height: 34px; | ||
| + | text-align: center; | ||
| + | transform: translateY(-50%); | ||
| + | transition: background-color 0.3s ease 0s, color 0.3s ease 0s; | ||
| + | border-radius: 50%; | ||
| + | box-shadow: 0 0 0 1px #d9d9d9 inset; | ||
| + | color: #4d4d4d; | ||
| + | } | ||
| − | + | .post-content .row{ | |
| − | + | text-align: justify; | |
| − | + | } | |
| − | + | /*++++++++++++++++++++++++++++++++ | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
contents End ++++++++++++++++++++++++++++++*/ | contents End ++++++++++++++++++++++++++++++*/ | ||
| Line 9,654: | Line 9,594: | ||
/*++++++++++++++++++++++++++++++++ | /*++++++++++++++++++++++++++++++++ | ||
gallery End ++++++++++++++++++++++++++++++*/ | gallery End ++++++++++++++++++++++++++++++*/ | ||
| + | @media only screen and (max-width: 575.98px) {} | ||
| − | + | @media only screen and (max-width: 767.98px) { | |
| − | + | .pictureTitle{ | |
| + | height: 200px; | ||
| + | } | ||
| + | .pictureTitle .display-2{ | ||
| + | font-size: 2rem; | ||
| + | } | ||
| − | + | .pictureTitle h4{ | |
| − | + | font-size: 1rem; | |
| − | + | } | |
| − | + | ||
| − | + | #glpContentsOuter{ | |
| − | + | display: none; | |
| − | + | } | |
| + | .glpContainer { | ||
| + | width: 100%; | ||
| + | margin: 0; | ||
| + | padding: 0 auto; | ||
| + | } | ||
| − | + | .glpContainer > * { | |
| − | + | padding: 0; | |
| − | + | } | |
| + | .post-content { | ||
| + | flex-basis: 90vw; | ||
| + | max-width: 100%; | ||
| + | margin:0 3vw; | ||
| + | } | ||
| + | /* important to the link position of the headings */ | ||
| + | .post-content h2{ | ||
| + | padding-top: 50px; | ||
| + | } | ||
| + | table{ | ||
| + | font-size: .8rem; | ||
| + | } | ||
| + | .quote-card p { | ||
| + | font-size: 1rem !important; | ||
| + | } | ||
| + | } | ||
| − | |||
| − | |||
| − | |||
| − | + | @media only screen and (max-width: 1199.98px) { | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | @media only screen and (max-width: 1400px) { | |
| − | + | .table-of-contents a{ | |
| − | + | font-size: 0.8rem; | |
| − | + | } | |
| − | + | .table-of-contents li + li{ | |
| + | margin-top: 1.5em; | ||
| + | } | ||
| + | } | ||
| − | + | </style> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<head> | <head> | ||
| Line 9,729: | Line 9,660: | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<link rel="stylesheet" href="https://2019.igem.org/Template:Tuebingen/FontAwesomeCSS"> | <link rel="stylesheet" href="https://2019.igem.org/Template:Tuebingen/FontAwesomeCSS"> | ||
| − | <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Righteous"/> | + | <link rel="stylesheet" href="https://2019.igem.org/Team:Tuebingen/aosCSS?action=raw&ctype=text/css" /> |
| − | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" | + | <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Righteous" /> |
| − | + | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/> | |
| + | <script src="https://2019.igem.org/Team:Tuebingen/jqueryminjs?action=raw&ctype=text/javascript"></script> | ||
| + | <script src="https://2019.igem.org/Team:Tuebingen/popperjs?action=raw&ctype=text/javascript"></script> | ||
| + | <script src="https://2019.igem.org/Team:Tuebingen/bootstrapjs?action=raw&ctype=text/javascript"></script> | ||
| + | <script src="https://2019.igem.org/Template:Tuebingen/GLPexeJS?action=raw&ctype=text/javascript"></script> | ||
</head> | </head> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<body style=""> | <body style=""> | ||
| − | <section id="nav-placeholder"> | + | <section id="nav-placeholder"> |
<nav class="shadow navbar navbar-expand-md navbar-dark fixed-top" | <nav class="shadow navbar navbar-expand-md navbar-dark fixed-top" | ||
style="background-color: rgba(30, 30, 30, 0.3); z-index: 100;"> | style="background-color: rgba(30, 30, 30, 0.3); z-index: 100;"> | ||
| Line 10,378: | Line 9,829: | ||
</section> | </section> | ||
<script> | <script> | ||
| − | + | var url = window.location.href; | |
| − | + | $(function () { | |
| − | + | $('.nav-link[href="' + url + '"]').addClass("active"); | |
| − | + | $('.dropdown-item[href="' + url + '"]').addClass("active"); | |
| − | + | $('.dropdown-item[href="' + url + '"]').parent().parent().addClass("active"); | |
| − | + | }); | |
</script> | </script> | ||
<script src="https://2019.igem.org/Team:Tuebingen/jqueryminjs?action=raw&ctype=text/javascript"></script> | <script src="https://2019.igem.org/Team:Tuebingen/jqueryminjs?action=raw&ctype=text/javascript"></script> | ||
| Line 10,389: | Line 9,840: | ||
<script src="https://2019.igem.org/Team:Tuebingen/bootstrapjs?action=raw&ctype=text/javascript"></script> | <script src="https://2019.igem.org/Team:Tuebingen/bootstrapjs?action=raw&ctype=text/javascript"></script> | ||
<script src="https://2019.igem.org/Template:Tuebingen/GLPexeJS?action=raw&ctype=text/javascript"></script> | <script src="https://2019.igem.org/Template:Tuebingen/GLPexeJS?action=raw&ctype=text/javascript"></script> | ||
| + | <script src="https://2019.igem.org/Team:Tuebingen/aosJS?action=raw&ctype=text/javascript"></script> | ||
| + | <script> | ||
| + | AOS.init(); | ||
| + | </script> | ||
| + | |||
</body> | </body> | ||
| − | |||
| − | + | <style> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | /* Scroll Down Icon*/ | ||
| + | #goToBox { | ||
| + | position: relative; | ||
| + | width: 30px; | ||
| + | height: 28px; | ||
| + | left: calc(50% - 15px); | ||
| + | } | ||
| − | + | .chevron { | |
| − | + | position: absolute; | |
| + | width: 28px; | ||
| + | height: 8px; | ||
| + | opacity: 0; | ||
| + | transform: scale3d(0.5, 0.5, 0.5); | ||
| + | animation: move 3s ease-out infinite; | ||
| + | } | ||
| − | + | .chevron:first-child { | |
| − | + | animation: move 3s ease-out 1s infinite; | |
| + | } | ||
| − | + | .chevron:nth-child(2) { | |
| − | + | animation: move 3s ease-out 2s infinite; | |
| + | } | ||
| − | + | .chevron:before, | |
| − | + | .chevron:after { | |
| + | content: ' '; | ||
| + | position: absolute; | ||
| + | top: 0; | ||
| + | height: 100%; | ||
| + | width: 51%; | ||
| + | background: #fff; | ||
| + | } | ||
| − | + | .chevron:before { | |
| − | + | left: 0; | |
| − | + | transform: skew(0deg, 30deg); | |
| − | + | } | |
| − | + | ||
| − | + | .chevron:after { | |
| − | + | right: 0; | |
| − | + | width: 50%; | |
| − | + | transform: skew(0deg, -30deg); | |
| − | + | } | |
| − | + | @keyframes move { | |
| − | + | 25% { | |
| − | + | opacity: 1; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | } | |
| − | + | 33% { | |
| − | + | opacity: 1; | |
| − | + | transform: translateY(30px); | |
| − | + | } | |
| + | 67% { | ||
| + | opacity: 1; | ||
| + | transform: translateY(40px); | ||
| + | } | ||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | transform: translateY(55px) scale3d(0.5, 0.5, 0.5); | ||
| + | } | ||
| + | } | ||
| − | + | @keyframes pulse { | |
| − | + | to { | |
| − | + | opacity: 1; | |
| − | + | } | |
| + | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | /* FlowChart*/ | |
| − | + | .circleO { | |
| − | + | height: 60px; | |
| − | + | width: 60px; | |
| − | + | padding: auto; | |
| + | border-radius: 50%; | ||
| + | background-color: rgba(230, 230, 230, 1); | ||
| + | color: black; | ||
| + | z-index: 2; | ||
| + | } | ||
| − | + | .circleO img { | |
| − | + | max-height: 40px; | |
| − | + | width: auto; | |
| − | + | } | |
| − | + | ||
| − | + | .circleS { | |
| − | + | height: 60px; | |
| − | + | width: 60px; | |
| + | padding: auto; | ||
| + | border-radius: 50%; | ||
| + | background-image: linear-gradient(rgba(1, 101, 224, 1), rgba(0, 203, 177, 1)); | ||
| + | color: black; | ||
| + | z-index: 2; | ||
| + | } | ||
| − | + | .circleS img { | |
| − | + | max-height: 40px; | |
| − | + | width: auto; | |
| − | + | } | |
| − | + | .circleM { | |
| − | + | height: 100px; | |
| − | + | width: 100px; | |
| − | + | padding: auto; | |
| − | + | border-radius: 50%; | |
| + | background-image: linear-gradient(rgba(1, 101, 224, 1), rgba(0, 203, 177, 1)); | ||
| + | color: black; | ||
| + | z-index: 2; | ||
| + | 1, 101, 224 | ||
| + | } | ||
| − | + | .circleM img { | |
| − | + | max-height: 80px; | |
| − | + | width: auto; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .circleL { | |
| − | + | height: 160px; | |
| − | + | width: 160px; | |
| + | padding: auto; | ||
| + | border-radius: 50%; | ||
| + | background-image: linear-gradient(rgba(1, 101, 224, 1), rgba(0, 203, 177, 1)); | ||
| + | color: black; | ||
| + | z-index: 2; | ||
| + | } | ||
| − | + | .circleL img { | |
| − | + | max-height: 130px; | |
| − | + | width: auto; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | #conceptFlow h5 { | |
| − | + | font-weight: bold; | |
| − | + | font-size: 2rem; | |
| + | margin-bottom: 30px; | ||
| + | color: #009ec6; | ||
| + | } | ||
| − | + | #conceptFlow span { | |
| − | + | font-size: 1.5rem; | |
| − | + | } | |
| − | + | ||
| − | + | /* height of each section*/ | |
| − | + | .how-it-works.row { | |
| − | + | height: 50vh | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | height | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .how-it-works.row .col-3 { | |
| − | + | align-self: stretch; | |
| − | + | } | |
| − | + | ||
| − | + | .how-it-works.row .col-3::after { | |
| − | + | content: ""; | |
| − | + | position: absolute; | |
| − | + | border-left: 3px solid rgba(82, 187, 199, 1); | |
| − | + | z-index: 1; | |
| + | } | ||
| − | + | .diagnosis.row .col-3::after { | |
| − | + | content: ""; | |
| − | + | position: absolute; | |
| − | + | border-left: 3px dotted rgba(82, 187, 199, 1); | |
| − | + | z-index: 1; | |
| + | } | ||
| − | + | .how-it-works.row .col-3.bottom::after { | |
| − | + | height: 50%; | |
| − | + | left: 50%; | |
| − | + | top: 50%; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .how-it-works.row .col-3.full::after { | |
| − | + | height: 100%; | |
| − | + | left: calc(50% - 3px); | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .how-it-works.row .col-3.fullRight::after { | |
| − | + | height: 100%; | |
| − | + | left: 50%; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .how-it-works.row .col-3.top::after { | |
| − | + | height: 50%; | |
| − | + | left: calc(50% - 3px); | |
| + | top: 0; | ||
| + | border: 2px dotted rgba(82, 187, 199, 1); | ||
| + | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | .timeline div { | |
| − | + | padding: 0; | |
| − | + | height: 40px; | |
| + | } | ||
| − | + | .timeline hr { | |
| − | + | border-top: 3px solid rgba(82, 187, 199, 1); | |
| − | + | background-color: transparent; | |
| + | margin: 0; | ||
| + | top: 17px; | ||
| + | position: relative; | ||
| + | } | ||
| − | + | .timeline .col-3 { | |
| − | . | + | display: flex; |
| − | + | overflow: hidden; | |
} | } | ||
| − | |||
| − | + | .timeline .corner { | |
| − | + | border: 3px solid rgba(82, 187, 199, 1); | |
| − | + | width: 100%; | |
| + | position: relative; | ||
| + | border-radius: 15px; | ||
} | } | ||
| − | |||
| − | + | .timeline .top-right { | |
| − | . | + | left: 50%; |
| − | + | top: -50%; | |
} | } | ||
| − | |||
| − | + | .timeline .left-bottom { | |
| − | . | + | left: -50%; |
| − | + | top: calc(50% - 3px); | |
| − | + | ||
| − | + | ||
} | } | ||
| − | . | + | .timeline .top-left { |
| − | + | left: -50%; | |
| + | top: -50%; | ||
} | } | ||
| − | |||
| − | + | .timeline .right-bottom { | |
| − | . | + | left: 50%; |
| − | + | top: calc(50% - 3px); | |
| − | + | ||
} | } | ||
| − | + | /* Qoutes Part*/ | |
| − | height: | + | #warnPics { |
| + | height: auto; | ||
| + | min-height: 20vw; | ||
| + | font-weight: 100; | ||
} | } | ||
| − | |||
| − | + | #warnPics .qoutes span { | |
| − | . | + | font-size: 1.5rem; |
| − | + | ||
} | } | ||
| − | |||
| − | + | #warnPics .qoutes { | |
| − | . | + | |
| − | + | ||
} | } | ||
| − | |||
| − | + | #qoute1 { | |
| − | + | background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url("http://2018.igem.org/wiki/images/c/c9/T--Munich--death_background.png"); | |
| − | + | background-repeat: no-repeat; | |
| + | background-size: cover; | ||
| + | background-position: center; | ||
| + | color: #fff; | ||
} | } | ||
| − | |||
| − | + | #qoute2 { | |
| − | + | background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url("http://2018.igem.org/wiki/images/4/4e/T--Munich--WarningPic1.jpg"); | |
| − | + | background-repeat: no-repeat; | |
| − | + | background-size: cover; | |
| + | background-position: center; | ||
| + | color: #fff; | ||
} | } | ||
| − | |||
| − | + | #qoute3 { | |
| − | + | background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url("http://2018.igem.org/wiki/images/6/66/T--Munich--PHAGE.jpg"); | |
| − | + | background-repeat: no-repeat; | |
| + | background-size: cover; | ||
| + | background-position: top; | ||
| + | color: #fff; | ||
} | } | ||
| − | |||
| − | + | #whyTitle { | |
| − | + | background: rgba(35, 35, 35, 1); | |
| − | + | ||
} | } | ||
| − | |||
| − | + | .warningContent span { | |
| − | . | + | font-size: 2.5rem; |
| − | + | font-weight: bold; | |
} | } | ||
| − | |||
| − | + | .mobileText { | |
| − | + | font-size: 1.5rem !important; | |
| − | + | margin-top: 3rem; | |
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | #conceptFlowTitle { | |
| + | font-size: 2.5rem; | ||
| + | font-weight: bold; | ||
| + | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | /* START PopUp STYLES */ | |
| − | + | .labelBox { | |
| − | + | display: inline; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | .reg { | |
| + | background-color: white; | ||
| + | display: inline; | ||
| + | margin: 0 auto; | ||
| + | width: auto; | ||
| + | font-size: 16.996px; | ||
| + | line-height: 20px; | ||
| + | padding: 12px 18px 13px; | ||
| + | -webkit-border-radius: 6px; | ||
| + | -moz-border-radius: 6px; | ||
| + | -ms-border-radius: 6px; | ||
| + | -o-border-radius: 6px; | ||
| + | border-radius: 6px; | ||
| + | -webkit-transition: all 0.3s ease-in-out; | ||
| + | -moz-transition: all 0.3s ease-in-out; | ||
| + | transition: all 0.3s ease-in-out; | ||
| + | color: #009ec6; | ||
| + | cursor: pointer; | ||
| + | border: none; | ||
| + | text-decoration: underline; | ||
| + | } | ||
| − | + | .reg:hover { | |
| − | + | opacity: 0.8; | |
| − | + | -webkit-transition: all 0.3s ease-in-out; | |
| − | + | -moz-transition: all 0.3s ease-in-out; | |
| − | + | transition: all 0.3s ease-in-out; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .pop { | |
| − | + | display: none; | |
| − | + | position: absolute; | |
| − | + | top: 75%; | |
| − | + | max-width: 100%; | |
| − | + | height: auto; | |
| − | + | -webkit-border-radius: 6px; | |
| − | + | -moz-border-radius: 6px; | |
| − | + | -ms-border-radius: 6px; | |
| − | + | -o-border-radius: 6px; | |
| − | + | border-radius: 6px; | |
| − | + | z-index: 200; | |
| − | + | padding: 10px; | |
| − | + | background-color: rgba(240, 240, 240, 1); | |
| − | + | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .pop > h1 { | |
| − | + | color: #009ec6; | |
| + | font-size: 100%; | ||
| + | } | ||
| + | .pop > p { | ||
| + | font-size: 100%; | ||
| + | color: #777777; | ||
| + | } | ||
| − | + | .pop > span { | |
| − | + | cursor: pointer; | |
| − | + | position: absolute; | |
| − | + | top: 10px; | |
| − | + | right: 10px; | |
| − | + | -webkit-border-radius: 100px; | |
| − | + | -moz-border-radius: 100px; | |
| − | + | color: #777777; | |
| − | + | width: 30px; | |
| − | + | height: 30px; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | /* END PopUp STYLES */ | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .mobileTitle { | |
| − | + | font-size: 3.5rem !important; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .readButton, .readButton:visited { | |
| − | + | color: #17a2b8; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .readButton:hover { | |
| − | + | color: white; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .showCase .row { | |
| − | + | padding-left: 10vw; | |
| − | + | padding-right: 10vw; | |
| + | } | ||
| − | + | @media only screen and (max-width: 767.98px) { | |
| − | + | #videoBox #videoShow { | |
| − | width: | + | position: relative; |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | #PhactoryTitle { | |
| − | + | font-size: 4rem; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | #PhactoryText { | |
| − | + | font-size: 1.5rem; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .warningContent span { | |
| − | + | font-size: 1.5rem; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | #warnPics .qoutes { | |
| − | + | font-size: 1rem; | |
| − | + | } | |
| − | + | ||
| − | + | #compareBox img { | |
| + | max-height: 20vh; | ||
| + | width: auto; | ||
| + | } | ||
| − | + | .mobileTitle { | |
| − | + | font-size: 3rem !important; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | @media screen and (max-width: 450px) { | ||
| + | .mobileTitle { | ||
| + | font-size: 2.0rem !important; | ||
| + | } | ||
| + | } | ||
| − | + | #conceptFlowTitle { | |
| − | + | font-size: 2rem; | |
| − | + | font-weight: bold; | |
| − | + | } | |
| − | + | #conceptFlow h5 { | |
| − | + | font-size: 1.5rem; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | #conceptFlow span { | |
| − | + | font-size: 1rem; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | .how-it-works.row { | |
| − | + | height: auto; | |
| − | + | } | |
| − | + | ||
| − | + | /* FlowChart*/ | |
| − | + | .circleO { | |
| + | height: 40px; | ||
| + | width: 40px; | ||
| + | } | ||
| − | + | .circleO img { | |
| − | + | max-height: 25px; | |
| − | + | width: auto; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| + | .circleS { | ||
| + | height: 40px; | ||
| + | width: 40px; | ||
| + | } | ||
| − | + | .circleS img { | |
| − | + | max-height: 25px; | |
| − | + | width: auto; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .circleM { | |
| − | + | height: 50px; | |
| + | width: 50px; | ||
| + | } | ||
| − | + | .circleM img { | |
| − | } | + | max-height: 35px; |
| + | width: auto; | ||
| + | } | ||
| − | + | .circleL { | |
| − | + | height: 60px; | |
| − | + | width: 60px; | |
| − | + | } | |
| − | + | ||
| − | + | .circleL img { | |
| − | + | max-height: 45px; | |
| − | + | width: auto; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .reg { | |
| − | + | padding: 0; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .mobileText { | |
| − | + | font-size: 1rem !important; | |
| − | + | margin-top: 0; | |
| − | + | } | |
| − | + | ||
| − | + | .showCase .row { | |
| + | padding: 0; | ||
| + | } | ||
| + | } | ||
| − | + | @media only screen and (max-width: 991.98px) { | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | @media only screen and (max-width: 1199.98px) { | |
| − | + | } | |
| − | + | </style> | |
| − | + | ||
| − | + | ||
| − | + | <script> | |
| − | + | // Scroll Down Icon | |
| − | + | $(document).ready(function () { | |
| + | // Add smooth scrolling to all links | ||
| + | $("#goTo").on('click', function (event) { | ||
| − | + | // Make sure this.hash has a value before overriding default behavior | |
| − | + | if (this.hash !== "") { | |
| − | + | // Prevent default anchor click behavior | |
| + | event.preventDefault(); | ||
| − | + | // Store hash | |
| − | + | var hash = this.hash; | |
| − | + | // Using jQuery's animate() method to add smooth page scroll | |
| − | + | // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area | |
| + | $('html, body').animate({ | ||
| + | scrollTop: $(hash).offset().top | ||
| + | }, 800, function () { | ||
| − | + | // Add hash (#) to URL when done scrolling (default click behavior) | |
| − | + | window.location.hash = hash; | |
| − | + | }); | |
| − | + | } // End if | |
| + | }); | ||
| + | }); | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | $(document).ready(function () { | |
| − | + | $(".reg").click(function () { | |
| − | + | $(".pop").fadeOut(100); | |
| − | + | $(this).next().fadeIn(300); | |
| − | + | }); | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | $(".pop > span, .pop").click(function () { | |
| − | + | $(".pop").fadeOut(300); | |
| − | + | }); | |
| − | + | }); | |
| − | + | </script> | |
| − | < | + | <div id="videoBox" class="text-center" style="position: relative; min-height:5%; width:100%; margin-top: 50px"> |
| − | + | <video id="videoShow" playsinline autoplay muted id="myVideo" style="min-height:5%; width:100%; margin-top: 50px"> | |
| − | + | <source src="https://2019.igem.org/wiki/images/c/c1/T--Tuebingen--cover_video.mp4" type="video/mp4" | |
| − | </ | + | style="width: 100%;"> |
| + | Your browser does not support HTML5 video. | ||
| + | </video> | ||
| + | </div> | ||
| + | <div id="whyTitle" class="container-fluid jumbotron jumbotron-fluid text-center mb-0 p-0 align-items-center text-light" style="overflow-x: hidden; overflow-y: hidden;"> | ||
| + | <div data-aos="zoom-out-left" | ||
| + | data-aos-offset="200" | ||
| + | data-aos-delay="50" | ||
| + | data-aos-duration="2000" | ||
| + | data-aos-easing="ease-in-out-cubic" | ||
| + | data-aos-mirror="true" | ||
| + | data-aos-once="false"> | ||
| + | <div class="row pt-5 pb-3 "> | ||
| + | <div class="warningContent col-12"> | ||
| + | <span class="align-middle" style="font-family: 'Righteous'">GLP.exe - a safe and effective treatment for Diabetes Mellitus Type II</span> | ||
| + | </div> | ||
| + | </div> | ||
| − | <div class= | + | <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;"> |
| − | + | <div class="col-12 col-md-6"> | |
| − | + | <img class="img-fluid" src="https://2019.igem.org/wiki/images/3/3c/T--Tuebingen--Diabetes-Treatment-transparent-Landing-Page.png" | |
| − | <div class= | + | alt="meetUp" style="padding-left: 6vw;"> |
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | <div class= | + | <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;"> |
| − | + | <p class="text-justify mobileText">Several treatment options for Type II Diabetes Mellitus | |
| − | + | have been developed in recent years significantly improving the patients' insulin level. | |
| − | + | </p> | |
| + | |||
| + | <p class="text-justify mobileText"> | ||
| + | Hence, the diagnosis of Type II Diabetes Mellitus is no longer a death sentence. | ||
| + | </p> | ||
</div> | </div> | ||
| − | + | </div> | |
| − | + | </div> | |
| − | + | ||
| − | + | <div class="row pt-5 pb-3 "> | |
| + | <div class="warningContent col-12 slide-in"> | ||
| + | <span class="align-middle" style="font-family: 'Righteous'">Yet...</span> | ||
</div> | </div> | ||
| − | + | </div> | |
| − | + | ||
| − | + | <div data-aos="zoom-out-right" | |
| − | + | data-aos-offset="200" | |
| + | data-aos-delay="50" | ||
| + | data-aos-duration="2000" | ||
| + | data-aos-easing="ease-in-out-cubic" | ||
| + | data-aos-mirror="true" | ||
| + | data-aos-once="false"> | ||
| + | <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;"> | ||
| + | <div class="col-12 col-md-6"> | ||
| + | <img class="img-fluid" src="https://2019.igem.org/wiki/images/1/15/T--Tuebingen--Injection-Scheme-transparent-Landing-Page.png" | ||
| + | alt="meetUp" style="padding-left: 6vw;"> | ||
</div> | </div> | ||
| − | <div class= | + | |
| − | < | + | <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;"> |
| − | + | <h2 class="display-4 mobileTitle" style="font-family: 'Righteous'">Current Drugs</h2> | |
| − | + | <p class="text-justify mobileText">are expensive, require fine tuning and daily shots. | |
| + | Moreover, they have severe side-effects, causing patients to skip doses.</p> | ||
| + | |||
| + | <p class="text-justify mobileText">“Many patients don’t want to use insulin. They don’t want | ||
| + | to do finger sticks and they’re afraid of hypoglycemia.”<br> | ||
| + | </p> | ||
| + | |||
| + | <p class="text-justify mobileText"> | ||
| + | “To fight the global diabetes pandemic, we would ideally have an accessible cost-effective | ||
| + | easily-compliant intervention that has high clinical efficacy and that is free of adverse side effects.”<br><br> | ||
| + | Prof. Harold Lebovitz, State University of New York Health Science Center, Brooklyn, New York | ||
| + | </p> | ||
</div> | </div> | ||
| − | + | </div> | |
| − | + | </div> | |
| − | + | ||
| − | + | <div class="row pt-5 pb-3 "> | |
| + | <div class="warningContent col-12"> | ||
| + | <span class="align-middle" style="font-family: 'Righteous'">However...</span> | ||
</div> | </div> | ||
</div> | </div> | ||
| − | < | + | <div data-aos="zoom-out-left" |
| − | <div class= | + | data-aos-offset="200" |
| − | <div class= | + | data-aos-delay="50" |
| − | + | data-aos-duration="2000" | |
| − | + | data-aos-easing="ease-in-out-cubic" | |
| + | data-aos-mirror="true" | ||
| + | data-aos-once="false"> | ||
| + | |||
| + | <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;"> | ||
| + | <div class="col-12 col-md-6"> | ||
| + | <img class="img-fluid" src="https://2019.igem.org/wiki/images/e/e3/T--Tuebingen--Our-Probiotic-transparent-Landing-page.png" | ||
| + | alt="meetUp" style="padding-left: 6vw;"> | ||
</div> | </div> | ||
| − | <div class= | + | |
| − | < | + | <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;"> |
| − | + | <h2 class="display-4 mobileTitle" style="font-family: 'Righteous'">There's a solution!</h2> | |
| + | <p class="text-justify mobileText">Our therapeutic agent is a probiotic secreting incretin | ||
| + | mimetics placed in the patients intestine by oral administration of capsules. GLP-1 and Exendin-4, our | ||
| + | main actors, cause an increase in insulin secretion, if the cell has already taken up sugar.</p> | ||
| + | |||
| + | <p class="text-justify mobileText">This enables an easier therapy where a regular intake of | ||
| + | medicals are not required.</p> | ||
| + | |||
| + | <p class="text-justify mobileText">Improved cell penetrating peptides with the use of | ||
| + | artificial intelligence allow for an efficient and safe transport of our effectors into the cells.</p> | ||
</div> | </div> | ||
| − | + | </div> | |
| − | + | </div> | |
| − | + | ||
| + | <div class="row pt-5 pb-3 "> | ||
| + | <div class="warningContent col-12"> | ||
| + | <span class="align-middle" style="font-family: 'Righteous'">Safety</span> | ||
</div> | </div> | ||
| − | + | </div> | |
| − | + | ||
| − | + | <div data-aos="zoom-out-right" | |
| + | data-aos-offset="200" | ||
| + | data-aos-delay="50" | ||
| + | data-aos-duration="2000" | ||
| + | data-aos-easing="ease-in-out-cubic" | ||
| + | data-aos-mirror="true" | ||
| + | data-aos-once="false"> | ||
| + | |||
| + | <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;"> | ||
| + | <div class="col-12 col-md-6"> | ||
| + | <img class="img-fluid" src="https://2019.igem.org/wiki/images/6/6d/T--Tuebingen--Cas3-system-transparent-Landing-page.png" | ||
| + | alt="meetUp" style="padding-left: 6vw;"> | ||
</div> | </div> | ||
| − | <div class= | + | |
| − | < | + | <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;"> |
| − | + | <h2 class="display-4 mobileTitle" style="font-family: 'Righteous'">is our highest priority!</h2> | |
| + | <p class="text-justify mobileText">Therefore, we developed a novel, Cas3 based kill-switch | ||
| + | mechanism. The flexible system uses three regulators inspired by the human intestines: temperature, | ||
| + | availability of fatty acids in form of Acyl CoA and N-Acetyl-Glucosamin. </p> | ||
| + | |||
| + | <p class="text-justify mobileText"> | ||
| + | If the conditions of our regulatory system are no longer met, Cas3 will be degrading all genetic | ||
| + | information. | ||
| + | </p> | ||
</div> | </div> | ||
| − | + | </div> | |
| − | + | </div> | |
| − | + | ||
| + | <div class="row pt-5 pb-3 "> | ||
| + | <div class="warningContent col-12"> | ||
| + | <span class="align-middle" style="font-family: 'Righteous'">Additionally</span> | ||
</div> | </div> | ||
| − | + | </div> | |
| − | + | ||
| − | + | <div data-aos="zoom-out-left" | |
| + | data-aos-offset="200" | ||
| + | data-aos-delay="50" | ||
| + | data-aos-duration="2000" | ||
| + | data-aos-easing="ease-in-out-cubic" | ||
| + | data-aos-mirror="true" | ||
| + | data-aos-once="false"> | ||
| + | |||
| + | <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;"> | ||
| + | <div class="col-12 col-md-6"> | ||
| + | <img class="img-fluid" src="https://2019.igem.org/wiki/images/a/a6/T--Tuebingen--EcN-Charakterisierung-transparent-Landing-page.png" | ||
| + | alt="meetUp" style="padding-left: 6vw;"> | ||
</div> | </div> | ||
| − | <div class= | + | |
| − | < | + | <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;"> |
| − | + | <h2 class="display-4 mobileTitle" style="overflow-x: visible; font-family: 'Righteous'">An in depth E.coli Nissle characterization</h2> | |
| + | <p class="text-justify mobileText">Despite the fact that E. Coli Nissle is an already | ||
| + | approved probiotic, it's surprisingly badly characterized.</p> | ||
| + | |||
| + | <p class="text-justify mobileText"> | ||
| + | Hence, we provide the first metabolic model of E. coli Nissle and optimize it's growth for various | ||
| + | growth media. Furthermore, we predicted the interaction and competition of E. coli Nissle with common competitors for various fluxes in the gut. | ||
| + | </p> | ||
| + | |||
| + | <p class="text-justify mobileText"> | ||
| + | Finally, we carried out a series of RNA-Seq experiments to assess the adaptions and reactions of E. coli | ||
| + | Nissle to aerobic, as well as anaerobic occurring stress factors. | ||
| + | </p> | ||
</div> | </div> | ||
| − | + | </div> | |
| − | + | </div> | |
| − | + | ||
| + | <div class="row pt-5 pb-3 "> | ||
| + | <div class="warningContent col-12 slide-in"> | ||
| + | <span class="align-middle" style="font-family: 'Righteous'">Bringing it all together</span> | ||
</div> | </div> | ||
| − | + | </div> | |
| − | + | ||
| − | + | <div data-aos="zoom-out-right" | |
| + | data-aos-offset="200" | ||
| + | data-aos-delay="50" | ||
| + | data-aos-duration="2000" | ||
| + | data-aos-easing="ease-in-out-cubic" | ||
| + | data-aos-mirror="true" | ||
| + | data-aos-once="false"> | ||
| + | |||
| + | <div class="row p-5" style="padding-left: 10vw; padding-right: 10vw;"> | ||
| + | <div class="col-12 col-md-6"> | ||
| + | <img class="img-fluid" src="https://2019.igem.org/wiki/images/3/3d/T--Tuebingen--New-Approach-transparent-Landing-page.png" | ||
| + | alt="meetUp" style="padding-left: 6vw;"> | ||
</div> | </div> | ||
| − | <div class= | + | |
| − | + | ||
| − | + | <div class="col-12 col-md-6 pt-3" style="padding-right: 6vw;"> | |
| − | + | <h2 class="display-4 mobileTitle">Our work lays the foundation for an innovative, unprecedented approach to treat Diabetes Mellitus Type II.</h2> | |
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
</div> | </div> | ||
| + | </div> | ||
| + | |||
| + | </div> | ||
| + | |||
| + | <style> | ||
| + | |||
| + | .testclasse { | ||
| + | margin: 0; | ||
| + | background-color: #2ecc71; | ||
| + | background-image: radial-gradient(#2ecc71 20%, #1b7a43 50%, rgba(0, 0, 0, 0.5) 100%); | ||
| + | background-size: 120%; | ||
| + | background-position: center; | ||
| + | font-family: "Barlow Condensed", sans-serif; | ||
| + | -webkit-animation: tighten-vinette ease-out 1800ms forwards; | ||
| + | animation: tighten-vinette ease-out 1800ms forwards; | ||
| + | } | ||
| + | |||
| + | .babbelbubu .logo .kokosnusss { | ||
| + | width: 120%; margin-left: -10%; margin-top: -45%; | ||
| + | pointer-events: none; | ||
| + | height: 90vh; | ||
| + | top: 0; | ||
| + | bottom: 0; | ||
| + | right: 0; | ||
| + | left: 0; | ||
| + | position: relative; | ||
| + | opacity: .6; | ||
| + | z-index: 20; | ||
| + | background-size: cover; | ||
| + | background-position: center; | ||
| + | background-image: url("https://static.comicvine.com/uploads/original/11124/111240517/4986890-4700382785-29908.jpg"); | ||
| + | } | ||
| + | |||
| + | .babbelbubu { | ||
| + | height: 80%; | ||
| + | display: flex; | ||
| + | align-items: center; | ||
| + | justify-content: center; | ||
| + | } | ||
| + | |||
| + | .logo { | ||
| + | cursor: pointer; | ||
| + | text-align: center; | ||
| + | } | ||
| + | .logo:hover .restart { | ||
| + | opacity: .8; | ||
| + | } | ||
| + | |||
| + | .restart { | ||
| + | color: #fff; | ||
| + | margin-top: 20px; | ||
| + | font-size: 1.5rem; | ||
| + | text-transform: uppercase; | ||
| + | letter-spacing: -.08rem; | ||
| + | transition: opacity 150ms linear; | ||
| + | } | ||
| + | |||
| + | .marvel, .studios { | ||
| + | position: relative; | ||
| + | color: #fff; | ||
| + | text-transform: uppercase; | ||
| + | letter-spacing: -.2rem; | ||
| + | font-size: 5rem; | ||
| + | margin: .05rem .05rem .5rem; | ||
| + | padding: 0 0.4rem; | ||
| + | display: inline-block; | ||
| + | margin-top: 30%; | ||
| + | } | ||
| + | |||
| + | .studios { | ||
| + | font-weight: 500; | ||
| + | letter-spacing: -.3rem; | ||
| + | -webkit-transform: translateX(-95px); | ||
| + | transform: translateX(-95px); | ||
| + | } | ||
| + | |||
| + | .marvel { | ||
| + | z-index: 10; | ||
| + | font-weight: 800; | ||
| + | -webkit-transform: translateX(95px); | ||
| + | transform: translateX(95px); | ||
| + | } | ||
| + | .marvel:before { | ||
| + | z-index: -10; | ||
| + | content: ''; | ||
| + | display: block; | ||
| + | background-color: #2ecc71; | ||
| + | border: solid rgba(255, 255, 255, 0.2) 1px; | ||
| + | height: 100%; | ||
| + | width: 100%; | ||
| + | position: absolute; | ||
| + | top: 0; | ||
| + | left: 0; | ||
| + | } | ||
| + | |||
| + | .studios:after, .studios:before { | ||
| + | content: ''; | ||
| + | display: block; | ||
| + | height: 3px; | ||
| + | position: absolute; | ||
| + | background-color: #fff; | ||
| + | display: block; | ||
| + | left: 0.4rem; | ||
| + | right: 0.4rem; | ||
| + | } | ||
| + | |||
| + | .studios:before { | ||
| + | top: 0; | ||
| + | } | ||
| + | .studios:after { | ||
| + | bottom: 0; | ||
| + | } | ||
| + | |||
| + | @media screen and (max-width: 900px) and (max-height: 1170px) { | ||
| + | .babbelbubu .logo .kokosnusss { | ||
| + | margin-top: -90%; | ||
| + | width: 100%; | ||
| + | margin-left: 0; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @media screen and (max-width: 500px) and (max-height: 750px) { | ||
| + | .babbelbubu .logo .kokosnusss { | ||
| + | margin-top: -120%; | ||
| + | width: 100%; | ||
| + | margin-left: 0; | ||
| + | } | ||
| + | |||
| + | .marvel, .studios { | ||
| + | font-size: 3rem; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @media screen and (max-width: 420px) and (max-height: 850px) { | ||
| + | .babbelbubu .logo .kokosnusss { | ||
| + | margin-top: -140%; | ||
| + | width: 100%; | ||
| + | margin-left: 0; | ||
| + | } | ||
| + | |||
| + | .marvel, .studios { | ||
| + | font-size: 3rem; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .wrapper.run-animation .restart { | ||
| + | opacity: 0; | ||
| + | -webkit-animation: fade-down 1200ms ease 3600ms forwards; | ||
| + | animation: fade-down 1200ms ease 3600ms forwards; | ||
| + | } | ||
| + | |||
| + | .babbelbubu.run-animation { | ||
| + | -webkit-animation: shrink ease-out 4800ms forwards 600ms; | ||
| + | animation: shrink ease-out 4800ms forwards 600ms; | ||
| + | } | ||
| + | |||
| + | .babbelbubu.run-animation .marvel { | ||
| + | -webkit-transform: translateX(95px); | ||
| + | transform: translateX(95px); | ||
| + | -webkit-animation: slide-out-X 750ms ease forwards; | ||
| + | animation: slide-out-X 750ms ease forwards; | ||
| + | } | ||
| + | .babbelbubu.run-animation .studios { | ||
| + | -webkit-transform: translateX(-95px); | ||
| + | transform: translateX(-95px); | ||
| + | color: transparent; | ||
| + | -webkit-animation: slide-out-X 750ms ease forwards, show-text 300ms linear forwards 1500ms; | ||
| + | animation: slide-out-X 750ms ease forwards, show-text 300ms linear forwards 1500ms; | ||
| + | } | ||
| + | .babbelbubu.run-animation .studios:before { | ||
| + | -webkit-transform: translateY(2.9rem); | ||
| + | transform: translateY(2.9rem); | ||
| + | -webkit-animation: slide-out-Y 300ms ease forwards 750ms; | ||
| + | animation: slide-out-Y 300ms ease forwards 750ms; | ||
| + | } | ||
| + | .babbelbubu.run-animation .studios:after { | ||
| + | -webkit-transform: translateY(-2.9rem); | ||
| + | transform: translateY(-2.9rem); | ||
| + | -webkit-animation: slide-out-Y 300ms ease forwards 750ms; | ||
| + | animation: slide-out-Y 300ms ease forwards 750ms; | ||
| + | } | ||
| + | |||
| + | .babbelbubu.run-animation .logo .kokosnusss { | ||
| + | -webkit-animation: flicker-images 1500ms 2 steps(1, end), fade-out 4500ms forwards; | ||
| + | animation: flicker-images 1500ms 2 steps(1, end), fade-out 4500ms forwards; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes slide-out-X { | ||
| + | 100% { | ||
| + | -webkit-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @keyframes slide-out-X { | ||
| + | 100% { | ||
| + | -webkit-transform: translateX(0); | ||
| + | transform: translateX(0); | ||
| + | } | ||
| + | } | ||
| + | @-webkit-keyframes slide-out-Y { | ||
| + | 100% { | ||
| + | -webkit-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | } | ||
| + | @keyframes slide-out-Y { | ||
| + | 100% { | ||
| + | -webkit-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | } | ||
| + | @-webkit-keyframes show-text { | ||
| + | 100% { | ||
| + | color: #fff; | ||
| + | } | ||
| + | } | ||
| + | @keyframes show-text { | ||
| + | 100% { | ||
| + | color: #fff; | ||
| + | } | ||
| + | } | ||
| + | @-webkit-keyframes shrink { | ||
| + | 100% { | ||
| + | -webkit-transform: scale(0.8); | ||
| + | transform: scale(0.8); | ||
| + | } | ||
| + | } | ||
| + | @keyframes shrink { | ||
| + | 100% { | ||
| + | -webkit-transform: scale(0.8); | ||
| + | transform: scale(0.8); | ||
| + | } | ||
| + | } | ||
| + | @-webkit-keyframes tighten-vinette { | ||
| + | 100% { | ||
| + | background-size: 120%; | ||
| + | } | ||
| + | } | ||
| + | @keyframes tighten-vinette { | ||
| + | 100% { | ||
| + | background-size: 120%; | ||
| + | } | ||
| + | } | ||
| + | @-webkit-keyframes fade-down { | ||
| + | 0% { | ||
| + | -webkit-transform: translateY(-2rem); | ||
| + | transform: translateY(-2rem); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | 100% { | ||
| + | -webkit-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | opacity: .5; | ||
| + | } | ||
| + | } | ||
| + | @keyframes fade-down { | ||
| + | 0% { | ||
| + | -webkit-transform: translateY(-2rem); | ||
| + | transform: translateY(-2rem); | ||
| + | opacity: 0; | ||
| + | } | ||
| + | 100% { | ||
| + | -webkit-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | opacity: .5; | ||
| + | } | ||
| + | } | ||
| + | @-webkit-keyframes fade-out { | ||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | @keyframes fade-out { | ||
| + | 100% { | ||
| + | opacity: 0; | ||
| + | } | ||
| + | } | ||
| + | @-webkit-keyframes flicker-images { | ||
| + | 0% { | ||
| + | background-image: url("https://i.ytimg.com/vi/lhgrYaBmplY/maxresdefault.jpg"); | ||
| + | } | ||
| + | 10% { | ||
| + | background-image: url("https://doomrocket.com/wp-content/uploads/2014/08/IMG_4527.png"); | ||
| + | } | ||
| + | 20% { | ||
| + | background-image: url("https://www.nerdmuch.com/wp-content/uploads/2016/02/funny-deadpool.jpg"); | ||
| + | } | ||
| + | 30% { | ||
| + | background-image: url("https://i.pinimg.com/736x/b4/e0/d5/b4e0d51ab9af14198f733ca582d06794--geek-things-geek-art.jpg"); | ||
| + | } | ||
| + | 40% { | ||
| + | background-image: url("https://images.fastcompany.net/image/upload/w_1280,f_auto,q_auto,fl_lossy/fc/3025621-poster-p-1-ka-pow-marvel-opens-massive-comic-book-images-archive-and-api-to-fans-developers.jpg"); | ||
| + | } | ||
| + | 50% { | ||
| + | background-image: url("http://nerdist.com/wp-content/uploads/2015/03/captain-america-iron-man-civil-war-1024x597.jpg"); | ||
| + | } | ||
| + | 60% { | ||
| + | background-image: url("https://geekreply.com/wp-content/uploads/2015/05/watchmen.jpg"); | ||
| + | } | ||
| + | 70% { | ||
| + | background-image: url("http://cdn.playbuzz.com/cdn/3c096341-2a6c-4ae6-bb76-3973445cfbcf/6b938520-4962-403a-9ce3-7bf298918cad.jpg"); | ||
| + | } | ||
| + | 80% { | ||
| + | background-image: url("http://cdn.wegotthiscovered.com/wp-content/uploads/2016/05/Storm-and-Black-Panther-marriage.jpg"); | ||
| + | } | ||
| + | 90% { | ||
| + | background-image: url("https://am21.akamaized.net/tms/cnt/uploads/2014/01/Black-Widow-70s-Suit-3-580x270.jpg"); | ||
| + | } | ||
| + | 100% { | ||
| + | background-image: url("https://i.ytimg.com/vi/lhgrYaBmplY/maxresdefault.jpg"); | ||
| + | } | ||
| + | } | ||
| + | @keyframes flicker-images { | ||
| + | 0% { | ||
| + | background-image: url("https://i.ytimg.com/vi/lhgrYaBmplY/maxresdefault.jpg"); | ||
| + | } | ||
| + | 10% { | ||
| + | background-image: url("https://doomrocket.com/wp-content/uploads/2014/08/IMG_4527.png"); | ||
| + | } | ||
| + | 20% { | ||
| + | background-image: url("https://www.nerdmuch.com/wp-content/uploads/2016/02/funny-deadpool.jpg"); | ||
| + | } | ||
| + | 30% { | ||
| + | background-image: url("https://i.pinimg.com/736x/b4/e0/d5/b4e0d51ab9af14198f733ca582d06794--geek-things-geek-art.jpg"); | ||
| + | } | ||
| + | 40% { | ||
| + | background-image: url("https://images.fastcompany.net/image/upload/w_1280,f_auto,q_auto,fl_lossy/fc/3025621-poster-p-1-ka-pow-marvel-opens-massive-comic-book-images-archive-and-api-to-fans-developers.jpg"); | ||
| + | } | ||
| + | 50% { | ||
| + | background-image: url("http://nerdist.com/wp-content/uploads/2015/03/captain-america-iron-man-civil-war-1024x597.jpg"); | ||
| + | } | ||
| + | 60% { | ||
| + | background-image: url("https://geekreply.com/wp-content/uploads/2015/05/watchmen.jpg"); | ||
| + | } | ||
| + | 70% { | ||
| + | background-image: url("http://cdn.playbuzz.com/cdn/3c096341-2a6c-4ae6-bb76-3973445cfbcf/6b938520-4962-403a-9ce3-7bf298918cad.jpg"); | ||
| + | } | ||
| + | 80% { | ||
| + | background-image: url("http://cdn.wegotthiscovered.com/wp-content/uploads/2016/05/Storm-and-Black-Panther-marriage.jpg"); | ||
| + | } | ||
| + | 90% { | ||
| + | background-image: url("https://am21.akamaized.net/tms/cnt/uploads/2014/01/Black-Widow-70s-Suit-3-580x270.jpg"); | ||
| + | } | ||
| + | 100% { | ||
| + | background-image: url("https://i.ytimg.com/vi/lhgrYaBmplY/maxresdefault.jpg"); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | </style> | ||
| + | |||
| + | |||
| + | |||
| + | <div class="testclasse"> | ||
| + | |||
| + | <div class="babbelbubu run-animation" id="ananananananas"> | ||
| + | <div class="logo"> | ||
| + | |||
| + | <span class="marvel" > <a href="https://www.google.com" style="color: #fff;text-decoration: none;">View our</a></span> | ||
| + | <span class="studios" > <a href="https://www.google.com" style="color: #fff;text-decoration: none;">Story</a></span> | ||
| + | |||
| + | <div class="restart">Restart</div> | ||
| + | |||
| + | <div class="kokosnusss"></div> | ||
| + | </div> | ||
| + | |||
| + | </div> | ||
| + | |||
| + | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</div> | </div> | ||
| + | |||
| + | |||
| + | |||
| + | <script> | ||
| + | element = document.getElementById("ananananananas"); | ||
| + | |||
| + | if (element) { | ||
| + | // reset the transition by... | ||
| + | element.addEventListener("mouseenter", function(e) { | ||
| + | e.preventDefault; | ||
| + | |||
| + | console.log('element', element.classList); | ||
| + | |||
| + | // removing the class | ||
| + | element.classList.remove("run-animation"); | ||
| + | |||
| + | // triggering reflow | ||
| + | void element.offsetWidth; | ||
| + | |||
| + | // and re-adding the class | ||
| + | element.classList.add("run-animation"); | ||
| + | }, false); | ||
| + | |||
| + | element.addEventListener("click", function(e) { | ||
| + | e.preventDefault; | ||
| + | |||
| + | console.log('element', element.classList); | ||
| + | |||
| + | // removing the class | ||
| + | element.classList.remove("run-animation"); | ||
| + | |||
| + | // triggering reflow | ||
| + | void element.offsetWidth; | ||
| + | |||
| + | // and re-adding the class | ||
| + | element.classList.add("run-animation"); | ||
| + | }, false); | ||
| + | } | ||
| + | </script> | ||
| + | |||
| + | <div class='container-fluid p-3' style="background-color: rgba(35, 35, 35, 0.4);"> | ||
| + | <hr> | ||
| + | <div class='row align-items-center'> | ||
| + | <div class='col-6 col-md-2 sponsorLogo text-center'> | ||
| + | <a href="https://www.stura-tuebingen.de/" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/1/10/T--Tuebingen--stura_logo.png" | ||
| + | style="max-height: 80px;"></a> | ||
| + | </div> | ||
| + | <div class='col-6 col-md-2 sponsorLogo text-center'> | ||
| + | <a href="https://www.embl.de/" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/c/c4/T--Tuebingen--embl_logo.png" | ||
| + | style="max-height: 80px;"></a> | ||
| + | </div> | ||
| + | <div class='col-6 col-md-2 sponsorLogo text-center'> | ||
| + | <a href="https://www.kohlbacherlab.org" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/9/99/T--Tuebingen--kohlbacher_logo.png" | ||
| + | style="max-height: 80px;"></a> | ||
| + | </div> | ||
| + | <div class='col-6 col-md-2 sponsorLogo text-center'> | ||
| + | <a href="https://www.dieter-schwarz-stiftung.de/homepage.html" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/8/86/T--Tuebingen--LogoDSS.png" | ||
| + | style="max-height: 80px;"></a> | ||
| + | </div> | ||
| + | <div class='col-6 col-md-2 sponsorLogo text-center'> | ||
| + | <a href="https://www.experimenta.science/en/" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/e/eb/T--Tuebingen--Logo-Experimenta.png" | ||
| + | style="max-height: 80px;"></a> | ||
| + | </div> | ||
| + | <div class='col-6 col-md-2 sponsorLogo text-center'> | ||
| + | <a href="https://www.zmbp.uni-tuebingen.de/zmbp.html" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/d/d8/T--Tuebingen--zmbp_logo.png" | ||
| + | style="max-height: 80px;"></a> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <!-- | ||
| + | <div class='col sponsorLogo'> | ||
| + | <a href="https://www.grk2062.uni-muenchen.de/index.html" target="_blank2" ><img class="img-fluid" src="http://2018.igem.org/wiki/images/f/fe/T--Munich--GRK2062.png" style="max-height: 70px;"></a> | ||
</div> | </div> | ||
| + | --> | ||
| + | </div> | ||
| − | < | + | <hr> |
| − | < | + | <div class='row align-items-center'> |
| + | <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'> | ||
| + | <a href="https://www.lexogen.com/" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/4/43/T--Tuebingen--lexogen_logo.png"></a> | ||
| + | </div> | ||
| + | <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'> | ||
| + | <a href="http://s466755640.online.de/4bl/" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/0/0b/T--Tuebingen--4base_logo.png"></a> | ||
| + | </div> | ||
| + | <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'> | ||
| + | <a href="https://www.agilent.com/" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/e/e7/T--Tuebingen--agilent_logo.png"></a> | ||
| + | </div> | ||
| + | <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'> | ||
| + | <a href="https://www.digitalocean.com/" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/6/67/T--Tuebingen--digitalocean_logo.png"></a> | ||
| + | </div> | ||
| + | <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'> | ||
| + | <a href="https://dwk.com/" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/c/ce/T--Tuebingen--dwk_logo.png"></a> | ||
| + | </div> | ||
| + | <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'> | ||
| + | <a href="https://www.eppendorf.com/" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/a/a6/T--Tuebingen--eppendorf_logo.png"></a> | ||
| + | </div> | ||
| + | <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'> | ||
| + | <a href="https://www.implen.de/" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/b/bb/T--Tuebingen--Logo-Implen.png"></a> | ||
| + | </div> | ||
| + | <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'> | ||
| + | <a href="https://www.jenabioscience.com/" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/3/31/T--Tuebingen--JBS_logo.png"></a> | ||
| + | </div> | ||
| + | <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'> | ||
| + | <a href="https://www.gbo.com/" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/a/ae/T--Tuebingen--greiner_logo.png"></a> | ||
| + | </div> | ||
| + | <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'> | ||
| + | <a href="http://www.metabion.com/" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/4/41/T--Tuebingen--Logo-Metabion.png"></a> | ||
| + | </div> | ||
| + | <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'> | ||
| + | <a href="https://www.microsynth.ch/home-ch.html" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/1/18/T--Tuebingen--microsynth_logo.png"></a> | ||
| + | </div> | ||
| + | <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'> | ||
| + | <a href="https://www.neb.com/" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/2/29/T--Tuebingen--neb_logo.png"></a> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class='row align-items-center'> | ||
| + | <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'> | ||
| + | <a href="https://www.promega.de/en/" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/f/f8/T--Tuebingen--promega_logo.png"></a> | ||
| + | </div> | ||
| + | <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'> | ||
| + | <a href="https://www.qiagen.com/us/" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/9/92/T--Tuebingen--qiagen_logo.png"></a> | ||
| + | </div> | ||
| + | <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'> | ||
| + | <a href="https://www.carlroth.com/en/en" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/6/61/T--Tuebingen--roth_logo.png"></a> | ||
| + | </div> | ||
| + | <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'> | ||
| + | <a href="https://www.sitoolsbiotech.com/" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/3/31/T--Tuebingen--sibiotools_logo.png"></a> | ||
| + | </div> | ||
| + | <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'> | ||
| + | <a href="https://www.snapgene.com/" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/3/3a/T--Tuebingen--snapgene_logo.png"></a> | ||
| + | </div> | ||
| + | <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'> | ||
| + | <a href="https://www.trilinkbiotech.com/" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/b/b6/T--Tuebingen--trilink_logo.png"></a> | ||
| + | </div> | ||
| + | <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'> | ||
| + | <a href="https://twistbioscience.com/" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/4/4c/T--Tuebingen--Logo-Twist.png"></a> | ||
| + | </div> | ||
| + | <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'> | ||
| + | <a href="http://www.vazymebiotech.com/" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/b/b7/T--Tuebingen--vazyme_logo.png"></a> | ||
| + | </div> | ||
| + | <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'> | ||
| + | <a href="https://www.biolegend.com/" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/c/c3/T--Tuebingen--biolegend_logo.png"></a> | ||
| + | </div> | ||
| + | <div class='col-4 col-md-2 col-xl-1 sponsorLogo text-center'> | ||
| + | <a href="https://www.zymoresearch.de/" target="_blank2"><img class="img-fluid" | ||
| + | src="https://2019.igem.org/wiki/images/6/6e/T--Tuebingen--zymo_logo.png"></a> | ||
| + | </div> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
</html> | </html> | ||
Revision as of 19:15, 15 October 2019
GLP.exe - a safe and effective treatment for Diabetes Mellitus Type II
Several treatment options for Type II Diabetes Mellitus have been developed in recent years significantly improving the patients' insulin level.
Hence, the diagnosis of Type II Diabetes Mellitus is no longer a death sentence.
Current Drugs
are expensive, require fine tuning and daily shots. Moreover, they have severe side-effects, causing patients to skip doses.
“Many patients don’t want to use insulin. They don’t want
to do finger sticks and they’re afraid of hypoglycemia.”
“To fight the global diabetes pandemic, we would ideally have an accessible cost-effective
easily-compliant intervention that has high clinical efficacy and that is free of adverse side effects.”
Prof. Harold Lebovitz, State University of New York Health Science Center, Brooklyn, New York
However...
There's a solution!
Our therapeutic agent is a probiotic secreting incretin mimetics placed in the patients intestine by oral administration of capsules. GLP-1 and Exendin-4, our main actors, cause an increase in insulin secretion, if the cell has already taken up sugar.
This enables an easier therapy where a regular intake of medicals are not required.
Improved cell penetrating peptides with the use of artificial intelligence allow for an efficient and safe transport of our effectors into the cells.
Safety
is our highest priority!
Therefore, we developed a novel, Cas3 based kill-switch mechanism. The flexible system uses three regulators inspired by the human intestines: temperature, availability of fatty acids in form of Acyl CoA and N-Acetyl-Glucosamin.
If the conditions of our regulatory system are no longer met, Cas3 will be degrading all genetic information.
Additionally
An in depth E.coli Nissle characterization
Despite the fact that E. Coli Nissle is an already approved probiotic, it's surprisingly badly characterized.
Hence, we provide the first metabolic model of E. coli Nissle and optimize it's growth for various growth media. Furthermore, we predicted the interaction and competition of E. coli Nissle with common competitors for various fluxes in the gut.
Finally, we carried out a series of RNA-Seq experiments to assess the adaptions and reactions of E. coli Nissle to aerobic, as well as anaerobic occurring stress factors.
Our work lays the foundation for an innovative, unprecedented approach to treat Diabetes Mellitus Type II.
