Difference between revisions of "Team:Grenoble-Alpes"

 
(184 intermediate revisions by 5 users not shown)
Line 14: Line 14:
 
                 font-size: 8vw;
 
                 font-size: 8vw;
 
                 color: #ecf0f1;
 
                 color: #ecf0f1;
−
                 padding-top:25%;
+
                 padding-top:22.5%;
−
                 padding-bottom:25%;
+
                 padding-bottom:22.5%;
 
                 -webkit-animation: begin 4s linear;
 
                 -webkit-animation: begin 4s linear;
 
                 -moz-animation: begin 4s linear;
 
                 -moz-animation: begin 4s linear;
Line 31: Line 31:
 
           }
 
           }
  
−
.couvlogogeo {
 
−
              width: 2.5%;
 
−
              padding: 1%  2% 1% 96%;
 
−
              transform: translateY(-90%);
 
−
        }
 
−
 
−
/* ****************** POPUPTITLE  ************** */
 
−
.popup {
 
−
  display: none;
 
−
  height:100%;
 
−
  top:0;
 
−
  left:0;
 
−
  }
 
−
 
−
.popup-content {
 
−
  padding-top: 1%;
 
−
  padding-bottom: 1%;
 
−
  margin: 40% 20% 40% 5%;
 
−
  /*background-color: black;*/
 
−
  opacity: 1;
 
−
  }
 
−
 
−
.popup:target {
 
−
  display: block;
 
−
  position: absolute;
 
−
  width: 100%;
 
−
  z-index: 999;
 
−
  -webkit-animation: fadeIn 1s;
 
−
  animation: fadeIn 1s;
 
−
  }
 
−
 
−
.popup-cadre {
 
−
  border: 1px solid #bdc3c7;
 
−
  margin: 2%;
 
−
  padding: 3% 3% 3% 3%;
 
−
  opacity: 1;
 
−
  }
 
−
 
−
.popup-cadre p {
 
−
  color: #ecf0f1;
 
−
  }
 
  
  
Line 77: Line 36:
  
 
           header {
 
           header {
−
                 background:url('https://static.igem.org/mediawiki/2017/e/e5/Homephotoigemgrenoble.jpeg') fixed;
+
                 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 126: 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 ***************** */
Line 133: Line 99:
 
   width:5%;
 
   width:5%;
 
}
 
}
 +
 +
  
 
</style>
 
</style>
Line 143: Line 111:
  
 
<header>  
 
<header>  
−
<div class="titlehomepage">iGEM Grenoble</div>
+
<div class="titlehomepage">iGEM Grenoble-Alpes</div>
 
<div class="titlesnaplab">SnapLab, our portable kit that will detect cholera</div>
 
<div class="titlesnaplab">SnapLab, our portable kit that will detect cholera</div>
 
</header>
 
</header>
−
<a href="#geosituation"> <img class="couvlogogeo" src="https://static.igem.org/mediawiki/2017/c/c9/LogolocalisationiGEMGrenoble.png"> </a>
 
  
  
−
<div class="popup" id="geosituation">
 
−
    <div class="popup-content">
 
−
     
 
−
      <div class="close">
 
−
          <a href="#">&times;</a>
 
−
      </div>
 
  
−
      <div class="popup-cadre"> <p> Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum, quae per multas difficilisque causas adfore iam sperabatur,
+
<!-- ************************** CHOLERA EXPLANATIONS ************************** -->
−
      </p></div>
+
−
    </div>
+
−
  </div>
+
  
 +
<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>
  
−
<!-- ************************** DESCRIPTION PROJET ************************** -->
+
<div style="background:url('https://static.igem.org/mediawiki/2017/f/f0/Grenobleteamhomepresentation2.jpeg') fixed no-repeat; background-size:100% auto;">
 +
<div style="margin-right:50%; padding-top: 5%; margin-bottom: 5%;">
 +
<div style="text-align: center; font-family:  'Open Sans', sans-serif; font-size:30px; color:white;"><center> We estimate
 +
<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 style="top:100%; background-color:#FFF;">
+
<!--
−
+
−
<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>
+
  
 +
<img style="margin-left:50%; style=width:100%;" src="https://static.igem.org/mediawiki/2017/2/23/Fond_bleu.png">
 +
<img style="width:100%" src="https://static.igem.org/mediawiki/2017/8/8c/Fondorange.png">
  
−
<!-- ************************** MOJO ************************** -->
+
-->
  
 +
<!-- ************************** PROJECT ************************** -->
 +
<img style="width:100%" src="https://static.igem.org/mediawiki/2017/0/0f/Logosnaplab3.png">
 +
 +
 +
<!-- ************************** QUOTE ************************** -->
 
<div class="myquote">
 
<div class="myquote">
−
   <a class="typewrite" 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."]'>
+
   <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>
 
     <span class="wrap"></span>
 
   </a>
 
   </a>
 
</div>
 
</div>
 
</div>
 
</div>
−
 
−
<!-- ************************** APP BANNER ************************** -->
 
−
 
−
<div style=" padding: 1% 0%; overflow: auto;">
 
−
  <h5 style="color:#000; width: 75%; float: right; position: relative;">
 
−
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 style="width:20%; position: absolute;">
 
−
    <center><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></center>
 
−
  </div>
 
−
</div>
 
−
 
−
<!-- ************************** PHOTO BANNER ************************** -->
 
−
 
  
 
<!-- ************************** GPS BANNER ************************** -->
 
<!-- ************************** GPS BANNER ************************** -->
−
<div style="background-color:#D58490; overflow: auto; width: 100%; padding: 1% 0%;">
+
<div style="overflow: auto; width: 100%; padding: 1% 0%;">
  
 
<center><img class="logogeo" src="https://static.igem.org/mediawiki/2017/c/c9/LogolocalisationiGEMGrenoble.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