Commit 95490e2c authored by Daniel Teixeira's avatar Daniel Teixeira

adding new avatars

parent 9f603a80
......@@ -17,13 +17,9 @@ a:hover {
}
#twentyyearsribbon{
padding: 20px;
border-radius: 25px;
border: 2px solid black;
background-color: white;
position: absolute;
left: 20px;
width: 180px;
padding-left: 20px;
padding-top: 10px;
height: 90px;
}
#twentyyearsimg{
......
assets/images/SIB_logo_20ans.png

38 KB | W: | H:

assets/images/SIB_logo_20ans.png

156 KB | W: | H:

assets/images/SIB_logo_20ans.png
assets/images/SIB_logo_20ans.png
assets/images/SIB_logo_20ans.png
assets/images/SIB_logo_20ans.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -31,19 +31,29 @@
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/wow.min.js"></script>
</head>
<body>
<div id="header">
<div id="twentyyearsribbon">
<a target="_blank" href="https://www.sib.swiss/20years"><img id="twentyyearsimg" src="assets/images/SIB_logo_20ans.png"></a>
<div class="section sectionBg" style="height: 50px;">
<div>
</div>
<div id="twentyyearsribbon" class="col-md-2 text-center">
<a target="_blank" href="https://www.sib.swiss/20years">
<img id="twentyyearsimg" src="assets/images/SIB_logo_20ans.png"></a>
</div>
<div class="col-md-8 text-center"></div>
<div class="col-md-2 text-center pt-10 pb-10">
<a href="https://pinterac.net" target="_blank">Press</a> |
<a href="https://pinterac.net" target="_blank">Contact</a>
</div>
</div>
<div id="header">
<div class="row mlmr-none mt-20">
<div class="col text-center">
<h1>GENOME JUMPER</h1>
<h4>The mobile game to discover your genes !</h4>
<h2>COMING VERY SOON</h2>
<form action="register.php" class="form-inline">
<p>Enter your email below to be the first to play!</p>
<p style="font-size: 12px">Enter your email below to be the first to play!</p>
<div class="input-group">
<div class="input-group-addon"></div>
<input type="email" class="form-control" id="email" placeholder="E-mail address">
......@@ -71,9 +81,10 @@
<img src="assets/images/bubbles.png" class="w100"/>
</div>
<div class="col-lg-8 col-md-8 text-left">
<h2>Discover the human genome</h2>
<p>Genome Jumper takes you into the world of <b>the human genome</b> and its variants! You will have to complete several genes to reveal the different avatars! In each level (gene) you will have to collect the "start codon", the "stop codon" and the "variant" to complete your avatar. You will quickly understand that it will be enough for you a small variation in the gene of your avatar to generate several characteristic features (phenotypes).
<br><br>Whether it is the skin tone, the color of the eyes, a predisposition for a disease, or even "super powers", everything is in your genes!</p>
<h2>The human genome... at the tip of your thumbs</h2>
<p>Genome Jumper, a mobile platform game powered by the SIB Swiss Institute of Bioinformatics, takes you onto a bouncy journey to explore our genome and its variations.
All humans share 99.9% of their genetic information. The things that vary from one human to another, such as the colour of our skin or of our eyes, or our ability to tolerate dairy products, therefore lie in the 0.1% of differences in our respective genomes! These are called variants.
</p>
</div>
</div>
</div>
......@@ -83,21 +94,22 @@
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Explore more than 35 genes and their variants</h2>
<p>The SIB Swiss Institute of Bioinformatics offers you to discover more than 35 genes at their RNA level, each containing an associated variant.<br>In real life, you should know that each of us has more than 20,000 genes with millions of variants, so we are all so different from each other!</p>
<p>Beware of the secondary structure of RNA, try to avoid them as much as possible.</p>
<h2>How do I play?</h2>
<p>Start with an unkown character from a list of 25 avatars representing various populations around the globe. Run along the genomic sequence of over 30 genes to collect unique variants and watch your characters change accordingly… often with surprising results!
The levels of increasing difficulty will require all your dexterity to avoid dangerous falls into non-coding regions and jumping over secondary structures, while of course collecting as many points as possible.
</p>
<div class="row mt-50">
<div class="col-lg-4 text-center mt-10">
<img src="assets/images/genes/aldh2.png" class="img-circle" style="max-width: 300px"/>
<br><i>ALDH2 contains a variant present in asian population that affects alcohol methabolization.</i>
<img src="assets/images/avatars/avatar1.jpg" class="img-circle" style="max-width: 300px"/>
<br><i>Start with an unkown character.</i>
</div>
<div class="col-lg-4 text-center mt-10">
<img src="assets/images/genes/serpine1.png" class="img-circle" style="max-width: 300px"/>
<br><i>SERPINE1 contains a variant common in Amish population that increases the chances to live longer!</i>
<img src="assets/images/avatars/avatar2.jpg" class="img-circle" style="max-width: 300px"/>
<br><i><b>Reveal the phenotype of your character by collecting its variant.</b></i>
</div>
<div class="col-lg-4 text-center mt-10">
<img src="assets/images/genes/brca1.png" class="img-circle" style="max-width: 300px"/>
<br><i><b>BRCA1 contains a variant that can be use to assess the risk of contracting breast cancer.</b></i>
<img src="assets/images/avatars/avatar3.jpg" class="img-circle" style="max-width: 300px"/>
<br><i>Avoid secondary structures and don't fall in the introns!</i>
</div>
</div>
</div>
......@@ -110,40 +122,31 @@
<div class="container">
<div class="row">
<div class="col text-center">
<h2>25 unique avatars worldwide, discover part of their genome!</h2>
<h2>Meet some of the characters</h2>
</div>
</div>
<div class="row mt-50">
<div class="col-lg-4 text-center">
<img src="assets/images/avatars/a1.png" class="img-circle"/>
<br><i>Tomoko</i>
<div class="col-lg-2 text-center">
<b style="font-size: 100px">...</b>
</div>
<div class="col-lg-4 text-center">
<div class="col-lg-2 text-center">
<img src="assets/images/avatars/a4.png" class=" img-circle"/>
<br><i>Barbara</i>
</div>
<div class="col-lg-2 text-center">
<img src="assets/images/avatars/a2.png" class=" img-circle"/>
<br><i>Susumu</i>
</div>
<div class="col-lg-4 text-center">
<div class="col-lg-2 text-center">
<img src="assets/images/avatars/a5.png" class=" img-circle"/>
<br><i>Yohan</i>
</div>
<div class="col-lg-2 text-center">
<img src="assets/images/avatars/a3.png" class=" img-circle"/>
<br><i>Dorothy</i>
</div>
</div>
<div class="row mt-20">
<div class="col-lg-4 text-center">
<img src="assets/images/avatars/a4.png" class=" img-circle"/>
<br><i>Barbara</i>
</div>
<div class="col-lg-4 text-center">
<img src="assets/images/avatars/a5.png" class=" img-circle"/>
<br><i>Yohan</i>
</div>
<div class="col-lg-4 text-center">
<img src="assets/images/avatars/a6.png" class=" img-circle"/>
<br><i>Hild</i>
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<b style="font-size: 100px">...</b>
<div class="col-lg-2 text-center">
<b style="font-size: 100px">...</b>
</div>
</div>
</div>
......@@ -176,12 +179,6 @@
<div class="row">
<div class="col-md-6 text-center">
<h3>Genome Jumper</h3>
<h5>
<a href="https://pinterac.net" target="_blank">Press</a>
</h5>
<h5>
<a href="https://pinterac.net" target="_blank">Contact</a>
</h5>
<h5><img id="sibLogo" src="assets/images/sib.png">
<a href="https://www.sib.swiss/" target="_blank">Swiss Institute of Bioinformatics</a>
</h5>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment