-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
184 lines (167 loc) · 9.88 KB
/
index.html
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE HTML>
<html>
<head>
<title>Le Beau Jeu</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<link rel="canonical" href="https://www.lebeaujeu.com/"/>
</head>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header" class="alt">
<span class="logo"><img src="images/logo-lbj.svg" /></span>
<h1>Le beau Jeu</h1>
<p>La première communauté slack francophone<br /> d'experts dans le web et le digital
<ul class="actions">
<li><a href="https://lebeaujeu.herokuapp.com/" class="button special" onClick="ga('send', 'event', 'Button', 'Click', 'Subscribe');">C'est parti !</a></li>
<li><a href="#why" class="button" onClick="ga('send', 'event', 'Button', 'Click', 'TellMeMore');">Dis-moi en plus avant</a></li>
</ul>
</header>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="#why" class="active" onClick="ga('send', 'event', 'Button', 'Click', 'Why');">Pourquoi nous rejoindre ?</a></li>
<li><a href="#who" onClick="ga('send', 'event', 'Button', 'Click', 'Who');">Qui vais-je côtoyer ?</a></li>
<li><a href="#what" onClick="ga('send', 'event', 'Button', 'Click', 'What');">Voir la liste des channels</a></li>
</ul>
</nav>
<!-- Main -->
<div id="main">
<!-- Introduction -->
<section id="why" class="main">
<div class="spotlight">
<div class="content">
<header class="major">
<h2>Pourquoi nous rejoindre ?</h2>
</header>
<p>Dans un web en révolution perpétuelle la seule valeur sûre devient <strong>notre réseau</strong>. Slack a permis le succès de nombreuses aventures en start-ups comme en grandes entreprises mais force est de constater que :</p>
<ul class="facts">
<li>Il est difficile d'échanger sur les sujets qui nous rassemblent lorsque nos carrières se séparent</li>
<li>Les contacts se font par des réseaux sociaux trop "sérieux" tels que LinkedIn.</li>
<li>Les sites de news et forums sont des zones anonymes dans lesquels il est difficile d'extraire des informations pertinantes.</li>
</ul>
<p>Avec ce slack, <strong>nous voulons vous réunir</strong> dans une communauté, vous les beaux joueurs toujours à l'affût dans votre domaine. Partager ici vos bons articles, vos retours d'expériences, de l'humour, votre entraide, vos tweets et vos blogs
... <strong>Soyez libres</strong></p>
<p>Vous resterez ainsi <strong>au courant des tendances du web</strong>, vous aurez aussi l'accès aux <strong>conseils/avis de personnes de confiance</strong> de notre communauté.</p>
<ul class="actions">
<li><a href="#who" class="button" onClick="ga('send', 'event', 'Button', 'Click', 'Who');">Qui vais-je côtoyer ?</a></li>
</ul>
</div>
<span class="image"><img src="images/pic01.jpg" alt="" /></span>
</div>
</section>
<!-- First Section -->
<section id="who" class="main special">
<header class="major">
<h2>Qui vais-je côtoyer ?</h2>
</header>
<p>Vous allez côtoyer des personnes de confiance de notre communauté réparties en 4 catégories principales de compétences.</p>
<ul class="features">
<li>
<span class="icon major style1 fa-code"></span>
<h3>Développeurs, Lead Dev</h3>
<p>La crème des développeurs issus de notre réseau personnel. Javascript, PHP, Ruby, CSS, ...</p>
</li>
<li>
<span class="icon major style3 fa-cogs"></span>
<h3>Architectes, DevOps</h3>
<p>Des experts du cloud au maestro de la supervision croisé au cours de nos projets.</p>
</li>
<li>
<span class="icon major style5 fa-paint-brush"></span>
<h3>Designers, UX, intégrateurs</h3>
<p>On ne vous oublie pas, vous avez permis de sortir des sites magnifiques et ergonomiques.</p>
</li>
<li>
<span class="icon major style4 fa-users"></span>
<h3>Décideurs, visionnaires</h3>
<p>Vous avez une vision d'ensemble, une expérience éprouvée dans la gestion de projets web et digitaux.</p>
</li>
</ul>
<footer class="major">
<ul class="actions">
<li><a href="#what" class="button" onClick="ga('send', 'event', 'Button', 'Click', 'What');">Voir la liste des channels</a></li>
<li><a href="https://lebeaujeu.herokuapp.com/" class="button special" onClick="ga('send', 'event', 'Button', 'Click', 'Subscribe');">C'est parti !</a></li>
</ul>
</footer>
</section>
<!-- First Section -->
<section id="what" class="main special">
<header class="major">
<h2>La liste des channels</h2>
</header>
<div id="channels"></div>
<footer class="major">
<ul class="actions">
<li><a href="https://lebeaujeu.herokuapp.com/" class="button special" onClick="ga('send', 'event', 'Button', 'Click', 'Subscribe');">C'est parti pour le beau jeu !</a></li>
</ul>
</footer>
</section>
</div>
<!-- Footer -->
<footer id="footer">
<section>
<h2>Qui se cache derrière ce site ?</h2>
<div class="spotlight">
<div class="content">
<p><a href="https://cedric.bazureau.com">Cédric Bazureau</a>, gourou du beau jeu. Créateur du site et du slack du beau jeu.</p>
</div>
<span class="image image-small"><img src="images/cedric.jpg" alt="Cédric Bazureau" /></span>
</div>
<div class="spotlight">
<div class="content">
<p>Antoine Leproust, beau joueur en herbe. Top contributeur du beau jeu.</p>
</div>
<span class="image image-small"><img src="images/leproust.jpg" alt="Antoine Leproust" /></span>
</div>
<div class="spotlight">
<div class="content">
<p>Dimitri Hautot, animateur du beau jeu et également un top contributeur.</p>
</div>
<span class="image image-small"><img src="images/dimitri.jpg" alt="Dimitri Hautot" /></span>
</div>
<p>Un grand merci à Clémentine Cerbelle pour le logo et à Maxime Ménard pour le beau jeu.</p>
</section>
<section>
<h2>D'où vient Le Beau Jeu ?</h2>
<p>Le beau jeu c'est l'idée que nous pouvons tous apporter un plus dans ce que l'on entreprend. Une évolution technique, un plus fonctionnel, une envie de bien faire, c'est la marque que chacun
laissera à travers les expériences.
</p>
<h2>Je veux une tasse LbJ !</h2>
<div class="spotlight">
<div class="content">
<p>La production de masse n'est pas encore en place, on vous tiendra informé sur le slack dès qu'on en aura !</p>
</div>
<span class="image image-small"><img src="images/tasse.jpg" alt="Tasse LBJ" /></span>
</div>
</section>
<p class="copyright">© Le Beau Jeu. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
</footer>
<div id="preload-heroku"></div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
<!-- Tagging -->
<script src="https://carapuce-backend.herokuapp.com/lib"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-795948-5', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>