Team:UNIK Copenhagen
From 2013.igem.org
SigneKarlsen (Talk | contribs) m |
SigneKarlsen (Talk | contribs) |
||
(198 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
+ | <html> | ||
+ | </body> | ||
+ | <head> | ||
+ | <link rel="image_src" href="https://static.igem.org/mediawiki/2013/c/c3/UNIK_Copenhagen_Facebook_Thumbnail.jpg" /> | ||
+ | </head> | ||
+ | </html> | ||
+ | |||
{{:Team:UNIK_Copenhagen/template}} | {{:Team:UNIK_Copenhagen/template}} | ||
<html> | <html> | ||
- | + | <head> | |
<style type="text/css"> | <style type="text/css"> | ||
+ | /*---------------------------------------------*/ | ||
+ | /* Fonts */ | ||
+ | /*---------------------------------------------*/ | ||
h3{ | h3{ | ||
- | font: bold | + | font: bold 28px Helvetica; |
color: white; | color: white; | ||
border: none; | border: none; | ||
Line 19: | Line 29: | ||
} | } | ||
h5{ | h5{ | ||
- | font: | + | font: 22px Helvetica; |
} | } | ||
+ | /*---------------------------------------------*/ | ||
+ | /* Set up of content */ | ||
+ | /*---------------------------------------------*/ | ||
.the_content{ | .the_content{ | ||
max-width: 960px; | max-width: 960px; | ||
- | + | margin: -10px 30px 60px 30px; | |
- | margin: | + | |
background-color: transparent; | background-color: transparent; | ||
} | } | ||
Line 37: | Line 49: | ||
z-index: 0; | z-index: 0; | ||
} | } | ||
- | + | /*---------------------------------------------*/ | |
+ | /* The image slider */ | ||
+ | /*---------------------------------------------*/ | ||
#container{ | #container{ | ||
position: relative; | position: relative; | ||
Line 81: | Line 95: | ||
text-align: right; | text-align: right; | ||
} | } | ||
- | #group_text{ | + | #group_text h3, #slide_video h3{ |
position: absolute; | position: absolute; | ||
- | bottom: | + | bottom: 5px; |
- | + | ||
left: inherit; | left: inherit; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
z-index: 1; | z-index: 1; | ||
+ | line-height: 60px; | ||
+ | } | ||
+ | #group_text h3 span, #slide_video h3 span{ | ||
+ | background: rgb(0, 0, 0); /* fallback color */ | ||
+ | background: rgba(0, 0, 0, 0.7); | ||
+ | padding: 10px 20px 10px 10px; | ||
+ | } | ||
+ | #slide_video{ | ||
+ | background: #E0E0E0; | ||
+ | width: 935px; | ||
+ | height: 330px; | ||
+ | float: left; | ||
+ | } | ||
+ | #slide_video{ | ||
+ | background: url("https://static.igem.org/mediawiki/2013/3/31/UNIK_Copenhagen_iGEM_the_wheel.png"); | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | #vid{ | ||
+ | margin: 15px; | ||
+ | float: right; | ||
+ | } | ||
+ | #vid iframe{ | ||
+ | z-index: 100; | ||
+ | } | ||
+ | #vid_text{ | ||
+ | margin: 30px 30px 30px 0px; | ||
+ | float: left; | ||
+ | } | ||
- | + | /*-----------------------------------------------------------*/ | |
- | + | /* Panel of 4 photos directing to further down the page */ | |
- | + | /*-----------------------------------------------------------*/ | |
- | + | #four_photos{ | |
- | + | height: 183px; | |
- | + | width: 935px; | |
- | + | margin: 15px auto; | |
- | + | } | |
- | + | #first_photo, #second_photo, #third_photo{ | |
- | + | float: left; | |
- | + | top: 0; | |
+ | height: 183px; | ||
+ | width: 218px; | ||
+ | padding: 0px; | ||
+ | margin: 0px 20px 0px 0px; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | #fourth_photo{ | ||
+ | top: 0; | ||
+ | float: left; | ||
+ | height: 183px; | ||
+ | width: 218px; | ||
+ | padding: 0px; | ||
+ | margin: 0px; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | #first_photo img:hover, #second_photo img:hover, #third_photo img:hover, #fourth_photo img:hover{ | ||
+ | margin-top: -183px; | ||
} | } | ||
+ | /*---------------------------------------------*/ | ||
+ | /* The go-to-top-of-page buttons */ | ||
+ | /*---------------------------------------------*/ | ||
+ | #line{ | ||
+ | border-bottom: 1px solid #999999; | ||
+ | width: 935px; | ||
+ | margin: 0px auto; | ||
+ | padding: 0px; | ||
+ | } | ||
#go_up{ | #go_up{ | ||
border-bottom: 1px solid #610606; | border-bottom: 1px solid #610606; | ||
- | width: | + | width: 765px; |
height: 16px; | height: 16px; | ||
- | margin: | + | margin: 0px 60px; |
- | + | padding: 0px; | |
+ | float: right; | ||
} | } | ||
#go_up img{ | #go_up img{ | ||
float:right; | float:right; | ||
- | margin | + | margin: 0px 15px 0px 0px; |
+ | padding: 0px; | ||
+ | } | ||
+ | /*---------------------------------------------*/ | ||
+ | /* CSS of Q/A part */ | ||
+ | /*---------------------------------------------*/ | ||
+ | .subject, .description{ | ||
+ | float: left; | ||
+ | } | ||
+ | .subject{ | ||
+ | width: 130px; | ||
+ | text-align: left; | ||
+ | margin: 0px 10px 0px 40px; | ||
+ | padding: 50px 0px; | ||
+ | } | ||
+ | .description{ | ||
+ | width: 564px; | ||
+ | margin: 0px 50px 0px 10px; | ||
+ | padding: 25px; | ||
} | } | ||
- | |||
</style> | </style> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
+ | var slidePos = 0; | ||
+ | var Width = 935; | ||
+ | var animationTime = 300; | ||
+ | var pauseTime = 5000; | ||
+ | var numPictures = 4; | ||
+ | var pauseSlider = false; | ||
+ | var youTubePlaying = false; | ||
+ | |||
$(document).ready(function(){ | $(document).ready(function(){ | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | function | + | function slide(targetSlide, par_function){ |
- | var | + | |
+ | var new_left = Width * targetSlide *-1; | ||
+ | |||
$('#subcontainer').animate({ | $('#subcontainer').animate({ | ||
- | left: '-='+slideDistance | + | left: new_left |
- | }, | + | //left: '-='+slideDistance |
+ | }, animationTime, 'linear', function(){ | ||
+ | if(par_function != undefined) par_function(); | ||
+ | }); | ||
} | } | ||
+ | |||
+ | var interval; | ||
+ | function set_interval(){ | ||
+ | interval = window.setInterval(function(){ | ||
+ | if(pauseSlider || youTubePlaying) | ||
+ | return; | ||
+ | slide(slidePos); | ||
+ | slidePos++; | ||
+ | if(slidePos == numPictures) | ||
+ | slidePos = 0; | ||
+ | }, pauseTime); | ||
+ | } | ||
+ | |||
+ | |||
+ | set_interval(); | ||
+ | |||
+ | $('#subcontainer').mouseover(function(){ | ||
+ | //window.clearInterval(interval); | ||
+ | pauseSlider = true; | ||
+ | }).mouseout(function(){ | ||
+ | pauseSlider = false; | ||
+ | //set_interval(); | ||
+ | }); | ||
+ | |||
+ | function nextSlide(){ | ||
+ | window.clearInterval(interval); | ||
+ | //var num_slide = slidePos+1; | ||
+ | slidePos++; | ||
+ | if(slidePos == numPictures) | ||
+ | slidePos = 0; | ||
+ | slide(slidePos, set_interval); | ||
+ | } | ||
+ | |||
+ | function prevSlide(){ | ||
+ | window.clearInterval(interval); | ||
+ | slidePos--; | ||
+ | if(slidePos == -1) | ||
+ | slidePos = numPictures-1; | ||
+ | slide(slidePos, set_interval); | ||
+ | } | ||
+ | |||
+ | $('#photo1').click(prevSlide); | ||
+ | $('#photo2').click(nextSlide); | ||
+ | |||
+ | |||
}); | }); | ||
</script> | </script> | ||
+ | </head> | ||
+ | |||
<body> | <body> | ||
Line 155: | Line 282: | ||
<div id="group_text"> | <div id="group_text"> | ||
<a href="https://2013.igem.org/Team:UNIK_Copenhagen/TheCphStrain"> | <a href="https://2013.igem.org/Team:UNIK_Copenhagen/TheCphStrain"> | ||
- | <h3>The Copenhagen Strain</ | + | <h3><span>The Copenhagen Strain</span><br> |
- | < | + | <span>Our own strain of magnetic bacteria from a lake in Copenhagen</span></h3></div></a> |
<img src="https://static.igem.org/mediawiki/2013/4/45/UNIK_Copenhagen_slide2.jpeg" width="935" id="photo"> | <img src="https://static.igem.org/mediawiki/2013/4/45/UNIK_Copenhagen_slide2.jpeg" width="935" id="photo"> | ||
Line 163: | Line 290: | ||
<div id="group_text"> | <div id="group_text"> | ||
<a href="https://2013.igem.org/Team:UNIK_Copenhagen/Team"> | <a href="https://2013.igem.org/Team:UNIK_Copenhagen/Team"> | ||
- | <h3>The 2013 iGEM Copenhagen Team</ | + | <h3><span>The 2013 iGEM Copenhagen Team</span><br> |
- | < | + | <span>Read more about the iGEM Copenhagen Team Members 2013</span></h3></div></a> |
<img src="https://static.igem.org/mediawiki/2013/2/25/UNIK_Copenhagen_slide1.jpeg" width="935" id="photo"> | <img src="https://static.igem.org/mediawiki/2013/2/25/UNIK_Copenhagen_slide1.jpeg" width="935" id="photo"> | ||
</li> | </li> | ||
Line 170: | Line 297: | ||
<div id="group_text"> | <div id="group_text"> | ||
<a href="https://2013.igem.org/Team:UNIK_Copenhagen/Project"> | <a href="https://2013.igem.org/Team:UNIK_Copenhagen/Project"> | ||
- | <h3>What are we doing in the lab?</ | + | <h3><span>What are we doing in the lab?</span><br> |
- | < | + | <span>Learn more about our project and our magnetotactic bacteria</span></h3></div></a> |
<img src="https://static.igem.org/mediawiki/2013/6/63/UNIK_Copenhagen_slide3.jpeg" width="935" id="photo"> | <img src="https://static.igem.org/mediawiki/2013/6/63/UNIK_Copenhagen_slide3.jpeg" width="935" id="photo"> | ||
+ | </li> | ||
+ | <li class="pictures"> | ||
+ | <div id="slide_video"> | ||
+ | <div id="vid_text"> | ||
+ | <h3><span>Watch our video</span><br> | ||
+ | <span>Learn about our project</span></h3></div> | ||
+ | <!-- <div id="vid"> | ||
+ | <iframe width="480" height="300" src="//www.youtube.com/embed/Y6xQG2dA0tA?feature=player_detailpage&wmode=opaque" frameborder="0" allowfullscreen></iframe> | ||
+ | </div> | ||
+ | --> | ||
+ | <div id="vid"></div> | ||
+ | <script> | ||
+ | // 2. This code loads the IFrame Player API code asynchronously. | ||
+ | var tag = document.createElement('script'); | ||
+ | |||
+ | tag.src = "https://www.youtube.com/iframe_api"; | ||
+ | var firstScriptTag = document.getElementsByTagName('script')[0]; | ||
+ | firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); | ||
+ | |||
+ | // 3. This function creates an <iframe> (and YouTube player) | ||
+ | // after the API code downloads. | ||
+ | var player; | ||
+ | function onYouTubeIframeAPIReady() { | ||
+ | player = new YT.Player('vid', { | ||
+ | height: '300', | ||
+ | width: '480', | ||
+ | videoId: 'Y6xQG2dA0tA', | ||
+ | playerVars: { | ||
+ | wmode: "opaque" | ||
+ | }, | ||
+ | events: { | ||
+ | 'onReady': onPlayerReady, | ||
+ | 'onStateChange': onPlayerStateChange | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | // 4. The API will call this function when the video player is ready. | ||
+ | function onPlayerReady(event) { | ||
+ | //event.target.playVideo(); | ||
+ | } | ||
+ | |||
+ | // 5. The API calls this function when the player's state changes. | ||
+ | // The function indicates that when playing a video (state=1), | ||
+ | // the player should play for six seconds and then stop. | ||
+ | function onPlayerStateChange(event) { | ||
+ | if (event.data == YT.PlayerState.PLAYING) { | ||
+ | youTubePlaying = true; | ||
+ | } else{ | ||
+ | youTubePlaying = false; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | </script> | ||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
</li> | </li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
- | |||
- | |||
- | |||
- | |||
</div> | </div> | ||
+ | <br> | ||
+ | <div id="line"></div> | ||
+ | <div id="four_photos"> | ||
+ | |||
+ | <div id="first_photo"> | ||
+ | <a href="https://2013.igem.org/Team:UNIK_Copenhagen#Who_are_we"> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/f/f9/UNIK_Copenhagen_Who_are_we_white.jpg"> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/0/08/UNIK_Copenhagen_who_are_we.jpg"> | ||
+ | </a></div> | ||
+ | |||
+ | <div id="second_photo"> | ||
+ | <a href="https://2013.igem.org/Team:UNIK_Copenhagen#What_do_we_do"> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/b/b5/UNIK_Copenhagen_What_do_we_do_white.jpg"> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/c/cd/UNIK_Copenhagen_what_do_we_do.jpg"> | ||
+ | </a></div> | ||
+ | |||
+ | <div id="third_photo"> | ||
+ | <a href="https://2013.igem.org/Team:UNIK_Copenhagen#What_is_syn_bio"> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/f/ff/UNIK_Copenhagen_What_is_syn_bio_white.jpg"> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/2/2e/UNIK_Copenhagen_what_is_syn_bio.jpg"> | ||
+ | </a></div> | ||
+ | |||
+ | <div id="fourth_photo"> | ||
+ | <a href="https://2013.igem.org/Team:UNIK_Copenhagen#What_is_iGEM"> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/3/34/UNIK_Copenhagen_What_is_iGEM_white.jpg"> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/5/50/UNIK_Copenhagen_what_is_iGEM.jpg"> | ||
+ | </a></div> | ||
+ | |||
</div> | </div> | ||
+ | <div id="line"></div> | ||
+ | |||
<div class="the_content"> | <div class="the_content"> | ||
- | <h5> | + | <div class="subject"> |
+ | <h5>WELCOME TO OUR WIKI PAGE</h5> | ||
+ | </div> | ||
+ | <div class="description"> | ||
<p>Have you ever wondered if there was a better way to <b>target cancer</b> cells?<br> | <p>Have you ever wondered if there was a better way to <b>target cancer</b> cells?<br> | ||
Find a <b>sustainable alternative</b> to batteries?<br> | Find a <b>sustainable alternative</b> to batteries?<br> | ||
Line 193: | Line 407: | ||
<br> | <br> | ||
You will find more information on our <a href="https://2013.igem.org/Team:UNIK_Copenhagen/Project">project page</a>.</p> | You will find more information on our <a href="https://2013.igem.org/Team:UNIK_Copenhagen/Project">project page</a>.</p> | ||
+ | </div> | ||
+ | |||
+ | <div id="go_up"> | ||
+ | <a href=#><img src="https://static.igem.org/mediawiki/2013/7/7d/UNIK_Copenhagen_go_up.jpg"></a> | ||
+ | </div> | ||
+ | |||
+ | <a name="Who_are_we" style="text-decoration: none"> | ||
+ | <div class="subject"> | ||
+ | <h5>WHO ARE WE?</h5> | ||
+ | </div></a> | ||
+ | <div class="description"> | ||
+ | <p> | ||
+ | The UNIK Copenhagen team’s home base is the University of Copenhagen, the biggest university in Denmark and one of the oldest of Northern Europe. UNIK is the university’s interdisciplinary center for synthetic biology which hosts and supervises our team. 2013 is the third year in a row an iGEM team from Copenhagen is competing for a medal at the European jamboree. This year our team consists of 11 curious undergraduate and graduate students coming from different areas inside the field of science. | ||
+ | </p> | ||
+ | </div> | ||
Line 199: | Line 428: | ||
</div> | </div> | ||
- | <h5> | + | <a name="What_do_we_do" style="text-decoration: none"> |
+ | <div class="subject"> | ||
+ | <h5>WHAT DO WE DO?</h5> | ||
+ | </div></a> | ||
+ | <div class="description"> | ||
<p><b>Magnetotaxic bacteria</b> is the core of the 2013 iGEM team representing the University of Copenhagen. In nature, these bacteria exert an extraordinary ability to coordinate themselves in relation to the earth’s magnetic field. This ability is mediated by organelle-like structures (magnetosomes) lining the inner surface of the cytoplasmic membrane. Significant amounts of Magnetite (Fe<sub>3</sub>O<sub>4</sub>) also accumulate here, thus making enrichment of these bacteria possible by using a simple magnet.<br><br>Clearly, such <b>magnificent abilities</b> raise ideas and opportunities for developing novel and progressive bacterial applications. Choosing from a range of somewhat diverse projects, we have decided to study the <b>formation of the magnetosomes</b>. Hereby, we hope to be able to suggest a strategy for new types of selections markers based on magnetism. This will hopefully stand as a convenient alternative to the general standard of working with antibiotic resistance for selections markers. During the project we hope to succeed in performing a series of <b>proof-of-concept experiments</b>, whilst also attaching the importance of public outreach. In this way, we hope to be able to display the fascinating world of applied bioscience to the general public.<br> | <p><b>Magnetotaxic bacteria</b> is the core of the 2013 iGEM team representing the University of Copenhagen. In nature, these bacteria exert an extraordinary ability to coordinate themselves in relation to the earth’s magnetic field. This ability is mediated by organelle-like structures (magnetosomes) lining the inner surface of the cytoplasmic membrane. Significant amounts of Magnetite (Fe<sub>3</sub>O<sub>4</sub>) also accumulate here, thus making enrichment of these bacteria possible by using a simple magnet.<br><br>Clearly, such <b>magnificent abilities</b> raise ideas and opportunities for developing novel and progressive bacterial applications. Choosing from a range of somewhat diverse projects, we have decided to study the <b>formation of the magnetosomes</b>. Hereby, we hope to be able to suggest a strategy for new types of selections markers based on magnetism. This will hopefully stand as a convenient alternative to the general standard of working with antibiotic resistance for selections markers. During the project we hope to succeed in performing a series of <b>proof-of-concept experiments</b>, whilst also attaching the importance of public outreach. In this way, we hope to be able to display the fascinating world of applied bioscience to the general public.<br> | ||
You will find more information on our <a href="https://2013.igem.org/Team:UNIK_Copenhagen/Project">project page</a>.</p> | You will find more information on our <a href="https://2013.igem.org/Team:UNIK_Copenhagen/Project">project page</a>.</p> | ||
- | + | </div> | |
<div id="go_up"> | <div id="go_up"> | ||
Line 208: | Line 441: | ||
</div> | </div> | ||
- | <h5> | + | <a name="What_is_syn_bio" style="text-decoration: none"> |
+ | <div class="subject"> | ||
+ | <h5> WHAT IS SYNTHETIC BIOLOGY? </h5> | ||
+ | </div></a> | ||
+ | <div class="description"> | ||
<p>In synthetic biology, biomedicine, chemistry, biophysics, nanosciences and genetic engineering combine together. The final aim is to <b>create</b> new biological systems or <b>re-design</b> existing systems to build new non existing functions. In order to achieve this, synthetic biology follows rational engineering processes based on highly characterized genetic parts, the so-called <b>BioBricks</b>. The resulting new devices display functions which lead the way to breakthrough innovations that both have positive effect on our everyday life and push further ahead the boundaries of our scientific knowledge about the complexity of life.</p> | <p>In synthetic biology, biomedicine, chemistry, biophysics, nanosciences and genetic engineering combine together. The final aim is to <b>create</b> new biological systems or <b>re-design</b> existing systems to build new non existing functions. In order to achieve this, synthetic biology follows rational engineering processes based on highly characterized genetic parts, the so-called <b>BioBricks</b>. The resulting new devices display functions which lead the way to breakthrough innovations that both have positive effect on our everyday life and push further ahead the boundaries of our scientific knowledge about the complexity of life.</p> | ||
+ | </div> | ||
<div id="go_up"> | <div id="go_up"> | ||
Line 215: | Line 453: | ||
</div> | </div> | ||
- | <h5> | + | <a name="What_is_iGEM" style="text-decoration: none"> |
+ | <div class="subject"> | ||
+ | <h5> WHAT IS iGEM? </h5> | ||
+ | </div></a> | ||
+ | <div class="description"> | ||
<p>The <b>International Genetically Engineered Machine</b> (iGEM) is an annual competition in synthetic biology organized by MIT. The competition is open to motivated undergraduate students who want to work in a team and develop a project of their own exclusive design. The teams are provided with a kit of biological parts from the <a href="http://parts.igem.org/Main_Page" target="_blank">Registry of Standard Biological Parts</a> to create new functional biological devices in living cells. In turn, new parts built by each team can be <a href="https://2013.igem.org/Team:UNIK_Copenhagen/Parts">submitted to the Registry</a>. The project is developed mainly over the summer break and will culminate with the presentation of team results at the <a href="https://2013.igem.org/Europe" target="_blank">Regional Jamboree</a>. A few lucky and talented teams will go onto the <a href="https://2013.igem.org/World_Championship_Jamboree" target="_blank">World Championship Jamboree</a>. This experience is extremely stimulating for the students that have the chance to improve their skills and knowledge working on different aspects of the project as well as making new friends.</p> | <p>The <b>International Genetically Engineered Machine</b> (iGEM) is an annual competition in synthetic biology organized by MIT. The competition is open to motivated undergraduate students who want to work in a team and develop a project of their own exclusive design. The teams are provided with a kit of biological parts from the <a href="http://parts.igem.org/Main_Page" target="_blank">Registry of Standard Biological Parts</a> to create new functional biological devices in living cells. In turn, new parts built by each team can be <a href="https://2013.igem.org/Team:UNIK_Copenhagen/Parts">submitted to the Registry</a>. The project is developed mainly over the summer break and will culminate with the presentation of team results at the <a href="https://2013.igem.org/Europe" target="_blank">Regional Jamboree</a>. A few lucky and talented teams will go onto the <a href="https://2013.igem.org/World_Championship_Jamboree" target="_blank">World Championship Jamboree</a>. This experience is extremely stimulating for the students that have the chance to improve their skills and knowledge working on different aspects of the project as well as making new friends.</p> | ||
+ | </div> | ||
<div id="go_up"> | <div id="go_up"> | ||
Line 222: | Line 465: | ||
</div> | </div> | ||
</div> | </div> | ||
+ | <br><br> | ||
</html> | </html> | ||
{{:Team:UNIK_Copenhagen/Sponsor_footer}} | {{:Team:UNIK_Copenhagen/Sponsor_footer}} | ||
<html> | <html> | ||
- | + | <br> | |
+ | <br> | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 18:45, 3 October 2013