Jan Vuckovic (Talk | contribs) |
Jan Vuckovic (Talk | contribs) |
||
(530 intermediate revisions by 2 users not shown) | |||
Line 2: | Line 2: | ||
{{Groningen}} | {{Groningen}} | ||
<html> | <html> | ||
− | + | <style> | |
+ | div.fullwidth_title { | ||
+ | margin: 100px 5% 0 5%; | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | background: #FEF8F0; | ||
+ | } | ||
+ | |||
+ | main.flex { | ||
+ | width: 100%; | ||
+ | display: grid; | ||
+ | grid-template-columns: 2.5% 1fr 120px 1fr 2.5%; | ||
+ | column-gap: 2.5%; | ||
+ | row-gap: 400px; | ||
+ | background: rgb(254, 248, 240); | ||
+ | background: linear-gradient(180deg, rgba(254, 248, 240, 1) 0%, rgba(191, 230, 238, 1) 5%, rgba(255, 255, 255, 1) 90%, rgba(254, 248, 240, 1) 100%); | ||
+ | } | ||
+ | |||
+ | /*The following code describes full width items*/ | ||
+ | div.fullwidth, | ||
+ | div.fullwidth_overlap_1, | ||
+ | div.fullwidth_overlap_2, | ||
+ | div.fullwidth_overlap_3, | ||
+ | div.fullwidth_overlap_4, | ||
+ | div.fullwidth_references, | ||
+ | div.yeast { | ||
+ | grid-column-start: 2; | ||
+ | grid-column-end: span 3; | ||
+ | /*not really full widht*/ | ||
+ | grid-row-end: span 1; | ||
+ | text-align: center; | ||
+ | z-index: 3; | ||
+ | } | ||
+ | |||
+ | div.fullwidth_cloud, | ||
+ | div.fullwidth_molecules, | ||
+ | div.fullwidth_bottom { | ||
+ | grid-column-start: 1; | ||
+ | grid-column-end: span 5; | ||
+ | /*really full width*/ | ||
+ | } | ||
+ | |||
+ | div.fullwidth_cloud { | ||
+ | height: 420px; | ||
+ | background: url('https://static.igem.org/mediawiki/2021/2/21/T--Groningen--LP_cloud.png') center center no-repeat; | ||
+ | display: flex; | ||
+ | align-items: center; | ||
+ | justify-content: center; | ||
+ | } | ||
+ | |||
+ | div.fullwidth_molecules { | ||
+ | margin-top: -400px; | ||
+ | grid-row-start: 2; | ||
+ | grid-row-end: span 2; | ||
+ | height: 630px; | ||
+ | background: url('https://static.igem.org/mediawiki/2021/b/b7/T--Groningen--LP_molecules.png') center center no-repeat; | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | align-items: center; | ||
+ | } | ||
+ | |||
+ | div.fullwidth_bottom { | ||
+ | margin-top: -300px; | ||
+ | } | ||
+ | |||
+ | div.fullwidth_references { | ||
+ | margin-top: -300px; | ||
+ | } | ||
+ | |||
+ | /*The following code describes rows of full width items*/ | ||
+ | div.fullwidth_overlap_1 { | ||
+ | grid-row-start: 9; | ||
+ | } | ||
+ | |||
+ | div.fullwidth_overlap_2 { | ||
+ | grid-row-start: 10; | ||
+ | display: flex; | ||
+ | flex-wrap: wrap; | ||
+ | justify-content: space-between; | ||
+ | row-gap: 100px; | ||
+ | } | ||
+ | |||
+ | div.fullwidth_overlap_3 { | ||
+ | grid-row-start: 11; | ||
+ | } | ||
+ | |||
+ | div.fullwidth_overlap_4 { | ||
+ | grid-row-start: 12; | ||
+ | } | ||
+ | |||
+ | /*The following code describes columns of 1-column items*/ | ||
+ | |||
+ | div.ammonia, | ||
+ | div.right_ammonia, | ||
+ | div.right, | ||
+ | div.left, | ||
+ | div.left_-50px, | ||
+ | div.charts, | ||
+ | div.right_overlap_1, | ||
+ | div.right_overlap_2, | ||
+ | div.pill, | ||
+ | div.ammonia_from_cows, | ||
+ | div.ammonia_from_cows_space_holder, | ||
+ | div.cage, | ||
+ | div.fire, | ||
+ | div.overflow, | ||
+ | div.left_minus_margin, | ||
+ | div.right_minus_margin { | ||
+ | grid-column-end: span 1; | ||
+ | } | ||
+ | |||
+ | div.left_-50px { | ||
+ | margin-top: -100px; | ||
+ | } | ||
+ | |||
+ | div.right_ammonia { | ||
+ | margin-top: -300px; | ||
+ | } | ||
+ | |||
+ | div.left, | ||
+ | div.left_-50px, | ||
+ | div.charts, | ||
+ | div.overflow, | ||
+ | div.left_minus_margin { | ||
+ | grid-column-start: 2; | ||
+ | } | ||
+ | |||
+ | div.ammonia, | ||
+ | div.cage, | ||
+ | div.fire { | ||
+ | grid-column-start: 3; | ||
+ | } | ||
+ | |||
+ | div.right_ammonia, | ||
+ | div.right, | ||
+ | div.right_overlap_1, | ||
+ | div.right_overlap_2, | ||
+ | div.pill, | ||
+ | div.ammonia_from_cows, | ||
+ | div.ammonia_from_cows_space_holder, | ||
+ | div.right_minus_margin { | ||
+ | grid-column-start: 4; | ||
+ | } | ||
+ | |||
+ | div.charts { | ||
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | } | ||
+ | |||
+ | /*The following code describes rows of 1-column items*/ | ||
+ | div.right_overlap_1, | ||
+ | div.right_overlap_2, | ||
+ | div.ammonia_from_cows_space_holder, | ||
+ | div.cage, | ||
+ | div.fire, | ||
+ | div.yeast { | ||
+ | grid-row-end: span 1; | ||
+ | } | ||
+ | |||
+ | div.pill, | ||
+ | div.ammonia_from_cows, | ||
+ | div.cage { | ||
+ | grid-row-end: span 2; | ||
+ | } | ||
+ | |||
+ | div.ammonia { | ||
+ | margin-top: -400px; | ||
+ | grid-row: 3/span 18; | ||
+ | } | ||
+ | |||
+ | div.right_overlap_1, | ||
+ | div.pill { | ||
+ | grid-row-start: 13; | ||
+ | } | ||
+ | |||
+ | div.right_overlap_2, | ||
+ | div.ammonia_from_cows { | ||
+ | grid-row-start: 14; | ||
+ | } | ||
+ | |||
+ | div.ammonia_from_cows_space_holder { | ||
+ | grid-row-start: 15; | ||
+ | height: 0; | ||
+ | } | ||
+ | |||
+ | div.cage { | ||
+ | grid-row-start: 17; | ||
+ | } | ||
+ | |||
+ | div.fire { | ||
+ | grid-row-start: 18; | ||
+ | } | ||
+ | |||
+ | div.yeast { | ||
+ | grid-row-start: 20; | ||
+ | } | ||
+ | |||
+ | div.left_minus_margin, | ||
+ | div.right_minus_margin { | ||
+ | margin-top: -300px; | ||
+ | } | ||
+ | |||
+ | /*The following code describes images*/ | ||
+ | div.hide_desktop { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | div.hide_desktop img { | ||
+ | width: 100px; | ||
+ | object-fit: contain; | ||
+ | animation: rotation 3s infinite linear; | ||
+ | } | ||
+ | |||
+ | div.fullwidth_title img { | ||
+ | max-width: 30%; | ||
+ | object-fit: contain; | ||
+ | } | ||
+ | |||
+ | div.ammonia img, | ||
+ | div.right img, | ||
+ | div.left img, | ||
+ | div.left_-50px, | ||
+ | div.charts img, | ||
+ | div.fullwidth_overlap_4 img, | ||
+ | div.right_overlap_1 img, | ||
+ | div.right_overlap_2 img, | ||
+ | div.pill img, | ||
+ | div.cage img, | ||
+ | div.ammonia_from_cows img, | ||
+ | div.fire img, | ||
+ | div.fullwidth_bottom img { | ||
+ | max-width: 100%; | ||
+ | object-fit: contain; | ||
+ | } | ||
+ | |||
+ | div.ammonia img, | ||
+ | div.pill img, | ||
+ | div.cage img, | ||
+ | div.ammonia_from_cows img { | ||
+ | position: sticky; | ||
+ | top: 250px; | ||
+ | } | ||
+ | |||
+ | div.charts img:first-child { | ||
+ | margin-bottom: 100px; | ||
+ | } | ||
+ | |||
+ | |||
+ | div.fullwidth_overlap_2 img { | ||
+ | width: 20%; | ||
+ | max-height: 277px; | ||
+ | object-fit: contain; | ||
+ | } | ||
+ | |||
+ | div.pill img { | ||
+ | right: 0; | ||
+ | margin-bottom: auto; | ||
+ | } | ||
+ | |||
+ | div.ammonia img { | ||
+ | filter: drop-shadow(0 10px 60px #7e7e7e); | ||
+ | margin-bottom: 300px; | ||
+ | animation: rotation 3s infinite linear; | ||
+ | } | ||
+ | |||
+ | @keyframes rotation { | ||
+ | 0% { | ||
+ | transform: rotate(0deg); | ||
+ | } | ||
+ | |||
+ | 100% { | ||
+ | transform: rotate(360deg); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | div.pill img, | ||
+ | div.ammonia_from_cows img { | ||
+ | filter: drop-shadow(0 10px 30px); | ||
+ | } | ||
+ | |||
+ | div.ammonia_from_cows img { | ||
+ | filter: drop-shadow(0 10px 30px); | ||
+ | margin-bottom: 100px; | ||
+ | } | ||
+ | |||
+ | div.cage img { | ||
+ | margin-bottom: 280px; | ||
+ | } | ||
+ | |||
+ | div.fire img { | ||
+ | margin-top: 140px; | ||
+ | } | ||
+ | |||
+ | div.yeast img { | ||
+ | width: 600px; | ||
+ | } | ||
+ | |||
+ | /*The following code describes the z-index*/ | ||
+ | div.cage, | ||
+ | div.pill { | ||
+ | z-index: 3; | ||
+ | } | ||
+ | |||
+ | div.ammonia, | ||
+ | div.right_overlap_2 { | ||
+ | z-index: 2; | ||
+ | } | ||
+ | |||
+ | div.ammonia_from_cows { | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | div.right_overlap_1, | ||
+ | div.fire { | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | div.yeast { | ||
+ | z-index: 3; | ||
+ | } | ||
+ | |||
+ | /*The following code describes text styling*/ | ||
+ | main h2 { | ||
+ | font-size: 38px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | main h3 { | ||
+ | font-size: 24px; | ||
+ | font-weight: bold; | ||
+ | margin-bottom: 12px; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | main p { | ||
+ | text-align: justify; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | main ul { | ||
+ | margin: 0; | ||
+ | padding-left: 30px; | ||
+ | list-style-type: disc; | ||
+ | } | ||
+ | |||
+ | main ol { | ||
+ | counter-reset: section; | ||
+ | list-style-type: none; | ||
+ | font: Lato; | ||
+ | } | ||
+ | |||
+ | main ol li { | ||
+ | text-align: left; | ||
+ | margin: 0.5em 0 0 2em; | ||
+ | text-indent: -2em | ||
+ | } | ||
+ | |||
+ | main ol li::before { | ||
+ | counter-increment: section; | ||
+ | content: "["counter(section) "] "; | ||
+ | } | ||
+ | |||
+ | main p, | ||
+ | main li, | ||
+ | ol.references a { | ||
+ | font-size: 18px; | ||
+ | line-height: 1.5em; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | main div.fullwidth p { | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | ol.references a { | ||
+ | font-size: 18px; | ||
+ | line-height: 1.5em; | ||
+ | color: black; | ||
+ | text-decoration: none; | ||
+ | word-break: break-all; | ||
+ | } | ||
+ | |||
+ | div.fullwidth_cloud h2 { | ||
+ | margin: 0 10% 0 10%; | ||
+ | max-width: 1084px; | ||
+ | } | ||
+ | |||
+ | div.fullwidth_molecules h3 { | ||
+ | margin: 200px 10% 0 10%; | ||
+ | } | ||
+ | |||
+ | div.fullwidth_molecules p { | ||
+ | max-width: 700px; | ||
+ | margin: 0 10% 0 10%; | ||
+ | } | ||
+ | |||
+ | strong.red { | ||
+ | color: #921f3c; | ||
+ | } | ||
+ | |||
+ | /*THe following code describes the pop up*/ | ||
+ | .popup { | ||
+ | background-color: #ffffff; | ||
+ | width: 600px; | ||
+ | padding: 30px 40px; | ||
+ | position: absolute; | ||
+ | transform: translate(-50%, -50%); | ||
+ | top: 400px; | ||
+ | left: 50%; | ||
+ | border-radius: 8px; | ||
+ | display: none; | ||
+ | box-shadow: 0 30px 30px #f7d9cf; | ||
+ | transition: 0.5s; | ||
+ | } | ||
+ | |||
+ | .popup h2 { | ||
+ | font-size: 38px; | ||
+ | } | ||
+ | |||
+ | .popup h2, | ||
+ | .popup p { | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | div.popup button { | ||
+ | display: block; | ||
+ | margin: 0 0 20px auto; | ||
+ | background-color: transparent; | ||
+ | font-size: 30px; | ||
+ | color: #921f3c; | ||
+ | opacity: 0.5; | ||
+ | border: none; | ||
+ | outline: none; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | div.popup button:hover { | ||
+ | opacity: 1; | ||
+ | transform: rotate(360deg); | ||
+ | transition-duration: 1s; | ||
+ | } | ||
+ | |||
+ | .popup p { | ||
+ | font-size: 18px; | ||
+ | margin: 20px 0; | ||
+ | line-height: 25px; | ||
+ | } | ||
+ | |||
+ | div.popup p b { | ||
+ | font-size: 1.2em; | ||
+ | color: #921f3c; | ||
+ | } | ||
+ | |||
+ | div.popup p.nominations { | ||
+ | margin-top: 80px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*The following code make the center column 150px for screens that are less than 768px*/ | ||
+ | @media(max-width: 767px) { | ||
+ | .popup { | ||
+ | width: 80%; | ||
+ | top: 500px; | ||
+ | } | ||
+ | |||
+ | div.fullwidth_title { | ||
+ | flex-direction: column; | ||
+ | } | ||
+ | |||
+ | div.fullwidth_title img:not(:first-child) { | ||
+ | margin-top: 60px; | ||
+ | } | ||
+ | |||
main.flex { | main.flex { | ||
− | + | grid-template-columns: 2.5% 1fr 2.5%; | |
− | margin: | + | margin-top: 120px; |
− | + | row-gap: 300px; | |
− | flex- | + | } |
+ | |||
+ | div.fullwidth, | ||
+ | div.fullwidth_overlap_1, | ||
+ | div.fullwidth_overlap_2, | ||
+ | div.fullwidth_overlap_3, | ||
+ | div.fullwidth_overlap_4, | ||
+ | div.fullwidth_references, | ||
+ | div.yeast, | ||
+ | div.ammonia, | ||
+ | div.right_ammonia, | ||
+ | div.right, | ||
+ | div.left, | ||
+ | div.left_-50px, | ||
+ | div.right_overlap_1, | ||
+ | div.right_overlap_2, | ||
+ | div.pill, | ||
+ | div.ammonia_from_cows, | ||
+ | div.ammonia_from_cows_space_holder, | ||
+ | div.cage, | ||
+ | div.fire, | ||
+ | div.overflow, | ||
+ | div.left_minus_margin, | ||
+ | div.right_minus_margin { | ||
+ | grid-column: 2 / 3; | ||
+ | } | ||
+ | |||
+ | div.fullwidth_cloud, | ||
+ | div.fullwidth_molecules, | ||
+ | div.fullwidth_bottom { | ||
+ | grid-column: 1 / -1; | ||
+ | } | ||
+ | |||
+ | main.flex div.right:nth-child(8) { | ||
+ | grid-row: 7; | ||
+ | } | ||
+ | |||
+ | main.flex div.left:nth-child(9) { | ||
+ | grid-row: 9; | ||
+ | } | ||
+ | |||
+ | main.flex div.right:nth-child(10) { | ||
+ | grid-row: 10; | ||
+ | } | ||
+ | |||
+ | main.flex div.right:nth-child(12) { | ||
+ | grid-row: 11; | ||
+ | } | ||
+ | |||
+ | main.flex div.left:nth-child(11) { | ||
+ | grid-row: 12; | ||
+ | } | ||
+ | |||
+ | div.fullwidth_overlap_1 { | ||
+ | grid-row: 13; | ||
+ | } | ||
+ | |||
+ | div.fullwidth_overlap_2 { | ||
+ | grid-row: 14; | ||
+ | } | ||
+ | |||
+ | div.fullwidth_overlap_3 { | ||
+ | grid-row: 15; | ||
+ | } | ||
+ | |||
+ | div.fullwidth_overlap_4 { | ||
+ | grid-row: 16; | ||
+ | } | ||
+ | |||
+ | div.right_overlap_1 { | ||
+ | grid-row-start: 18; | ||
+ | } | ||
+ | |||
+ | div.pill { | ||
+ | grid-row-start: 18; | ||
+ | grid-row-end: span 3; | ||
+ | } | ||
+ | |||
+ | div.overflow { | ||
+ | grid-row-start: 19; | ||
+ | } | ||
+ | |||
+ | div.right_overlap_2 { | ||
+ | grid-row-start: 20; | ||
+ | } | ||
+ | |||
+ | div.ammonia_from_cows { | ||
+ | grid-row-start: 20; | ||
+ | } | ||
+ | |||
+ | div.right_minus_margin { | ||
+ | grid-row-start: 22; | ||
+ | } | ||
+ | |||
+ | div.left_minus_margin { | ||
+ | grid-row-start: 23; | ||
+ | } | ||
+ | |||
+ | main.flex div.left:nth-child(27) { | ||
+ | grid-row: 24; | ||
+ | } | ||
+ | |||
+ | div.ammonia { | ||
+ | grid-row-start: 25; | ||
+ | grid-row-end: span 7; | ||
+ | } | ||
+ | |||
+ | div.cage { | ||
+ | grid-row-start: 26; | ||
+ | grid-row-end: span 4; | ||
+ | } | ||
+ | |||
+ | main.flex div.left:nth-child(29) { | ||
+ | grid-row: 27; | ||
+ | } | ||
+ | |||
+ | div.fire { | ||
+ | grid-row: 28; | ||
+ | } | ||
+ | |||
+ | main.flex div.right:nth-child(32) { | ||
+ | grid-row: 30; | ||
+ | } | ||
+ | |||
+ | div.yeast { | ||
+ | grid-row: 31; | ||
} | } | ||
div.fullwidth { | div.fullwidth { | ||
− | + | grid-row: 32; | |
} | } | ||
+ | div.fullwidth_bottom { | ||
+ | grid-row: 33; | ||
+ | } | ||
+ | |||
+ | div.fullwidth_references { | ||
+ | grid-row: 34 | ||
+ | } | ||
+ | |||
+ | main.flex div.left:nth-child(24), | ||
+ | main.flex div.right:nth-child(31) { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | main.flex div.right:nth-child(6), | ||
+ | main.flex div.charts, | ||
+ | main.flex div.right:nth-child(10), | ||
+ | main.flex div.left:nth-child(11) { | ||
+ | margin-top: -200px; | ||
+ | } | ||
+ | |||
+ | main.flex div.right_minus_margin, main.flex div.left_minus_margin { | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | main.flex div.overflow, | ||
+ | main.flex div.left:nth-child(29), | ||
+ | main.flex div.right:nth-child(32) { | ||
+ | z-index: 4; | ||
+ | } | ||
+ | |||
+ | div.ammonia img, | ||
+ | div.cage img, | ||
+ | div.fire img { | ||
+ | width: 135px; | ||
+ | transform: translate(-50%, -50%); | ||
+ | left: 50%; | ||
+ | } | ||
+ | |||
+ | div.ammonia img { | ||
+ | margin-top: 200px; | ||
+ | margin-bottom: 40px; | ||
+ | animation: none; | ||
+ | } | ||
+ | |||
+ | div.cage img { | ||
+ | margin-bottom: 300px; | ||
+ | } | ||
+ | |||
+ | div.fire img { | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | div.yeast img { | ||
+ | width: 330px; | ||
+ | } | ||
+ | |||
+ | div.fullwidth_cloud { | ||
+ | background: none; | ||
+ | } | ||
+ | |||
+ | div.hide_desktop { | ||
+ | margin-top: 24px; | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | } | ||
+ | |||
+ | div.fullwidth_title img { | ||
+ | max-width: 100%; | ||
+ | } | ||
+ | |||
+ | div.fullwidth_overlap_2 img { | ||
+ | width: 40%; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | |||
+ | main h3 { | ||
+ | font-size: 20px; | ||
+ | } | ||
+ | |||
+ | } | ||
− | </style> | + | /*The follwoing code describes other stuff*/ |
− | <main class="flex"> | + | .overflow { |
− | <div class=" | + | overflow: visible; |
− | <img src=" | + | height: 0; |
− | <img src=" | + | } |
+ | </style> | ||
+ | <div class="popup"> | ||
+ | <button id="close">×</button> | ||
+ | <h2>iGEM Groningen 2021</h2> | ||
+ | <p><b>Top 10</b> overgrad projects worldwide</p> | ||
+ | <p>Best overgrad <b>environmental project</b> worldwide</p> | ||
+ | <p><b>Gold medal</b> winner</p> | ||
+ | <p class="nominations"><em>Nominated for: best model, best education, best wiki and | ||
+ | best project presentation video</em></p> | ||
+ | </div> | ||
+ | <div class="fullwidth_title"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/2/2c/T--Groningen--TransparentAwardsGIF.gif"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/e/e8/T--Groningen--LP_byemonia_title.png"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/8/8f/T--Groningen--LP_logo.png"> | ||
+ | </div> | ||
+ | <main class="flex"> | ||
+ | <div class="fullwidth_cloud"> | ||
+ | <h2>Tackling a Dutch <strong class="red">environmental</strong> and <strong class="red">economical</strong> | ||
+ | crisis by producing <strong class="green">alpha-amylase</strong> in <strong class="green"><i>Saccharomyces | ||
+ | spp.</i></strong></h2> | ||
+ | </div> | ||
+ | <div class="fullwidth_molecules"> | ||
+ | <h3><strong class="red">The Netherlands suffers from a nitrogen crisis</strong></h3> | ||
+ | <p>The Netherlands emits too much nitrogen. The Dutch surplus of nitrogen emissions per hectare per year is | ||
+ | <b>four times the EU average<sup>[1]</sup></b>. | ||
+ | </p> | ||
+ | </div> | ||
+ | <div class="ammonia"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/a/a4/T--Groningen--LP_ammonia.png"> | ||
+ | </div> | ||
+ | <div class="right_ammonia"> | ||
+ | <h3>Ammonia (NH<sub>3</sub>)</h3> | ||
+ | <p>Is one of the main nitrogen-containing compounds that is emitted in excess.</p> | ||
+ | <div class="hide_desktop"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/a/a4/T--Groningen--LP_ammonia.png"> | ||
</div> | </div> | ||
− | <div class=" | + | </div> |
− | <p> | + | <div class=left_-50px> |
− | </div> | + | <h3>70%<sup>[1]</sup> of nature areas in the Netherlands exceeded limits for nitrogen</h3> |
− | <div class=" | + | <p>Excess deposition of nitrogen can endanger nitrogen-sensitive nature areas. Excess ammonia deposition in |
− | <h3> | + | nature leads to acidification and eutrophication and can cause certain plants to overgrow others. This |
− | <p>The | + | causes a <b>loss of biodiversity and harms the quality of natural habitats<sup>[2]</sup></b>.</p> |
− | </ | + | </div> |
− | </main> | + | <div class="right"> |
+ | <img src="https://static.igem.org/mediawiki/2021/b/b4/T--Groningen--LP_biodiversity.png"> | ||
+ | </div> | ||
+ | <div class="charts"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/b/be/T--Groningen--LP_chart.png"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/a/a2/T--Groningen--LP_chart2.png"> | ||
+ | </div> | ||
+ | <div class="right"> | ||
+ | <h3>85,5% of Dutch ammonia emissions originate from agriculture</h3> | ||
+ | <p>The Netherlands emitted 125.8 kilotons of ammonia, of which 107.5 kilotons originated from agriculture alone. | ||
+ | Within agriculture <b>57.71% of the ammonia emissions originate from cattle (62.04 | ||
+ | kilotons)<sup>[3]</sup></b>.</p> | ||
+ | </div> | ||
+ | <div class="left"> | ||
+ | <h3>Current measures against the nitrogen crisis aim to curb Dutch agriculture</h3> | ||
+ | <p>Due to a strict system of rules and certifications surrounding maximal ammonia emissions, it is hard for | ||
+ | farmers to expand their business. Moreover, there has been a political debate about halving the Dutch | ||
+ | livestock. All of which have led to <b>nation-wide farmers protests</b>.</p> | ||
+ | </div> | ||
+ | <div class="right"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/6/62/T--Groningen--LP_animals.png"> | ||
+ | </div> | ||
+ | <div class="left"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/8/86/T--Groningen--LP_planet.png"> | ||
+ | </div> | ||
+ | <div class="right"> | ||
+ | <h3>However, the Netherlands is the second absolute largest agricultural exporter in the world<sup>[4]</sup> | ||
+ | </h3> | ||
+ | <p>Curbing or even halving such a large industry thus has drastic consequences for the livelihood of the people | ||
+ | working in this industry and for worldwide food security.</p> | ||
+ | </div> | ||
+ | <div class="fullwidth_overlap_1"> | ||
+ | <h3><strong class="red">The Dutch nitrogen crisis is a complex problem where environmental, economical and | ||
+ | food-production needs directly oppose each other</strong></h3> | ||
+ | </div> | ||
+ | <div class="fullwidth_overlap_2"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/2/2d/T--Groningen--LP_goal2.png"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/6/68/T--Groningen--LP_goal12.gif"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/5/58/T--Groningen--LP_goal14.gif"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/2/21/T--Groningen--LP_goal15.gif"> | ||
+ | </div> | ||
+ | <div class="fullwidth_overlap_3"> | ||
+ | <h3><strong class="red">But what if we can bring those needs together in a novel solution?</strong></h3> | ||
+ | </div> | ||
+ | <div class="fullwidth_overlap_4"> | ||
+ | <h3><strong class="red">Introducing:</strong></h3> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/e/ea/T--Groningen--LP_byemonia_horizontal.png"> | ||
+ | </div> | ||
+ | <div class="left"> | ||
+ | <h3>Step 1: produce a feed additive using yeast</h3> | ||
+ | <p>Using <i>Saccharomyces spp.</i> we will produce <b>alpha-amylase</b>: an enzyme that hydrolyzes glycosidic | ||
+ | bonds in complex sugars.</p> | ||
+ | </div> | ||
+ | <div class="right_overlap_1"> | ||
+ | <!--engineered yeast--> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/2/22/T--Groningen--LP_yeast.png"> | ||
+ | </div> | ||
+ | <div class="pill"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/7/74/T--Groningen--LP_pill_new.png"> | ||
+ | </div> | ||
+ | <div class="overflow"> | ||
+ | <p>Once added to the feed, alpha-amylase optimizes the digestion of the feed by <b>microbes in the rumen</b> of | ||
+ | the cow. The microbes will be able to take up more <b>ATP</b>, which enables them to take up more | ||
+ | <b>ammonia</b>. Moreover the microbes will produce more <b>volatile fatty acids</b>. (Theoretically), this | ||
+ | lowers ammonia emissions by cattle, while enhancing their growth and milk production. | ||
+ | </p> | ||
+ | </div> | ||
+ | <div class="right_overlap_2"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/0/0f/T--Groningen--LP_cows.png"> | ||
+ | </div> | ||
+ | <div class="ammonia_from_cows"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/3/3f/T--Groningen--LP_ammonias.png"> | ||
+ | </div> | ||
+ | <div class="ammonia_from_cows_space_holder"><br></div> | ||
+ | <div class="left"></div> | ||
+ | <div class="left_minus_margin"> | ||
+ | <h3>iGEM Groningen 2021 combinatorial library</h3> | ||
+ | <ul> | ||
+ | <li>4 chasis</li> | ||
+ | <li>4 signal sequences</li> | ||
+ | <li>10 promoters</li> | ||
+ | <li>4 alpha-amylase genes</li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div class="right_minus_margin"> | ||
+ | <p>To optimize alpha-amylase production, we have designed a combinatorial library containing over <b>600 | ||
+ | combinations</b> to be able to find the best combination of chassis, promotor, signal sequence and gene | ||
+ | for optimal alpha-amylase production.</p> | ||
+ | </div> | ||
+ | <div class="left"> | ||
+ | <h3>Step 2: catch ammonia with a MOF</h3> | ||
+ | <p>Ammonia that is still emitted, will be captured with a special filter device (<b>a Metal Organic Framework: | ||
+ | MOF</b>) that will be placed in pigs and poultry barns. A MOF is a compound in which metal ions and | ||
+ | organic molecules are arranged in an orderly fashion, creating tiny cavities that are able to adsorb ammonia | ||
+ | in its gaseous state. | ||
+ | </p> | ||
+ | </div> | ||
+ | <div class="cage"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/2/20/T--Groningen--LP_cage_new.png"> | ||
+ | </div> | ||
+ | <div class="left"> | ||
+ | <h3>Step 3: close the cycle</h3> | ||
+ | <p>Once the MOF is filled up, it will be transported back to the lab, where it can release the ammonia after | ||
+ | being heated up.</p> | ||
+ | </div> | ||
+ | <div class="fire"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/c/cf/T--Groningen--LP_fire.png"> | ||
+ | </div> | ||
+ | <div class="right"></div> | ||
+ | <div class="right"> | ||
+ | <p>The GMO will then be able to use this ammonia as its nitrogen source to grow and produce more alpha-amylase, | ||
+ | <b>closing the cycle from GMO to barn, back to GMO</b>. | ||
+ | </p> | ||
+ | </div> | ||
+ | <div class="yeast"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/3/36/T--Groningen--LP_yeast_nogears.png"> | ||
+ | </div> | ||
+ | <div class="fullwidth"> | ||
+ | <h3>Turning ammonia into BYE-MONIA</h3> | ||
+ | <p>The Dutch nitrogen crisis is a complex problem with several needs opposing each other. With BYE-MONIA we aim | ||
+ | to provide a safe and circular solution -that can work alongside other current solutions- to target excess | ||
+ | ammonia emissions at the source while still being beneficial to farmers.</p> | ||
+ | </div> | ||
+ | <div class="fullwidth_bottom"> | ||
+ | <img src="https://static.igem.org/mediawiki/2021/4/42/T--Groningen--LP_bottom.png"> | ||
+ | </div> | ||
+ | <div class="fullwidth_references"> | ||
+ | <ol class="references"> | ||
+ | <li>European Commission, “Commission recommendations for The Netherlands’ CAP strategic plan Accompanying | ||
+ | the document COMMUNICATION FROM THE COMMISSION TO THE EUROPEAN PARLIAMENT, THE COUNCIL, THE EUROPEAN | ||
+ | ECONOMIC AND SOCIAL COMMITTEE AND THE COMMITTEE OF THE REGIONS Recommendations to the Member States as | ||
+ | regards their strategic plan for the Common Agricultural Policy.”, <i>Commission staff working | ||
+ | document</i>, 2020.</li> | ||
+ | <li>European Environment Agency, “Ammonia (NH3) emissions — European Environment Agency,” 04-Sep-2015. | ||
+ | [Online]. Available: | ||
+ | <a>https://www.eea.europa.eu/data-and-maps/indicators/eea-32-ammonia-nh3-emissions-1.</a> [Accessed: | ||
+ | 29-Aug-2021]. | ||
+ | </li> | ||
+ | <li>“Absolute emissiereeks ammonia (in [kg]) naar Lucht 2019,” <i>Emmissieregistratie</i>, Aug-2021. | ||
+ | [Online]. Available: <a>http://www.emissieregistratie.nl/erpubliek/erpub/weergave/grafiek.aspx.</a> | ||
+ | [Accessed: 21-Aug-2021].</li> | ||
+ | <li>M. Dolman, G. Jukema, and P. Ramaekers, “De Nederlandse landbouwexport 2018 in breder perspectief,” | ||
+ | <i>Wageningen Econ. Res.</i>, Jan. 2019, doi: 10.18174/468099. | ||
+ | </li> | ||
+ | </ol> | ||
+ | </div> | ||
+ | </main> | ||
+ | <script> | ||
+ | window.addEventListener("load", function () { | ||
+ | setTimeout( | ||
+ | function open(event) { | ||
+ | document.querySelector(".popup").style.display = "block"; | ||
+ | }, | ||
+ | 1000 | ||
+ | ) | ||
+ | }); | ||
+ | |||
+ | |||
+ | document.querySelector("#close").addEventListener("click", function () { | ||
+ | document.querySelector(".popup").style.display = "none"; | ||
+ | }); | ||
+ | </script> | ||
+ | |||
</html> | </html> | ||
{{Groningen/Footer}} | {{Groningen/Footer}} |
Latest revision as of 10:11, 16 December 2021
iGEM Groningen 2021
Top 10 overgrad projects worldwide
Best overgrad environmental project worldwide
Gold medal winner
Nominated for: best model, best education, best wiki and best project presentation video
![](https://static.igem.org/mediawiki/2021/2/2c/T--Groningen--TransparentAwardsGIF.gif)
![](https://static.igem.org/mediawiki/2021/e/e8/T--Groningen--LP_byemonia_title.png)
![](https://static.igem.org/mediawiki/2021/8/8f/T--Groningen--LP_logo.png)
Tackling a Dutch environmental and economical crisis by producing alpha-amylase in Saccharomyces spp.
The Netherlands suffers from a nitrogen crisis
The Netherlands emits too much nitrogen. The Dutch surplus of nitrogen emissions per hectare per year is four times the EU average[1].
![](https://static.igem.org/mediawiki/2021/a/a4/T--Groningen--LP_ammonia.png)
Ammonia (NH3)
Is one of the main nitrogen-containing compounds that is emitted in excess.
![](https://static.igem.org/mediawiki/2021/a/a4/T--Groningen--LP_ammonia.png)
70%[1] of nature areas in the Netherlands exceeded limits for nitrogen
Excess deposition of nitrogen can endanger nitrogen-sensitive nature areas. Excess ammonia deposition in nature leads to acidification and eutrophication and can cause certain plants to overgrow others. This causes a loss of biodiversity and harms the quality of natural habitats[2].
![](https://static.igem.org/mediawiki/2021/b/b4/T--Groningen--LP_biodiversity.png)
![](https://static.igem.org/mediawiki/2021/b/be/T--Groningen--LP_chart.png)
![](https://static.igem.org/mediawiki/2021/a/a2/T--Groningen--LP_chart2.png)
85,5% of Dutch ammonia emissions originate from agriculture
The Netherlands emitted 125.8 kilotons of ammonia, of which 107.5 kilotons originated from agriculture alone. Within agriculture 57.71% of the ammonia emissions originate from cattle (62.04 kilotons)[3].
Current measures against the nitrogen crisis aim to curb Dutch agriculture
Due to a strict system of rules and certifications surrounding maximal ammonia emissions, it is hard for farmers to expand their business. Moreover, there has been a political debate about halving the Dutch livestock. All of which have led to nation-wide farmers protests.
![](https://static.igem.org/mediawiki/2021/6/62/T--Groningen--LP_animals.png)
![](https://static.igem.org/mediawiki/2021/8/86/T--Groningen--LP_planet.png)
However, the Netherlands is the second absolute largest agricultural exporter in the world[4]
Curbing or even halving such a large industry thus has drastic consequences for the livelihood of the people working in this industry and for worldwide food security.
The Dutch nitrogen crisis is a complex problem where environmental, economical and food-production needs directly oppose each other
![](https://static.igem.org/mediawiki/2021/2/2d/T--Groningen--LP_goal2.png)
![](https://static.igem.org/mediawiki/2021/6/68/T--Groningen--LP_goal12.gif)
![](https://static.igem.org/mediawiki/2021/5/58/T--Groningen--LP_goal14.gif)
![](https://static.igem.org/mediawiki/2021/2/21/T--Groningen--LP_goal15.gif)
But what if we can bring those needs together in a novel solution?
Introducing:
![](https://static.igem.org/mediawiki/2021/e/ea/T--Groningen--LP_byemonia_horizontal.png)
Step 1: produce a feed additive using yeast
Using Saccharomyces spp. we will produce alpha-amylase: an enzyme that hydrolyzes glycosidic bonds in complex sugars.
![](https://static.igem.org/mediawiki/2021/2/22/T--Groningen--LP_yeast.png)
![](https://static.igem.org/mediawiki/2021/7/74/T--Groningen--LP_pill_new.png)
Once added to the feed, alpha-amylase optimizes the digestion of the feed by microbes in the rumen of the cow. The microbes will be able to take up more ATP, which enables them to take up more ammonia. Moreover the microbes will produce more volatile fatty acids. (Theoretically), this lowers ammonia emissions by cattle, while enhancing their growth and milk production.
![](https://static.igem.org/mediawiki/2021/0/0f/T--Groningen--LP_cows.png)
![](https://static.igem.org/mediawiki/2021/3/3f/T--Groningen--LP_ammonias.png)
iGEM Groningen 2021 combinatorial library
- 4 chasis
- 4 signal sequences
- 10 promoters
- 4 alpha-amylase genes
To optimize alpha-amylase production, we have designed a combinatorial library containing over 600 combinations to be able to find the best combination of chassis, promotor, signal sequence and gene for optimal alpha-amylase production.
Step 2: catch ammonia with a MOF
Ammonia that is still emitted, will be captured with a special filter device (a Metal Organic Framework: MOF) that will be placed in pigs and poultry barns. A MOF is a compound in which metal ions and organic molecules are arranged in an orderly fashion, creating tiny cavities that are able to adsorb ammonia in its gaseous state.
![](https://static.igem.org/mediawiki/2021/2/20/T--Groningen--LP_cage_new.png)
Step 3: close the cycle
Once the MOF is filled up, it will be transported back to the lab, where it can release the ammonia after being heated up.
![](https://static.igem.org/mediawiki/2021/c/cf/T--Groningen--LP_fire.png)
The GMO will then be able to use this ammonia as its nitrogen source to grow and produce more alpha-amylase, closing the cycle from GMO to barn, back to GMO.
![](https://static.igem.org/mediawiki/2021/3/36/T--Groningen--LP_yeast_nogears.png)
Turning ammonia into BYE-MONIA
The Dutch nitrogen crisis is a complex problem with several needs opposing each other. With BYE-MONIA we aim to provide a safe and circular solution -that can work alongside other current solutions- to target excess ammonia emissions at the source while still being beneficial to farmers.
![](https://static.igem.org/mediawiki/2021/4/42/T--Groningen--LP_bottom.png)
- European Commission, “Commission recommendations for The Netherlands’ CAP strategic plan Accompanying the document COMMUNICATION FROM THE COMMISSION TO THE EUROPEAN PARLIAMENT, THE COUNCIL, THE EUROPEAN ECONOMIC AND SOCIAL COMMITTEE AND THE COMMITTEE OF THE REGIONS Recommendations to the Member States as regards their strategic plan for the Common Agricultural Policy.”, Commission staff working document, 2020.
- European Environment Agency, “Ammonia (NH3) emissions — European Environment Agency,” 04-Sep-2015. [Online]. Available: https://www.eea.europa.eu/data-and-maps/indicators/eea-32-ammonia-nh3-emissions-1. [Accessed: 29-Aug-2021].
- “Absolute emissiereeks ammonia (in [kg]) naar Lucht 2019,” Emmissieregistratie, Aug-2021. [Online]. Available: http://www.emissieregistratie.nl/erpubliek/erpub/weergave/grafiek.aspx. [Accessed: 21-Aug-2021].
- M. Dolman, G. Jukema, and P. Ramaekers, “De Nederlandse landbouwexport 2018 in breder perspectief,” Wageningen Econ. Res., Jan. 2019, doi: 10.18174/468099.