Difference between revisions of "Team:Groningen/education/science behind1"

Line 1: Line 1:
 
{{Groningen/SB_stripoff}}
 
{{Groningen/SB_stripoff}}
 +
<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>
 +
    <script src="https://kit.fontawesome.com/2d601bed75.js" crossorigin="anonymous"></script>
 +
    <style>
 +
        /*The following syntax hides defult iGEM things one the page.*/
 +
        #content {
 +
            width: 100%;
 +
            margin:0;
 +
            padding:0;
 +
        }
 +
       
 +
        #top_title {
 +
                display: none;
 +
        }
 +
 +
        body {
 +
            background-color: white;
 +
            width:100%;
 +
            position:absolute;
 +
        }
 +
 +
        main {
 +
            height: 5360px;
 +
            width:100%;
 +
            background: url('../images/T--Groningen--Education_SB1_background.png') center center no-repeat;
 +
            text-align: center;
 +
            position: relative;
 +
        }
 +
 +
        /*The following syntax describes language menu.*/
 +
 +
        .lang_menu {
 +
            position: absolute;
 +
            top: 40px;
 +
            left:5%;
 +
            width: 3.1em;
 +
        }
 +
 +
        .current_lang {
 +
            background: none;
 +
            padding:0;
 +
            border:0;
 +
            font-size: 1.2em;
 +
            color:white;
 +
            line-height: 30px;
 +
        }
 +
 +
        .lang_menu ul {
 +
            width: 100%;
 +
            padding:0;
 +
            margin:0;
 +
            border:0;
 +
            position: absolute;
 +
            display: none;
 +
            text-align: right;
 +
        }
 +
 +
        .lang_menu li {
 +
            list-style: none;
 +
        }
 +
 +
        .lang_menu a {
 +
            color: white;
 +
            opacity: 50%;
 +
            text-decoration: none;
 +
            line-height: 2em;
 +
            font-size: 1em;
 +
        }
 +
 +
        .lang_menu a:hover {
 +
            opacity:initial;
 +
            font-size: 1.2em;
 +
            font-weight: bold;
 +
        }
 +
 +
        .lang_menu:hover .current_lang {
 +
            font-weight: bold;
 +
        }
 +
 +
        .lang_menu:hover ul {
 +
            display: block;
 +
        }
 +
 +
        /*The following syntax describes heading styling.*/
 +
        h1, h2, h3 {
 +
            margin: 0;
 +
            margin-bottom: -15px;
 +
            padding: 0;
 +
        }
 +
 +
        h1 {
 +
            text-shadow: 0px 0px 20px #ffffff;
 +
            padding-top: 40px;
 +
            padding-left: 0.4em;
 +
            padding-right: 0.4em;
 +
        }
 +
 +
        h2{
 +
            font-weight: normal;
 +
            padding-top: 0.4em;
 +
        }
 +
 +
        h3, .light_blue_strong_big {
 +
            font-size: 2.4em;
 +
        }
 +
 +
        /*The following syntax describes styling of the text classes.*/
 +
        .text_right {
 +
            text-align: right;
 +
        }
 +
 +
        .orange_strong {
 +
            color: #EC6F29;
 +
        }
 +
 +
        .light_blue_strong, .light_blue_strong_big {
 +
            color: #54B6CD;
 +
        }
 +
 +
        .dark_blue_strong {
 +
            color: #25677F;
 +
        }
 +
 +
        /*The following syntax describes "Curve container" and "Curve block" classes. "Curve container" classes represent div elements that are positioned around the curves of the DNA helix in the background. "Curve blocks" represent children div elements of "Curve containers".*/
 +
        .curve1_container,.curve1_block_a,.curve1_block_b,.curve2_container,.curve3_container, .curve3_block_a,.curve3_block_b, .curve3_block_c,.curve4_container,.curve5_container,.curve6_container,.curve7_container {
 +
            position: absolute;
 +
        }
 +
 +
        .text_in_circle_red_block, .text_in_circle_orange_block {
 +
            position: absolute;
 +
            left: 50%;
 +
            transform: translate(-50%);
 +
        }
 +
 +
 +
        /*Curve 1 cointainer*/
 +
        .curve1_container {
 +
            top:214px;
 +
            height:10%;
 +
            width:90%;
 +
            margin-left: 5%;
 +
            margin-right: 5%;
 +
        }
 +
 +
        /*Curve 1 blocks*/
 +
        .curve1_block_a {
 +
            left:250px;
 +
            z-index:20;
 +
        }
 +
 +
        .curve1_block_b {
 +
            top: 1.5%;
 +
            left:0px;
 +
            z-index:10;
 +
        }
 +
 +
        /*Curve 2 container and its children elements*/
 +
        .curve2_container {
 +
            bottom: 3950px;
 +
            right: 5%;
 +
            margin-left: 5%;
 +
        }
 +
 +
        .curve2_container img {
 +
            width: 100%;
 +
            object-fit: contain;
 +
        }
 +
 +
        .curve2_container p {
 +
            width: fit-content;
 +
        }
 +
 +
        /*Curve 3 container*/
 +
        .curve3_container {
 +
            top:1715px;
 +
            height: 10%;
 +
            width: 90%;
 +
            margin-left: 5%;
 +
            margin-right: 5%;
 +
        }
 +
 +
        /*Curve 3 blocks and their children*/
 +
        .curve3_block_a {
 +
            top: 60px;
 +
            left: 250px;
 +
            z-index: 0;
 +
        }
 +
 +
        .curve3_block_b {
 +
            z-index:10;
 +
        }
 +
 +
        .curve3_block_c {
 +
            top: 500px;
 +
            left: 30px;
 +
            z-index:20;
 +
        }
 +
 +
        .curve3_block_a img {
 +
            width: 100%;
 +
            height: 253px;
 +
            object-fit: contain;
 +
        }
 +
 +
        .text_in_circle_red_block {
 +
            padding-top: 30px;
 +
        }
 +
 +
        /*Curve 4 container*/
 +
        .curve4_container {
 +
            top: 2600px;
 +
            height:10%;
 +
            width: 85%;
 +
            margin-right: 15%;
 +
            display: flex;
 +
            flex-direction: column;
 +
            align-items: flex-end;
 +
        }
 +
 +
        /*Cruve 5 container*/
 +
        .curve5_container {
 +
            top: 3163px;
 +
            height:10%;
 +
            width:95%;
 +
            margin-left: 5%;
 +
            display: flex;
 +
            flex-direction: column;
 +
            align-items: flex-start;
 +
        }
 +
 +
        /*Curve 6 container*/
 +
        .curve6_container {
 +
            top: 4127px;
 +
            right:5%;
 +
            height: 10%;
 +
            margin-left: 5%;
 +
        }
 +
 +
        /*Curve 6 block and its child*/
 +
        .curve6_block {
 +
            width:50%;
 +
            float: left;
 +
        }
 +
 +
        .text_in_circle_orange_block {
 +
            margin-top: -278px;
 +
            z-index: 10;
 +
        }
 +
 +
        .curve6_block img {
 +
            position: relative;
 +
            z-index: 20;
 +
            width: 100%;
 +
            height: 300px;
 +
            object-fit: contain;
 +
        }
 +
 +
        /*Curve 7 container*/
 +
        .curve7_container {
 +
            top: 4663px;
 +
        }
 +
 +
        /*Curve 7 block and its children*/
 +
        .curve7_block_a {
 +
            width: 90%;
 +
            margin-right: 5%;
 +
            margin-left: 5%;
 +
        }
 +
 +
 +
        .curve7_block_b {
 +
            width:50%;
 +
            float: left;
 +
        }
 +
 +
        .curve7_container img {
 +
            width: 100%;
 +
            height: 625px;
 +
            margin-top: -180px;
 +
            object-fit: contain;
 +
        }
 +
 +
        .curve7_block_b p {
 +
            margin-top: -180px;
 +
        }
 +
 +
        /*The following syntax describes "Text in circle" classes */
 +
        .text_in_circle_light_blue, .text_in_circle_red, .text_in_circle_orange {
 +
            width: 324px;
 +
            height: 324px;
 +
            display: table-cell; /*Contents of a table can be centered vertically*/
 +
            vertical-align: middle;
 +
            background: center center no-repeat;
 +
        }
 +
 +
        .text_in_circle_light_blue {
 +
            background-image: url(../images/T--Groningen--Education_SB1_text_in_circle_light_blue_background.png);
 +
        }
 +
 +
        .text_in_circle_red {
 +
            background-image: url(../images/T--Groningen--Education_SB1_text_in_circle_red_background.png.png);
 +
        }
 +
 +
        .text_in_circle_orange {
 +
            background-image: url(../images/T--Groningen--Education_SB1_text_in_circle_organge_background.png.png);
 +
        }
 +
 +
        .text_in_circle_light_blue p,.text_in_circle_red p, .text_in_circle_orange p {
 +
            width: 324px;
 +
        }
 +
 +
        /*The following syntax rearranges Curve 1 and Curve 4 when screen width is less than 616 px.*/
 +
        @media (max-width:615px) {
 +
            /*Language menu*/
 +
            .lang_menu {
 +
                display: none;
 +
            }
 +
 +
            /*Curve 1*/
 +
            .curve1_container {
 +
                width: 100%;
 +
                margin: 0;       
 +
            }
 +
           
 +
            .curve1_block_a {
 +
                top: 100px;
 +
                left: 50%;
 +
                transform: translate(-50%);
 +
                z-index:20;
 +
            }
 +
           
 +
            .curve1_block_b {
 +
                top: 0;
 +
                left: 50%;
 +
                width:100%;
 +
                transform: translate(-50%);       
 +
                z-index:10;
 +
            }
 +
 +
            .text_right {
 +
                text-align: center;
 +
            }
 +
 +
 +
            .text_in_circle_light_blue_block {
 +
                padding-top: 200px;
 +
                position: absolute;
 +
                left: 50%;
 +
                transform: translate(-50%);
 +
            }
 +
 +
            /*Curve 4 and Curve 5*/
 +
            .curve4_container, .curve5_container {
 +
                width: 100%;
 +
                margin: 0;
 +
                align-items: center;
 +
            }
 +
        }
 +
 +
        /*The following syntax describes footer.*/
 +
 +
        footer {
 +
            width:100%;
 +
            height: 100px;
 +
            background: black;
 +
        }
 +
 +
        .social_med {
 +
            width: 100%;
 +
        }
 +
 +
        footer p {
 +
            padding-top: 10px;
 +
            text-align: center;
 +
        }
 +
 +
        footer ul {
 +
            width: 320px;
 +
            padding:0px; 
 +
            margin: auto; 
 +
        }
 +
 +
        footer li {
 +
            width: 40px;
 +
            padding-left:20px;
 +
            padding-right: 20px;
 +
            float: left;
 +
            display: block;
 +
            font-size: 2em;
 +
            list-style: none;
 +
        }
 +
 +
        footer a {
 +
            color: white;
 +
            opacity: 50%;
 +
        }
 +
 +
        footer a:hover {
 +
            opacity: 100%;
 +
        }
 +
 +
        @media (max-width:446px) {
 +
            br.wide_screen_446 {
 +
                display: none;
 +
            }
 +
        }
 +
 +
        @media (max-width:433px) {
 +
            br.wide_screen_433 {
 +
                display: none;
 +
            }
 +
        }
 +
 +
        @media (max-width:413px) {
 +
            br.wide_screen_413 {
 +
                display: none;
 +
            }
 +
        }
 +
 +
        @media (max-width:365px) {
 +
            body {
 +
                width:fit-content;
 +
            }
 +
 +
        }
 +
    </style>
 +
</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>

Revision as of 11:59, 7 September 2021

Bioluminescence

BIOLUMINESCENCE

IN SYNTHETIC BIOLOGY

comic character Mark

Mark, or formally known
as Vibrio harveyi,
is a bioluminescent bacterium.

Bioluminescence
is the ability of some
organisms to produce
visible light.

bioluminescent jellyfish

Other examples of
bioluminescent organisms
include jellyfish, fireflies,
and Jack-O-Latern
mushrooms.

shadow of a jellyfish

DID YOU
KNOW?

Bioluminescence is used for various purposes,
such as attracting a significant other,
luring prey, and camouflage.

Arguably
the most interesting use
is found in some squid species
wich can detach a glowing
body part when in the proximity
of a predator.
This allows them to run away
while the predator is tussling
with the illuminating
body part.

glowing body part
enzyme

All bioluminescent organisms
have enzymes called lufiferases.
These enzymes catalyze a production
of molecules that emit light.

part of DNA

Luciferases
are often used
in synthetic biology
to study parts of DNA called
PROMOTERS

Promoters
are important
because they determine
how much of a certain protein
is being produced
by the organism.
The amount of a
protein produced
depends on the strenght
of a specific promoter.

strong promoter with many enzymes
weak promoter with few enzymes

Finding a better promoter allows
synthetic biologists to improve the production of
commertially important proteins, such as insulin
and proteins used in vaccines.

The number of
LUCIFERASES
produced by an organism can be easily calculated
from the intensity of the emitted light.
Therefore, synthetic biologists monitor
the production of luciferases to
determine the strenght of the promoter that is
promoting its production.

more brightly shining comic character Mark

Mark with
a strong promoter
for luciferases

less brightly shining comic character Mark

Mark with
a weak promoter
for luciferases