(437 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 | + | background:url('https://static.igem.org/mediawiki/2017/5/5a/GrenobleAlpesHOME.png') fixed; |
+ | background-size:100% 100%; | ||
+ | -webkit-animation: begin 3s linear; | ||
+ | -moz-animation: begin 3s linear; | ||
+ | animation: begin 3s linear; | ||
} | } | ||
+ | @-webkit-keyframes begin { | ||
+ | 0% {opacity:0;} | ||
+ | 100% {opacity:1;} | ||
+ | } | ||
+ | |||
+ | @-moz-keyframes begin { | ||
+ | 0% {opacity:0;} | ||
+ | 100% {opacity:1;} | ||
+ | } | ||
+ | |||
+ | @keyframes begin { | ||
+ | 0% {opacity:0;} | ||
+ | 100% {opacity:1;} | ||
+ | } | ||
/* ****************** ANIMATIONS ***************** */ | /* ****************** ANIMATIONS ***************** */ | ||
#logo-app:hover { | #logo-app:hover { | ||
Line 21: | Line 65: | ||
#logo-app { | #logo-app { | ||
− | + | width: 50%; | |
− | + | } | |
− | |||
@-webkit-keyframes turn { | @-webkit-keyframes turn { | ||
Line 40: | Line 83: | ||
100% {transform:rotate(10deg);} | 100% {transform:rotate(10deg);} | ||
} | } | ||
+ | |||
+ | /* ****************** QUOTE ***************** */ | ||
+ | .myquote { | ||
+ | background-color:#3498db; | ||
+ | } | ||
+ | |||
+ | /****************** TITLE **************/ | ||
+ | .couvlogogeo { | ||
+ | width: 2.5%; | ||
+ | padding: 1% 2% 1% 96%; | ||
+ | } | ||
+ | |||
+ | /* ****************** LOGO GEOLOCALISATION ***************** */ | ||
+ | .logogeo { | ||
+ | width:5%; | ||
+ | } | ||
+ | |||
+ | |||
</style> | </style> | ||
+ | |||
</head> | </head> | ||
<!-- ************************** CORPS DE LA PAGE ************************** --> | <!-- ************************** CORPS DE LA PAGE ************************** --> | ||
− | <body> | + | <body style="background-color:#364A5E;"> |
<header> | <header> | ||
− | < | + | <div class="titlehomepage">iGEM Grenoble-Alpes</div> |
+ | <div class="titlesnaplab">SnapLab, our portable kit that will detect cholera</div> | ||
</header> | </header> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | <!-- ************************** CHOLERA EXPLANATIONS ************************** --> | ||
− | < | + | <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 | + | <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> | ||
− | <!-- | + | <!-- |
+ | <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"> | ||
− | + | --> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | <!-- ************************** 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ésoudre les problèmes d'aujourd'hui.","Together, let's use tomorrow's groundbreaking techniques to solve today's challenges."]'> | ||
+ | <span class="wrap"></span> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
<!-- ************************** GPS BANNER ************************** --> | <!-- ************************** GPS BANNER ************************** --> | ||
+ | <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> |
− | < | + | <h2 style="text-align: center; color:#3498db;"> Our geolocalisation concept </h2> |
− | + | ||
− | </ | + | <h5 style="color:#000;"> |
+ | 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> | ||
</div> | </div> | ||
+ | <!-- ************************** 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.
1,3 to 4 million
cases of cholera worldwide.
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...