Difference between revisions of "Team:Grenoble-Alpes"

 
(327 intermediate revisions by 5 users not shown)
Line 6: Line 6:
 
<head>
 
<head>
 
<style>
 
<style>
 +
/* ****************** TITLE HOME PAGE ***************** */
 +
 +
.titlehomepage {      /* titre pour haut de page */
 +
                font-family: 'Poiret One' , cursive;
 +
                text-align: center;
 +
                font-weight: 100;
 +
                font-size: 8vw;
 +
                color: #ecf0f1;
 +
                padding-top:22.5%;
 +
                padding-bottom:22.5%;
 +
                -webkit-animation: begin 4s linear;
 +
                -moz-animation: begin 4s linear;
 +
                animation: begin 4s linear;
 +
                text-transform: uppercase;
 +
            }
 +
 +
.titlesnaplab {
 +
                font-family: 'Poiret One' , cursive;
 +
                text-align: center;
 +
                font-weight: 100;
 +
                font-size: 4vw;
 +
                color: #ecf0f1;
 +
                transform: translateY(-800%);
 +
          }
 +
 +
  
 
/* ****************** ENTETE ***************** */
 
/* ****************** ENTETE ***************** */
  
 
           header {
 
           header {
                 background-image:url('https://static.igem.org/mediawiki/2017/e/e5/Homephotoigemgrenoble.jpeg');
+
                 background:url('https://static.igem.org/mediawiki/2017/5/5a/GrenobleAlpesHOME.png') 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 39: Line 65:
  
 
#logo-app {
 
#logo-app {
  width: 50%;
+
    width: 50%;
  margin-left: 23%;
+
    }
  
}
 
  
 
@-webkit-keyframes turn {
 
@-webkit-keyframes turn {
Line 60: Line 85:
  
 
/* ****************** QUOTE ***************** */
 
/* ****************** QUOTE ***************** */
/* Add color and background-color if necessary*/
+
.myquote {
 +
  background-color:#3498db;
 +
}
  
 +
/****************** TITLE **************/
 +
.couvlogogeo {
 +
              width: 2.5%;
 +
              padding: 1%  2% 1% 96%;
 +
        }
  
 
/* ****************** LOGO GEOLOCALISATION ***************** */
 
/* ****************** LOGO GEOLOCALISATION ***************** */
 
.logogeo {
 
.logogeo {
   width:8%;
+
   width:5%;
 
}
 
}
 +
 +
  
 
</style>
 
</style>
Line 74: Line 108:
 
<!-- ************************** CORPS DE LA PAGE ************************** -->
 
<!-- ************************** CORPS DE LA PAGE ************************** -->
  
<body>
+
<body style="background-color:#364A5E;">
  
 
<header>  
 
<header>  
<h3>iGEM Grenoble</h3>
+
<div class="titlehomepage">iGEM Grenoble-Alpes</div>
 +
<div class="titlesnaplab">SnapLab, our portable kit that will detect cholera</div>
 
</header>
 
</header>
  
<!-- ************************** DESCRIPTION PROJET ************************** -->
 
  
<div style="background-color:#FFF;top:100%;">
 
 
<h2 style="color:#56739A;">About SnapLab </h2>
 
<h5>Health inequalities are still striking the poorest of us, causing many deaths. Poor sanitary conditions allow epidemics such as cholera to spread quite easily through infected fluids. By observing the current situation in Yemen, where a child is infected with cholera every 35 seconds, this infection is definitely an urgent matter to which too little attention is paid. </h5>
 
<h5>Different kinds of medical diagnosis exist but their specificity is far from being optimum. In fact, 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. </h5>
 
<h5>This is why we are going to design a pathogen sensitive detector, allowing an easier and more specific diagnostic : SnapLab, our portable kit that will detect cholera. </h5>
 
<h5>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. Plus, the temperature will continuously be monitored within the kit and this exact same test will be possible with water to differentiate infected water from non infected water. </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. That way, we will be able to know which area is the most affected by the epidemic. </h5>
 
<h5>Going forward, this kind of device will be replicable for different pathogens, thus allowing to widen the spectrum of this kit’s use. </h5>
 
  
 +
<!-- ************************** CHOLERA EXPLANATIONS ************************** -->
  
<!-- ************************** MOJO ************************** -->
+
<h5 style="color:#000; padding-top: 4%; margin-bottom: 4%; ">
 +
By observing the current situation in Yemen, where a child is infected with <font face="Fredericka the Great" size="5vw">cholera</font> every 35 seconds, this infection is definitely an <font face="Fredericka the Great" size="5vw">urgent matter</font> to which too little attention is paid. <br> <I><font face="Fredericka the Great" size="5vw">Vibrio Cholerae</font></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. <br>
 +
This is why we are going to design a pathogen sensitive detector: <font face="Fredericka the Great" size="5vw">SnapLab,</font> our portable kit that will detect cholera. 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.
 +
</h5>
  
<div class="myquote">
+
<div style="background:url('https://static.igem.org/mediawiki/2017/f/f0/Grenobleteamhomepresentation2.jpeg') fixed no-repeat; background-size:100% auto;">
  <a class="typewrite" data-period="2000" data-type='[ "Together, let&apos;s use tomorrow&apos;s groundbreaking techniques to solve today&apos;s challenges."]'>
+
<div style="margin-right:50%; padding-top: 5%; margin-bottom: 5%;">
    <span class="wrap"></span>
+
<div style="text-align: center; font-family:  'Open Sans', sans-serif; font-size:30px; color:white;"><center> We estimate
  </a>
+
<div style="margin:3%;"> <font face="Fredericka the Great" size="10vw"> 1,3 to 4 million</font></div>
 +
cases of cholera worldwide.
 +
</center></div>
 +
</div>
 +
<center><img style="width:70%;" src="https://static.igem.org/mediawiki/2017/9/9a/Maptrans.png"></center>
 +
<div style="margin-left:50%; padding-top: 5%; padding-bottom: 5%;">
 +
<div style="text-align: center; font-family:  'Open Sans', sans-serif; font-size:30px; color:white;"><center> It causes
 +
<div style="margin:3%;"> <font face="Fredericka the Great" size="10vw">21000 to 143000 </font></div>
 +
deaths in a year.
 +
</center></div>
 
</div>
 
</div>
 
</div>
 
</div>
  
<!-- ************************** APP BANNER ************************** -->
+
<!--
  
<div>
+
<img style="margin-left:50%; style=width:100%;" src="https://static.igem.org/mediawiki/2017/2/23/Fond_bleu.png">  
<h5 style="display:inline-block; position:relative; float:left; z-index:1000;margin-left:0;margin-right:0;"> <a href="https://2017.igem.org/Team:Grenoble-Alpes/App"> <img id="logo-app" src="https://static.igem.org/mediawiki/2017/4/46/Logo-application.png"> </a>
+
<img style="width:100%" src="https://static.igem.org/mediawiki/2017/8/8c/Fondorange.png">
</h5>
+
<h5 style="color:#000; position:relative;margin-left:0;margin-right:0;">
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
+
</h5>
+
</div>
+
  
<!-- ************************** PHOTO BANNER ************************** -->
+
-->
  
 +
<!-- ************************** PROJECT ************************** -->
 +
<img style="width:100%" src="https://static.igem.org/mediawiki/2017/0/0f/Logosnaplab3.png">
 +
 +
 +
<!-- ************************** QUOTE ************************** -->
 +
<div class="myquote">
 +
  <a class="typewrite" style="text-decoration:none;" data-period="2000" data-type='[ "Ensemble, utilisons les techniques de demain pour r&eacute;soudre les probl&egrave;mes d&apos;aujourd&apos;hui.","Together, let&apos;s use tomorrow&apos;s groundbreaking techniques to solve today&apos;s challenges."]'>
 +
    <span class="wrap"></span>
 +
  </a>
 +
</div>
 +
</div>
  
 
<!-- ************************** GPS BANNER ************************** -->
 
<!-- ************************** GPS BANNER ************************** -->
<div style="background-color:#D58490; width: 100%; overflow:auto;">
+
<div style="overflow: auto; width: 100%; padding: 1% 0%;">
  
<center><img class="logogeo" src="https://static.igem.org/mediawiki/2017/a/a0/LogogeolocalisationiGEMGrenoble.png"></center>
+
<center><img class="logogeo" src="https://static.igem.org/mediawiki/2017/c/c9/LogolocalisationiGEMGrenoble.png"></center>
  
<h2 style="text-align: center;"> Our geolocalisation concept </h2>
+
<h2 style="text-align: center; color:#3498db;"> Our geolocalisation concept </h2>
  
 
<h5 style="color:#000;">
 
<h5 style="color:#000;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
+
Making you discover Grenoble and its surrounding areas is something we have at heart.
 +
Through our website, you will have the chance to sense the magnificent landscapes Grenoble region has to offer.  
 +
Some of these photos were taken after several hours of hiking in the Alps and others were hidden in the depths of Grenoble’s streets. Indeed, each photo has its secret, and you are very welcome to look it up by clicking on this logo at the right-bottom corner of the photographs.  
 
</h5>
 
</h5>
  
 
</div>
 
</div>
  
<!-- ************************** SITE MAP ************************** -->
+
<!-- ************************** VIDEO ************************** -->
 +
<h2 style="text-align: center; color:#3498db; padding-top:5%;"> Coming soon, our finale presentation... </h2>
 +
<div style="text-align:center; padding-bottom:2.5%; padding-top:1%;">
 +
<video src="https://static.igem.org/mediawiki/2017/e/e4/GrenobleAlpesteaserpresentation.mp4" poster="https://static.igem.org/mediawiki/2017/e/e5/Homephotoigemgrenoble.jpeg" controls width=50%>
 +
            Your browner cannot show this video.
 +
            </video>
 +
</div>
  
 +
<!-- ************************** SITE MAP ************************** -->
 +
<img style="width:100%;" src="https://static.igem.org/mediawiki/2017/b/be/Fichier_13.png">
 +
</div>
 
</body>
 
</body>
  
 +
<!-- *********** JAVA POUR LES POPUPS ************-->
 +
 +
        <script>
 +
 +
            function Function_geo()
 +
            {
 +
            var popup = document.getElementById("Popup_geo");
 +
            popup.classList.toggle("show");
 +
            }
 +
 +
        </script>
 +
 +
     
 
</html>
 
</html>
  
 
{{Grenoble-Alpes/footer}}
 
{{Grenoble-Alpes/footer}}

Latest revision as of 09:35, 16 December 2017

iGEM Grenoble-Alpes
SnapLab, our portable kit that will detect cholera
By observing the current situation in Yemen, where a child is infected with cholera every 35 seconds, this infection is definitely an urgent matter to which too little attention is paid.
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. 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.
We estimate
1,3 to 4 million
cases of cholera worldwide.
It causes
21000 to 143000
deaths in a year.

Our geolocalisation concept

Making you discover Grenoble and its surrounding areas is something we have at heart. Through our website, you will have the chance to sense the magnificent landscapes Grenoble region has to offer. Some of these photos were taken after several hours of hiking in the Alps and others were hidden in the depths of Grenoble’s streets. Indeed, each photo has its secret, and you are very welcome to look it up by clicking on this logo at the right-bottom corner of the photographs.

Coming soon, our finale presentation...

Designed by iGEM Grenoble-Alpes 2017 team | Site Map