-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
198 lines (190 loc) · 9.03 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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
---
layout: default
title: Association de développeurs et développeuses en Drôme et Ardèche
image: https://pbs.twimg.com/media/D06oy8XXgAMASGG?format=jpg&name=medium
description: Ardèch'Drôm Dev est une association loi de 1901 qui a pour but d’aider les professionnels, étudiants et plus largement les acteurs du numérique en Drôme et Ardèche. Elle offre la possibilité d’échanger et de partager son expérience lors de rendez-vous.
---
<section class="home" xmlns="http://www.w3.org/1999/html">
<div class="container">
<h1>Ardèch'Drôm Dev</h1>
<p class="font-weight-bolder">La communauté des développeurs et développeuses en Drôme & Ardèche</p>
<p class="py-3">
<a href="/subscription" class="btn btn-secondary btn-lg shadow-lg">
<i class="fas fa-hands-helping mr-1"></i>Nous soutenir
</a>
<a href="https://mobilizon.fr/@ardech_drom_dev/events" targer="_blank"
class="btn btn-light btn-lg shadow-lg">
<i class="far fa-calendar-alt mr-1"></i> Voir nos événements
</a>
</p>
</div>
</section>
<section class="py-5 border-bottom">
<div class="container">
<h2 class="text-center mb-4"><i class="fas fa-question"></i> Qu’est-ce que ADD ?</h2>
<p>
<strong>Ardèch'Drôm Dev est une association</strong> loi de 1901 qui a pour but d’aider les professionnels, étudiants et plus
largement les acteurs du numérique drômardéchois (développement, infrastructure, devops, agilité, scrum, marketing et communication, design,
juridique, etc.). Elle offre la possibilité d’échanger et de partager son expérience lors de rendez-vous.
L’association vise aussi à rendre visible et à promouvoir ces métiers sur le territoire.
</p>
<p>
Le champ d’activité de l’association se situe <strong>autour de Valence</strong> et concerne les départements
de la <strong>Drôme et de l’Ardèche</strong>. Les différents formats proposés sont : conférence, coding-dojo,
atelier... Que vous soyez en formation dans le <strong>domaine du web</strong>, développeur dans
l'informatique embarquée ou encore dans le <strong>big data</strong>, vous trouverez très certainement une
oreille attentive parmi nos nombreux membres.
</p>
<p>
Les <strong>rendez-vous</strong> de l'association sont généralement <strong>mensuel</strong>, en présentiel
et parfois en ligne.
</p>
<p>
ADD propose de revoir des événements précédents avec des vidéos sur sa <strong>chaîne YouTube</strong>.
Les échanges peuvent aussi se prolonger en ligne grâce à son espace sur <strong>Slack</strong>.
</p>
<p>
L’association est indépendante de tout mouvement politique, religieux, syndicaliste ou philosophique.
</p>
</div>
</section>
<section class="bg-gray">
<div class="container pt-5 pb-5">
<div class="row">
<div class="col-md-4 col-sm-6 mb-3 text-center">
<i class="fas fa-chalkboard-teacher fa-7x"></i>
<h3 class="card-title">Conférence</h3>
<p class="card-text">Des conférences en amphithéâtre</p>
</div>
<div class="col-md-4 col-sm-6 mb-3 text-center">
<i class="fas fa-user-friends fa-7x"></i>
<h3 class="card-title">Coding dojo</h3>
<p class="card-text">Améliore ta pratique du code</p>
</div>
<div class="col-md-4 col-sm-6 mb-3 text-center">
<i class="fas fa-link fa-7x"></i>
<h3 class="card-title">Réseautage</h3>
<p class="card-text">Construis ton réseau et partage ton expérience</p>
</div>
</div>
</div>
</section>
<section class="py-5">
<h2 class="text-center mb-4"><i class="far fa-images"></i> Nos conférences en images</h2>
<div class="container card-columns">
<div class="card">
<img class="card-img" src="https://pbs.twimg.com/media/ERKV4q3XsAYl_Wj?format=jpg&name=large"
alt="Conférence Tensorflow, there is no spoon par Tiffany Souterre">
</div>
<div class="card">
<img class="card-img" src="https://pbs.twimg.com/media/EG8AT84WsAE5mBl?format=jpg&name=large"
alt="Conférence Elixir">
</div>
<div class="card">
<img class="card-img" src="https://pbs.twimg.com/media/EAyDGo0W4AA-Hzq?format=jpg&name=large"
alt="Apéro d'été au château de Crussol">
</div>
<div class="card">
<img class="card-img" src="https://pbs.twimg.com/media/D_nffLNWkAU6VBc?format=jpg&name=large"
alt="Coding dojo au Campus Numérique">
</div>
<div class="card">
<img class="card-img" src="https://pbs.twimg.com/media/D6tIWWNWwAAhtR1?format=jpg&name=large"
alt="Coding Dojo à l'IUT de Valence">
</div>
<div class="card">
<img class="card-img" src="https://pbs.twimg.com/media/D4S3m7VWwAEFgwb?format=jpg&name=large"
alt="Coding dojo au Campus Numérique">
</div>
<div class="card">
<img class="card-img" src="https://pbs.twimg.com/media/D06oy8XXgAMASGG?format=jpg&name=medium"
alt="Conférence ReactJS à Saint-Peray">
</div>
<div class="card">
<img class="card-img" src="https://pbs.twimg.com/media/DzOarQ3WoAEuQLy?format=jpg&name=large"
alt="Présentation ADD par Matthieu">
</div>
</div>
</section>
<section class="py-5 border-bottom bg-light">
<div class="container text-center">
<h2><i class="fas fa-link"></i> Rejoignez-nous sur</h2>
<p>
{% for link in site.data.socials-networks %}
<a href="{{ link.url }}" target="_blank" class="btn btn-secondary btn-lg shadow m-3"><i
class="{{link.icon}} mr-1"></i>
{{ link.name }}</a>
{% endfor %}
</p>
</div>
</div>
</section>
<section class="py-5">
<div class="container">
<h2 class="mb-4"><i class="fab fa-youtube"></i> Revoir une conférence</h2>
<div class="row" id="videos"></div>
<p class="text-right mt-4">
<a href="/replay.html" class="btn btn-secondary"><i class="fas fa-video"></i> Toutes nos vidéos</a>
</p>
</div>
</section>
<section>
<div class="container">
<h2 class="mb"><i class="far fa-handshake"></i> Nos partenaires</h2>
<div class="row">
<div class="col-md-12 text-center">
<a href="https://winzana.com" target="_blank"><img src="/assets/img/logo-winzana.png"
class="img-fluid" alt="Winzana"></a>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<h2 class="mb-4 mt-1"><i class="far fa-thumbs-up"></i> Ils nous soutiennent</h2>
<div class="row">
<div class="col-md-6 col-sm-12 text-center">
<img src="https://www.iut-valence.fr/uas/iut-valence/LOGO/Logo_IUTValence_2020_RVB.png"
class="img-fluid" alt="IUT Valence">
</div>
<div class="col-md-6 col-sm-12 text-center">
<img src="/assets/img/logo-campus-transparent.png" class="img-fluid" alt="Campus numérique in the Alps">
</div>
</div>
</div>
</section>
<script type="text/html" id="card-template">
<div class="col-md-4 col-sm-6 mb-3">
<div class="card h-100">
<img width="100%" class="card-img-top" src="{image}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">{title}</h5>
<p class="card-text">{description}</p>
</div>
<div class="card-footer text-center">
<a href="{link}" target="_blank" class="btn btn-primary">Voir la video</a>
</div>
</div>
</div>
</script>
<script>
$(function () {
let apiKey = 'AIzaSyAFuQSuuh7Q6R7ruZQD60NyfwWudXp3oLg';
let channelId = 'UCGeZ9KihmkrUc_Zq9EcDFUQ';
let entrypoint = 'https://www.googleapis.com/youtube/v3/search?key=' + apiKey + '&channelId=' + channelId + '&part=snippet,id&order=date&maxResults=3&type=video';
$.get(entrypoint, (result) => {
let $container = $('#videos');
let htmlCard = window['card-template'].innerHTML;
$container.html('');
$.each(result.items, (key, item) => {
console.log(item);
$container.append(template(htmlCard, {
'image': item.snippet.thumbnails.high.url,
'title': item.snippet.title,
'description': item.snippet.description,
'link': 'https://www.youtube.com/watch?v=' + item.id.videoId
}));
});
});
});
</script>