Difference between revisions of "Template:IONIS Paris-test"

Line 22: Line 22:
 
<div class="topbar animated fadeInLeftBig"></div>
 
<div class="topbar animated fadeInLeftBig"></div>
  
−
<!-- Header Starts -->
+
<!-- Banner -->
  
 
<div class="banner row" id="banner">
 
<div class="banner row" id="banner">
−
<div class="parallax text-center" style="background-image: url(https://static.igem.org/mediawiki/2015/3/34/Wii.jpg);">
+
<div class="parallax text-center" style="background-image: url(https://static.igem.org/mediawiki/2015/2/2f/TEST.jpg);">
−
<div class="parallax-pattern-overlay">
+
<div class="parallax-pattern-overlay" style="background: rgb(200,200,200,0.6);background-size: cover; color:#fff; ">
−
<div class="container text-center" style="height:580px;padding-top:200px;">
+
<div class="container text-center" style="height:580px;padding-top:20px;">
−
<h1 class="intro wow zoomIn" wow-data-delay="0.4s" wow-data-duration="0.9s"   style="font-family:sans-serif; color:#B00000 " >Our project</h1>
+
<h2 class="intro wow zoomIn" wow-data-delay="0.4s" wow-data-duration="0.9s" style="padding-top:75px;">IONIS Paris iGEM</h2>
 +
<a href="#"><img id="site-title" class=" wow fadeInDown" wow-data-delay="0.0s" wow-data-duration="0.9s" src="https://static.igem.org/mediawiki/2015/8/83/Logo_IONIS.png" alt="logo"/></a>
 
 
 
</div>
 
</div>
Line 36: Line 37:
  
  
 +
<!--img src="https://static.igem.org/mediawiki/2015/0/07/Fond_IONIS.jpg" alt="banner"-->
 +
 
  
−
<!-- https://static.igem.org/mediawiki/2015/thumb/2/24/Couverture_pour_r%C3%A9seaux_sociaux.png/800px-Couverture_pour_r%C3%A9seaux_sociaux.png -->
+
<!-- Introduction -->
−
  <!--img src="https://static.igem.org/mediawiki/2015/3/34/Image-169-vert.jpg" alt="banner"-->
+
−
 
+
−
+
−
<!-- INTRODUCTION -->
+
−
+
 
<div id="about"  class="container spacer about">
 
<div id="about"  class="container spacer about">
−
<h2 class="text-center wowload fadeInUp" style="color:#ff0000">Popularization of Synthetic Biology</h2>
+
<h2 class="text-center wowload fadeInUp" style="color:#ff0000"> <big>Popularization of Synthetic Biology</big></h2>
−
<h3 class="text-center wowload fadeInUp">By 2 different approaches</h3>   
+
<h3 class="text-center wowload fadeInUp">BACT'Man: The hero of the Bio-Console!</h3>   
 
<div class="row">
 
<div class="row">
 
<div class="col-sm-6 wowload fadeInLeft">
 
<div class="col-sm-6 wowload fadeInLeft">
−
<h4><i class="fa fa-gamepad" style="color:#b22222"></i> Design of a real synthetic biology game: the Bio-console </h4>
+
<h4><i class="fa fa-gamepad"style="color:#b22222" ></i> The Bio-Console: allow BACT'Man to survive as long as possible </h4>
−
<p align="justify">It is based on the control of engineered bacteria in a microfluidic chip connected to a computer interface. Our game is dependent on <font style="color:#66cdaa">optogenetic signals</font> leading to either the fluorescence of our bacteria in order to visualize it, or the death of our bacteria. The latter allows us to control our system leading to an efficient kill switch.</p>
+
<p align="justify">Most video games are inspired by reality to create a <font style="color:#66cdaa">VIRTUAL WORLD</font>, in order to make them more realistic. When do we expect to do the opposite? Virtual draw to play with the living to revisit and perceive the gaming world in a new way and thus to have new sensations with the game. Imagine a bacterium, that you can view on your computer screen and that you can control using your joystick. </p>
−
+
<p>The Bio-Console: the first game console, where the games will not be so virtual!</p>
−
+
−
<h4><i class="fa fa-mobile" style="color:#b22222"></i> The mobile application: Biology, Synthetic Biology & Safety! </h4>
+
−
<p align="justify"> Our team wants to<font style="color:#66cdaa"> promote Synthetic Biology</font> using an original point of view. The goal is to make this field accessible to everyone by using a playful & entertaining tool..</p>  
+
 
</div>
 
</div>
−
<div class="col-sm-6 wowload fadeInRight">
 
−
<p align="right"><img src="https://static.igem.org/mediawiki/2015/a/a6/0cae0046396704c3436562c784c63f50_original.jpg" alt="Mobile Application"  width="400" height=auto></p>
 
−
<br>
 
−
<br>
 
−
    </div>
 
  
 +
<div class="col-sm-6 wowload fadeInRight">
 +
<h4><i class="fa fa-mobile" style="color:#b22222"></i> The mobile application: Biology, Synthetic Biology & Safety! </h4>
 +
<p align="justify"> Follow <b>BACT’Man </b>: from the human's bowels to the iGEM laboratory. He evolves to become a super bacterium and bring the world all the innovations of synthetic biology ! To succeed, you will need to be ingenious and to discover the workings of biology. Progress, explore and help Bact’man along his trip and overcome the challenges on your way.</p>   
 +
<p> Races, puzzles, speed games : biology and being a bacteria have never been so funny! </p>
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
<!-- VIDEO -->
 
−
<div class="highlight-info">
 
−
<div class="overlay spacer">
 
−
<div class="container" >
 
−
<div class="row text-center  wowload fadeInDownBig">
 
−
<h2 class="text-center  wowload fadeInUp">What do we do exactly?</h2>
 
−
<CENTER>
 
−
<video width="500" height="281.25" poster="https://static.igem.org/mediawiki/2015/e/ec/11416803_10206427913838537_603212525_o.jpg" controls>
 
−
<source src="https://static.igem.org/mediawiki/2015/7/73/Video-1438606819.mp4.mp4" type='video/mp4'/>
 
−
<source src="https://static.igem.org/mediawiki/2015/9/90/Video-1438606819.mp4.ogg" type='video/ogg; codecs="theora, vorbis"'/>
 
−
<source src="https://static.igem.org/mediawiki/2015/f/fb/Video-1438606819.mp4.webm" type='video/webm; codecs="vp8, vorbis"'/>
 
−
<a href="https://www.youtube.com/watch?v=gVtXKnW4zD0"><img border="0" src="https://static.igem.org/mediawiki/2015/e/ec/11416803_10206427913838537_603212525_o.jpg" alt="Click to view on Youtube" width="500" height="281.25"></a>
 
−
<p style="font-style:italic;color:red;border-style:solid;border-width:2px;border-color:red">Your browser either does not support HTML5 or cannot handle MediaWiki open video formats. Please consider upgrading your browser, installing the appropriate plugin or switching to a Firefox or Chrome install.</p>
 
−
</video>
 
−
</CENTER>
 
−
<br>
 
−
<br>
 
−
</div>
 
−
<center>
 
−
<a class="myButton" href="https://www.youtube.com/watch?v=gVtXKnW4zD0" style="color:#b0000f;background-color: #FFFFFF;">English Subtitles</a>
 
−
</center>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
 
−
 
−
 
−
 
−
<!-- DESCRIPTION -->
 
−
 
−
 
−
<div id="about"  class="container spacer about">
 
−
<h2 class="text-center wowload fadeInUp" style="color:#ff0000">The Bio-Console </h2>
 
−
<div class="row">
 
−
 
−
<div class="col-sm-6 wowload fadeInLeft" >
 
−
<p align="left" ><img src="https://static.igem.org/mediawiki/2015/8/88/Schema_IONIS.png" alt="Project"  width="500" height=auto ></p>
 
−
<!--img src="https://static.igem.org/mediawiki/2015/8/88/Schema_IONIS.png"-->
 
−
</div>
 
 
 
 
 
−
+
<!-- Circle -->
−
<div class="col-sm-6 wowload fadeInRight">
+
<div class="services container">
−
<h4><i class="fa fa-gamepad" style="color:#b22222"></i> How will work our Bio-Console ? </h4>
+
  <h3 class="text-center wowload fadeInUp"> A Multidisciplinary Project</h3>
−
<p align="justify">To begin, we need our bacteria to be visible to the player. That's why we added the genes responsible for bacteria fluorescence.
+
<ul class="row text-center list-inline  wowload bounceInUp">
−
Our genetic construction will allow us to <font style="color:#66cdaa">induce bacteria fluorescence</font> through light signals.
+
<li>
−
In this way, we can make each group of bacteria directly visible before starting of the game. 
+
<span><i class="fa fa-gamepad" style="color:#b22222"></i><b>Playful</b></span>
−
Then, the bacteria will be introduced in an aqueous <font style="color:#66cdaa">medium </font> having the same density as the water.
+
</li>
−
In this environment, the bacteria will have all the molecules that allow them to survive in the game.
+
<li>
−
There will be as well some liposomes (small capsules where the internal environment is separated by membranes from the external environment).
+
<span><i class="fa fa-cogs" style="color:#b22222"></i><b>Engineering</b></span>
−
Inside of these liposomes, bacteria destructive toxins will be present, and this is where the <font style="color:#66cdaa">gameplay</font> of our game relies. 
+
</li>
−
Once the bacteria are fluorescent, we will introduce the aqueous medium in our microfluidic chip.
+
<li>
−
This chip will be placed beforehand under an optical microscope itself connected to the computer screen.
+
<span><i class="fa fa-graduation-cap" style="color:#b22222"></i><b>Microfluidics</b></span>
−
The aqueous medium, then forms a sort of bubble containing <font style="color:#66cdaa">BACT'Man</font> and toxins trapped in the vesicle.
+
</li>
−
This bubble will be directly controlled by the player by flows through the joystick as it is related to the computer.
+
<li>
−
</p>
+
<span><i class="fa fa-laptop" style="color:#b22222"></i><b>Computer Sciences</b></span>
−
 
+
</li>      
−
<h4><i class="fa fa-mobile" style="color:#b22222"></i> The goal of the game !</h4>
+
<li>
−
<p align="justify"> The goal is simple: to allow <font style="color:#66cdaa">BACT'Man</font> to survive as long as possible.
+
<span><i class="fa fa-globe" style="color:#b22222"></i><b>Safety issues</b></span>
−
Stop him from getting in contact with the virtual lasers that will appear faster and faster as the game goes on.
+
</li>
−
If <font style="color:#66cdaa">BACT'Man</font> were to be touched, a bright flash will appear at the microscope and will activate the liposomes opening.
+
</ul>
−
The toxins will eliminate our hero that will lose his fluorescence ... <font style="color:#66cdaa"><b>GAME OVER</b></font>
+
−
</p>  
+
−
</div>
+
−
 
+
−
 
+
−
                 
+
−
</div>
+
 
</div>
 
</div>
 +
<!-- #Cirlce Ends -->
 
 
−
<!--div boxes -->
+
<!--div boxes -->
 
</div>
 
</div>
  
−
 
+
<!-- BOXES -->
−
 
+
−
<!--BOXES -->
+
 
<div id="works"  class=" clearfix grid">  
 
<div id="works"  class=" clearfix grid">  
−
+
<figure class="effect-oscar  wowload fadeInUp">
 +
<img src="https://static.igem.org/mediawiki/2015/3/34/Wii.jpg" alt="img01"/>
 +
<figcaption>
 +
<h2>BIO-CONSOLE</h2>
 +
<p>Our reality game using bacteria<br>
 +
<a href="https://2015.igem.org/Team:IONIS_Paris/Project" >View more</a></p>           
 +
</figcaption>
 +
</figure>
 +
 +
 +
<figure class="effect-oscar  wowload fadeInUp">
 +
<img src="https://static.igem.org/mediawiki/2015/8/8f/Application.jpg" alt="img01"/>
 +
<figcaption>
 +
<h2>APPLICATION</h2>
 +
<p>Bact'man, our hero<br>
 +
<a href="https://2015.igem.org/Team:IONIS_Paris/Project" >View more</a></p>           
 +
</figcaption>
 +
</figure>
 +
 +
<!--https://static.igem.org/mediawiki/2015/c/c2/Schema1_IONIS.png-->
 +
 
 +
<figure class="effect-oscar  wowload fadeInUp">
 +
<img style="width:auto"; src="https://static.igem.org/mediawiki/2015/1/19/NOTE.jpg" alt="img01"/>
 +
<figcaption>
 +
<h2>NOTEBOOK</h2>
 +
<p>Our Lab experiments notebook<br>
 +
<a href="https://2015.igem.org/Team:IONIS_Paris/Notebook" >View more</a></p>           
 +
</figcaption>
 +
</figure>
 +
<!--https://static.igem.org/mediawiki/2015/thumb/9/93/Notebook.jpg/600px-Notebook.jpg-->
 +
 
<figure class="effect-oscar  wowload fadeInUp">
 
<figure class="effect-oscar  wowload fadeInUp">
 
<img src="https://static.igem.org/mediawiki/2015/thumb/1/18/Brick-wall.png/800px-Brick-wall.png" alt="team"/>
 
<img src="https://static.igem.org/mediawiki/2015/thumb/1/18/Brick-wall.png/800px-Brick-wall.png" alt="team"/>
Line 173: Line 142:
 
<h2>MICROFLUIDICS</h2>
 
<h2>MICROFLUIDICS</h2>
 
<p>Our challenge in achieving the Bio-console<br>
 
<p>Our challenge in achieving the Bio-console<br>
−
<a href="https://2015.igem.org/Team:IONIS_Paris/Microfluidics" >View more</a></p>             
+
<a href="https://2015.igem.org/Team:IONIS_Paris/Project/Microfluidics" >View more</a></p>             
 
</figcaption>
 
</figcaption>
 
</figure>
 
</figure>
 +
 +
<figure class="effect-oscar  wowload fadeInUp">
 +
<img src="https://static.igem.org/mediawiki/2015/thumb/a/a6/LABORATOIRE.png/800px-LABORATOIRE.png" alt="team"/>
 +
<figcaption>
 +
<h2>SAFETY</h2>
 +
<p>Our safety measures<br>
 +
<a href="https://2015.igem.org/Team:IONIS_Paris/Safety" >View more</a></p>           
 +
</figcaption>
 +
</figure>
 +
<!--https://static.igem.org/mediawiki/2015/d/d5/Safety.jpg-->
 +
 +
<figure class="effect-oscar  wowload fadeInUp">
 +
<img src="https://static.igem.org/mediawiki/2015/b/b9/WORK.jpg" alt="team"/>
 +
<figcaption>
 +
<h2>MODELING</h2>
 +
<p>Our models<br>
 +
<a href="https://2015.igem.org/Team:IONIS_Paris/Modeling" >View more</a></p>           
 +
</figcaption>
 +
</figure>
  
 +
<figure class="effect-oscar  wowload fadeInUp">
 +
<img src="https://static.igem.org/mediawiki/2015/4/40/Boston-MIT-01.png" alt="team"/>
 +
<figcaption>
 +
<h2>TEAM</h2>
 +
<p>Our creative team that is making everything possible<br>
 +
<a href="https://2015.igem.org/Team:IONIS_Paris/Team" >View more</a></p>           
 +
</figcaption>
 +
</figure>
 
</div>
 
</div>
  
 +
<!-- END BOXES -->
  
 +
</br>
 +
</br>
 +
 +
<!-- HIGHLIGHT INFO -->
 +
<div class="highlight-info">
 +
<div class="overlay spacer">
 +
<div class="container" >
 +
<div class="row text-center  wowload fadeInDownBig">
 +
<CENTER>
 +
<div class="col-sm-3 col-xs-6">
 +
<i class="fa fa-smile-o  fa-5x"></i><h4>13 Members</h4>
 +
</div>
 +
 +
<div class="col-sm-3 col-xs-6">
 +
<i class="fa fa-map-marker fa-5x"></i><h4>4 Schools</h4>
 +
</div>
 +
 +
<div class="col-sm-3 col-xs-6">
 +
<i class="fa fa-gamepad  fa-5x"></i><h4>1 Bio-Console</h4>
 +
</div>
 +
 +
<div class="col-sm-3 col-xs-6">
 +
<i class="fa fa-tablet fa-5x"></i><h4>1 Mobile Application</h4>
 +
</div>
 +
</CENTER>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<!-- VIDEO -->
 +
<div id="contact" class="spacer">
 +
<div class="container">
 +
<h2 class="text-center  wowload fadeInUp">What is iGEM ?</h2>
 +
<CENTER>
 +
<video width="500" height="281.25" poster="https://static.igem.org/mediawiki/2015/8/83/Logo_IONIS.png" controls>
 +
<source src="https://static.igem.org/mediawiki/2015/7/73/Video-1438606819.mp4.mp4" type='video/mp4'/>
 +
<source src="https://static.igem.org/mediawiki/2015/9/90/Video-1438606819.mp4.ogg" type='video/ogg; codecs="theora, vorbis"'/>
 +
<source src="https://static.igem.org/mediawiki/2015/f/fb/Video-1438606819.mp4.webm" type='video/webm; codecs="vp8, vorbis"'/>
 +
<a href="https://www.youtube.com/watch?v=DWUxy4g_p7w"><img border="0" src="https://static.igem.org/mediawiki/2015/8/83/Logo_IONIS.png" alt="Click to view on Youtube" width="500" height="281.25"></a>
 +
<p style="font-style:italic;color:red;border-style:solid;border-width:2px;border-color:red">Your browser either does not support HTML5 or cannot handle MediaWiki open video formats. Please consider upgrading your browser, installing the appropriate plugin or switching to a Firefox or Chrome install.</p>
 +
</video>
 +
</CENTER>
 +
</div>
 +
</div>
 +
 +
<!--SPONSORS-->
 +
<div class="sponsors">
 +
<div id="contact" class="overlay spacer" >
 +
<div class="container contactform center">
 +
<h2 class="text-center  wowload fadeInUp" style="color:#ff0000">Our sponsors</h2>
 +
<br>
 +
<CENTER>
 +
<div class="col-sm-3 col-xs-6">
 +
<a href="http://www.supbiotech.fr/en/index.aspx">
 +
<img src="https://static.igem.org/mediawiki/2015/3/30/LOGO-SUPBIOTECH-2015-QUADRI.png" alt="partners" width="150" height=auto>
 +
</a>
 +
</div>
 +
<div class="col-sm-3 col-xs-6">
 +
<a href="http://www.e-artsup.net/">
 +
<img src="https://static.igem.org/mediawiki/2015/9/98/Logo-e-artsup.png" alt="partners" width="150" height=auto>
 +
</a>
 +
</div>
 +
<div class="col-sm-3 col-xs-6">
 +
<a href="http://www.epita.fr/international/">
 +
<img src="https://static.igem.org/mediawiki/2015/9/9b/Logo-epita-hd.png" alt="partners" width="150" height=auto>
 +
</a>
 +
</div>
 +
<div class="col-sm-3 col-xs-6">
 +
<a href="http://ionis-group.com/">
 +
<img src="https://static.igem.org/mediawiki/2015/2/2e/Logo_ionis.jpg" alt="partners" width="150" height=auto>
 +
</a>
 +
</div>
 +
</CENTER>
 +
</div>
 
<br>
 
<br>
 +
 +
<div class="container contactform center">
 
<br>
 
<br>
 +
<CENTER>
 +
<div class="col-sm-3 col-xs-6">
 +
<a href="http://www.fluigent.com/">
 +
<img src="https://static.igem.org/mediawiki/2015/c/c1/Fluigent-basic.png" alt="partners" width="150" height=auto>
 +
</a>
 +
</div>
 +
 +
<div class="col-sm-3 col-xs-6">
 +
<a href="https://www.qiagen.com">
 +
<img src="https://static.igem.org/mediawiki/2015/a/a0/Qiagen_logo.png" alt="partners" width="150" height=auto>
 +
</a>
 +
</div>
 +
 +
<div class="col-sm-3 col-xs-6">
 +
<a href="https://www.neb.com/">
 +
<img src="https://static.igem.org/mediawiki/2015/e/e1/NEB.png" alt="partners" width="150" height=auto>
 +
</a>
 +
</div>
 +
 +
<div class="col-sm-3 col-xs-6">
 +
<a href="https://www.uni-freiburg.de/start-en.html?set_language=en">
 +
<img src="https://static.igem.org/mediawiki/2015/5/59/Uni_Logo.png" alt="partners" width="150" height=auto>
 +
</a>
 +
</div>
 +
 +
<div class="col-sm-3 col-xs-6">
 +
<a href="https://www.exzellenz.uni-freiburg.de/einrichtungen-en/bioss-en/bioss-en?set_language=en">
 +
<img src="https://static.igem.org/mediawiki/2015/4/41/Bioss-4.jpg" alt="partners" width="150" height=auto>
 +
</a>
 +
</div>
 +
 +
<div class="col-sm-3 col-xs-6">
 +
<a href="https://www.kickstarter.com/">
 +
<img src="https://static.igem.org/mediawiki/2015/thumb/2/26/Kickstarter-logo-light.png/800px-Kickstarter-logo-light.png" alt="partners" width="150" height=auto>
 +
</a>
 +
</div>
 +
 +
<div class="col-sm-3 col-xs-6">
 +
<a href="http://fr.ambafrance-us.org/">
 +
<img src="https://static.igem.org/mediawiki/2015/b/b8/Logo_Embassy-of-France_OS%26T_300_dpi.jpg" alt="partners" width="150" height=auto>
 +
</a>
 +
</div>
 +
</CENTER>
 +
</div>
 +
  
−
<!-- div suplementaire -->
 
 
</div>
 
</div>
−
+
</div>
 +
 +
 
 +
 
 +
 
 +
 
 +
 
 
<!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
 
<!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
 
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
 
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
Line 202: Line 326:
 
<!-- UP TOP -->
 
<!-- UP TOP -->
  
−
<a href="#banner" class="gototop "><i class="fa fa-chevron-circle-up   fa-3x"></i></a>
+
<a href="#banner" class="gototop "><i class="fa fa-chevron-circle-up fa-3x"></i></a>
  
  

Revision as of 13:21, 6 August 2015

IONIS Paris

Popularization of Synthetic Biology

BACT'Man: The hero of the Bio-Console!

The Bio-Console: allow BACT'Man to survive as long as possible

Most video games are inspired by reality to create a VIRTUAL WORLD, in order to make them more realistic. When do we expect to do the opposite? Virtual draw to play with the living to revisit and perceive the gaming world in a new way and thus to have new sensations with the game. Imagine a bacterium, that you can view on your computer screen and that you can control using your joystick.

The Bio-Console: the first game console, where the games will not be so virtual!

The mobile application: Biology, Synthetic Biology & Safety!

Follow BACT’Man : from the human's bowels to the iGEM laboratory. He evolves to become a super bacterium and bring the world all the innovations of synthetic biology ! To succeed, you will need to be ingenious and to discover the workings of biology. Progress, explore and help Bact’man along his trip and overcome the challenges on your way.

Races, puzzles, speed games : biology and being a bacteria have never been so funny!

A Multidisciplinary Project

  • Playful
  • Engineering
  • Microfluidics
  • Computer Sciences
  • Safety issues
img01

BIO-CONSOLE

Our reality game using bacteria
View more

img01

APPLICATION

Bact'man, our hero
View more

img01

NOTEBOOK

Our Lab experiments notebook
View more

team

BIOBRICKS

Our parts of DNA
View more

team

OPTOGENETICS

Our scientific core of the project
View more

team

MICROFLUIDICS

Our challenge in achieving the Bio-console
View more

team

SAFETY

Our safety measures
View more

team

MODELING

Our models
View more

team

TEAM

Our creative team that is making everything possible
View more



13 Members

4 Schools

1 Bio-Console

1 Mobile Application

What is iGEM ?