|
|
| Line 1: |
Line 1: |
| − | {{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 {
| |
| − | 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>
| |
