Difference between revisions of "Team:Grenoble-Alpes"

 
(581 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
{{Grenoble-Alpes}}
+
{{Grenoble-Alpes/CSS}}
 +
{{Grenoble-Alpes/JS-CSS-Quote}}
 
{{Grenoble-Alpes/menu}}
 
{{Grenoble-Alpes/menu}}
 +
 
<html>
 
<html>
 +
<head>
 +
<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;
 +
            }
  
−
<div class="column full_size" >
+
.titlesnaplab {
−
<img src="https://static.igem.org/mediawiki/2017/7/7f/IGEM_Grenoble_2017_photo.jpeg">
+
                font-family: 'Poiret One' , cursive;
−
</div>
+
                text-align: center;
 +
                font-weight: 100;
 +
                font-size: 4vw;
 +
                color: #ecf0f1;
 +
                transform: translateY(-800%);
 +
          }
  
  
  
−
<div class="column full_size" >   
+
/* ****************** ENTETE ***************** */
−
<h1> Welcome to iGEM 2017! </h1>
+
−
<p>Your team has been approved and you are ready to start the iGEM season! </p>
+
−
</div>
+
  
−
<div class="clear"></div>
+
          header {
 +
                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;
 +
            }
  
−
<div class="column half_size" >   
+
@-webkit-keyframes begin {
−
<h5>Before you start: </h5>
+
    0% {opacity:0;}
−
<p> Please read the following pages:</p>
+
    100% {opacity:1;}
−
<ul>
+
}
−
<li>  <a href="https://2017.igem.org/Competition">Competition Hub</a> </li>
+
−
<li> <a href="https://2017.igem.org/Competition/Deliverables/Wiki">Wiki Requirements page</a></li>
+
−
<li> <a href="https://2017.igem.org/Resources/Template_Documentation">Template documentation</a></li>
+
−
</ul>
+
−
</div>
+
  
−
<div class="column half_size" >   
+
@-moz-keyframes begin {
−
<div class="highlight">
+
    0% {opacity:0;}
−
<h5> Styling your wiki </h5>
+
    100% {opacity:1;}
−
<p>You may style this page as you like or you can simply leave the style as it is. You can easily keep the styling and edit the content of these default wiki pages with your project information and completely fulfill the requirement to document your project.</p>
+
}
−
<p>While you may not win Best Wiki with this styling, your team is still eligible for all other awards. This default wiki meets the requirements, it improves navigability and ease of use for visitors, and you should not feel it is necessary to style beyond what has been provided.</p>
+
−
</div>
+
−
</div>
+
  
−
<div class="column full_size" >   
+
@keyframes begin {
−
<h5> Wiki template information </h5>
+
    0% {opacity:0;}
−
<p>We have created these wiki template pages to help you get started and to help you think about how your team will be evaluated. You can find a list of all the pages tied to awards here at the <a href="https://2017.igem.org/Judging/Pages_for_Awards">Pages for awards</a> link. You must edit these pages to be evaluated for medals and awards, but ultimately the design, layout, style and all other elements of your team wiki is up to you!</p>
+
    100% {opacity:1;}
 +
}
 +
/* ****************** ANIMATIONS ***************** */
 +
#logo-app:hover {
 +
    -webkit-animation: turn 0.1s linear infinite;
 +
    -moz-animation: turn 0.1s linear infinite;
 +
    animation: turn 0.1s linear infinite;
 +
}
  
−
</div>
+
#logo-app {
 +
    width: 50%;
 +
    }
  
  
 +
@-webkit-keyframes turn {
 +
    0% {transform:rotate(0deg);}
 +
    100% {transform:rotate(10deg);}
 +
}
  
 +
@-moz-keyframes turn {
 +
    0% {transform:rotate(0deg);}
 +
    100% {transform:rotate(10deg);}
 +
}
  
−
<div class="column half_size" >   
+
@keyframes turn {
−
<h5> Editing your wiki </h5>
+
    0% {transform:rotate(0deg);}
−
<p color="blue" >On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world! </p>
+
    100% {transform:rotate(10deg);}
−
<p> <a href="https://2017.igem.org/wiki/index.php?title=Team:Example&action=edit"> </a>Use WikiTools - Edit in the black menu bar to edit this page</p>
+
}
  
−
</div>
+
/* ****************** QUOTE ***************** */
 +
.myquote {
 +
  background-color:#3498db;
 +
}
 +
 
 +
/****************** TITLE **************/
 +
.couvlogogeo {
 +
              width: 2.5%;
 +
              padding: 1%  2% 1% 96%;
 +
        }
 +
 
 +
/* ****************** LOGO GEOLOCALISATION ***************** */
 +
.logogeo {
 +
  width:5%;
 +
}
 +
 
 +
 
 +
 
 +
</style>
 +
 
 +
</head>
 +
 
 +
<!-- ************************** CORPS DE LA PAGE ************************** -->
 +
 
 +
<body style="background-color:#364A5E;">
 +
 
 +
<header>
 +
<div class="titlehomepage">iGEM Grenoble-Alpes</div>
 +
<div class="titlesnaplab">SnapLab, our portable kit that will detect cholera</div>
 +
</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 class="column half_size" >  
+
<div style="background:url('https://static.igem.org/mediawiki/2017/f/f0/Grenobleteamhomepresentation2.jpeg') fixed no-repeat; background-size:100% auto;">
−
<h5>Tips</h5>
+
<div style="margin-right:50%; padding-top: 5%; margin-bottom: 5%;">
−
<p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p>
+
<div style="text-align: center; font-family:  'Open Sans', sans-serif; font-size:30px; color:white;"><center> We estimate
−
<ul>
+
<div style="margin:3%;"> <font face="Fredericka the Great" size="10vw"> 1,3 to 4 million</font></div>
−
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
cases of cholera worldwide.
−
<li>Be clear about what you are doing and how you plan to do this.</li>
+
</center></div>
−
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
+
</div>
−
<li>Make sure information is easy to find; nothing should be more than 3 clicks away. </li>
+
<center><img style="width:70%;" src="https://static.igem.org/mediawiki/2017/9/9a/Maptrans.png"></center>
−
<li>Avoid using very small fonts and low contrast colors; information should be easy to read. </li>
+
<div style="margin-left:50%; padding-top: 5%; padding-bottom: 5%;">
−
<li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="https://2017.igem.org/Calendar">iGEM 2017 calendar</a> </li>
+
<div style="text-align: center; font-family: 'Open Sans', sans-serif; font-size:30px; color:white;"><center> It causes
−
<li>Have lots of fun! </li>
+
<div style="margin:3%;"> <font face="Fredericka the Great" size="10vw">21000 to 143000 </font></div>
−
</ul>  
+
deaths in a year.
 +
</center></div>
 +
</div>
 
</div>
 
</div>
  
 +
<!--
  
−
<div class="column half_size" >   
+
<img style="margin-left:50%; style=width:100%;" src="https://static.igem.org/mediawiki/2017/2/23/Fond_bleu.png">  
−
<h5>Inspiration</h5>
+
<img style="width:100%" src="https://static.igem.org/mediawiki/2017/8/8c/Fondorange.png">
−
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
+
 
−
<ul>
+
-->
−
<li> <a href="https://2014.igem.org/Team:SDU-Denmark/"> 2014 SDU Denmark </a> </li>
+
 
−
<li> <a href="https://2014.igem.org/Team:Aalto-Helsinki">2014 Aalto-Helsinki</a> </li>
+
<!-- ************************** PROJECT ************************** -->
−
<li> <a href="https://2014.igem.org/Team:LMU-Munich">2014 LMU-Munich</a> </li>
+
<img style="width:100%" src="https://static.igem.org/mediawiki/2017/0/0f/Logosnaplab3.png">
−
<li> <a href="https://2014.igem.org/Team:Michigan"> 2014 Michigan</a></li>
+
 
−
<li> <a href="https://2014.igem.org/Team:ITESM-Guadalajara">2014 ITESM-Guadalajara </a></li>
+
 
−
<li> <a href="https://2014.igem.org/Team:SCU-China"> 2014 SCU-China </a></li>
+
<!-- ************************** QUOTE ************************** -->
−
</ul>
+
<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>
 
</div>
  
−
<div class="column half_size" >  
+
<!-- ************************** GPS BANNER ************************** -->
−
<h5> Uploading pictures and files </h5>
+
<div style="overflow: auto; width: 100%; padding: 1% 0%;">
−
<p> You can upload your pictures and files to the iGEM 2017 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name. <br />
+
 
−
When you upload, set the "Destination Filename" to <br><code>T--YourOfficialTeamName--NameOfFile.jpg</code>. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)<br><br>
+
<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>
  
−
<a href="https://2017.igem.org/Special:Upload">
 
−
UPLOAD FILES
 
−
</a>
 
−
</p>
 
 
</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>
  
 +
<!-- *********** JAVA POUR LES POPUPS ************-->
  
 +
        <script>
  
 +
            function Function_geo()
 +
            {
 +
            var popup = document.getElementById("Popup_geo");
 +
            popup.classList.toggle("show");
 +
            }
  
 +
        </script>
  
 +
     
 
</html>
 
</html>
 +
 +
{{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