|
|
| Line 1: |
Line 1: |
| − | <!DOCTYPE html>
| |
| − | <html lang="en">
| |
| − | <head>
| |
| − | <meta charset="UTF-8">
| |
| − | <meta http-equiv="X-UA-Compatible" content="IE=edge">
| |
| − | <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
| − | <title>Bioluminescence</title>
| |
| − | <link href="css/style.css" rel="stylesheet">
| |
| − | <script src="https://kit.fontawesome.com/2d601bed75.js" crossorigin="anonymous"></script>
| |
| − | </head>
| |
| | | | |
| − | <body>
| |
| − | <main>
| |
| − | <div class="lang_menu">
| |
| − | <button class="current_lang">EN <i class="fas fa-caret-down"></i>
| |
| − | </button>
| |
| − | <ul claa="other_lang">
| |
| − | <li><a href="#">ES</a></li>
| |
| − | <li><a href="#">HR</a></li>
| |
| − | <li><a href="#">NL</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | <h1>BIOLUMINESCENCE</h1>
| |
| − | <h2>IN SYNTHETIC BIOLOGY</h2>
| |
| − | <!--This code refers to the curve 1.-->
| |
| − | <div class="curve1_container">
| |
| − | <img class="curve1_block_a" src="images/T--Groningen--Education_SB1_curve1.png" alt="comic character Mark">
| |
| − | <div class="curve1_block_b">
| |
| − | <p class="text_right">Mark, or formally known<br>as <i>Vibrio harveyi</i>,<br>is a bioluminescent bacterium.</p>
| |
| − | <div class="text_in_circle_light_blue_block">
| |
| − | <div class="text_in_circle_light_blue">
| |
| − | <p><strong class="orange_strong">Bioluminescence</strong><br>is the ability of some<br>organisms to produce<br>visible light.</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <!--This code refers to the curve 2.-->
| |
| − | <div class="curve2_container">
| |
| − | <div>
| |
| − | <img src="images/T--Groningen--Education_SB1_curve2.png" alt="bioluminescent jellyfish">
| |
| − | </div>
| |
| − | <p>Other examples of<br><strong class="orange_strong">bioluminescent organisms</strong><br>include jellyfish, fireflies,<br> and Jack-O-Latern<br>mushrooms.</p>
| |
| − | </div>
| |
| − | <!--This code refers to the curve 3.-->
| |
| − | <div class="curve3_container">
| |
| − | <div class="curve3_block_a">
| |
| − | <div>
| |
| − | <img src="images/T--Groningen--Education_SB1_curve3_a.png" alt="shadow of a jellyfish">
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="curve3_block_b">
| |
| − | <h3>DID YOU<br>KNOW?</h3>
| |
| − | <p>Bioluminescence is used for various purposes,<br class="wide_screen_413"> such as attracting a significant other,<br class="wide_screen_413">luring prey, and camouflage.</p>
| |
| − | <div class="text_in_circle_red_block">
| |
| − | <div class="text_in_circle_red">
| |
| − | <p>Arguably<br>the most interesting use<br>is found in some squid species<br>wich can detach a glowing<br>body part when in the proximity<br>of a predator.<br>This allows them to run away<br>while the predator is tussling<br>with the illuminating<br>body part.</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <img class="curve3_block_c" src="images/T--Groningen--Education_SB1_curve3_c.png" alt="glowing body part">
| |
| − | </div>
| |
| − | <!--This code refers to the curve 4.-->
| |
| − | <div class="curve4_container">
| |
| − | <div>
| |
| − | <img src="images/T--Groningen--Education_SB1_curve4.png" alt="enzyme">
| |
| − | <p>All bioluminescent organisms<br>have enzymes called lufiferases.<br><strong class="light_blue_strong">These enzymes catalyze a production<br>of molecules that emit light.</strong></p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <!--This code refers to the curve 5.-->
| |
| − | <div class="curve5_container">
| |
| − | <div>
| |
| − | <img src="images/T--Groningen--Education_SB1_curve5.png" alt="part of DNA">
| |
| − | <p>Luciferases<br>are often used<br>in synthetic biology<br>to study parts of DNA called<br><strong class="light_blue_strong_big">PROMOTERS</strong></p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <!--This code refers to the curve 6.-->
| |
| − | <div class="curve6_container">
| |
| − | <div class="text_in_circle_orange_block">
| |
| − | <div class="text_in_circle_orange">
| |
| − | <p>Promoters<br>are important<br>because they determine<br>how much of a certain protein<br>is being produced<br>by the organism.<br><strong class="dark_blue_strong">The amount of a<br>protein produced<br>depends on the strenght<br>of a specific promoter.</strong></p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class=>
| |
| − | <div class="curve6_block">
| |
| − | <img src="images/T--Groningen--Education_SB1_curve6_strong_promoter.png" alt="strong promoter with many enzymes">
| |
| − | </div>
| |
| − | <div class="curve6_block">
| |
| − | <img src="images/T--Groningen--Education_SB1_curve6_weak_promoter.png" alt="weak promoter with few enzymes">
| |
| − | </div>
| |
| − | </div>
| |
| − | <p>Finding a better promoter allows<br>synthetic biologists to improve the production of<br class="wide_screen_433">commertially important proteins, such as insulin<br class="wide_screen_433">and proteins used in vaccines.</p>
| |
| − | </div>
| |
| − | <!--This code refers to the curve 7.-->
| |
| − | <div class="curve7_container">
| |
| − | <div class="curve7_block_a">
| |
| − | <p>The number of<br><strong class="light_blue_strong_big">LUCIFERASES</strong><br>produced by an organism can be easily calculated<br class="wide_screen_446">from the intensity of the emitted light.<br class="wide_screen_446">Therefore, synthetic biologists monitor<br class="wide_screen_446">the production of luciferases to<br class="wide_screen_446">determine the strenght of the promoter that is<br class="wide_screen_446">promoting its production.</p>
| |
| − | </div>
| |
| − | <div>
| |
| − | <div class="curve7_block_b">
| |
| − | <img src="images/T--Groningen--Education_SB1_curve7_strong_promoter.png" alt="more brightly shining comic character Mark">
| |
| − | <p>Mark with<br><strong class="orange_strong">a strong promoter</strong><br>for luciferases</p>
| |
| − |
| |
| − | </div>
| |
| − | <div class="curve7_block_b">
| |
| − | <img src="images/T--Groningen--Education_SB1_curve7_weak_promoter.png" alt="less brightly shining comic character Mark">
| |
| − | <p>Mark with<br><strong class="orange_strong">a weak promoter</strong><br>for luciferases</p>
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </main>
| |
| − | <footer>
| |
| − | <div class="social_med">
| |
| − | <p>Follow us on social media!</p>
| |
| − | <ul>
| |
| − | <li><a href="https://www.instagram.com/igem_groningen/"><i class="fab fa-instagram"></i></a></li>
| |
| − | <li><a href="https://twitter.com/2021groningen?lang=en"><i class="fab fa-twitter"></i></a></li>
| |
| − | <li><a href="https://www.linkedin.com/in/igem-groningen/"><i class="fab fa-linkedin"></i></a></li>
| |
| − | <li><a href="https://www.facebook.com/igemgroningen2021"><i class="fab fa-facebook"></i></a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </footer>
| |
| − | </body>
| |
| − | </html>
| |
