|
|
| (47 intermediate revisions by 4 users not shown) |
| Line 1: |
Line 1: |
| | {{UCLouvain}} | | {{UCLouvain}} |
| | + | {{UCLouvainHeader}} |
| | <html> | | <html> |
| − | <head>
| + | <section class="services"> |
| − | <title>iGEM UCLouvain Team</title> | + | <div class="container"> |
| − |
| + | <div class="col-md-7 col-sm-12 services-left wow fadeInUp"> |
| − | <style>
| + | <div class="row" style="margin-bottom:50px"> |
| − | .igem_2017_content_wrapper html,
| + | <div class="col-md-6 col-sm-12"> |
| − | .igem_2017_content_wrapper body,
| + | <div class="row"> |
| − | .igem_2017_content_wrapper div,
| + | <a href="https://2017.igem.org/Team:UCLouvain/OurProject/Overview" style="color:#60606e;"><i class="icon ion-arrow-graph-up-right"></i> |
| − | .igem_2017_content_wrapper span,
| + | <span class="montserrat-text uppercase service-title">Global issue</span> |
| − | .igem_2017_content_wrapper applet,
| + | <p style="padding-right: 30px;">Over the last years, our exposition to UV rays has <b>increased</b> and scientists noticed an <b>upward trend</b> in the risks of developing skin cancers.</p></a> |
| − | .igem_2017_content_wrapper object,
| + | </div> |
| − | .igem_2017_content_wrapper iframe,
| + | </div> |
| − | .igem_2017_content_wrapper h1,
| + | <div class="col-md-6 col-sm-12"> |
| − | .igem_2017_content_wrapper h2,
| + | <div class="row"> |
| − | .igem_2017_content_wrapper h3,
| + | <a href="" style="color:#60606e;"><i class="icon ion-ios-glasses"></i> |
| − | .igem_2017_content_wrapper h4,
| + | <span class="montserrat-text uppercase service-title">Protection exists</span> |
| − | .igem_2017_content_wrapper h5,
| + | <p style="padding-right: 30px;"> Although we can protect ourselves against this health hazard, <b> we cannot feel the UV rays </b> and when sunburns appear, it is already too late. </p></a> |
| − | .igem_2017_content_wrapper h6,
| + | </div> |
| − | .igem_2017_content_wrapper p,
| + | </div> |
| − | .igem_2017_content_wrapper blockquote,
| + | </div> |
| − | .igem_2017_content_wrapper pre,
| + | <div class="row"> |
| − | .igem_2017_content_wrapper a,
| + | <div class="col-md-6 col-sm-12"> |
| − | .igem_2017_content_wrapper abbr,
| + | <div class="row"> |
| − | .igem_2017_content_wrapper acronym,
| + | <a href="https://2017.igem.org/Team:UCLouvain/Badge" style="color:#60606e;"><i class="icon ion-android-watch"></i> |
| − | .igem_2017_content_wrapper address,
| + | <span class="montserrat-text uppercase service-title">Badge design</span> |
| − | .igem_2017_content_wrapper big,
| + | <p style="padding-right: 30px;"> Hence, <b>we have designed a wearable UV-sensitive badge</b> to help warning people on their level of exposure anytime and anywhere. The badge turns red when exposed to a certain level of sunlight. </p></a> |
| − | .igem_2017_content_wrapper cite,
| + | </div> |
| − | .igem_2017_content_wrapper code,
| + | </div> |
| − | .igem_2017_content_wrapper del,
| + | <div class="col-md-6 col-sm-12"> |
| − | .igem_2017_content_wrapper dfn,
| + | <div class="row"> |
| − | .igem_2017_content_wrapper em,
| + | <a href="https://2017.igem.org/Team:UCLouvain/OurProject/Overview" style="color:#60606e;"><i class="icon ion-erlenmeyer-flask"></i> |
| − | .igem_2017_content_wrapper img,
| + | <span class="montserrat-text uppercase service-title">Culture design</span> |
| − | .igem_2017_content_wrapper ins,
| + | <p style="padding-right: 30px;">This badge contains a <b>liquid cell culture</b>. The bacterial cells are engineered o produce a red fluorescent protein, which is only developed when. They only produce it when the badge is exposed to UV rays, thanks to a <b>photocaged amino acid</b>.</p></a> |
| − | .igem_2017_content_wrapper kbd,
| + | </div> |
| − | .igem_2017_content_wrapper q,
| + | </div> |
| − | .igem_2017_content_wrapper s,
| + | </div> |
| − | .igem_2017_content_wrapper samp,
| + | </div> |
| − | .igem_2017_content_wrapper small,
| + | |
| − | .igem_2017_content_wrapper strike,
| + | |
| − | .igem_2017_content_wrapper strong,
| + | |
| − | .igem_2017_content_wrapper sub,
| + | |
| − | .igem_2017_content_wrapper sup,
| + | |
| − | .igem_2017_content_wrapper tt,
| + | |
| − | .igem_2017_content_wrapper var,
| + | |
| − | .igem_2017_content_wrapper b,
| + | |
| − | .igem_2017_content_wrapper u,
| + | |
| − | .igem_2017_content_wrapper i,
| + | |
| − | .igem_2017_content_wrapper center,
| + | |
| − | .igem_2017_content_wrapper dl,
| + | |
| − | .igem_2017_content_wrapper dt,
| + | |
| − | .igem_2017_content_wrapper dd,
| + | |
| − | .igem_2017_content_wrapper ol,
| + | |
| − | .igem_2017_content_wrapper ul,
| + | |
| − | .igem_2017_content_wrapper li,
| + | |
| − | .igem_2017_content_wrapper fieldset,
| + | |
| − | .igem_2017_content_wrapper form,
| + | |
| − | .igem_2017_content_wrapper label,
| + | |
| − | .igem_2017_content_wrapper legend,
| + | |
| − | .igem_2017_content_wrapper table,
| + | |
| − | .igem_2017_content_wrapper caption,
| + | |
| − | .igem_2017_content_wrapper tbody,
| + | |
| − | .igem_2017_content_wrapper tfoot,
| + | |
| − | .igem_2017_content_wrapper thead,
| + | |
| − | .igem_2017_content_wrapper tr,
| + | |
| − | .igem_2017_content_wrapper th,
| + | |
| − | .igem_2017_content_wrapper td,
| + | |
| − | .igem_2017_content_wrapper article,
| + | |
| − | .igem_2017_content_wrapper aside,
| + | |
| − | .igem_2017_content_wrapper canvas,
| + | |
| − | .igem_2017_content_wrapper details,
| + | |
| − | .igem_2017_content_wrapper embed,
| + | |
| − | .igem_2017_content_wrapper figure,
| + | |
| − | .igem_2017_content_wrapper figcaption,
| + | |
| − | .igem_2017_content_wrapper footer,
| + | |
| − | .igem_2017_content_wrapper header,
| + | |
| − | .igem_2017_content_wrapper hgroup,
| + | |
| − | .igem_2017_content_wrapper menu,
| + | |
| − | .igem_2017_content_wrapper nav,
| + | |
| − | .igem_2017_content_wrapper output,
| + | |
| − | .igem_2017_content_wrapper ruby,
| + | |
| − | .igem_2017_content_wrapper section,
| + | |
| − | .igem_2017_content_wrapper summary,
| + | |
| − | .igem_2017_content_wrapper time,
| + | |
| − | .igem_2017_content_wrapper mark,
| + | |
| − | .igem_2017_content_wrapper audio,
| + | |
| − | .igem_2017_content_wrapper video {
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | border: 0;
| + | |
| − | font-size: 100%;
| + | |
| − | font: inherit;
| + | |
| − | vertical-align: baseline;
| + | |
| − | }
| + | |
| − | .igem_2017_content_wrapper article,
| + | |
| − | .igem_2017_content_wrapper aside,
| + | |
| − | .igem_2017_content_wrapper details,
| + | |
| − | .igem_2017_content_wrapper figcaption,
| + | |
| − | .igem_2017_content_wrapper figure,
| + | |
| − | .igem_2017_content_wrapper footer,
| + | |
| − | .igem_2017_content_wrapper header,
| + | |
| − | .igem_2017_content_wrapper hgroup,
| + | |
| − | .igem_2017_content_wrapper menu,
| + | |
| − | .igem_2017_content_wrapper nav,
| + | |
| − | .igem_2017_content_wrapper section {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | .igem_2017_content_wrapper body {
| + | |
| − | line-height: 1;
| + | |
| − | }
| + | |
| − | .igem_2017_content_wrapper ol,
| + | |
| − | .igem_2017_content_wrapper ul {
| + | |
| − | list-style: none;
| + | |
| − | }
| + | |
| − | .igem_2017_content_wrapper blockquote,
| + | |
| − | .igem_2017_content_wrapper q {
| + | |
| − | quotes: none;
| + | |
| − | }
| + | |
| − | .igem_2017_content_wrapper blockquote:before,
| + | |
| − | .igem_2017_content_wrapper blockquote:after,
| + | |
| − | .igem_2017_content_wrapper q:before,
| + | |
| − | .igem_2017_content_wrapper q:after {
| + | |
| − | content: ''; | + | |
| − | content: none;
| + | |
| − | } | + | |
| − | .igem_2017_content_wrapper table {
| + | |
| − | border-collapse: collapse;
| + | |
| − | border-spacing: 0;
| + | |
| − | }
| + | |
| | | | |
| − | /* | + | <div class="col-md-5 col-sm-12 services-right wow fadeInUp" data-wow-delay=".1s"> |
| − | Our styles | + | <div class="row"> |
| − | */ | + | <br> |
| | + | <br> |
| | + | <br> |
| | + | <br> |
| | + | <br> |
| | + | <br> |
| | + | <img src="https://static.igem.org/mediawiki/2017/a/a7/UCLOUVAIN_badge_exterieur.jpeg" alt="Our Badge"> |
| | + | <figcaption> <right> <font size = "2"><i><b> NB : bacteria free prototype</b></i></font></figcaption> |
| | + | </figure> |
| | + | </div> |
| | + | </div> |
| | | | |
| − | /* Import Roboto */
| + | </div> |
| − | @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
| + | </section> |
| − | | + | |
| − | .igem_2017_content_wrapper, .igem_2017_content_wrapper html, .igem_2017_content_wrapper body {
| + | |
| − | box-sizing: border-box !important;
| + | |
| − | font-family: 'Roboto' !important;
| + | |
| − | transition: all 0.2s ease-in !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper h1 {
| + | |
| − | display: none !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper h2, .igem_2017_content_wrapper h3 {
| + | |
| − | font-weight: normal !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper h2 {
| + | |
| − | font-size: 34px !important;
| + | |
| − | margin-bottom: 20px !important;
| + | |
| − | color: #222222 !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper h2.smallclear {
| + | |
| − | margin-bottom: 5px !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper h3 {
| + | |
| − | font-size: 28px !important;
| + | |
| − | margin-bottom: 20px !important;
| + | |
| − | color: #222222 !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper ul {
| + | |
| − | margin: 0 !important;
| + | |
| − | padding: 0 !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper p {
| + | |
| − | font-size: 18px !important;
| + | |
| − | line-height: 32px !important;
| + | |
| − | color: #222222 !important;
| + | |
| − | margin-bottom: 1em !important;
| + | |
| − | text-align: justify !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper img {
| + | |
| − | max-width: 100% !important;
| + | |
| − | height: auto !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper a {
| + | |
| − | text-decoration: none !important;
| + | |
| − | color: #000000 !important;
| + | |
| − | font-weight: normal !important;
| + | |
| − | font-size: 18px !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper a:hover {
| + | |
| − | color: #0f6fc6 !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper #header {
| + | |
| − | position: relative !important;
| + | |
| − | z-index: 999 !important;
| + | |
| − | padding: 0 20px 0 20px !important;
| + | |
| − | box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23) !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper #logo, .igem_2017_content_wrapper #logo a {
| + | |
| − | height: 150px !important;
| + | |
| − | line-height: 150px !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper #logo, .igem_2017_content_wrapper #logo a, .igem_2017_content_wrapper #nav, .igem_2017_content_wrapper #nav ul, .igem_2017_content_wrapper #nav ul li {
| + | |
| − | display: inline-block !important;
| + | |
| − | position: relative !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper #logo img {
| + | |
| − | height: 125px !important;
| + | |
| − | vertical-align: middle !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper {
| + | |
| − | width: 100% !important;
| + | |
| − | padding: 0 !important;
| + | |
| − | margin: 0 !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_menu_wrapper {
| + | |
| − | display: none !important; /* Hide this badass menu */
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper #nav {
| + | |
| − | font-size: 18px !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper #nav > ul > li {
| + | |
| − | margin-left: 100px !important;
| + | |
| − | height: 30px !important;
| + | |
| − | line-height: 30px !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper #nav ul li ul {
| + | |
| − | display: block !important;
| + | |
| − | opacity: 0 !important;
| + | |
| − | max-height: 0 !important;
| + | |
| − | overflow: hidden !important;
| + | |
| − | position: absolute !important;
| + | |
| − | top: 30px !important;
| + | |
| − | left: 0px !important;
| + | |
| − | width: 180px !important;
| + | |
| − | background-color: #FFFFFF !important;
| + | |
| − | border-left: 3px solid #0f6fc6 !important;
| + | |
| − | box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23) !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper #nav ul li:hover ul {
| + | |
| − | opacity: 1 !important;
| + | |
| − | max-height: 1000px !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper #nav ul li ul li {
| + | |
| − | display: block !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper #nav ul li ul li:hover {
| + | |
| − | background-color: #eee !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper #nav ul li ul li a {
| + | |
| − | padding-left: 15px !important;
| + | |
| − | line-height: 50px !important;
| + | |
| − | height: 50px !important;
| + | |
| − | width: 175px !important;
| + | |
| − | display: inline-block !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper #presentation img {
| + | |
| − | width: 100% !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper #page {
| + | |
| − | padding: 60px 90px 0 90px !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper #page:after {
| + | |
| − | content: "" !important;
| + | |
| − | display: table !important;
| + | |
| − | clear: both !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper #page .text, .igem_2017_content_wrapper #page .illustration {
| + | |
| − | width: 50% !important;
| + | |
| − | float: left !important;
| + | |
| − | vertical-align: top !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper #page .text {
| + | |
| − | padding-right: 30px !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper #page .illustration {
| + | |
| − | padding-left: 30px !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper #page .illustration img {
| + | |
| − | border: 15px solid #FFFFFF !important;
| + | |
| − | box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23) !important;
| + | |
| − | filter: opacity(90%) grayscale(30%) !important;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .igem_2017_content_wrapper #footer {
| + | |
| − | padding: 60px 90px 60px 90px !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper #footer ul {
| + | |
| − | text-align: center !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .igem_2017_content_wrapper #footer ul li {
| + | |
| − | display: inline-block !important;
| + | |
| − | min-width: 200px !important;
| + | |
| − | width: 12.5% !important;
| + | |
| − | padding: 20px !important;
| + | |
| − | vertical-align: middle !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | @media (max-width: 1000px) {
| + | |
| − | .igem_2017_content_wrapper #page .text, .igem_2017_content_wrapper #page .illustration {
| + | |
| − | width: 100% !important;
| + | |
| − | float: left !important;
| + | |
| − | padding: 0 !important;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | </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">
| + | |
| − | <h2 class="smallclear">UCLouvain team @ iGEM 2017</h2>
| + | |
| − | <h3>BactaSun: on the road for summer!</h3><!--
| + | |
| − | --><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>
| + | |
| − | | + | |
| − | <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>
| + | |
| − | | + | |
| − | <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>
| + | |
| − | | + | |
| − | <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>
| + | |
| − | | + | |
| − | <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>
| + | |
| − | </div><!--
| + | |
| − | --><div class="illustration">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/d/d9/UCLouvain_iGEM_Team_2017.jpeg" alt="IGem UCLouvain Team">
| + | |
| − | </div><!--
| + | |
| − | --></div>
| + | |
| − | </section>
| + | |
| − | <footer id="footer">
| + | |
| − | <h2>Our sponsors</h2>
| + | |
| − | <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> |
| | + | {{UCLouvainFooter}} |
