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

 
(273 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<!-- Declare that you are going to use html code instead of wiki code -->
+
<html lang="en">
−
<html>
+
<head>
 +
<meta charset="UTF-8" />
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 +
<title >IONIS Paris</title>
  
−
<!-- Start of CSS-->
+
<!-- Google fonts -->
−
<style type="text/css">
+
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
  
−
                    /* Hide first heading */
+
<!-- font awesome -->
−
.firstHeading {
+
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
−
display: none;
+
−
}
+
−
+
−
  #content {
+
−
    border:none;
+
−
    width:100%;
+
−
    margin:0;
+
−
    padding:0;
+
−
    background:none;
+
−
  }
+
−
  #cat
+
  
−
/*left align Black Menu Bar */
+
<!-- favicon -->
−
#top_menu_inside {
+
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
−
margin-left: 20px;
+
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
−
}
+
  
  
 +
</head>
  
−
/* PAGE LAYOUT */
+
<body>
 +
<div class="topbar animated fadeInLeftBig"></div>
  
 +
<!-- Banner -->
  
−
/* Change Background color*/
+
<div class="banner row" id="banner">
−
body {
+
<div class="parallax text-center" style="background-image: url(https://static.igem.org/mediawiki/2015/2/2f/TEST.jpg);width:100%;">
−
background-color: #F8F8F8 ;
+
<div class="parallax-pattern-overlay" style="background: rgb(200,200,200,0.6);background-size: cover; color:#fff; ">
−
                                background-image:url(https://static.igem.org/mediawiki/2015/0/07/Fond_IONIS.jpg)
+
<div class="container text-center" style="height:580px;padding-top:20px;">
−
}
+
<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/d/d8/Logo-Blanc-sans_fond.png"  width="500" height=auto alt="logo"/></a>
 +
<!-- https://static.igem.org/mediawiki/2015/8/83/Logo_IONIS.png -->
 +
 +
</div>
 +
</div>
 +
</div>
 +
</div>
  
−
/* Creates a container that will wrap all of the content inside your wiki pages. */
 
−
#mainContainer { 
 
−
float:center;
 
−
overflow:hidden;
 
−
margin-left:50px;
 
−
margin-bottom: 10px;
 
−
                                margin-right:50px
 
−
background-color: #fff;
 
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
 
−
}
 
  
−
/* Creates the container for the menu */
+
<!--img src="https://static.igem.org/mediawiki/2015/0/07/Fond_IONIS.jpg" alt="banner"-->
−
#menuContainer  {
+
 
−
float:right;
+
−
width: 134px;
+
−
                                margin-right:50px;
+
−
padding: 20px 0px;
+
−
border-top: 2px solid #990000 ;                               
+
−
background-color:#F8F8F8 ;
+
−
}
+
  
−
/* Creates the container for the content */
+
<!-- Introduction -->
−
#contentContainer {
+
<div id="about"  class="container spacer about">
−
padding-top:20px;
+
<h2 class="text-center wowload fadeInUp" style="color:#ff0000"> <big>Popularization of Synthetic Biology</big></h2>
−
padding-right:50px;
+
<h3 class="text-center wowload fadeInUp">BACT'Man: The hero of the Bio-Console!</h3> 
−
margin-bottom: 20px;
+
<div class="row">
−
                                margin-right:50px;
+
<div class="col-sm-6 wowload fadeInLeft">
−
width: 95%;
+
<h4><i class="fa fa-gamepad"style="color:#b22222" ></i> The Bio-Console: allow BACT'Man to survive as long as possible </h4>
−
float: center;
+
<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>
−
background-color: #F8F8F8 ;
+
<p>The Bio-Console: the first game console, where the games will not be so virtual!</p>
−
border-top: 2px solid #990000 ;
+
</div>
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
−
}
+
  
−
/*Set up height place holder for the banner*/
+
<div class="col-sm-6 wowload fadeInRight">
−
#bannerContainer {
+
<h4><i class="fa fa-mobile" style="color:#b22222"></i> The mobile application: Biology, Synthetic Biology & Safety! </h4>
−
height:200px;
+
<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>   
−
margin:auto;
+
<p> Races, puzzles, speed games : biology and being a bacteria have never been so funny! </p>
−
text-align:center;
+
</div>
−
color: #24B694;
+
</div>
−
}
+
</div>
 +
 +
 +
<!-- Circle -->
 +
<div class="services container">
 +
  <h3 class="text-center wowload fadeInUp"> A Multidisciplinary Project</h3>
 +
<ul class="row text-center list-inline  wowload bounceInUp">
 +
<li>
 +
<span><i class="fa fa-gamepad" style="color:#b22222"></i><b>Playful</b></span>
 +
</li>
 +
<li>
 +
<span><i class="fa fa-cogs" style="color:#b22222"></i><b>Engineering</b></span>
 +
</li>
 +
<li>
 +
<span><i class="fa fa-graduation-cap" style="color:#b22222"></i><b>Microfluidics</b></span>
 +
</li>
 +
<li>
 +
<span><i class="fa fa-laptop" style="color:#b22222"></i><b>Computer Sciences</b></span>
 +
</li>       
 +
<li>
 +
<span><i class="fa fa-globe" style="color:#b22222"></i><b>Safety issues</b></span>
 +
</li>
 +
</ul>
 +
</div>
 +
<!-- #Cirlce Ends -->
 +
 +
<!--div boxes -->
 +
</div>
  
−
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
+
<!-- BOXES -->
 +
<div id="works"  class=" clearfix grid">
  
−
/*Change the styling of text for everything inside main container*/
+
<figure class="effect-oscar  wowload fadeInUp" >
−
#mainContainer p {
+
<img src="https://static.igem.org/mediawiki/2015/3/34/Wii.jpg" alt="img01"/>
−
font-size: 13px;
+
<figcaption>
−
color: #000000;
+
<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>
 +
 
 
−
/*This changes the color and font family */
+
−
#contentContainer h1, h2, h3, h4, h5, h6 {
+
<figure class="effect-oscar  wowload fadeInUp">
−
color: #565656;
+
<img src="https://static.igem.org/mediawiki/2015/8/83/Mobile.jpg" alt="img01"/>
−
border-bottom: none;
+
−
font-weight: bold;
+
<figcaption>
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
<h2>APPLICATION</h2>
−
margin-top:10px;
+
<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-->
  
−
/*Style of the links - links are different inside the menu */
+
<figure class="effect-oscar  wowload fadeInUp">
−
#contentContainer a {
+
<img style="width:auto"; src="https://static.igem.org/mediawiki/2015/1/19/NOTE.jpg" alt="img01"/>
−
font-weight: bold;
+
<figcaption>
−
color: #23b593;
+
<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">
 +
<img src="https://static.igem.org/mediawiki/2015/thumb/1/18/Brick-wall.png/800px-Brick-wall.png" alt="team"/>
 +
<figcaption>
 +
<h2>BIOBRICKS</h2>
 +
<p>Our parts of DNA<br>
 +
<a href="https://2015.igem.org/Team:IONIS_Paris/Biobricks" >View more</a></p>           
 +
</figcaption>
 +
</figure>
  
−
  /* Styling links on hover- links are different inside the menu */
+
<figure class="effect-oscar  wowload fadeInUp">
−
#contentContainer a:hover {
+
<img src="https://static.igem.org/mediawiki/2015/thumb/b/b1/Optogenetics.jpg/800px-Optogenetics.jpg" alt="team"/>
−
color: #59bf92;
+
<figcaption>
−
}
+
<h2>OPTOGENETICS</h2>
 +
<p>Our scientific core of the project<br>
 +
<a href="https://2015.igem.org/Team:IONIS_Paris/Project/Optogenetics" >View more</a></p>           
 +
</figcaption>
 +
</figure>
 +
 +
<figure class="effect-oscar  wowload fadeInUp">
 +
<img src="https://static.igem.org/mediawiki/2015/1/18/GRID.jpg" alt="team"/>
 +
<figcaption>
 +
<h2>MICROFLUIDICS</h2>
 +
<p>Our challenge in achieving the Bio-console<br>
 +
<a href="https://2015.igem.org/Team:IONIS_Paris/Project/Microfluidics" >View more</a></p>           
 +
</figcaption>
 +
</figure>
 +
 +
 +
</div>
  
−
/*Change the styling of tables */
+
<!-- END BOXES -->
−
        #contentContainer table {
+
−
    border: 1px solid #565656;
+
−
    border-collapse: collapse;
+
−
    width: 90%
+
−
    margin: auto;
+
−
    margin-bottom: 15px;
+
−
    margin-top: 15px;
+
−
    margin-right: 10px;
+
−
    margin-left: 10px;
+
−
    }
+
  
−
/*Change the styling of table cells*/
+
</br>
−
    #contentContainer  td {
+
</br>
−
    padding: 10px;
+
−
    border: 1px solid #565656;
+
−
    border-collapse: collapse;
+
−
    vertical-align: text-top;
+
−
    }
+
  
−
/*Change the styling of table headers */
+
<!-- HIGHLIGHT INFO -->
−
    #contentContainer th {
+
<div class="highlight-info">
−
    background-color: #E8E8E9;
+
<div class="overlay spacer">
−
    padding: 10px;
+
<div class="container" >
−
    border: 1px solid #565656;
+
<div class="row text-center  wowload fadeInDownBig">
−
    border-collapse: collapse;
+
<CENTER>
−
    vertical-align: text-top;
+
<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-->
−
/*MENU STYLING */
+
<div class="sponsors">
−
 
+
<div id="contact" class="overlay spacer" >
−
/*Styling for the links in the menu */
+
<div class="container contactform center">
−
#menuContainer a {
+
<h2 class="text-center  wowload fadeInUp" style="color:#fff">Our sponsors</h2>
−
color: #565656;
+
<br>
−
text-decoration:none;
+
<CENTER>
−
font-weight: bold;
+
<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>
−
/* Sets the style for lists inside menuContainer  */
+
</a>
−
#menuContainer ul {
+
</div>
−
list-style: none;
+
<div class="col-sm-3 col-xs-6">
−
margin-left:0px;
+
<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>
−
/*Styles the list items to become menu buttons */
+
</div>
−
#menuContainer ul li {
+
<div class="col-sm-3 col-xs-6">
−
text-align: center;
+
<a href="http://www.epita.fr/international/">
−
display: block;
+
<img src="https://static.igem.org/mediawiki/2015/9/9b/Logo-epita-hd.png" alt="partners" width="150" height=auto>
−
width: 100%;
+
</a>
−
height:30px;
+
</div>
−
padding-top:10px;
+
<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>
−
/*For the menu buttons, changes the color when hovering*/
+
</a>
−
#menuContainer li:hover {
+
</div>
−
color:  #FFF;
+
</CENTER>
−
background-color: #24B694;
+
</div>
−
}
+
<br>
−
 
+
−
/*Submenus are not displayed as default*/
+
<div class="container contactform center">
−
#menuContainer li ul {
+
<br>
−
display: none;
+
<CENTER>
−
padding-top:15px;
+
<div class="col-sm-3 col-xs-6">
−
margin-left: -19px;
+
<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>
−
/*Submenus are displayed when hovering the menu button */
+
</div>
−
#menuContainer li:hover ul {
+
−
/*display: inline-block; */
+
<div class="col-sm-3 col-xs-6">
−
display: block;
+
<a href="https://www.qiagen.com">
−
position: absolute;
+
<img src="https://static.igem.org/mediawiki/2015/a/a0/Qiagen_logo.png" alt="partners" width="150" height=auto>
−
float:right;
+
</a>
−
margin-left: 134px;
+
</div>
−
margin-top:-42px;
+
−
}
+
<div class="col-sm-3 col-xs-6">
−
 
+
<a href="https://www.neb.com/">
−
/*Style the submenu buttons*/
+
<img src="https://static.igem.org/mediawiki/2015/e/e1/NEB.png" alt="partners" width="150" height=auto>
−
#menuContainer li ul li{
+
</a>
−
background-color: #59BF92;
+
</div>
−
padding-left:20px;
+
−
padding-right:20px;
+
<div class="col-sm-3 col-xs-6">
−
height:30px;
+
<a href="https://www.uni-freiburg.de/start-en.html?set_language=en">
−
padding-top:10px;
+
<img src="https://static.igem.org/mediawiki/2015/5/59/Uni_Logo.png" alt="partners" width="150" height=auto>
−
margin-top:-2px;
+
</a>
−
color: #565656;
+
</div>
−
width: 150px;
+
</CENTER>
−
}
+
</div>
−
 
+
<br>
−
/*CLASSES */
+
<div class="container contactform center">
−
 
+
<CENTER>
−
/*Clear class for all the pages, adds spacing too*/
+
<div class="col-sm-3 col-xs-6">
−
.clear{
+
<a href="https://www.exzellenz.uni-freiburg.de/einrichtungen-en/bioss-en/bioss-en?set_language=en">
−
clear:both;
+
<img src="https://static.igem.org/mediawiki/2015/4/41/Bioss-4.jpg" alt="partners" width="150" height=auto>
−
height: 10px;
+
</a>
−
}
+
</div>
−
 
+
−
 
+
<div class="col-sm-3 col-xs-6">
−
/* highlight box for special messages */
+
<a href="https://www.kickstarter.com/">
−
    .highlightBox {
+
<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>
−
        width:500px;
+
</a>
−
        margin:auto;
+
</div>
−
        background-color: #E8E8E9;
+
−
margin-bottom: 15px;
+
<div class="col-sm-3 col-xs-6">
−
margin-top: 15px;
+
<a href="http://fr.ambafrance-us.org/">
−
padding: 15px;
+
<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>
−
padding-top: 5px;
+
</a>
−
    }
+
</div>
−
/* Menu css test */
+
−
.container{width:1000px;
+
<div class="col-sm-3 col-xs-6">
−
margin:0 auto;
+
<a href="https://communicationmicrofactory.wordpress.com/nous/">
−
padding:0 20px;
+
<img src="https://static.igem.org/mediawiki/2015/0/01/Microfactory.png" alt="partners" width="150" height=auto>
−
-webkit-transform:translate3d(0, 0, 0);
+
</a>
−
-moz-transform:translate3d(0, 0, 0);
+
</div>
−
-ms-transform:translate3d(0, 0, 0);
+
</CENTER>
−
-o-transform:translate3d(0, 0, 0);
+
−
transform:translate3d(0, 0, 0)}
+
−
 
+
−
.section-title-container{display:table;
+
−
margin:0 auto}
+
−
 
+
−
.clearfix:before,
+
−
.clearfix:after{content:" ";display:table}
+
−
.clearfix:after{clear:both}
+
−
.clearfix{*zoom:1}
+
−
 
+
−
.Home{background:#df815a;
+
−
margin-left:0}
+
−
 
+
−
.Team{background:#e7ca52}
+
−
 
+
−
.Project{background:#639bb4}
+
−
 
+
−
.non-active-title{opacity:0.6}
+
−
 
+
−
.Team.active-title::after{display:block}
+
−
 
+
−
.Laboratory{background:#7dbf94}
+
−
 
+
−
.section-title{width:100px;height:100px;
+
−
-webkit-border-radius:50px;
+
−
-moz-border-radius:50px;
+
−
-ms-border-radius:50px;
+
−
-o-border-radius:50px;
+
−
border-radius:50px;
+
−
box-shadow:rgba(70,70,70,0.2) 0 1px 0 1px;
+
−
margin-top:2em;
+
−
margin-left:-10px;
+
−
color:#fff;
+
−
text-align:center;
+
−
position:relative;
+
−
float:left;
+
−
-webkit-transition-property:opacity;
+
−
-moz-transition-property:opacity;
+
−
-ms-transition-property:opacity;
+
−
-o-transition-property:opacity;
+
−
transition-property:opacity;
+
−
-webkit-transition-duration:1s;
+
−
-moz-transition-duration:1s;
+
−
-ms-transition-duration:1s;
+
−
-o-transition-duration:1s;
+
−
transition-duration:1s}
+
−
 
+
−
 
+
−
.section-title h3{padding-top:1.5em; color:#fff}
+
−
 
+
−
.no-touch .section-title:hover{opacity:1}
+
−
a{color: #565656;
+
−
text-decoration:none;
+
−
font-weight: bold;}
+
−
 
+
−
</style>
+
−
<!-- End of CSS -->
+
−
 
+
−
 
+
−
<!-- Start of the template html elements. -->
+
−
<div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.-->
+
−
 
+
−
 
+
−
<div id="bannerContainer">
+
−
 
+
−
 
+
−
<br><br>
+
−
 
+
−
<img src="https://static.igem.org/mediawiki/2015/8/83/Logo_IONIS.png" width="22%" height="70%" >
+
−
 
+
−
+
−
<!-- Remember to call the file: "<i>Team_IONIS_Paris_banner.jpg</i>" -->
+
 
</div>
 
</div>
−
<!--Menu test-->
 
  
−
           
 
−
                <nav class="section-title-container heat-stress-section clearfix">
 
−
               
 
−
                    <a class="Home-button">
 
−
                        <div class="section-title Home active-title">
 
−
                            <h3>
 
−
                          <a href="https://2015.igem.org/Team:IONIS_Paris">HOME</a>
 
−
                            </h3>
 
−
                        </div>             
 
−
                    </a>
 
  
−
                    <a class="Team-button">
+
</div>
−
                        <div class="section-title Team non-active-title">
+
</div>
−
                            <h3>
+
−
                                Team
+
−
                            </h3>
+
−
                        </div>
+
−
                    </a>
+
  
−
                    <a class="Project-button">
 
−
                        <div class="section-title Project non-active-title">
 
−
                            <h3>
 
−
                                Project
 
−
                            </h3>
 
−
                        </div>
 
−
                    </a>
 
  
−
                    <a class="Laboratory-button">
 
−
                        <div class="section-title Laboratory non-active-title">
 
−
                            <h3>
 
−
                                Laboratory
 
−
                            </h3>
 
−
                        </div>
 
−
                    </a>
 
−
                   
 
−
                </nav>
 
  
  
  
−
<!-- Start of menu -->
+
<!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
−
<div id="menuContainer">
+
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
 +
<!-- The container for the modal slides -->
 +
<div class="slides"></div>
 +
<!-- Controls for the borderless lightbox -->
 +
<h3 class="title">Title</h3>
 +
<a class="prev">‹</a>
 +
<a class="next">›</a>
 +
<a class="close">×</a>
 +
<!-- The modal dialog, which will be used to wrap the lightbox content -->   
 +
</div>
  
−
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
 
−
<ul>
 
−
<a href="https://2015.igem.org/Team:IONIS_Paris"><li>HOME</li></a>
 
  
−
<a href="https://2015.igem.org/Team:IONIS_Paris/Team"><li>TEAM</li></a>
 
  
−
<!--a href="#"><li>PROJECT
+
<!-- UP TOP -->
−
            <ul>
+
−
<a href="https://2015.igem.org/Team:IONIS_Paris/Description"><li>Description</li></a>
+
−
<a href="https://2015.igem.org/Team:IONIS_Paris/Experiments"><li>Experiments &amp; Protocols</li></a> 
+
−
<a href="https://2015.igem.org/Team:IONIS_Paris/Results"><li>Results</li></a> 
+
−
<a href="https://2015.igem.org/Team:IONIS_Paris/Design"><li>Design</li></a>
+
−
</ul>
+
−
</li></a-->
+
−
 
+
−
<!--a href="#"><li>PARTS
+
−
            <ul>
+
−
<a href="https://2015.igem.org/Team:IONIS_Paris/Parts"><li>Team Parts</li></a>
+
−
<a href="https://2015.igem.org/Team:IONIS_Paris/Basic_Part"><li>Basic Parts</li></a> 
+
−
<a href="https://2015.igem.org/Team:IONIS_Paris/Composite_Part"><li>Composite Parts</li></a>
+
−
<a href="https://2015.igem.org/Team:IONIS_Paris/Part_Collection"><li>Part Collection</li></a> 
+
−
</ul>
+
−
</li></a-->
+
−
 
+
−
<!--a href="https://2015.igem.org/Team:IONIS_Paris/Notebook"><li>NOTEBOOK</li></a-->
+
−
     
+
−
<!--a href="https://2015.igem.org/Team:IONIS_Paris/Attributions"><li>ATTRIBUTIONS</li></a-->
+
−
 
+
−
<!--a href="https://2015.igem.org/Team:IONIS_Paris/Collaborations"><li>COLLABORATIONS</li></a-->
+
−
 
+
−
<!--a href="https://2015.igem.org/Team:IONIS_Paris/Practices"><li>HUMAN PRACTICES</li></a-->
+
−
 
+
−
<!--a href="https://2015.igem.org/Team:IONIS_Paris/Safety"><li>SAFETY</li></a-->
+
−
 
+
−
<!--a href="https://2015.igem.org/Team:IONIS_Paris/Modeling"><li>MODELING</li></a-->
+
−
 
+
−
<!--a href="https://2015.igem.org/Team:IONIS_Paris/Measurement"><li>MEASUREMENT</li></a-->
+
−
 
+
−
<!--a href="https://2015.igem.org/Team:IONIS_Paris/Software"><li>SOFTWARE</li></a-->
+
−
 
+
−
 
+
−
 
+
−
</ul>
+
−
</div>
+
−
<!-- End of menu  -->
+
  
−
<!-- Start of content -->
+
<a href="#banner" class="gototop "><i class="fa fa-chevron-circle-up  fa-3x"></i></a>
−
<div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
+
  
  
  
 +
</body>
 
</html>
 
</html>

Latest revision as of 10:33, 26 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



13 Members

4 Schools

1 Bio-Console

1 Mobile Application

What is iGEM ?