Skip to content

GitLab

G
genome-jumper
Commit 826ea250 authored by Yohan Bouché's avatar Yohan Bouché
Browse files
Options

last verison landing page

parent c25e89e5
Hide whitespace changes
Inline Side-by-side
Showing with 53 additions and 36 deletions
assets/css/main.css
View file @ 826ea250
......@@ -17,9 +17,9 @@ a:hover {
#twentyyearsribbon{
position: absolute;
top: 0px;
top: -10px;
left: 5%;
width: 10%;
width: 20%;
}
#header {
......@@ -34,6 +34,7 @@ a:hover {
#header h1 {
font-size: 6em;
font-weight: bold;
text-shadow: 0px 0px 26px black, 0px 0px 26px black;
}
#header h3 {
......@@ -41,8 +42,10 @@ a:hover {
}
.sectionBg {
background-image: url("../../assets/images/bg_section.jpg");
background-repeat: repeat;
/*background-image: url("../../assets/images/bg_section.jpg");
background-repeat: repeat;*/
background-color: #333333;
color: white;
}
.section {
......
assets/images/bg_header.jpg
View replaced file @ c25e89e5 View file @ 826ea250
assets/images/bg_header.jpg

230 KB | W: | H:

assets/images/bg_header.jpg

166 KB | W: | H:

assets/images/bg_header.jpg
assets/images/bg_header.jpg
assets/images/bg_header.jpg
assets/images/bg_header.jpg
  • 2-up
  • Swipe
  • Onion skin
assets/images/bubbles.png
View replaced file @ c25e89e5 View file @ 826ea250
assets/images/bubbles.png

29.3 KB | W: | H:

assets/images/bubbles.png

40.6 KB | W: | H:

assets/images/bubbles.png
assets/images/bubbles.png
assets/images/bubbles.png
assets/images/bubbles.png
  • 2-up
  • Swipe
  • Onion skin
index.html
View file @ 826ea250
......@@ -25,7 +25,7 @@
<body>
<div id="header">
<img src="assets/images/20_years_ribbon.png" id="twentyyearsribbon">
<img src="assets/images/SIB_logo_20ans_white.png" id="twentyyearsribbon">
<div class="row mlmr-none mt-80">
<div class="col text-center">
......@@ -59,8 +59,8 @@
</div>
<div class="col-lg-8 col-md-8 text-left">
<h2>Discover the human genome</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>This game takes you into the world of <b>the human genome</b> and its variations! You will have to complete several genes to reveal the different avatars! In each level (gene) you will have to take the "start codon", the "stop codon" and the "variation" to complete your avatar. You will quickly understand that it will be enough for you a small variation in the DNA 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 our DNA!</p>
</div>
</div>
......@@ -70,15 +70,24 @@
<div class="section pt-40 pb-50">
<div class="container">
<div class="row">
<div class="col-lg-8 text-center">
<h2>Gameplay footage</h2>
<video width="640" controls class="w100 mt-20">
<source src="assets/movies/Game_PV03.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="col-lg-4 text-center mt-80">
<img src="assets/images/items2.png"/>
<div class="col-lg-12 text-center">
<h2>Explore more than 35 genes</h2>
<p>The SIB Swiss Institute of Bioinformatics offers you to play more than 35 genes each containing an associated variation.<br>In real life, you should know that each of us has more than 20,000 genes with millions of variations, so we are all so different from each other!</p>
<p>Beware of the secondary structure, try to avoid them as much as possible!</p>
<div class="row mt-50">
<div class="col-lg-4 text-center mt-10">
<img src="assets/images/enemies/enemyFlying.png" class=""/>
<br><i>Flying Enemy</i>
</div>
<div class="col-lg-4 text-center mt-10">
<img src="assets/images/enemies/enemyTripleMini.png" class=""/>
<br><i>Multiple edges Enemy</i>
</div>
<div class="col-lg-4 text-center mt-10">
<img src="assets/images/enemies/enemySingle.png" class=""/>
<br><i>Tall Enemy</i>
</div>
</div>
</div>
</div>
</div>
......@@ -89,35 +98,40 @@
<div class="container">
<div class="row">
<div class="col text-center">
<h2>Multiple playable genes</h2>
<h2>+25 unique playable avatars</h2>
</div>
</div>
<div class="row mt-20">
<div class="col-lg-3 text-center">
<img src="assets/images/ig.jpg" class="img-responsive img-circle"/>
</div>
<div class="col-lg-3 text-center">
<img src="assets/images/ig.jpg" class="img-responsive img-circle"/>
<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>
<div class="col-lg-3 text-center">
<img src="assets/images/ig.jpg" class="img-responsive img-circle"/>
<div class="col-lg-4 text-center">
<img src="assets/images/avatars/a2.png" class=" img-circle"/>
<br><i>Susumu</i>
</div>
<div class="col-lg-3 text-center">
<img src="assets/images/ig.jpg" class="img-responsive img-circle"/>
<div class="col-lg-4 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-3 text-center">
<img src="assets/images/ig.jpg" class="img-responsive img-circle"/>
<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-3 text-center">
<img src="assets/images/ig.jpg" class="img-responsive img-circle"/>
<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-3 text-center">
<img src="assets/images/ig.jpg" class="img-responsive img-circle"/>
<div class="col-lg-4 text-center">
<img src="assets/images/avatars/a6.png" class=" img-circle"/>
<br><i>Hild</i>
</div>
<div class="col-lg-3 text-center">
<img src="assets/images/ig.jpg" class="img-responsive img-circle"/>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<b style="font-size: 100px">...</b>
</div>
</div>
</div>
......@@ -127,7 +141,7 @@
<div class="container">
<div class="row mt-20">
<div class="col-md-4 text-center">
<img src="assets/images/items1.png"/>
<img src="assets/images/sib.png" class="mt-80"/>
</div>
<div class="col-md-8">
<h2 class="text-center">About the Swiss Institute of Bioinformatics</h2><br>
......
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