Commit 8287bf02 authored by Daniel Teixeira's avatar Daniel Teixeira

adding css

parent 9fae4623
......@@ -63,7 +63,7 @@ a:hover {
}
.stores img {
width: 200px;
width: 180px;
}
#iGimg {
......
......@@ -82,9 +82,7 @@
</div>
<div class="col-lg-8 col-md-8 text-left">
<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.
What varies from one human to another, such as the colour of our skin, the colour of our eyes, or our ability to tolerate dairy products for example, is found in the other 0.1% of our respective genomes! These differences are called variants.
<p>Genome Jumper, a mobile platform game powered by the SIB Swiss Institute of Bioinformatics, takes you on a journey to explore our genome and its variations. As far as scientists know today, humans are thought to share up to 99.9% of their genetic information. What varies from one human to another therefore often comes down to a very little amount of differences. These genetic differences are called variants.
</p>
</div>
</div>
......@@ -96,8 +94,8 @@
<div class="row">
<div class="col-lg-12 text-center">
<h2>How do I play?</h2>
<p>Start your adventure with an unknown character (from a total of 25) 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>Run along the genomic sequence of over 30 genes to collect unique variants and watch your character 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 to jump over secondary structures, while collecting as many points as possible.
</p>
<div class="row mt-50">
<div class="col-lg-4 text-center mt-10">
......@@ -113,6 +111,34 @@
<br><i>Avoid secondary structures and don't fall in the introns!</i>
</div>
</div>
<div class="row mt-50">
<h2>Meet some of the characters</h2>
<p>You will discover 25 characters, each of which represents a different population around the globe.</p>
<div class="col-lg-2 text-center">
<b style="font-size: 100px">...</b>
</div>
<div class="col-lg-2 text-center mt-10">
<img id="img-game-1" src="assets/images/avatars/a4.png" class="img-circle img-game" style="max-width: 300px"/>
<br><i>Barbara.</i>
</div>
<div class="col-lg-2 text-center mt-10">
<img id="img-game-2" src="assets/images/avatars/a2.png" class="img-circle img-game" style="max-width: 300px"/>
<br><i><b>Susumu.</b></i>
</div>
<div class="col-lg-2 text-center mt-10">
<img id="img-game-3" src="assets/images/avatars/a5.png" class="img-circle img-game" style="max-width: 300px"/>
<br><i>Yohan</i>
</div>
<div class="col-lg-2 text-center mt-10">
<img id="img-game-3" src="assets/images/avatars/a3.png" class="img-circle img-game" style="max-width: 300px"/>
<br><i>Dorothy</i>
</div>
<div class="col-lg-2 text-center">
<b style="font-size: 100px">...</b>
</div>
</div>
</div>
</div>
</div>
......@@ -120,47 +146,31 @@
<div class="section sectionBg pt-40 pb-50">
<div class="container">
<div class="row">
<div class="col text-center">
<h2>Meet some of the characters</h2>
</div>
</div>
<div class="row mt-50">
<div class="col-lg-2 text-center">
<b style="font-size: 100px">...</b>
</div>
<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-2 text-center">
<img src="assets/images/avatars/a5.png" class=" img-circle"/>
<br><i>Yohan</i>
<div class="container">
<div class="row mt-20">
<div class="col-lg-4 col-md-4 text-center">
<img src="assets/images/bubbles.png" class="w100"/>
</div>
<div class="col-lg-8 col-md-8 text-left">
<h2>Genes are only a part of the story</h2>
<p>The variants illustrated in this game highlight some of the best-known cases associating them to a particular phenotype. However, such link is extremely complicated to establish, with millions human variants, often interacting among each other, and the environment and other external factors playing a key role.
It is precisely the purpose of bioinformatics and of life scientists to study and to better understand such links.
</p>
</div>
</div>
<div class="col-lg-2 text-center">
<img src="assets/images/avatars/a3.png" class=" img-circle"/>
<br><i>Dorothy</i>
</div>
<div class="col-lg-2 text-center">
<b style="font-size: 100px">...</b>
</div>
</div>
</div>
</div>
<div class="section pt-20 pb-50">
<div class="container">
<div class="row mt-20">
<h2 class="text-center">About the SIB Swiss Institute of Bioinformatics</h2><br>
<div class="col-md-4 pt-80 text-center">
<iframe width="350" height="315" src="https://www.youtube.com/embed/182AzhLiwxc" frameborder="0" allowfullscreen></iframe>
</div>
<div class="col-md-8">
<h2 class="text-center">About the SIB Swiss Institute of Bioinformatics</h2><br>
<p>The <a target="_blank" href="https://www.sib.swiss/">SIB Swiss Institute of Bioinformatics</a> is a non-profit organization federating about 800 scientists in Switzerland.</p>
<p>Its missions are:
<ol type="1">
......@@ -175,6 +185,7 @@
</div>
</div>
<div id="footer" class="section-black pb-20">
<div class="container">
<div class="row">
......
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