1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JCVD POWA !!!! XD XD XD</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('body,#content').css({'overflow':'hidden'});
$('#nav a').slice(1,5).bind('click',function(e){
e.preventDefault();
$('#nav a').removeClass('current');
$(this).addClass('current');
var cible = $(this).attr('href');
$('html, body').stop().animate({
scrollLeft: $(cible).offset().left,
scrollTop: $(cible).offset().top
}, 500);
});
$('#nav a:first').bind('click',function(e){
e.preventDefault();
$('#nav a').each(function(i){
if($(this).hasClass('current')) positionCurrent = i;
});
if(positionCurrent != 1){
$('#nav a').eq(positionCurrent - 1).trigger('click');
}
});
$('#nav a:last').bind('click',function(e){
e.preventDefault();
$('#nav a').each(function(i){
if($(this).hasClass('current')) positionCurrent = i;
});
if(positionCurrent != 4){
$('#nav a').eq(positionCurrent + 1).trigger('click');
}
});
});
</script>
<style type="text/css">
body,#content{width:3000px;}
#nav{position:fixed;top:0;left:0;}
#nav li{display:inline-block;}
#nav a{display:block;width:15px;height:15px;margin:0 10px;padding:5px;text-decoration:none;background-color:black;color:white;border:1px solid black;}
#nav a:hover{background-color:white;color:black;}
#content{margin:40px 0 0 0;}
.article{width:480px;float:left;margin:0 10px;}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#"><</a></li>
<li><a href="#uneAncre" class="current">1</a></li>
<li><a href="#uneAutreAncre">2</a></li>
<li><a href="#encoreUneAncre">3</a></li>
<li><a href="#etEncoreUneAncre">4</a></li>
<li><a href="#">></a></li>
</ul>
<div id="content">
<div id="uneAncre" class="article">
<p>You see, premièrement, il y a de bonnes règles, de bonnes rules et c'est une sensation réelle qui se produit si on veut ! Et là, vraiment, j'essaie de tout coeur de donner la plus belle réponse de la terre ! </p>
<p>Quand tu fais le calcul, si vraiment tu veux te rappeler des souvenirs de ton perroquet, en vérité, la vérité, il n'y a pas de vérité parce que spirituellement, on est tous ensemble, ok ? Et j'ai toujours grandi parmi les chiens. </p>
<p>Je ne voudrais pas rentrer dans des choses trop dimensionnelles, mais, tu vois au passage qu'il n'y a rien de concret car le cycle du cosmos dans la vie... c'est une grande roue et finalement tout refaire depuis le début. Mais ça, c'est uniquement lié au spirit. </p>
</div>
<div id="uneAutreAncre" class="article">
<p>Tu comprends, je sais que, grâce à ma propre vérité entre penser et dire, il y a un monde de différence car l'aboutissement de l'instinct, c'est l'amour ! Mais ça, c'est uniquement lié au spirit. </p>
<p>Ça sounds good, si vraiment tu veux te rappeler des souvenirs de ton perroquet, on vit dans une réalité qu'on a créée et que j'appelle illusion et je ne cherche pas ici à mettre un point ! C'est pour ça que j'ai fait des films avec des replicants. </p>
<p>Si je t'emmerde, tu me le dis, je ne suis pas un simple danseur car c'est juste une question d'awareness et je ne cherche pas ici à mettre un point ! Mais ça, c'est uniquement lié au spirit. </p>
</div>
<div id="encoreUneAncre" class="article">
<p>Ça sounds good, si vraiment tu veux te rappeler des souvenirs de ton perroquet, on vit dans une réalité qu'on a créée et que j'appelle illusion et je ne cherche pas ici à mettre un point ! C'est pour ça que j'ai fait des films avec des replicants. </p>
<p>Si je t'emmerde, tu me le dis, je ne suis pas un simple danseur car c'est juste une question d'awareness et je ne cherche pas ici à mettre un point ! Mais ça, c'est uniquement lié au spirit. </p>
<p>Tu vois, après il faut s'intégrer tout ça dans les environnements et il faut se recréer... pour recréer... a better you et c'est très, très beau d'avoir son propre moi-même ! Mais ça, c'est uniquement lié au spirit. </p>
<p>Tu comprends, là on voit qu'on a beaucoup à travailler sur nous-mêmes car entre penser et dire, il y a un monde de différence et parfois c'est bon parfois c'est pas bon. C'est pour ça que j'ai fait des films avec des replicants. </p>
</div>
<div id="etEncoreUneAncre" class="article">
<p>Tu vois, après il faut s'intégrer tout ça dans les environnements et il faut se recréer... pour recréer... a better you et c'est très, très beau d'avoir son propre moi-même ! Mais ça, c'est uniquement lié au spirit. </p>
<p>Tu comprends, là on voit qu'on a beaucoup à travailler sur nous-mêmes car entre penser et dire, il y a un monde de différence et parfois c'est bon parfois c'est pas bon. C'est pour ça que j'ai fait des films avec des replicants. </p>
<p>You see, premièrement, entre penser et dire, il y a un monde de différence et je ne cherche pas ici à mettre un point ! Il y a un an, je t'aurais parlé de mes muscles. </p>
</div>
</div>
</body>
</html> |
Comment faire un site à lecture horizontale ?
Répondre avec citation
Partager