Difference between revisions of "Team:UCLouvain"

Line 1: Line 1:
−
{{UCLouvain}}
+
<!--
 +
    Hey!
 +
-->
 +
 
 +
<!DOCTYPE html>
 
<html>
 
<html>
−
<head>
+
    <head>
−
<style>
+
<title>iGEM UCLouvain Team</title>
−
@font-face {
+
−
font-family: 'aloha';
+
<style>
−
font-style: normal;
+
/*
−
font-weight: normal;
+
http://meyerweb.com/eric/tools/css/reset/
−
src: local('aloha'), url('https://static.igem.org/mediawiki/2017/3/32/Aloha.otf') format('truetype');
+
v2.0 | 20110126
−
}
+
License: none (public domain)
−
body {
+
*/
−
font-family: 'aloha', serif;
+
html, body, div, span, applet, object, iframe,
−
font-size: 12px;
+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
−
}
+
a, abbr, acronym, address, big, cite, code,
−
.igem_2017_menu_wrapper {
+
del, dfn, em, img, ins, kbd, q, s, samp,
−
display: none;
+
small, strike, strong, sub, sup, tt, var,
−
}
+
b, u, i, center,
−
.container {
+
dl, dt, dd, ol, ul, li,
−
overflow: hidden;
+
fieldset, form, label, legend,
−
background-color: #3B73B1;
+
table, caption, tbody, tfoot, thead, tr, th, td,
−
font-family: aloha;
+
article, aside, canvas, details, embed,
−
}
+
figure, figcaption, footer, header, hgroup,
 +
menu, nav, output, ruby, section, summary,
 +
time, mark, audio, video {
 +
margin: 0;
 +
padding: 0;
 +
border: 0;
 +
font-size: 100%;
 +
font: inherit;
 +
vertical-align: baseline;
 +
}
 +
/* HTML5 display-role reset for older browsers */
 +
article, aside, details, figcaption, figure,
 +
footer, header, hgroup, menu, nav, section {
 +
display: block;
 +
}
 +
body {
 +
line-height: 1;
 +
}
 +
ol, ul {
 +
list-style: none;
 +
}
 +
blockquote, q {
 +
quotes: none;
 +
}
 +
blockquote:before, blockquote:after,
 +
q:before, q:after {
 +
content: '';
 +
content: none;
 +
}
 +
table {
 +
border-collapse: collapse;
 +
border-spacing: 0;
 +
}
 +
 
 +
/*
 +
Our styles
 +
*/
 +
 
 +
/* Import Roboto */
 +
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
 +
 
 +
*, html, body {
 +
box-sizing: border-box;
 +
font-family: 'Roboto';
 +
transition: all 0.2s ease-in;
 +
}
 +
 
 +
h1 {
 +
font-size: 34px;
 +
margin-bottom: 20px;
 +
color: #222222;
 +
}
 +
 
 +
h1.smallclear {
 +
margin-bottom: 5px;
 +
}
 +
 
 +
h2 {
 +
font-size: 28px;
 +
margin-bottom: 20px;
 +
color: #222222;
 +
}
 +
 
 +
p {
 +
font-size: 18px;
 +
line-height: 32px;
 +
color: #222222;
 +
margin-bottom: 1em;
 +
text-align: justify;
 +
}
 +
 
 +
img {
 +
max-width: 100%;
 +
height: auto;
 +
}
 +
 
 +
a {
 +
text-decoration: none;
 +
color: #000000;
 +
}
 +
 
 +
a:hover {
 +
color: #0f6fc6;
 +
}
 +
 
 +
#header {
 +
position: relative;
 +
z-index: 999;
 +
padding: 0 20px 0 20px;
 +
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 +
}
 +
 
 +
#logo, #logo a {
 +
height: 150px;
 +
line-height: 150px;
 +
}
 +
 
 +
#logo, #logo a, #nav, #nav ul, #nav ul li {
 +
display: inline-block;
 +
position: relative;
 +
}
 +
 
 +
#logo img {
 +
height: 125px;
 +
vertical-align: middle;
 +
}
 +
 
 +
.igem_2017_menu_wrapper {
 +
display: none; /* Hide this badass menu */
 +
}
 +
 
 +
#nav {
 +
font-size: 18px;
 +
}
 +
 
 +
#nav > ul > li {
 +
margin-left: 100px;
 +
height: 30px;
 +
line-height: 30px;
 +
}
 +
 
 +
#nav ul li ul {
 +
display: block;
 +
opacity: 0;
 +
max-height: 0;
 +
overflow: hidden;
 +
position: absolute;
 +
top: 30px;
 +
left: 0px;
 +
width: 180px;
 +
background-color: #FFFFFF;
 +
border-left: 3px solid #0f6fc6;
 +
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 +
}
 +
 
 +
#nav ul li:hover ul {
 +
opacity: 1;
 +
max-height: 1000px;
 +
}
 +
 
 +
#nav ul li ul li {
 +
display: block;
 +
}
 +
 
 +
#nav ul li ul li:hover {
 +
background-color: #eee;
 +
}
 +
 
 +
#nav ul li ul li a {
 +
padding-left: 15px;
 +
line-height: 50px;
 +
height: 50px;
 +
width: 175px;
 +
display: inline-block;
 +
}
 +
 
 +
#presentation img {
 +
width: 100%;
 +
}
 +
 
 +
#page {
 +
padding: 60px 90px 0 90px;
 +
}
 +
 
 +
#page:after {
 +
content: "";
 +
display: table;
 +
clear: both;
 +
}
  
−
.container a {
+
#page .text, #page .illustration {
−
float: left;
+
width: 50%;
−
font-size: 18px;
+
float: left;
−
color: white;
+
vertical-align: top;
−
text-align: center;
+
}
−
padding: 14px 16px;
+
−
text-decoration: none;
+
−
}
+
  
−
.dropdown {
+
#page .text {
−
float: left;
+
padding-right: 30px;
−
overflow: hidden;
+
}
  
−
}
+
#page .illustration {
 +
padding-left: 30px;
 +
}
  
−
.dropdown .dropbtn {
+
#page .illustration img {
−
font-size: 18px;
+
border: 15px solid #FFFFFF;
−
border: none;
+
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
−
outline: none;
+
filter: opacity(90%) grayscale(30%);
−
color: white;
+
}
−
padding: 12px 16px;
+
−
background-color: inherit;
+
#footer {
−
font-family: aloha;
+
padding: 60px 90px 60px 90px;
−
}
+
}
  
−
.container a:hover, .dropdown:hover .dropbtn {
+
#footer ul {
−
background-color: #8fc4ff;
+
text-align: center;
−
color: black;
+
}
−
font-weight: bold;
+
  
−
}
+
#footer ul li {
 +
display: inline-block;
 +
min-width: 200px;
 +
width: 12.5%;
 +
padding: 20px;
 +
vertical-align: middle;
 +
}
  
−
.dropdown-content {
+
@media (max-width: 1000px) {
−
display: none;
+
#page .text, #page .illustration {
−
position: absolute;
+
width: 100%;
−
background-color: #8fc4ff;
+
float: left;
−
min-width: 160px;
+
padding: 0;
−
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
}
−
z-index: 1;
+
}
−
}
+
</style>
 +
    </head>
 +
    <body>
 +
        <header id="header">
 +
            <div id="logo">
 +
                <a href="/"><img src="https://static.igem.org/mediawiki/2017/3/3d/UCLouvain_igem_logo.png" alt="IGem UCLouvain Team"></a>
 +
            </div>
 +
            <nav id="nav">
 +
                <ul>
 +
                    <li>
 +
<a href="#">Our Project</a>
 +
<ul>
 +
<li><a href="#">Overview</a></li>
 +
<li><a href="#">Approach 1</a></li>
 +
<li><a href="#">Approach 2</a></li>
 +
</ul>
 +
</li>
 +
                    <li>
 +
<a href="#">In The Lab</a>
 +
<ul>
 +
<li><a href="#">Overview</a></li>
 +
<li><a href="#">Protocols</a></li>
 +
<li><a href="#">Parts</a></li>
 +
</ul>
 +
</li>
 +
                    <li><a href="#">Human Practices</a></li>
 +
                    <li>
 +
<a href="#">About us</a>
 +
<ul>
 +
<li><a href="#">Team</a></li>
 +
<li><a href="#">Aknowledgement</a></li>
 +
<li><a href="#">Our University</a></li>
 +
</ul>
 +
</li>
 +
                </ul>
 +
            </nav>
 +
        </header>
 +
        <section id="content">
 +
            <div id="presentation">
 +
                <img src="https://static.igem.org/mediawiki/2017/8/8b/HEADER-LLN_PLAGE.png" alt="IGem UCLouvain Team">
 +
            </div>
 +
            <div id="page">
 +
<h1 class="smallclear">UCLouvain team @ iGEM 2017</h1>
 +
<h2>BactaSun: on the road for summer!</h2><!--
 +
--><div class="text">
 +
<p>Nowadays, exposition to harmful UV rays has led to an ever growing number of skin cancer cases, among other sun-related diseases. While efficient sunscreens do exist, we do not always think it necessary or forget to reapply it as often as we should. With our project called BactaSun, we propose to design a biobadge which would detect excessive UV exposure and therefore warn us to seek sun protection should it become necessary.</p>
  
−
.dropdown-content a {
+
<p>This badge would work as a capsule holding an E. Coli strain, changing colors as the UV dose and intensity increases. The capsule would also work as a safe and reliable containment, destroying the engineered microorganisms once the biobadge is discarded.</p>
−
float: none;
+
−
color: black;
+
−
padding: 12px 16px;
+
−
text-decoration: none;
+
−
display: block;
+
−
text-align: left;
+
−
}
+
  
−
.dropdown-content a:hover {
+
<p>Starting with a tyrosine auxotroph E. coli, a gene coding for a colored protein which contains tyrosine will be constitutively expressed. Only photocaged tyrosine will be available in the media, and linked to a specific tRNA. The reporter protein will be synthetise but in the wrong conformation due to the cage presence. Once the bacterium is exposed to direct sunlight, the cage will be cleaved, inducing the good conformation of the protein and its coloration.</p>
−
background-color: #ddd;
+
−
}
+
  
−
.dropdown:hover .dropdown-content {
+
<p>Besides the biotechnological side of this project, the design of the badge capsule itself is going to represent a great challenge. We will need to find a specific plastic which lets the UV pass trough and design a way to kill the microorganisms once the badge has been used.</p>
−
display: block;
+
−
}
+
−
</style>
+
−
</head>
+
−
<body>
+
−
<a href="https://2017.igem.org/Team:UCLouvain"><img
+
−
src="https://static.igem.org/mediawiki/2017/0/0d/Logo_2017.png"
+
−
style="height: 150px; margin-top: 12.5px; float: left;"></a> <br>
+
−
<br>
+
−
<br>
+
−
<div class="container"> <a href="https://2017.igem.org/Team:UCLouvain">Home</a>
+
−
<div class="dropdown"> <button class="dropbtn">Our Project</button>
+
−
<div class="dropdown-content"> <a
+
−
href="https://2017.igem.org/Team:UCLouvain/OurProject/Overview">Overview</a>
+
−
<a href="https://2017.igem.org/Team:UCLouvain/OurProject/ApproachI">Approach
+
−
1</a> <a
+
−
href="https://2017.igem.org/Team:UCLouvain/OurProject/ApproachII">Approach
+
−
2</a> </div>
+
−
</div>
+
−
<div class="dropdown"> <button class="dropbtn">In The Lab</button>
+
−
<div class="dropdown-content"> <a
+
−
href="https://2017.igem.org/Team:UCLouvain/InTheLab/Overview">Overview</a>
+
−
<a href="https://2017.igem.org/Team:UCLouvain/InTheLab/Protocols">Prototcols</a>
+
−
<a href="https://2017.igem.org/Team:UCLouvain/InTheLab/Parts">Parts</a> </div>
+
−
</div>
+
−
<a href="https://2017.igem.org/Team:UCLouvain/HumanPractices">Human
+
−
Practices</a>
+
−
<div class="dropdown"> <button class="dropbtn">About Us</button>
+
−
<div class="dropdown-content"> <a
+
−
href="https://2017.igem.org/Team:UCLouvain/AboutUs/Team">Team</a> <a
+
−
href="https://2017.igem.org/Team:UCLouvain/AboutUs/Aknowledgement">Aknowledgement</a>
+
−
<a href="https://2017.igem.org/Team:UCLouvain/AboutUs/OurUniversity">Our
+
−
University</a> </div>
+
−
</div>
+
−
</div>
+
−
<div
+
−
style="margin: 0pt auto; width: 75%; min-width: 500px; display: block;"
+
−
center;="">
+
−
<br>
+
−
<br>
+
−
<h1>UCLouvain team @ iGEM 2017</h1>
+
−
<h2>BactaSun: on the road for summer!</h2>
+
−
<img
+
−
src="https://static.igem.org/mediawiki/2017/d/d9/UCLouvain_iGEM_Team_2017.jpeg"
+
−
style="max-width: 100%;">
+
−
<span style="text-align: justify;">
+
−
<p style="font-size: 14px; line-height: 24px; margin-bottom: 15px;">Nowadays,
+
−
exposition to harmful UV rays has led to an ever growing number of skin
+
−
cancer cases, among other sun-related diseases. While efficient
+
−
sunscreens do exist, we do not always think it necessary or forget to
+
−
reapply it as often as we should. With our project called BactaSun, we
+
−
propose to design a biobadge which would detect excessive UV exposure
+
−
and therefore warn us to seek sun protection should it become necessary.</p>
+
−
<p style="font-size: 14px; line-height: 24px; margin-bottom: 15px;">This
+
−
badge would work as a capsule holding an E. Coli strain, changing
+
−
colors as the UV dose and intensity increases. The capsule would also
+
−
work as a safe and reliable containment, destroying the engineered
+
−
microorganisms once the biobadge is discarded.</p>
+
−
<p style="font-size: 14px; line-height: 24px; margin-bottom: 15px;">Starting
+
−
with a tyrosine auxotroph E. coli, a gene coding for a colored protein
+
−
which contains tyrosine will be constitutively expressed. Only
+
−
photocaged tyrosine will be available in the media, and linked to a
+
−
specific tRNA. The reporter protein will be synthetise but in the wrong
+
−
conformation due to the cage presence. Once the bacterium is exposed to
+
−
direct sunlight, the cage will be cleaved, inducing the good
+
−
conformation of the protein and its coloration.</p>
+
−
<p style="font-size: 14px; line-height: 24px; margin-bottom: 15px;">Besides
+
−
the biotechnological side of this project, the design of the badge
+
−
capsule itself is going to represent a great challenge. We will need to
+
−
find a specific plastic which lets the UV pass trough and design a way
+
−
to kill the microorganisms once the badge has been used.</p>
+
−
<p style="font-size: 14px; line-height: 24px; margin-bottom: 15px;">Our
+
−
team has also started an effort to educate the public on
+
−
biotechnologies and synthetic biology. We are motivated to raise
+
−
interest among scientist and others around iGEM and project like ours.
+
−
The academic year 2016-2017 at UCL will unfold under the theme
+
−
"Scientific Adventures". Under these circumstances, we already have
+
−
been asked to lead panels and participate in debates and discussions.
+
−
We hope to associate the UCLouvain iGEM project with many more
+
−
initiative of this kind in the future.</p>
+
  
−
</span></div>
+
<p>Our team has also started an effort to educate the public on biotechnologies and synthetic biology. We are motivated to raise interest among scientist and others around iGEM and project like ours. The academic year 2016-2017 at UCL will unfold under the theme "Scientific Adventures". Under these circumstances, we already have been asked to lead panels and participate in debates and discussions. We hope to associate the UCLouvain iGEM project with many more initiative of this kind in the future.</p>
−
<img
+
</div><!--
−
src="https://static.igem.org/mediawiki/2017/a/a0/Footertest.png"
+
--><div class="illustration">
−
style="max-width: 100%;">
+
<img src="https://static.igem.org/mediawiki/2017/d/d9/UCLouvain_iGEM_Team_2017.jpeg" alt="IGem UCLouvain Team">
−
</body>
+
</div><!--
 +
--></div>
 +
</section>
 +
<footer id="footer">
 +
<h1>Our sponsors</h1>
 +
<ul><!--
 +
--><li><img src="https://static.igem.org/mediawiki/2017/8/88/Logo-Agilent_Technologies.png" alt="Agilent Technologies"></li><!--
 +
--><li><img src="https://static.igem.org/mediawiki/2017/5/5d/Logo-AGL.png" alt="AGL"></li><!--
 +
--><li><img src="https://static.igem.org/mediawiki/2017/3/39/Logo-Fondation_Louvain.png" alt="Fondation Louvain"></li><!--
 +
--><li><img src="https://static.igem.org/mediawiki/2017/a/a1/Logo-FWB.png" alt="Fédération Wallonie Bruxelles"></li><!--
 +
--><li><img src="https://static.igem.org/mediawiki/2017/c/cd/Logo-Imperial_College.png" alt="Imperial College"></li><!--
 +
--><li><img src="https://static.igem.org/mediawiki/2017/1/13/Logo-ISV.png" alt="ISV"></li><!--
 +
--><li><img src="https://static.igem.org/mediawiki/2017/8/87/Logo-UCL.jpg" alt="UCL"></li><!--
 +
--><li><img src="https://static.igem.org/mediawiki/2017/0/01/Logo-UCL_Sciences.jpg" alt="UCL faculté des Sciences"></li><!--
 +
--></ul>
 +
</footer>
 +
    </body>
 
</html>
 
</html>

Revision as of 09:19, 21 October 2017


<!DOCTYPE html> iGEM UCLouvain Team

IGem UCLouvain Team

UCLouvain team @ iGEM 2017

BactaSun: on the road for summer!

Nowadays, exposition to harmful UV rays has led to an ever growing number of skin cancer cases, among other sun-related diseases. While efficient sunscreens do exist, we do not always think it necessary or forget to reapply it as often as we should. With our project called BactaSun, we propose to design a biobadge which would detect excessive UV exposure and therefore warn us to seek sun protection should it become necessary.

This badge would work as a capsule holding an E. Coli strain, changing colors as the UV dose and intensity increases. The capsule would also work as a safe and reliable containment, destroying the engineered microorganisms once the biobadge is discarded.

Starting with a tyrosine auxotroph E. coli, a gene coding for a colored protein which contains tyrosine will be constitutively expressed. Only photocaged tyrosine will be available in the media, and linked to a specific tRNA. The reporter protein will be synthetise but in the wrong conformation due to the cage presence. Once the bacterium is exposed to direct sunlight, the cage will be cleaved, inducing the good conformation of the protein and its coloration.

Besides the biotechnological side of this project, the design of the badge capsule itself is going to represent a great challenge. We will need to find a specific plastic which lets the UV pass trough and design a way to kill the microorganisms once the badge has been used.

Our team has also started an effort to educate the public on biotechnologies and synthetic biology. We are motivated to raise interest among scientist and others around iGEM and project like ours. The academic year 2016-2017 at UCL will unfold under the theme "Scientific Adventures". Under these circumstances, we already have been asked to lead panels and participate in debates and discussions. We hope to associate the UCLouvain iGEM project with many more initiative of this kind in the future.

IGem UCLouvain Team

Our sponsors

  • Agilent Technologies
  • AGL
  • Fondation Louvain
  • Fédération Wallonie Bruxelles
  • Imperial College
  • ISV
  • UCL
  • UCL faculté des Sciences