NoreenLouis (Talk | contribs) |
|||
(132 intermediate revisions by 3 users not shown) | |||
Line 7: | Line 7: | ||
<style> | <style> | ||
− | header | + | header |
{ | { | ||
− | background | + | background:url('https://static.igem.org/mediawiki/2017/e/e2/Projectphotoigemgrenoble.jpeg') fixed; |
+ | background-size:100% 100%; | ||
-webkit-animation: begin 3s linear; | -webkit-animation: begin 3s linear; | ||
-moz-animation: begin 3s linear; | -moz-animation: begin 3s linear; | ||
− | |||
} | } | ||
Line 29: | Line 29: | ||
100% {opacity:1;} | 100% {opacity:1;} | ||
} | } | ||
− | + | /*********** TITLE ****************/ | |
+ | |||
+ | #couvlogogeo { | ||
+ | width:50%; | ||
+ | opacity:0.5; | ||
+ | transform:translate(3850%,-150%); | ||
+ | z-index:5; | ||
+ | } | ||
/*********** Popup container - can be anything you want ****************/ | /*********** Popup container - can be anything you want ****************/ | ||
Line 73: | Line 80: | ||
{ | { | ||
+ | } | ||
+ | |||
+ | #Popup_geo | ||
+ | { | ||
+ | position:absolute; | ||
+ | padding: 1% 1% 1% 1%; | ||
+ | top: -200%; | ||
+ | left: 1600%; | ||
+ | width: 300%; | ||
+ | z-index: 2; | ||
} | } | ||
Line 87: | Line 104: | ||
padding: 10% 10% 10% 10%; | padding: 10% 10% 10% 10%; | ||
position: relative; | position: relative; | ||
− | z-index: | + | z-index:1; |
} | } | ||
Line 102: | Line 119: | ||
border-style: solid; | border-style: solid; | ||
border-color: #555 transparent transparent transparent; | border-color: #555 transparent transparent transparent; | ||
− | z-index: | + | z-index:1; |
} | } | ||
Line 118: | Line 135: | ||
#numbr2 | #numbr2 | ||
{ | { | ||
− | transform:translate(150%,- | + | transform:translate(150%,-280%); |
width:100%; | width:100%; | ||
opacity:0.5; | opacity:0.5; | ||
Line 131: | Line 148: | ||
/*************** Diagram in the background ****************/ | /*************** Diagram in the background ****************/ | ||
− | . | + | .fond_1 |
+ | { | ||
+ | padding:20%; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2017/9/9b/Step_1_fond_blanc_.png"); | ||
+ | background-repeat:no-repeat; | ||
+ | background-position : center center; | ||
+ | position:relative; | ||
+ | background-size: 62% 100% ; | ||
+ | } | ||
+ | |||
+ | .fond_2 | ||
+ | { | ||
+ | padding:20%; | ||
+ | background-image: url("https://static.igem.org/mediawiki/2017/7/7c/Step_2_fond_blanc.png"); | ||
+ | background-repeat:no-repeat; | ||
+ | background-position : center center; | ||
+ | position:relative; | ||
+ | background-size: 62% 100% ; | ||
+ | } | ||
+ | |||
+ | .fond_3 | ||
{ | { | ||
padding:20%; | padding:20%; | ||
− | background-image: url("https://static.igem.org/mediawiki/2017/ | + | margin-bottom:2%; |
+ | background-image: url("https://static.igem.org/mediawiki/2017/2/24/Step_3_fond_blanc.png"); | ||
background-repeat:no-repeat; | background-repeat:no-repeat; | ||
background-position : center center; | background-position : center center; | ||
position:relative; | position:relative; | ||
− | background-size: | + | background-size: 62% 100% ; |
} | } | ||
Line 145: | Line 183: | ||
.fond_logo | .fond_logo | ||
{ | { | ||
− | background-color: | + | background-color:#F49C20; |
width:100%; | width:100%; | ||
text-align:center; | text-align:center; | ||
Line 169: | Line 207: | ||
} | } | ||
− | . | + | .bulle1_logo_lab |
{ | { | ||
position:absolute; | position:absolute; | ||
Line 177: | Line 215: | ||
top: 25%; | top: 25%; | ||
} | } | ||
+ | |||
+ | .bulle2_logo_lab | ||
+ | { | ||
+ | position:absolute; | ||
+ | width:4%; | ||
+ | z-index:3; | ||
+ | left: 48%; | ||
+ | top: 25%; | ||
+ | } | ||
+ | |||
+ | .bulle3_logo_lab | ||
+ | { | ||
+ | position:absolute; | ||
+ | width:3%; | ||
+ | z-index:3; | ||
+ | left: 48%; | ||
+ | top: 25%; | ||
+ | } | ||
+ | |||
.logo_eng | .logo_eng | ||
Line 270: | Line 327: | ||
/* ****************** ANIMATIONS ***************** */ | /* ****************** ANIMATIONS ***************** */ | ||
− | .fond_logo_lab:hover . | + | .fond_logo_lab:hover .bulle1_logo_lab { |
-webkit-animation: bulle 3s linear infinite; | -webkit-animation: bulle 3s linear infinite; | ||
-moz-animation: bulle 3s linear infinite; | -moz-animation: bulle 3s linear infinite; | ||
animation: bulle 3s linear infinite; | animation: bulle 3s linear infinite; | ||
+ | } | ||
+ | |||
+ | .fond_logo_lab:hover .bulle2_logo_lab { | ||
+ | -webkit-animation: bulle 2s linear infinite; | ||
+ | -moz-animation: bulle 2s linear infinite; | ||
+ | animation: bulle 2s linear infinite; | ||
+ | } | ||
+ | |||
+ | .fond_logo_lab:hover .bulle3_logo_lab { | ||
+ | -webkit-animation: bulle 1s linear infinite; | ||
+ | -moz-animation: bulle 1s linear infinite; | ||
+ | animation: bulle 1s linear infinite; | ||
} | } | ||
Line 342: | Line 411: | ||
@-webkit-keyframes bulle { | @-webkit-keyframes bulle { | ||
0% {transform:translate(0%,0%)} | 0% {transform:translate(0%,0%)} | ||
− | 20% {transform:translate(- | + | 20% {transform:translate(-7%,-100%)} |
40% {transform:translate(0%,-200%)} | 40% {transform:translate(0%,-200%)} | ||
− | 60% {transform:translate( | + | 60% {transform:translate(7%,-300%)} |
80% {transform:translate(0%,-400%)} | 80% {transform:translate(0%,-400%)} | ||
− | 100% {transform:translate(- | + | 100% {transform:translate(-7%,-500%)} |
} | } | ||
@-moz-keyframes bulle { | @-moz-keyframes bulle { | ||
0% {transform:translate(0%,0%)} | 0% {transform:translate(0%,0%)} | ||
− | 20% {transform:translate(- | + | 20% {transform:translate(-7%,-100%)} |
40% {transform:translate(0%,-200%)} | 40% {transform:translate(0%,-200%)} | ||
− | 60% {transform:translate( | + | 60% {transform:translate(7%,-300%)} |
80% {transform:translate(0%,-400%)} | 80% {transform:translate(0%,-400%)} | ||
− | 100% {transform:translate(- | + | 100% {transform:translate(-7%,-500%)} |
} | } | ||
@keyframes bulle { | @keyframes bulle { | ||
0% {transform:translate(0%,0%)} | 0% {transform:translate(0%,0%)} | ||
− | 20% {transform:translate(- | + | 20% {transform:translate(-7%,-100%)} |
40% {transform:translate(0%,-200%)} | 40% {transform:translate(0%,-200%)} | ||
− | 60% {transform:translate( | + | 60% {transform:translate(7%,-300%)} |
80% {transform:translate(0%,-400%)} | 80% {transform:translate(0%,-400%)} | ||
− | 100% {transform:translate(- | + | 100% {transform:translate(-7%,-500%)} |
} | } | ||
Line 399: | Line 468: | ||
<header> | <header> | ||
− | <h3> | + | <h3> Description </h3> |
+ | |||
</header> | </header> | ||
− | + | <div class="popup_geoloc" onclick="Function_geo()"><img class="couvlogogeo" src="https://static.igem.org/mediawiki/2017/c/c9/LogolocalisationiGEMGrenoble.png"> | |
+ | <span class="popuptext" id="Popup_geo"> The Aiguilles d’Arves are not only the apex the Maurienne valley, they are also its emblem. <br> Credits: Estelle Vincent | ||
+ | </span> | ||
+ | </div> | ||
+ | <div style="transform:translate(0,-1.09%);" > | ||
+ | <!-- ************************** DESCRIPTION ************************** --> | ||
+ | <h2 style="padding-top:2%; padding-bottom:2%; color:#F49C20; font-size:2.5vw;"> Project description </h2> | ||
− | + | <h5> <I>Vibrio Cholerae</I> is the bacteria responsible for cholera. The tricky thing is that there are only two serogroups of <I>Vibrio Cholerae</I> O1 and O139 that are responsible for epidemics of cholera while the others provoke diarrheas, abscess or septicemia. </h5> | |
+ | <h5> This is why we are going to design a pathogen sensitive detector: SnapLab, our portable kit that will detect cholera. After extracting DNA from the feces and performing the analysis, a nucleic acid sequence will be detected if the patient is infected with cholera. Once these sequences are introduced into the bacteria, fluorescence will be emitted and captured by the camera of a smartphone. The application that we will design will not only perform the analysis but it will also do the image processing. </h5> | ||
+ | <h5>The greatest advantage of this device will be its capability to communicate the results to its user and to map the cases of cholera. </h5> | ||
+ | <h5 style="padding-bottom:2%;">Going forward, this kind of device will be replicable for different pathogens, thus allowing to widen the spectrum of this kit’s use. </h5> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<!== **In div class="fond", add div for each number, with picture, and description you want in the span**==> | <!== **In div class="fond", add div for each number, with picture, and description you want in the span**==> | ||
− | <div class=" | + | <div class="fond_1"> |
− | + | <!-- ** <div class="popup" onclick="myFunction1()"><img id="numbr1" src="https://static.igem.org/mediawiki/2017/a/a9/B1.jpeg"> | |
<span class="popuptext" id="myPopup1">Here is a small description of the basic medium. Here is a small description of the basic medium. Here is a small description of the basic medium. | <span class="popuptext" id="myPopup1">Here is a small description of the basic medium. Here is a small description of the basic medium. Here is a small description of the basic medium. | ||
</span> | </span> | ||
Line 428: | Line 498: | ||
<span class="popuptext" id="myPopup2">Here is where the DNA sequence is exctracted...Here is where the DNA sequence is exctracted...Here is where the DNA sequence is exctracted... | <span class="popuptext" id="myPopup2">Here is where the DNA sequence is exctracted...Here is where the DNA sequence is exctracted...Here is where the DNA sequence is exctracted... | ||
</span> | </span> | ||
− | </div> | + | </div> **--> |
</div> | </div> | ||
− | + | <div class="fond_2"> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | <div class="fond_3"> | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
− | |||
+ | </div> | ||
− | + | <h5 style="padding-bottom:4%;">Now the project has been briefly explained, you can have further information on the realisation of our project by clicking on any of the three circles or you can directly go to the <a style="text-decoration:none; color:#F49C20;" href="https://2017.igem.org/Team:Grenoble-Alpes/Demonstrate">results</a>.</h5> | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | <!-- ************************** LOGO BANNER ************************** --> | ||
<div class="fond_logo"> | <div class="fond_logo"> | ||
− | <p style="color: | + | <p style="color:#F49C20;">test</p> |
<div class="fond_logo_lab"> | <div class="fond_logo_lab"> | ||
− | <a href="https://2017.igem.org/Team:Grenoble-Alpes/ | + | <a href="https://2017.igem.org/Team:Grenoble-Alpes/LabBook"> |
− | <img class ="logo_lab" src="https://static.igem.org/mediawiki/2017/ | + | <img class="logo_lab" src="https://static.igem.org/mediawiki/2017/0/06/Lab_2.png"> |
− | <img class =" | + | <img class ="bulle1_logo_lab" src="https://static.igem.org/mediawiki/2017/c/ce/Bulle.png"> |
+ | <img class ="bulle2_logo_lab" src="https://static.igem.org/mediawiki/2017/c/ce/Bulle.png"> | ||
+ | <img class ="bulle3_logo_lab" src="https://static.igem.org/mediawiki/2017/c/ce/Bulle.png"> | ||
</a> | </a> | ||
</div> | </div> | ||
Line 516: | Line 543: | ||
<div class="fond_logo_app"> | <div class="fond_logo_app"> | ||
− | <a href="https://2017.igem.org/Team:Grenoble-Alpes/ | + | <a href="https://2017.igem.org/Team:Grenoble-Alpes/Software"> |
<img class="logo_app" src="https://static.igem.org/mediawiki/2017/7/7b/Fond_app.png"> | <img class="logo_app" src="https://static.igem.org/mediawiki/2017/7/7b/Fond_app.png"> | ||
<img class="tel_logo_app" src="https://static.igem.org/mediawiki/2017/f/f8/Tel.png"> | <img class="tel_logo_app" src="https://static.igem.org/mediawiki/2017/f/f8/Tel.png"> | ||
Line 522: | Line 549: | ||
</div> | </div> | ||
− | <p style="color: | + | <p style="color:#F49C20;">test</p> |
</div> | </div> | ||
+ | |||
+ | </body> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<script> // ********* Javascript to use popup - 1 function for each popup ********* | <script> // ********* Javascript to use popup - 1 function for each popup ********* | ||
Line 655: | Line 620: | ||
} | } | ||
+ | } | ||
+ | |||
+ | function Function_geo() | ||
+ | { | ||
+ | var popup = document.getElementById("Popup_geo"); | ||
+ | popup.classList.toggle("show"); | ||
} | } | ||
Latest revision as of 16:57, 30 October 2017
Description
The Aiguilles d’Arves are not only the apex the Maurienne valley, they are also its emblem.
Credits: Estelle Vincent
Credits: Estelle Vincent
Project description
Vibrio Cholerae is the bacteria responsible for cholera. The tricky thing is that there are only two serogroups of Vibrio Cholerae O1 and O139 that are responsible for epidemics of cholera while the others provoke diarrheas, abscess or septicemia.
This is why we are going to design a pathogen sensitive detector: SnapLab, our portable kit that will detect cholera. After extracting DNA from the feces and performing the analysis, a nucleic acid sequence will be detected if the patient is infected with cholera. Once these sequences are introduced into the bacteria, fluorescence will be emitted and captured by the camera of a smartphone. The application that we will design will not only perform the analysis but it will also do the image processing.
The greatest advantage of this device will be its capability to communicate the results to its user and to map the cases of cholera.
Going forward, this kind of device will be replicable for different pathogens, thus allowing to widen the spectrum of this kit’s use.
Now the project has been briefly explained, you can have further information on the realisation of our project by clicking on any of the three circles or you can directly go to the results.