You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
5.5 KiB
122 lines
5.5 KiB
<!DOCTYPE html> |
|
<html class="" lang="fr"> |
|
<head> |
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>/dev/fsociety | The best device ever!</title> |
|
<link rel="stylesheet" href="css/foundation.css"> |
|
<link rel="stylesheet" href="css/app.css"> |
|
<meta class="foundation-mq"> |
|
|
|
<script> |
|
function placeholder(obj){ |
|
obj.src = "img/placeholder.png"; |
|
} |
|
</script> |
|
</head> |
|
<body data-whatinput="mouse"> |
|
<div class="callout large"> |
|
<div class="row column text-center"> |
|
<h1 style="font-size: 6em;">/ dev / fsociety</h1> |
|
</div> |
|
</div> |
|
<div class="row"> |
|
<div class="medium-12 large-6 columns"> |
|
<h2>Notre site</h2> |
|
<a id="badass" href="https://nuit-info.insa-cvl.fr/sites/fsociety/fsite">Découvrez notre site</a> |
|
</div> |
|
<!-- <div class="large-6 medium-12 columns"> |
|
<h2>La saison 2, encore plus BADASS !</h2> |
|
<p class="lead countdown"> |
|
Découvrez notre magnifique site dans :<br/><span id="clock"></span></p> |
|
|
|
</div> --> |
|
<div id="div-logo" class="medium-12 large-6 columns"> |
|
<img class="character" src="img/logo.png"> |
|
</div> |
|
</div> |
|
<div class="row"> |
|
<p class="text-center"> |
|
<a href="https://youtu.be/rq1lsbsQA-4" >La vidéo de notre aventure informatique !</a> |
|
</p> |
|
</div> |
|
<hr> |
|
<div class="row column"> |
|
<h2>Des personnages cultes et des nouveaux venus</h2> |
|
</div> |
|
<div class="row"> |
|
<div class="small-6 medium-3 column member" style="height: 298px;"> |
|
<img class="thumbnail character" src="img/anthony.jpg" style="display: block; z-index: 2;"> |
|
<img class="thumbnail real" src="img/anthony_r.jpg" style="z-index: 1; display: block;"> |
|
<p style="top: 242px;">Anthony Gourd</p> |
|
</div> |
|
<div class="small-6 medium-3 column member" style="height: 298px;"> |
|
<img class="thumbnail character" src="img/alban.jpg" style="display: block; z-index: 2;"> |
|
<img class="thumbnail real" src="img/alban_r.jpg" style="z-index: 1; display: block;" onerror="placeholder(this)"> |
|
<p style="top: 242px;">Alban Chazot</p> |
|
</div> |
|
<div class="small-6 medium-3 column member" style="height: 298px;"> |
|
<img class="thumbnail character" src="img/yann.jpg"> |
|
<img class="thumbnail real" src="img/yann_r.jpg" onerror="placeholder(this)"> |
|
<p style="top: 242px;">Yann Caumartin</p> |
|
</div> |
|
<div class="small-6 medium-3 column member" style="height: 298px;"> |
|
<img class="thumbnail character" src="img/lisa.jpg"> |
|
<img class="thumbnail real" src="img/lisa_r.jpg" onerror="placeholder(this)"> |
|
<p style="top: 242px;">Lisa Aubry</p> |
|
</div> |
|
</div> |
|
<div class="row"> |
|
<div class="small-6 medium-3 column member" style="height: 298px;"> |
|
<img class="thumbnail character" src="img/korlan.jpg"> |
|
<img class="thumbnail real" src="img/korlan_r.jpg" onerror="placeholder(this)"> |
|
<p style="top: 242px;">Korlan Colas</p> |
|
</div> |
|
<div class="small-6 medium-3 column member" style="height: 298px;"> |
|
<img class="thumbnail character" src="img/corentin.jpg"> |
|
<img class="thumbnail real" src="img/corentin_r.jpg"> |
|
<p style="top: 242px;">Corentin Mors</p> |
|
</div> |
|
<div class="small-6 medium-3 column member" style="height: 298px;"> |
|
<img class="thumbnail character" src="img/gaetan.png"> |
|
<img class="thumbnail real" src="img/gaetan_r.jpg" onerror="placeholder(this)"> |
|
<p style="top: 242px;">Gaetan Menat</p> |
|
</div> |
|
<div class="small-6 medium-3 column member" style="height: 298px;"> |
|
<img class="thumbnail character" src="img/kevin.png"> |
|
<img class="thumbnail real" src="img/kevin_r.jpg" onerror="placeholder(this)"> |
|
<p style="top: 242px;">Kévin Cohen-Tanugi</p> |
|
</div> |
|
</div> |
|
<div class="row"> |
|
<div class="small-6 medium-3 medium-offset-3 column member" style="height: 298px;"> |
|
<img class="thumbnail character" src="img/pierre.jpeg"> |
|
<img class="thumbnail real" src="img/pierre_r.jpg" onerror="placeholder(this)"> |
|
<p style="top: 242px;">Pierre Bouwet</p> |
|
</div> |
|
<div class="small-6 medium-3 end column member" style="height: 298px;"> |
|
<img class="thumbnail character" src="img/samuel.jpg"> |
|
<img class="thumbnail real" src="img/samuel_r.jpeg"> |
|
<p style="top: 242px;">Samuel Forestier</p> |
|
</div> |
|
</div> |
|
<hr> |
|
<div class="row column"> |
|
<blockquote>Réalisé par l'équipe <span class="mr-robot">/dev/fsociety</span> à l'occasion de la <a href="http://www.nuitdelinfo.com/">Nuit de l'Info 2016</a></blockquote> |
|
</div> |
|
<script src="js/jquery_002.js"></script> |
|
<script src="js/what-input.js"></script> |
|
<script src="js/foundation.js"></script> |
|
<script src="js/app.js"></script> |
|
<script src="js/jquery.js"></script> |
|
<script src="js/fade_photo.js"></script> |
|
<script> |
|
$(document).foundation(); |
|
$('#clock').countdown('2016/12/02 08:00:00', function(event) |
|
{ |
|
$(this).html(event.strftime('%D jours %H heures %M minutes %S secondes')); |
|
}); |
|
</script> |
|
</body> |
|
</html>
|
|
|