diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..feb0ad5
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+__pycache__/
+db.sqlite3
+media/
+result
diff --git a/MANIFEST.in b/MANIFEST.in
new file mode 100644
index 0000000..9238f3a
--- /dev/null
+++ b/MANIFEST.in
@@ -0,0 +1,6 @@
+graft common_files/templates
+graft common_files/static
+graft site_statique/static
+graft site_statique/templates
+graft timeline/templates
+graft timeline/static
diff --git a/common_files/__init__.py b/common_files/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/common_files/admin.py b/common_files/admin.py
new file mode 100644
index 0000000..8c38f3f
--- /dev/null
+++ b/common_files/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/common_files/apps.py b/common_files/apps.py
new file mode 100644
index 0000000..fddedc1
--- /dev/null
+++ b/common_files/apps.py
@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class CommonFilesConfig(AppConfig):
+    name = 'common_files'
diff --git a/common_files/migrations/__init__.py b/common_files/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/common_files/models.py b/common_files/models.py
new file mode 100644
index 0000000..71a8362
--- /dev/null
+++ b/common_files/models.py
@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.
diff --git a/img/favicon.jpg b/common_files/static/common_files/img/favicon.jpg
similarity index 100%
rename from img/favicon.jpg
rename to common_files/static/common_files/img/favicon.jpg
diff --git a/img/header.jpg b/common_files/static/common_files/img/header.jpg
similarity index 100%
rename from img/header.jpg
rename to common_files/static/common_files/img/header.jpg
diff --git a/img/logo.jpg b/common_files/static/common_files/img/logo.jpg
similarity index 100%
rename from img/logo.jpg
rename to common_files/static/common_files/img/logo.jpg
diff --git a/vendor/appear.min.js b/common_files/static/common_files/vendor/appear.min.js
similarity index 100%
rename from vendor/appear.min.js
rename to common_files/static/common_files/vendor/appear.min.js
diff --git a/vendor/bootstrap.min.js b/common_files/static/common_files/vendor/bootstrap.min.js
similarity index 100%
rename from vendor/bootstrap.min.js
rename to common_files/static/common_files/vendor/bootstrap.min.js
diff --git a/vendor/bootstrap/css/bootstrap.css b/common_files/static/common_files/vendor/bootstrap/css/bootstrap.css
similarity index 100%
rename from vendor/bootstrap/css/bootstrap.css
rename to common_files/static/common_files/vendor/bootstrap/css/bootstrap.css
diff --git a/vendor/bootstrap/css/bootstrap.min.css b/common_files/static/common_files/vendor/bootstrap/css/bootstrap.min.css
similarity index 100%
rename from vendor/bootstrap/css/bootstrap.min.css
rename to common_files/static/common_files/vendor/bootstrap/css/bootstrap.min.css
diff --git a/vendor/bootstrap/fonts/glyphicons-halflings-regular.eot b/common_files/static/common_files/vendor/bootstrap/fonts/glyphicons-halflings-regular.eot
similarity index 100%
rename from vendor/bootstrap/fonts/glyphicons-halflings-regular.eot
rename to common_files/static/common_files/vendor/bootstrap/fonts/glyphicons-halflings-regular.eot
diff --git a/vendor/bootstrap/fonts/glyphicons-halflings-regular.svg b/common_files/static/common_files/vendor/bootstrap/fonts/glyphicons-halflings-regular.svg
similarity index 100%
rename from vendor/bootstrap/fonts/glyphicons-halflings-regular.svg
rename to common_files/static/common_files/vendor/bootstrap/fonts/glyphicons-halflings-regular.svg
diff --git a/vendor/bootstrap/fonts/glyphicons-halflings-regular.ttf b/common_files/static/common_files/vendor/bootstrap/fonts/glyphicons-halflings-regular.ttf
similarity index 100%
rename from vendor/bootstrap/fonts/glyphicons-halflings-regular.ttf
rename to common_files/static/common_files/vendor/bootstrap/fonts/glyphicons-halflings-regular.ttf
diff --git a/vendor/bootstrap/fonts/glyphicons-halflings-regular.woff b/common_files/static/common_files/vendor/bootstrap/fonts/glyphicons-halflings-regular.woff
similarity index 100%
rename from vendor/bootstrap/fonts/glyphicons-halflings-regular.woff
rename to common_files/static/common_files/vendor/bootstrap/fonts/glyphicons-halflings-regular.woff
diff --git a/vendor/bootstrap/fonts/glyphicons-halflings-regular.woff2 b/common_files/static/common_files/vendor/bootstrap/fonts/glyphicons-halflings-regular.woff2
similarity index 100%
rename from vendor/bootstrap/fonts/glyphicons-halflings-regular.woff2
rename to common_files/static/common_files/vendor/bootstrap/fonts/glyphicons-halflings-regular.woff2
diff --git a/vendor/bootstrap/js/bootstrap.js b/common_files/static/common_files/vendor/bootstrap/js/bootstrap.js
similarity index 100%
rename from vendor/bootstrap/js/bootstrap.js
rename to common_files/static/common_files/vendor/bootstrap/js/bootstrap.js
diff --git a/vendor/bootstrap/js/bootstrap.min.js b/common_files/static/common_files/vendor/bootstrap/js/bootstrap.min.js
similarity index 100%
rename from vendor/bootstrap/js/bootstrap.min.js
rename to common_files/static/common_files/vendor/bootstrap/js/bootstrap.min.js
diff --git a/css/creative.css b/common_files/static/common_files/vendor/creative.css
similarity index 100%
rename from css/creative.css
rename to common_files/static/common_files/vendor/creative.css
diff --git a/js/creative.js b/common_files/static/common_files/vendor/creative.js
similarity index 100%
rename from js/creative.js
rename to common_files/static/common_files/vendor/creative.js
diff --git a/css/creative.min.css b/common_files/static/common_files/vendor/creative.min.css
similarity index 100%
rename from css/creative.min.css
rename to common_files/static/common_files/vendor/creative.min.css
diff --git a/js/creative.min.js b/common_files/static/common_files/vendor/creative.min.js
similarity index 100%
rename from js/creative.min.js
rename to common_files/static/common_files/vendor/creative.min.js
diff --git a/vendor/font-awesome/css/font-awesome.css b/common_files/static/common_files/vendor/font-awesome/css/font-awesome.css
similarity index 100%
rename from vendor/font-awesome/css/font-awesome.css
rename to common_files/static/common_files/vendor/font-awesome/css/font-awesome.css
diff --git a/vendor/font-awesome/css/font-awesome.min.css b/common_files/static/common_files/vendor/font-awesome/css/font-awesome.min.css
similarity index 100%
rename from vendor/font-awesome/css/font-awesome.min.css
rename to common_files/static/common_files/vendor/font-awesome/css/font-awesome.min.css
diff --git a/vendor/font-awesome/fonts/FontAwesome.otf b/common_files/static/common_files/vendor/font-awesome/fonts/FontAwesome.otf
similarity index 100%
rename from vendor/font-awesome/fonts/FontAwesome.otf
rename to common_files/static/common_files/vendor/font-awesome/fonts/FontAwesome.otf
diff --git a/vendor/font-awesome/fonts/fontawesome-webfont.eot b/common_files/static/common_files/vendor/font-awesome/fonts/fontawesome-webfont.eot
similarity index 100%
rename from vendor/font-awesome/fonts/fontawesome-webfont.eot
rename to common_files/static/common_files/vendor/font-awesome/fonts/fontawesome-webfont.eot
diff --git a/vendor/font-awesome/fonts/fontawesome-webfont.svg b/common_files/static/common_files/vendor/font-awesome/fonts/fontawesome-webfont.svg
similarity index 100%
rename from vendor/font-awesome/fonts/fontawesome-webfont.svg
rename to common_files/static/common_files/vendor/font-awesome/fonts/fontawesome-webfont.svg
diff --git a/vendor/font-awesome/fonts/fontawesome-webfont.ttf b/common_files/static/common_files/vendor/font-awesome/fonts/fontawesome-webfont.ttf
similarity index 100%
rename from vendor/font-awesome/fonts/fontawesome-webfont.ttf
rename to common_files/static/common_files/vendor/font-awesome/fonts/fontawesome-webfont.ttf
diff --git a/vendor/font-awesome/fonts/fontawesome-webfont.woff b/common_files/static/common_files/vendor/font-awesome/fonts/fontawesome-webfont.woff
similarity index 100%
rename from vendor/font-awesome/fonts/fontawesome-webfont.woff
rename to common_files/static/common_files/vendor/font-awesome/fonts/fontawesome-webfont.woff
diff --git a/vendor/font-awesome/fonts/fontawesome-webfont.woff2 b/common_files/static/common_files/vendor/font-awesome/fonts/fontawesome-webfont.woff2
similarity index 100%
rename from vendor/font-awesome/fonts/fontawesome-webfont.woff2
rename to common_files/static/common_files/vendor/font-awesome/fonts/fontawesome-webfont.woff2
diff --git a/vendor/font-awesome/less/animated.less b/common_files/static/common_files/vendor/font-awesome/less/animated.less
similarity index 100%
rename from vendor/font-awesome/less/animated.less
rename to common_files/static/common_files/vendor/font-awesome/less/animated.less
diff --git a/vendor/font-awesome/less/bordered-pulled.less b/common_files/static/common_files/vendor/font-awesome/less/bordered-pulled.less
similarity index 100%
rename from vendor/font-awesome/less/bordered-pulled.less
rename to common_files/static/common_files/vendor/font-awesome/less/bordered-pulled.less
diff --git a/vendor/font-awesome/less/core.less b/common_files/static/common_files/vendor/font-awesome/less/core.less
similarity index 100%
rename from vendor/font-awesome/less/core.less
rename to common_files/static/common_files/vendor/font-awesome/less/core.less
diff --git a/vendor/font-awesome/less/fixed-width.less b/common_files/static/common_files/vendor/font-awesome/less/fixed-width.less
similarity index 100%
rename from vendor/font-awesome/less/fixed-width.less
rename to common_files/static/common_files/vendor/font-awesome/less/fixed-width.less
diff --git a/vendor/font-awesome/less/font-awesome.less b/common_files/static/common_files/vendor/font-awesome/less/font-awesome.less
similarity index 100%
rename from vendor/font-awesome/less/font-awesome.less
rename to common_files/static/common_files/vendor/font-awesome/less/font-awesome.less
diff --git a/vendor/font-awesome/less/icons.less b/common_files/static/common_files/vendor/font-awesome/less/icons.less
similarity index 100%
rename from vendor/font-awesome/less/icons.less
rename to common_files/static/common_files/vendor/font-awesome/less/icons.less
diff --git a/vendor/font-awesome/less/larger.less b/common_files/static/common_files/vendor/font-awesome/less/larger.less
similarity index 100%
rename from vendor/font-awesome/less/larger.less
rename to common_files/static/common_files/vendor/font-awesome/less/larger.less
diff --git a/vendor/font-awesome/less/list.less b/common_files/static/common_files/vendor/font-awesome/less/list.less
similarity index 100%
rename from vendor/font-awesome/less/list.less
rename to common_files/static/common_files/vendor/font-awesome/less/list.less
diff --git a/vendor/font-awesome/less/mixins.less b/common_files/static/common_files/vendor/font-awesome/less/mixins.less
similarity index 100%
rename from vendor/font-awesome/less/mixins.less
rename to common_files/static/common_files/vendor/font-awesome/less/mixins.less
diff --git a/vendor/font-awesome/less/path.less b/common_files/static/common_files/vendor/font-awesome/less/path.less
similarity index 100%
rename from vendor/font-awesome/less/path.less
rename to common_files/static/common_files/vendor/font-awesome/less/path.less
diff --git a/vendor/font-awesome/less/rotated-flipped.less b/common_files/static/common_files/vendor/font-awesome/less/rotated-flipped.less
similarity index 100%
rename from vendor/font-awesome/less/rotated-flipped.less
rename to common_files/static/common_files/vendor/font-awesome/less/rotated-flipped.less
diff --git a/vendor/font-awesome/less/screen-reader.less b/common_files/static/common_files/vendor/font-awesome/less/screen-reader.less
similarity index 100%
rename from vendor/font-awesome/less/screen-reader.less
rename to common_files/static/common_files/vendor/font-awesome/less/screen-reader.less
diff --git a/vendor/font-awesome/less/stacked.less b/common_files/static/common_files/vendor/font-awesome/less/stacked.less
similarity index 100%
rename from vendor/font-awesome/less/stacked.less
rename to common_files/static/common_files/vendor/font-awesome/less/stacked.less
diff --git a/vendor/font-awesome/less/variables.less b/common_files/static/common_files/vendor/font-awesome/less/variables.less
similarity index 100%
rename from vendor/font-awesome/less/variables.less
rename to common_files/static/common_files/vendor/font-awesome/less/variables.less
diff --git a/vendor/font-awesome/scss/_animated.scss b/common_files/static/common_files/vendor/font-awesome/scss/_animated.scss
similarity index 100%
rename from vendor/font-awesome/scss/_animated.scss
rename to common_files/static/common_files/vendor/font-awesome/scss/_animated.scss
diff --git a/vendor/font-awesome/scss/_bordered-pulled.scss b/common_files/static/common_files/vendor/font-awesome/scss/_bordered-pulled.scss
similarity index 100%
rename from vendor/font-awesome/scss/_bordered-pulled.scss
rename to common_files/static/common_files/vendor/font-awesome/scss/_bordered-pulled.scss
diff --git a/vendor/font-awesome/scss/_core.scss b/common_files/static/common_files/vendor/font-awesome/scss/_core.scss
similarity index 100%
rename from vendor/font-awesome/scss/_core.scss
rename to common_files/static/common_files/vendor/font-awesome/scss/_core.scss
diff --git a/vendor/font-awesome/scss/_fixed-width.scss b/common_files/static/common_files/vendor/font-awesome/scss/_fixed-width.scss
similarity index 100%
rename from vendor/font-awesome/scss/_fixed-width.scss
rename to common_files/static/common_files/vendor/font-awesome/scss/_fixed-width.scss
diff --git a/vendor/font-awesome/scss/_icons.scss b/common_files/static/common_files/vendor/font-awesome/scss/_icons.scss
similarity index 100%
rename from vendor/font-awesome/scss/_icons.scss
rename to common_files/static/common_files/vendor/font-awesome/scss/_icons.scss
diff --git a/vendor/font-awesome/scss/_larger.scss b/common_files/static/common_files/vendor/font-awesome/scss/_larger.scss
similarity index 100%
rename from vendor/font-awesome/scss/_larger.scss
rename to common_files/static/common_files/vendor/font-awesome/scss/_larger.scss
diff --git a/vendor/font-awesome/scss/_list.scss b/common_files/static/common_files/vendor/font-awesome/scss/_list.scss
similarity index 100%
rename from vendor/font-awesome/scss/_list.scss
rename to common_files/static/common_files/vendor/font-awesome/scss/_list.scss
diff --git a/vendor/font-awesome/scss/_mixins.scss b/common_files/static/common_files/vendor/font-awesome/scss/_mixins.scss
similarity index 100%
rename from vendor/font-awesome/scss/_mixins.scss
rename to common_files/static/common_files/vendor/font-awesome/scss/_mixins.scss
diff --git a/vendor/font-awesome/scss/_path.scss b/common_files/static/common_files/vendor/font-awesome/scss/_path.scss
similarity index 100%
rename from vendor/font-awesome/scss/_path.scss
rename to common_files/static/common_files/vendor/font-awesome/scss/_path.scss
diff --git a/vendor/font-awesome/scss/_rotated-flipped.scss b/common_files/static/common_files/vendor/font-awesome/scss/_rotated-flipped.scss
similarity index 100%
rename from vendor/font-awesome/scss/_rotated-flipped.scss
rename to common_files/static/common_files/vendor/font-awesome/scss/_rotated-flipped.scss
diff --git a/vendor/font-awesome/scss/_screen-reader.scss b/common_files/static/common_files/vendor/font-awesome/scss/_screen-reader.scss
similarity index 100%
rename from vendor/font-awesome/scss/_screen-reader.scss
rename to common_files/static/common_files/vendor/font-awesome/scss/_screen-reader.scss
diff --git a/vendor/font-awesome/scss/_stacked.scss b/common_files/static/common_files/vendor/font-awesome/scss/_stacked.scss
similarity index 100%
rename from vendor/font-awesome/scss/_stacked.scss
rename to common_files/static/common_files/vendor/font-awesome/scss/_stacked.scss
diff --git a/vendor/font-awesome/scss/_variables.scss b/common_files/static/common_files/vendor/font-awesome/scss/_variables.scss
similarity index 100%
rename from vendor/font-awesome/scss/_variables.scss
rename to common_files/static/common_files/vendor/font-awesome/scss/_variables.scss
diff --git a/vendor/font-awesome/scss/font-awesome.scss b/common_files/static/common_files/vendor/font-awesome/scss/font-awesome.scss
similarity index 100%
rename from vendor/font-awesome/scss/font-awesome.scss
rename to common_files/static/common_files/vendor/font-awesome/scss/font-awesome.scss
diff --git a/vendor/jquery.easing.min.js b/common_files/static/common_files/vendor/jquery.easing.min.js
similarity index 100%
rename from vendor/jquery.easing.min.js
rename to common_files/static/common_files/vendor/jquery.easing.min.js
diff --git a/vendor/jquery.min.js b/common_files/static/common_files/vendor/jquery.min.js
similarity index 100%
rename from vendor/jquery.min.js
rename to common_files/static/common_files/vendor/jquery.min.js
diff --git a/vendor/scrollreveal.min.js b/common_files/static/common_files/vendor/scrollreveal.min.js
similarity index 100%
rename from vendor/scrollreveal.min.js
rename to common_files/static/common_files/vendor/scrollreveal.min.js
diff --git a/common_files/templates/common_files/base.html b/common_files/templates/common_files/base.html
new file mode 100644
index 0000000..becd649
--- /dev/null
+++ b/common_files/templates/common_files/base.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="{% block description %}{% endblock %}">
+    <meta name="author" content="Paul TREHIOU">
+
+    <title>Musique fraternité - {% block titre %}{% endblock %}</title>
+
+    {% include "common_files/include_head.html" %}
+
+    {% block extra_head %}
+    {% endblock %}
+
+</head>
+
+<body id="page-top">
+
+    {% include "common_files/navbar.html" %}
+
+    {% block contenu %}{% endblock %}
+
+    {% include "common_files/footer.html" %}
+
+    {% include "common_files/include_foot.html" %}
+
+    {% block scripts %}{% endblock %}
+
+</body>
+
+</html>
diff --git a/contact.html b/common_files/templates/common_files/contact.html
similarity index 67%
rename from contact.html
rename to common_files/templates/common_files/contact.html
index a11b491..cdb6082 100644
--- a/contact.html
+++ b/common_files/templates/common_files/contact.html
@@ -4,7 +4,7 @@
             <div class="col-lg-8 col-lg-offset-2 text-center">
                 <h2 class="section-heading">Contact</h2>
                 <hr class="primary">
-                <p>Eric TREHIOU, Président</p>
+                <p>{{ responsable |default:"Eric TREHIOU, Président" }}</p>
             </div>
             <div class="col-lg-4 col-lg-offset-2 text-center">
                 <i class="fa fa-phone fa-3x sr-contact"></i>
@@ -12,11 +12,11 @@
             </div>
             <div class="col-lg-4 text-center">
                 <i class="fa fa-at fa-3x sr-contact"></i>
-                <p><a href="mailto:contact@musique-meyenheim.fr">contact@musique-meyenheim.fr</a></p>
+                <p><a href="mailto:{{ email | default:"contact@musique-meyenheim.fr" }}">{{ email | default:"contact@musique-meyenheim.fr" }}</a></p>
             </div>
             <div class="col-lg-8 col-lg-offset-2 text-center">
                 <i class="fa fa-envelope fa-3x sr-contact"></i>
-                <p>Société de Musique Fraternité</br>10 rue de l’Ill</br>68890 MEYENHEIM</p>
+                <p>{{ adresse | default:"Société de Musique Fraternité</br>10 rue de l’Ill</br>68890 MEYENHEIM" }}</p>
             </div>
         </div>
     </div>
diff --git a/common_files/templates/common_files/footer.html b/common_files/templates/common_files/footer.html
new file mode 100644
index 0000000..2f9127c
--- /dev/null
+++ b/common_files/templates/common_files/footer.html
@@ -0,0 +1,4 @@
+<footer class="row row-no-gutters">
+  <small class="col-md-6">Créé par Paul TREHIOU et inspiré du theme <a href="https://startbootstrap.com/template-overviews/creative/">Creative</a> <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png"></a> powered by <a href="https://nixos.org/">NixOS</a> and <a href="https://djangoproject.com">Django</a></small>
+  <a class="col-md-6" href="{% url 'admin:index' %}">Admin</a>
+</footer> 
diff --git a/common_files/templates/common_files/include_foot.html b/common_files/templates/common_files/include_foot.html
new file mode 100644
index 0000000..f680910
--- /dev/null
+++ b/common_files/templates/common_files/include_foot.html
@@ -0,0 +1,14 @@
+{% load static %}
+<!-- jQuery -->
+<script src="{% static "common_files/vendor/jquery.min.js" %}"></script>
+
+<!-- Bootstrap Core JavaScript -->
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
+
+<!-- Plugin JavaScript -->
+<script src="{% static "common_files/vendor/jquery.easing.min.js" %}"></script>
+<script src="{% static "common_files/vendor/scrollreveal.min.js" %}"></script>
+<script src="{% static "common_files/vendor/appear.min.js" %}"></script>
+
+<!-- Theme JavaScript -->
+<script src="{% static "common_files/vendor/creative.min.js" %}"></script>
diff --git a/include_head.html b/common_files/templates/common_files/include_head.html
similarity index 67%
rename from include_head.html
rename to common_files/templates/common_files/include_head.html
index cd59f6d..25e7a60 100644
--- a/include_head.html
+++ b/common_files/templates/common_files/include_head.html
@@ -1,5 +1,6 @@
+{% load static %}
 <!-- Bootstrap Core CSS -->
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
 
 <!-- Custom Fonts -->
 <script src="https://use.fontawesome.com/49602068ad.js"></script>
@@ -7,7 +8,7 @@
 <link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
 
 <!-- Theme CSS -->
-<link href="css/creative.min.css" rel="stylesheet">
+<link href="{% static "common_files/vendor/creative.min.css" %}" rel="stylesheet">
 
 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@@ -16,4 +17,4 @@
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
 <![endif]-->
 
-<link rel="icon" type="image/jpg" href="img/favicon.jpg" />
+<link rel="icon" type="image/jpg" href="{% static "common_files/img/favicon.jpg" %}" />
diff --git a/navbar.html b/common_files/templates/common_files/navbar.html
similarity index 65%
rename from navbar.html
rename to common_files/templates/common_files/navbar.html
index 7dbbd5f..e32b563 100644
--- a/navbar.html
+++ b/common_files/templates/common_files/navbar.html
@@ -1,3 +1,4 @@
+{% load static %}
 <nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
     <div class="container-fluid">
         <!-- Brand and toggle get grouped for better mobile display -->
@@ -5,8 +6,8 @@
             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                 <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
             </button>
-            <a class="navbar-brand page-scroll" href="index.php#page-top">
-                <img alt="Logo" src="img/logo.jpg" style="height: 65px;">
+            <a class="navbar-brand page-scroll" href="{% url 'accueil' %}#page-top">
+                <img alt="Logo" src="{% static "common_files/img/logo.jpg" %}" style="height: 65px;">
             </a>
         </div>
 
@@ -17,22 +18,22 @@
                                                             padding-bottom: 20px;
                                                         ">
                 <li>
-                    <a class="page-scroll" href="harmonie.php">Harmonie intercommunale</a>
+                    <a class="page-scroll" href="{% url 'harmonie' %}">Harmonie intercommunale</a>
                 </li>
                 <li>
-                    <a class="page-scroll" href="ecole.php">École de musique</a>
+                    <a class="page-scroll" href="{% url 'ecole' %}">École de musique</a>
                 </li>
                 <li>
-                    <a class="page-scroll" href="evenements.php">Évenements</a>
+                    <a class="page-scroll" href="{% url 'evenements' %}">Évenements</a>
                 </li>
                 <li>
-                    <a class="page-scroll" href="direction.php">Direction</a>
+                    <a class="page-scroll" href="{% url 'direction' %}">Direction</a>
                 </li>
                 <li>
-                    <a class="page-scroll" href="salle.php">La salle</a>
+                    <a class="page-scroll" href="{% url 'salle' %}">La salle</a>
                 </li>
                 <li>
-                    <a class="page-scroll" href="partenaires.php">Partenaires</a>
+                    <a class="page-scroll" href="{% url 'partenaires' %}">Partenaires</a>
                 </li>
                 <li>
                     <a class="page-scroll" href="#contact">Contact</a>
diff --git a/common_files/tests.py b/common_files/tests.py
new file mode 100644
index 0000000..7ce503c
--- /dev/null
+++ b/common_files/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/common_files/views.py b/common_files/views.py
new file mode 100644
index 0000000..91ea44a
--- /dev/null
+++ b/common_files/views.py
@@ -0,0 +1,3 @@
+from django.shortcuts import render
+
+# Create your views here.
diff --git a/default.nix b/default.nix
index 93a8474..7c23f39 100644
--- a/default.nix
+++ b/default.nix
@@ -1,15 +1,27 @@
 { pkgs ? import <nixpkgs> {} }:
 
-pkgs.stdenv.mkDerivation rec {
-  name= "site-musique";
+pkgs.python3.pkgs.buildPythonPackage rec {
+  pname= "site-musique";
+  version = "1.0";
 
   inherit (pkgs) stdenv;
 
   src = ./.;
 
-  installPhase = ''
-    mkdir -p $out/
-    cp -R . $out/
+  propagatedBuildInputs = [ pkgs.python3.pkgs.django_2_2 pkgs.python3.pkgs.pillow ];
+
+  postFixup = ''
+    wrapPythonProgramsIn $out/bin/manage.py
+    #HACK wrapper breaks django manage.py
+    sed -i "$out/bin/.manage.py-wrapped" -e '
+      0,/sys.argv\[0\].*;/s/sys.argv\[0\][^;]*;//
+    '
+  '';
+
+  doCheck = false;
+
+  postInstall = ''
+    python $out/bin/manage.py collectstatic
   '';
 
   meta = {
diff --git a/direction.php b/direction.php
deleted file mode 100644
index 00fbbbd..0000000
--- a/direction.php
+++ /dev/null
@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-
-<head>
-
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="Direction de la musique de Meyenheim">
-    <meta name="author" content="Paul TREHIOU">
-
-    <title>Musique fraternité - Direction</title>
-
-    <?php include('include_head.html'); ?>
-
-</head>
-
-<body id="page-top">
-
-    <?php include('navbar.html'); ?>
-
-    <header style="background: #F05F40;">
-        <div class="header-content">
-            <div class="header-content-inner">
-                <img src="img/direction.jpg" class="img-responsive" style="width: 2000px;"></img>
-            </div>
-        </div>
-    </header>
-
-
-    <?php include('contact.html'); ?>
-
-    <?php include('footer.html'); ?>
-
-    <?php include('include_foot.html'); ?>
-
-</body>
-
-</html>
diff --git a/ecole.php b/ecole.php
deleted file mode 100644
index 819d2d4..0000000
--- a/ecole.php
+++ /dev/null
@@ -1,216 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-
-<head>
-
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="Site de la musique de Meyenheim">
-    <meta name="author" content="Paul TREHIOU">
-
-    <title>Musique fraternité - École de Musique</title>
-
-    <?php include('include_head.html'); ?>
-
-</head>
-
-<body id="page-top">
-
-    <?php include('navbar.html'); ?>
-
-    <header style="background-image: url('img/ecole.jpg')">
-        <div class="header-content">
-            <div class="header-content-inner">
-                <h1 id="homeHeading" style="text-shadow: 0px 0px 7px #000; margin-bottom: 400px;">École de Musique</br>«Les notes de l’Ill»</h1>
-                <a href="#about" class="btn btn-primary btn-xl page-scroll">Plus d'informations</a>
-            </div>
-        </div>
-    </header>
-
-    <section class="bg-primary" id="about">
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-8 col-lg-offset-2 text-center">
-                    <h2 class="section-heading">Présentation</h2>
-                    <hr class="light">
-                    <p class="text-faded">L’école de musique "Les notes de l'Ill" a été créée par la Société de Musique Fraternité dont elle dépend exclusivement et est dirigée par Nathalie ROHRBACH. Les enseignements musicaux, notamment en groupe, tout en développant les techniques musicales et d’écoute mutuelle, permettent à chacun de s’exprimer poétiquement. L'école de musique contribue ainsi à un développement artistique personnel mais aussi au recrutement de futurs musiciens de l'Harmonie intercommunale Centre Haut-Rhin. L’école de Musique est subventionnée par la Commune de Meyenheim, la Communauté de Communes Centre Haut-Rhin et par le Conseil Départemental du Haut-Rhin.</p>
-                    <hr>
-                    <h2 class="section-heading">Fonctionnement</h2>
-                    <hr class="light">
-                    <p class="text-faded">Les cours sont dispensés tout au long de l'année scolaire par des professeurs qualifiés, reconnus au niveau départemental.</p>
-                    <!-- <hr>
-                    <h2 class="section-heading">Calendrier de rentrée</h2>
-                    <hr class="light">
-                    <h3>Kermesse musicale pour essayer tous les instruments et s'inscrire / se réinscrire</h3>
-                    <p class="text-faded"><i class="glyphicon glyphicon-calendar"></i> Samedi 10/09
-                    </br><i class="glyphicon glyphicon-time"></i> 9h30 à 11h30
-                    </br><i class="glyphicon glyphicon-map-marker"></i> Salle polyvalente de Meyenheim</p>
-                    
-                    <div class="panel panel-default" style="color: #333;">
-                        <div class="panel-heading">
-                            <h4 class="panel-title">Programme</h4>
-                        </div>
-                        <div class="panel-body">
-                            <div class="row">
-                                <b class="col-lg-2">9h30 - 11h</b>
-                                <ul class="col-lg-8 list-group">
-                                    <li class="list-group-item">Atelier d'essai des instruments et d'éveil musical
-                                    <li class="list-group-item">Planning des cours avec les professeurs
-                                    <li class="list-group-item">Inscription / réinscription
-                                </ul>
-                            </div>
-                            <div class="row">
-                                <b class="col-lg-2">vers 11h</b>
-                                <ul class="col-lg-8 list-group">
-                                    <li class="list-group-item">Le "boeuf" des professeurs
-                                    <li class="list-group-item">Tirage au sort de la tombola gratuite (Gros lot: 1 mois de cours offert pour l'instrument de son choix)
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                    <h3>Début des cours</h3>
-                    <p class="text-faded"><i class="glyphicon glyphicon-calendar"></i> Lundi 12/09</p> -->
-                    <a href="#services" class="page-scroll btn btn-default btn-xl sr-button">Découvrez nos prestations</a>
-                </div>
-            </div>
-        </div>
-    </section>
-    
-    <section id="services">
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-12 text-center">
-                    <h2 class="section-heading">L'école de musique propose</h2>
-                    <hr class="primary">
-                </div>
-            </div>
-        </div>
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-4 col-md-6 text-center">
-                    <div class="service-box">
-                        <i class="fa fa-4x fa-music text-primary sr-icons"></i>
-                        <h3>Ateliers d’éveil musical et d’initiation musicale</h3>
-                        <h4>Pour les enfants dès la Moyenne section de Maternelle</h4>
-                        <p class="text-muted">L’élève intègre un des groupes proposés par les professeurs Nathalie ROHRBACH et Marie CLOG. Ces ateliers ont pour but de sensibiliser l’enfant aux sons, aux rythmes, aux couleurs musicales, de façon ludique et amusante. Ils offrent aux élèves la possibilité de découvrir leur voix comme outil musical et l’aideront à faire le choix d’un instrument pour la poursuite de l’apprentissage</p>
-                    </div>
-                </div>
-                <div class="col-lg-4 col-md-6 text-center">
-                    <div class="service-box">
-                        <i class="fa fa-4x fa-user text-primary sr-icons"></i>
-                        <h3>Pratique instrumentale ou vocale individualisée</h3>
-                        <h4>À partir du CE1 et pour les adultes</h4>
-                        <p class="text-muted">Cours d’instrument ou de chant seul avec l’enseignant (30' à 45’ suivant le cas). L’élève et l’enseignant établissent ensemble en début d’année scolaire le projet et le programme musical</p>
-                    </div>
-                </div>
-                <div class="col-lg-4 col-md-6 text-center">
-                    <div class="service-box">
-                        <i class="fa fa-4x fa-users text-primary sr-icons"></i>
-                        <h3>Classe de formation musicale avec instrument (Chant compris)</h3>
-                        <h4>À partir du CE1 et pour les adultes</h4>
-                        <p class="text-muted">L’élève intègre un des groupes proposés par le responsable pédagogique et son équipe. L’objectif est d’analyser et comprendre les éléments fondamentaux de la formation musicale par les partitions proposées et apprendre à jouer ensemble. Certains groupes interviennent en public lors de différentes manifestations</p>
-                    </div>
-                </div>
-                <div class="col-lg-4 col-md-6 text-center">
-                    <div class="service-box">
-                        <img src="img/trombone.gif" alt="icone trombone">
-                        <h3>Les instruments enseignés sont</h4>
-                        <ul class="list-group">
-                            <li class="list-group-item track" data-toggle="popover" data-content="Nathalie ROHRBACH" data-title="Enseignant">Le chant
-                            <li class="list-group-item" data-toggle="popover" data-content="Robert SCHMIDT" data-title="Enseignant">La flûte traversière et la flûte à bec
-                            <li class="list-group-item" data-toggle="popover" data-content="Régis MAERKY" data-title="Enseignant">La clarinette
-                            <li class="list-group-item" data-toggle="popover" data-content="Régis MAERKY" data-title="Enseignant">Les saxophones
-                            <li class="list-group-item" data-toggle="popover" data-content="Mimo ILIEV" data-title="Enseignant">La trompette
-                            <li class="list-group-item" data-toggle="popover" data-content="Mimo ILIEV" data-title="Enseignant">L'euphonium / baryton
-                            <li class="list-group-item" data-toggle="popover" data-content="Mimo ILIEV" data-title="Enseignant">Le trombone
-                            <li class="list-group-item" data-toggle="popover" data-content="Stephane AFFHOLDER" data-title="Enseignant">La batterie
-                            <li class="list-group-item" data-toggle="popover" data-content="Marie CLOG" data-title="Enseignant">Les percussions
-                            <li class="list-group-item" data-toggle="popover" data-content="Eric Uettwiller">La guitare acoustique
-                            <li class="list-group-item" data-toggle="popover" data-content="Eric Uettwiller">La guitare électrique
-                            <li class="list-group-item" data-toggle="popover" data-content="Patrick RAMSTEIN" data-title="Enseignant">Le piano
-                            <li class="list-group-item" data-toggle="popover" data-content="Sur demande">L'orgue d'église
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-    
-    <div id="carousel-ecole" class="carousel slide" data-ride="carousel">
-    
-        <!-- Wrapper for slides -->
-        <div class="carousel-inner" role="listbox">
-            <div class="item active">
-                <img src="img/galerie_ecole/01.jpg" alt="Illustration école de musique">
-            </div>
-            <div class="item">
-                <img src="img/galerie_ecole/02.jpg" alt="Illustration école de musique">
-            </div>
-            <div class="item">
-                <img src="img/galerie_ecole/03.jpg" alt="Illustration école de musique">
-            </div>
-            <div class="item">
-                <img src="img/galerie_ecole/04.jpg" alt="Illustration école de musique">
-            </div>
-        </div>
-
-        <!-- Controls -->
-        <a class="left carousel-control" href="#carousel-ecole" role="button" data-slide="prev">
-            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
-            <span class="sr-only">Previous</span>
-        </a>
-        <a class="right carousel-control" href="#carousel-ecole" role="button" data-slide="next">
-            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
-            <span class="sr-only">Next</span>
-        </a>
-    </div>
-
-    <section id="contact">
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-8 col-lg-offset-2 text-center">
-                    <h2 class="section-heading">Contact</h2>
-                    <hr class="primary">
-                    <p>Nathalie ROHRBACH, Directrice</p>
-                </div>
-                <div class="col-lg-4 col-lg-offset-2 text-center">
-                    <i class="fa fa-phone fa-3x sr-contact"></i>
-                    <p>07 68 40 11 38</p>
-                </div>
-                <div class="col-lg-4 text-center">
-                    <i class="fa fa-at fa-3x sr-contact"></i>
-                    <p><a href="mailto:ecole@musique-meyenheim.fr">ecole@musique-meyenheim.fr</a></p>
-                </div>
-                <div class="col-lg-8 col-lg-offset-2 text-center">
-                    <i class="fa fa-envelope fa-3x sr-contact"></i>
-                    <p>Société de Musique Fraternité</br>10 rue de l’Ill</br>68890 MEYENHEIM</p>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <?php include('footer.html'); ?>
-
-    <?php include('include_foot.html'); ?>
-    
-    <script type="text/javascript">
-        $(function () {
-            $('[data-toggle="popover"]').popover({trigger: "hover"})
-        })
-        
-        appear({
-            elements: function elements(){
-                // work with all elements with the class "track"
-                return document.getElementsByClassName('track');
-            },
-            appear: function appear(el){
-                console.log('visible', el);
-                $(el).popover('show');
-            },
-        });
-    </script>
-
-</body>
-
-</html>
diff --git a/evenements.php b/evenements.php
deleted file mode 100644
index 0dbcedc..0000000
--- a/evenements.php
+++ /dev/null
@@ -1,987 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-
-<head>
-
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="Site de la musique de Meyenheim">
-    <meta name="author" content="Paul TREHIOU">
-
-    <title>Musique fraternité - Évènements</title>
-
-    <?php include('include_head.html'); ?>
-    
-    <link href="css/timeline.css" rel="stylesheet">
-    
-    <style>
-        @media (min-width: 768px) {
-            .navbar-default .nav > li > a,
-            .navbar-default .nav > li > a:focus {
-                color: #222222;
-            }
-            .navbar-default .nav > li > a:hover,
-            .navbar-default .nav > li > a:focus:hover {
-                color: #F05F40;
-            }
-        }
-        
-        .timeline-body > a > img {
-            margin-left: auto;
-            margin-right: auto;
-            display: block;
-            margin-bottom: 15px;
-        }
-        
-    </style>
-
-</head>
-
-<body id="page-top">
-
-    <?php include('navbar.html'); ?>
-    
-    <section id="timeline">
-        <div class="container">
-        <div class="page-header">
-            <h1 id="timeline">Évènements à venir</h1>
-        </div>
-        <h2>2018</h2>
-        <ul class="timeline">
-
-        <!-- =========================================================== -->
-        <!--                   Loto 11 Novembre 2018                  -->
-        <!-- =========================================================== -->
-        
-            <li class="timeline-inverted">
-                <div class="timeline-badge info"><i class="glyphicon glyphicon-menu-left"></i></div>
-                <div class="timeline-panel">
-                    <div class="timeline-heading">
-                    <h4 class="timeline-title">Grand Loto</h4>
-                    <p><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i>11 Novembre 2018</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-time"></i>14h-22h</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-map-marker"></i>Salle polyvalente de Meyenheim</small></p>
-                    </div>
-                    <div class="timeline-body">
-                        <a href="#pop_concert_11_11_18" data-toggle="modal">
-                            <img src="img/timeline/2018_11_nov_affiche_loto_recto.jpg" alt="Affiche loto" class="img-responsive">
-                        </a>
-                        <hr>
-                        
-                        <!-- Popup -->
-                        <div id="pop_concert_11_11_18" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/2018_11_nov_affiche_loto_recto.jpg" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </li>
-            
-        <!-- =========================================================== -->
-        <!--                   Loto 12 Novembre 2018                  -->
-        <!-- =========================================================== -->
-        
-            <li class="timeline">
-                <div class="timeline-badge info"><i class="glyphicon glyphicon-menu-left"></i></div>
-                <div class="timeline-panel">
-                    <div class="timeline-heading">
-                    <h4 class="timeline-title">Super Loto</h4>
-                    <p><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i>12 Novembre 2018</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-time"></i>20h</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-map-marker"></i>Salle polyvalente de Meyenheim</small></p>
-                    </div>
-                    <div class="timeline-body">
-                        <a href="#pop_concert_12_11_18" data-toggle="modal">
-                            <img src="img/timeline/2018_12_nov_affiche_loto_recto_1.jpg" alt="Affiche loto" class="img-responsive">
-                        </a>
-                        <hr>
-                        
-                        <!-- Popup -->
-                        <div id="pop_concert_12_11_18" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/2018_12_nov_affiche_loto_recto_1.jpg" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </li>
-        
-        </ul>
-        </div>
-    </section>
-    
-    <section id="timeline">
-        <div class="container">
-        <div class="page-header">
-            <h1 id="timeline">Évenements passés</h1>
-        </div>
-        <h2>2018</h2>
-        <ul class="timeline">
-
-        <!-- =========================================================== -->
-        <!--                    Audition 5 juillet 2018                  -->
-        <!-- =========================================================== -->
-        
-            <li class="timeline">
-                <div class="timeline-badge info"><i class="glyphicon glyphicon-menu-left"></i></div>
-                <div class="timeline-panel">
-                    <div class="timeline-heading">
-                    <h4 class="timeline-title">Audition</h4>
-                    <p><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i>5 juillet 2018</small></br>
-                    </div>
-                    <div class="timeline-body">
-                        
-                        <div id="carousel-audition-07_2018" class="carousel slide" data-ride="carousel">
-            
-                            <!-- Wrapper for slides -->
-                            <div class="carousel-inner" role="listbox">
-                                <div class="item">
-                                    <a href="#pop_audition_08_18_1" data-toggle="modal">
-                                        <img src="img/timeline/audition_chant_2018_affiche_2_light.jpg">
-                                    </a>
-                                </div>
-                                <div class="item">
-                                    <a href="#pop_audition_08_18_2" data-toggle="modal">
-                                        <img src="img/timeline/IMG_20180705_212412_2.jpg">
-                                    </a>
-                                </div>
-                                <div class="item">
-                                    <a href="#pop_audition_08_18_3" data-toggle="modal">
-                                        <img src="img/timeline/IMG_20180705_221046.jpg">
-                                    </a>
-                                </div>
-                                <div class="item active">
-                                    <a href="#pop_audition_08_18_4" data-toggle="modal">
-                                        <img src="img/timeline/IMG_20180705_221739_1.jpg">
-                                    </a>
-                                </div>
-                            </div>
-
-                            <!-- Controls -->
-                            <a class="left carousel-control" href="#carousel-audition-07_2018" role="button" data-slide="prev">
-                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
-                                <span class="sr-only">Previous</span>
-                            </a>
-                            <a class="right carousel-control" href="#carousel-audition-07_2018" role="button" data-slide="next">
-                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
-                                <span class="sr-only">Next</span>
-                            </a>
-                        </div>
-
-                        <hr>
-                            
-                        <!-- Popup 1 -->
-                        <div id="pop_audition_08_18_1" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/audition_chant_2018_affiche_2_light.jpg" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <!-- Popup 2 -->
-                        <div id="pop_audition_08_18_2" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/IMG_20180705_212412_2.jpg" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Popup 3 -->
-                        <div id="pop_audition_08_18_3" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/IMG_20180705_221046.jpg" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <!-- Popup 4 -->
-                        <div id="pop_audition_08_18_4" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/IMG_20180705_221739_1.jpg" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                    </div>
-                </div>
-            </li>
-
-        <!-- =========================================================== -->
-        <!--               Concours SONOR 16 juin 2018                 -->
-        <!-- =========================================================== -->
-        
-            <li class="timeline-inverted">
-                <div class="timeline-badge info"><i class="glyphicon glyphicon-menu-right"></i></div>
-                <div class="timeline-panel">
-                    <div class="timeline-heading">
-                    <h4 class="timeline-title">Concours SONOR</h4>
-                    <p><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i>16 juin 2018</small></br>
-                    </div>
-                    <div class="timeline-body">
-                        <a href="#pop_concours_sonor" data-toggle="modal">
-                            <img src="img/timeline/IMG_2292.JPG" alt="Photo concours SONOR" class="img-responsive">
-                        </a>
-                        <hr>
-                        
-                        <!-- Popup -->
-                        <div id="pop_concours_sonor" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/IMG_2292.JPG" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </li>
-
-        <!-- =========================================================== -->
-        <!--                     Audition 13 juin 2018                   -->
-        <!-- =========================================================== -->
-        
-            <li class="timeline">
-                <div class="timeline-badge info"><i class="glyphicon glyphicon-menu-left"></i></div>
-                <div class="timeline-panel">
-                    <div class="timeline-heading">
-                    <h4 class="timeline-title">Audition</h4>
-                    <p><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i>13 juin 2018</small></br>
-                    </div>
-                    <div class="timeline-body">
-                        
-                        <div id="carousel-audition-06_2018" class="carousel slide" data-ride="carousel">
-            
-                            <!-- Wrapper for slides -->
-                            <div class="carousel-inner" role="listbox">
-                                <div class="item active">
-                                    <a href="#pop_audition_08_18_1" data-toggle="modal">
-                                        <img src="img/timeline/audition_2018_jeunes.JPG">
-                                    </a>
-                                </div>
-                                <div class="item">
-                                    <a href="#pop_audition_08_18_2" data-toggle="modal">
-                                        <img src="img/timeline/concert_ecole_2018_affiche_1.jpg">
-                                    </a>
-                                </div>
- 
-                            </div>
-
-                            <!-- Controls -->
-                            <a class="left carousel-control" href="#carousel-audition-06_2018" role="button" data-slide="prev">
-                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
-                                <span class="sr-only">Previous</span>
-                            </a>
-                            <a class="right carousel-control" href="#carousel-audition-06_2018" role="button" data-slide="next">
-                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
-                                <span class="sr-only">Next</span>
-                            </a>
-                        </div>
-
-                        <hr>
-                            
-                        <!-- Popup 1 -->
-                        <div id="pop_audition_08_18_1" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/audition_2018_jeunes.JPG" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <!-- Popup 2 -->
-                        <div id="pop_audition_08_18_2" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/concert_ecole_2018_affiche_1.jpg" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                    </div>
-                </div>
-            </li>
-       
-        <!-- =========================================================== -->
-        <!--                     Loto 20 mai 2018                   -->
-        <!-- =========================================================== -->
-        
-            <li class="timeline-inverted">
-                <div class="timeline-badge info"><i class="glyphicon glyphicon-menu-left"></i></div>
-                <div class="timeline-panel">
-                    <div class="timeline-heading">
-                    <h4 class="timeline-title">Grand Loto</h4>
-                    <p><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i>20 mai 2018</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-time"></i>14h15 - 00h</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-map-marker"></i>Salle polyvalente de Meyenheim</small></p>
-                    </div>
-                    <div class="timeline-body">
-                        
-                        <div id="carousel-loto-05_2018" class="carousel slide" data-ride="carousel">
-            
-                            <!-- Wrapper for slides -->
-                            <div class="carousel-inner" role="listbox">
-                                <div class="item active">
-                                    <a href="#pop_loto_20_05_18_1" data-toggle="modal">
-                                        <img src="img/timeline/2018_20_mai_affiche_loto_recto_2.jpg">
-                                    </a>
-                                </div>
-                                <div class="item">
-                                    <a href="#pop_loto_20_05_18_2" data-toggle="modal">
-                                        <img src="img/timeline/loto_2018_208mai_verso2-001.jpg">
-                                    </a>
-                                </div>
-                            </div>
-
-                            <!-- Controls -->
-                            <a class="left carousel-control" href="#carousel-loto-05_2018" role="button" data-slide="prev">
-                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
-                                <span class="sr-only">Previous</span>
-                            </a>
-                            <a class="right carousel-control" href="#carousel-loto-05_2018" role="button" data-slide="next">
-                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
-                                <span class="sr-only">Next</span>
-                            </a>
-                        </div>
-
-                        <hr>
-                            
-                        <!-- Popup 1 -->
-                        <div id="pop_loto_20_05_18_1" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/2018_20_mai_affiche_loto_recto_2.jpg" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <!-- Popup 2 -->
-                        <div id="pop_loto_20_05_18_2" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/loto_2018_208mai_verso2-001.jpg" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </li>
-
-        <!-- =========================================================== -->
-        <!--                     Loto 19 mai 2018                   -->
-        <!-- =========================================================== -->
-        
-            <li class="timeline">
-                <div class="timeline-badge info"><i class="glyphicon glyphicon-menu-right"></i></div>
-                <div class="timeline-panel">
-                    <div class="timeline-heading">
-                    <h4 class="timeline-title">Super Loto</h4>
-                    <p><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i>19 Mai 2018</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-time"></i>20h</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-map-marker"></i>Salle polyvalente de Meyenheim</small></p>
-                    </div>
-                    <div class="timeline-body">
-                        <a href="#pop_loto_19_05_18" data-toggle="modal">
-                            <img src="img/timeline/2018_19_mai_affiche_loto_recto_2.jpg" alt="Affiche Loto 19 mai" class="img-responsive">
-                        </a>
-                        <hr>
-                        
-                        <!-- Popup -->
-                        <div id="pop_loto_19_05_18" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/2018_19_mai_affiche_loto_recto_2.jpg" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </li>
-            
-        <!-- =========================================================== -->
-        <!--                     Big Band 2018                           -->
-        <!-- =========================================================== -->
-        
-            <li class="timeline-inverted">
-                <div class="timeline-badge info"><i class="glyphicon glyphicon-menu-right"></i></div>
-                <div class="timeline-panel">
-                    <div class="timeline-heading">
-                    <h4 class="timeline-title">Big Band</h4>
-                    <p><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i>15 Avril 2018</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-time">17h</i></small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-map-marker"></i>Salle polyvalente de Meyenheim</small></p>
-                    </div>
-                    <div class="timeline-body">
-          
-                        <div id="pop_bigband_15_04_18" class="carousel slide" data-ride="carousel">
-            
-                            <!-- Wrapper for slides -->
-                            <div class="carousel-inner" role="listbox">
-                                <div class="item">
-                                    <a href="#pop_bigband_15_04_18" data-toggle="modal">
-                                        <img src="img/timeline/Affiche_BigBand_2018.jpg">
-                                    </a>
-                                </div>
-                                <div class="item active embed-responsive embed-responsive-16by9">
-                                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/eGLj2QdUa1I" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
-                                </div>
-                            </div>
-
-                            <!-- Controls -->
-                            <a class="left carousel-control" href="#pop_bigband_15_04_18" role="button" data-slide="prev">
-                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
-                                <span class="sr-only">Previous</span>
-                            </a>
-                            <a class="right carousel-control" href="#pop_bigband_15_04_18" role="button" data-slide="next">
-                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
-                                <span class="sr-only">Next</span>
-                            </a>
-                        </div>
-
-                        <hr>
-                                                
-                        <!-- Popup -->
-                        <div id="pop_bigband_15_04_18" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/Affiche_BigBand_2018.jpg" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </li>
-
-        </ul>
-        <h2>2017</h2>
-        <ul class="timeline">
-
-        <!-- =========================================================== -->
-        <!--                   Concert 25 Novembre 2017                  -->
-        <!-- =========================================================== -->
-        
-            <li class="timeline">
-                <div class="timeline-badge info"><i class="glyphicon glyphicon-menu-left"></i></div>
-                <div class="timeline-panel">
-                    <div class="timeline-heading">
-                    <h4 class="timeline-title">Music' IllFest</h4>
-                    <p><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i>25 Novembre 2017</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-time"></i>20h</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-map-marker"></i>Salle polyvalente de Meyenheim</small></p>
-                    </div>
-                    <div class="timeline-body">
-                        <a href="#pop_concert_25_11_17" data-toggle="modal">
-                            <img src="img/timeline/2017_11_concert_affiche_1.jpg" alt="Affiche concert" class="img-responsive">
-                        </a>
-                        <hr>
-                        
-                        <!-- Popup -->
-                        <div id="pop_concert_25_11_17" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/2017_11_concert_affiche_1.jpg" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </li>
-        
-        <!-- =========================================================== -->
-        <!--                     Loto 12 Novembre 2017                   -->
-        <!-- =========================================================== -->
-        
-            <li class="timeline-inverted">
-                <div class="timeline-badge info"><i class="glyphicon glyphicon-menu-right"></i></div>
-                <div class="timeline-panel">
-                    <div class="timeline-heading">
-                    <h4 class="timeline-title">Super Loto</h4>
-                    <p><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i>12 Novembre 2017</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-time"></i>14h15</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-map-marker"></i>Salle polyvalente de Meyenheim</small></p>
-                    </div>
-                    <div class="timeline-body">
-                        <a href="#pop_loto_12_11_17" data-toggle="modal">
-                            <img src="img/timeline/2017_12_nov_affiche_loto_recto2A.jpg" alt="Affiche 6 juillet" class="img-responsive">
-                        </a>
-                        <hr>
-                        
-                        <!-- Popup -->
-                        <div id="pop_loto_12_11_17" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/2017_12_nov_affiche_loto_recto2A.jpg" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </li>
-        
-        <!-- =========================================================== -->
-        <!--                     Loto 11 Novembre 2017                   -->
-        <!-- =========================================================== -->
-        
-            <li class="timeline">
-                <div class="timeline-badge info"><i class="glyphicon glyphicon-menu-left"></i></div>
-                <div class="timeline-panel">
-                    <div class="timeline-heading">
-                    <h4 class="timeline-title">Grand Loto</h4>
-                    <p><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i>11 Novembre 2017</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-time"></i>14h - 00h</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-map-marker"></i>Salle polyvalente de Meyenheim</small></p>
-                    </div>
-                    <div class="timeline-body">
-                        
-                        <div id="carousel-loto-11_2017" class="carousel slide" data-ride="carousel">
-            
-                            <!-- Wrapper for slides -->
-                            <div class="carousel-inner" role="listbox">
-                                <div class="item active">
-                                    <a href="#pop_loto_11_11_16_7_1" data-toggle="modal">
-                                        <img src="img/timeline/2017_11_nov_affiche_loto_recto2.jpg">
-                                    </a>
-                                </div>
-                                <div class="item">
-                                    <a href="#pop_loto_11_11_16_7_2" data-toggle="modal">
-                                        <img src="img/timeline/2017_11_loto_verso2-1.jpg">
-                                    </a>
-                                </div>
-                            </div>
-
-                            <!-- Controls -->
-                            <a class="left carousel-control" href="#carousel-loto-11_2017" role="button" data-slide="prev">
-                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
-                                <span class="sr-only">Previous</span>
-                            </a>
-                            <a class="right carousel-control" href="#carousel-loto-11_2017" role="button" data-slide="next">
-                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
-                                <span class="sr-only">Next</span>
-                            </a>
-                        </div>
-
-                        <hr>
-                            
-                        <!-- Popup 1 -->
-                        <div id="pop_loto_11_11_16_7_1" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/2017_11_nov_affiche_loto_recto2.jpg" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <!-- Popup 2 -->
-                        <div id="pop_loto_11_11_16_7_2" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/2017_11_loto_verso2-1.jpg" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </li>
-        
-        <!-- =========================================================== -->
-        <!--       Rentrée de l'école de musique Septembre 2017          -->
-        <!-- =========================================================== -->
-        
-            <li class="timeline">
-                <div class="timeline-badge info"><i class="glyphicon glyphicon-menu-left"></i></div>
-                <div class="timeline-panel">
-                    <div class="timeline-heading">
-                    <h4 class="timeline-title">Rentrée de l'école de musique</h4>
-                    <p><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i>Septembre 2017</small></br>
-                    </div>
-                    <div class="timeline-body">                
-                        
-                        <div id="carousel-rentree-2017" class="carousel slide" data-ride="carousel">
-            
-                            <!-- Wrapper for slides -->
-                            <div class="carousel-inner" role="listbox">
-                                <div class="item active">
-                                    <a href="#pop_rentree_2017_1" data-toggle="modal">
-                                        <img src="img/timeline/2017_09_ecole_musique_flyer_light.jpg">
-                                    </a>
-                                </div>
-                                <div class="item">
-                                    <a href="#pop_rentree_2017_2" data-toggle="modal">
-                                        <img src="img/timeline/2017_09_eveil_flyer_rentree_light.jpg">
-                                    </a>
-                                </div>
-                            </div>
-
-                            <!-- Controls -->
-                            <a class="left carousel-control" href="#carousel-rentree-2017" role="button" data-slide="prev">
-                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
-                                <span class="sr-only">Previous</span>
-                            </a>
-                            <a class="right carousel-control" href="#carousel-rentree-2017" role="button" data-slide="next">
-                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
-                                <span class="sr-only">Next</span>
-                            </a>
-                        </div>
-
-                        <hr>
-                            
-                        <!-- Popup 1 -->
-                        <div id="pop_rentree_2017_1" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/2017_09_ecole_musique_flyer_light.jpg" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <!-- Popup 2 -->
-                        <div id="pop_rentree_2017_2" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/2017_09_eveil_flyer_rentree_light.jpg" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </li>
-            
-        <!-- =========================================================== -->
-        <!--      Concert de la classe de chant 6 juillet 2017           -->
-        <!-- =========================================================== -->
-        
-            <li class="timeline-inverted">
-                <div class="timeline-badge info"><i class="glyphicon glyphicon-menu-right"></i></div>
-                <div class="timeline-panel">
-                    <div class="timeline-heading">
-                    <h4 class="timeline-title">Concert de la classe de chant</h4>
-                    <p><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i>6 juillet 2017</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-time"></i>20h</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-map-marker"></i>Salle de la musique</small></p>
-                    </div>
-                    <div class="timeline-body">
-                        <a href="#pop_concert_6_7_17" data-toggle="modal">
-                            <img src="img/timeline/2017_07_concert_chant_affiche_2.jpg" alt="Affiche 6 juillet" class="img-responsive">
-                        </a>
-                        <hr>
-                        
-                        <!-- Popup -->
-                        <div id="pop_concert_6_7_17" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/2017_07_concert_chant_affiche_2.jpg" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </li>
-        
-        <!-- =========================================================== -->
-        <!--        Concert de l'école de musique 20 mai 2017            -->
-        <!-- =========================================================== -->
-        
-            <li class="timeline">
-                <div class="timeline-badge info"><i class="glyphicon glyphicon-menu-left"></i></div>
-                <div class="timeline-panel">
-                    <div class="timeline-heading">
-                    <h4 class="timeline-title">Concert de l'école de musique</h4>
-                    <p><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i>20 mai 2017</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-time"></i>16h</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-map-marker"></i>Salle de la musique</small></p>
-                    </div>
-                    <div class="timeline-body">
-                        <a href="#pop_concert_20_5_17" data-toggle="modal">
-                            <img src="img/timeline/2017_05_concert_ecole_affiche_2ct.jpg" alt="Affiche 20 mai" class="img-responsive">
-                        </a>
-                        <hr>
-                        
-                        <!-- Popup -->
-                        <div id="pop_concert_20_5_17" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/2017_05_concert_ecole_affiche_2ct.jpg" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </li>
-        
-        <!-- =========================================================== -->
-        <!--                     Loto 7 Mai 2017                         -->
-        <!-- =========================================================== -->
-        
-            <li class="timeline-inverted">
-                <div class="timeline-badge info"><i class="glyphicon glyphicon-menu-right"></i></div>
-                <div class="timeline-panel">
-                    <div class="timeline-heading">
-                    <h4 class="timeline-title">Grand loto</h4>
-                    <p><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i>7 Mai 2017</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-time"></i>12h - 24h</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-map-marker"></i>Salle polyvalente de Meyenheim</small></p>
-                    </div>
-                    <div class="timeline-body">                
-                        
-                        <div id="carousel-loto-2" class="carousel slide" data-ride="carousel">
-            
-                            <!-- Wrapper for slides -->
-                            <div class="carousel-inner" role="listbox">
-                                <div class="item active">
-                                    <a href="#pop_loto_7_5_17_1" data-toggle="modal">
-                                        <img src="img/timeline/2017_7_mai_affiche_loto_2.jpg" alt="Affiche 7 mai">
-                                    </a>
-                                </div>
-                                <div class="item">
-                                    <a href="#pop_loto_7_5_17_2" data-toggle="modal">
-                                        <img src="img/timeline/2017_7_mai_affiche_loto_2_verso.jpg" alt="Détails loto 7 mai">
-                                    </a>
-                                </div>
-                            </div>
-
-                            <!-- Controls -->
-                            <a class="left carousel-control" href="#carousel-loto-2" role="button" data-slide="prev">
-                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
-                                <span class="sr-only">Previous</span>
-                            </a>
-                            <a class="right carousel-control" href="#carousel-loto-2" role="button" data-slide="next">
-                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
-                                <span class="sr-only">Next</span>
-                            </a>
-                        </div>
-
-                        <hr>
-                        
-                        <ul class="list-group">
-                            <li class="list-group-item">4 manches
-                            <li class="list-group-item">Ouverture des portes dès 12h
-                            <li class="list-group-item">Restauration assurée
-                        </ul>
-
-                        <hr>
-
-                        <a class="page-scroll" href="#contact">Renseignements et inscription</a>
-                            
-                        <!-- Popup 1 -->
-                        <div id="pop_loto_7_5_17_1" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/2017_7_mai_affiche_loto_2.jpg" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <!-- Popup 2 -->
-                        <div id="pop_loto_7_5_17_2" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/2017_7_mai_affiche_loto_2_verso.jpg" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </li>
-
-        <!-- =========================================================== -->
-        <!--                       Loto 6 Mai 2017                       -->
-        <!-- =========================================================== -->
-        
-            <li class="timeline">
-                <div class="timeline-badge info"><i class="glyphicon glyphicon-menu-left"></i></div>
-                <div class="timeline-panel">
-                    <div class="timeline-heading">
-                    <h4 class="timeline-title">Loto à l'ancienne</h4>
-                    <p><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i>6 Mai 2017</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-time"></i>20h</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-map-marker"></i>Salle polyvalente de Meyenheim</small></p>
-                    </div>
-                    <div class="timeline-body">
-                        <a href="#pop_loto_6_5_17" data-toggle="modal">
-                            <img src="img/timeline/2017_6_mai_affiche_loto.jpg" alt="Affiche 6 mai" class="img-responsive">
-                        </a>
-                        <hr>
-                        <a class="page-scroll" href="#contact">Renseignements et inscription</a>
-                        
-                        <!-- Popup -->
-                        <div id="pop_loto_6_5_17" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/2017_6_mai_affiche_loto.jpg" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </li>
-
-        <!-- =========================================================== -->
-        <!--                  Maibummel 1er Mai 2017                     -->
-        <!-- =========================================================== -->
-        
-            <li class="timeline-inverted">
-                <div class="timeline-badge info"><i class="glyphicon glyphicon-menu-right"></i></div>
-                <div class="timeline-panel">
-                    <div class="timeline-heading">
-                    <h4 class="timeline-title">Maibummel</h4>
-                    <p><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i>1er Mai 2017</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-time"></i>9h - 14h</small></br>
-                    <small class="text-muted"><i class="glyphicon glyphicon-map-marker"></i>Salle de musique, rue de l'Ill</small></p>
-                    </div>
-                    <div class="timeline-body">                
-        
-                        <a href="#pop_maibummel_17" data-toggle="modal">
-                            <img src="img/timeline/Affiche_1er_mai_2017_1.jpg" alt="Affiche 1er mai" class="img-responsive">
-                        </a>
-
-                        <hr>
-                        
-                        <a class="page-scroll" href="#contact">Renseignements et inscription</a>
-                            
-                        <!-- Popup 1 -->
-                        <div id="pop_maibummel_17" class="modal fade">
-                            <div class="modal-dialog">
-                                <div class="modal-content">
-                                    <div class="modal-body">
-                                        <img src="img/timeline/Affiche_1er_mai_2017_1.jpg" class="img-responsive">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </li>
-            
-        </ul>
-        <h2>2016</h2>
-        <ul class="timeline">
- 
-        <!-- =========================================================== -->
-        <!--                Marché aux puces Septembre 2016              -->
-        <!-- =========================================================== -->
-            <li>
-            <div class="timeline-badge info"><i class="glyphicon glyphicon-menu-left"></i></div>
-            <div class="timeline-panel">
-                <div class="timeline-heading">
-                <h4 class="timeline-title">Grand Marché aux puces</h4>
-                <p><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i>25 Septembre 2016</small></p>
-                </div>
-                <div class="timeline-body">
-                    <a href="#pop_puces_2016" data-toggle="modal">
-                        <img src="img/timeline/puces_t.jpg" alt="Affiche puces" class="img-responsive">
-                    </a>
-                    <p>Organisé par la Société de Musique et le Football Club de Meyenheim. Plus de 400 exposants, dans les rues du village autour de l'église. Restauration à toute heure : grillades, ...</p>
-                    <a href="files/2016_09_puces_tract.pdf">Renseignements et inscription</a>
-                    
-                    <!-- Popup 1 -->
-                    <div id="pop_puces_2016" class="modal fade">
-                        <div class="modal-dialog">
-                            <div class="modal-content">
-                                <div class="modal-body">
-                                    <img src="img/timeline/puces.jpg" class="img-responsive">
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                </div>
-            </div>
-            </li>
-        </ul>
-        </div>
-    </section>
-
-    <?php include('contact.html'); ?>
-    
-    <?php include('footer.html'); ?>
-
-    <?php include('include_foot.html'); ?>
-
-    <script>
-    window.onload = function(){$('.carousel').each(function(){
-        var items = $(this).find(".item"),
-            heights = [],
-            tallest;
-
-        if (items.length) {
-            function normalizeHeights() {
-                items.each(function() { //add heights to array
-                    heights.push($(this).height());
-                });
-                tallest = Math.max.apply(null, heights); //cache largest value
-                items.each(function() {
-                    $(this).css('min-height',tallest + 'px');
-                });
-            };
-            normalizeHeights();
-
-            $(window).on('resize orientationchange', function () {
-                tallest = 0, heights.length = 0; //reset vars
-                items.each(function() {
-                    $(this).css('min-height','0'); //reset min-height
-                });
-                normalizeHeights(); //run it again
-            });
-        }
-    })}
-    </script>
-
-</body>
-
-</html>
diff --git a/files/2016_09_puces_tract.pdf b/files/2016_09_puces_tract.pdf
deleted file mode 100644
index 0e0cc7b..0000000
Binary files a/files/2016_09_puces_tract.pdf and /dev/null differ
diff --git a/footer.html b/footer.html
deleted file mode 100644
index 25fa4fa..0000000
--- a/footer.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<footer>
-  <small>Créé par Paul TREHIOU et inspiré du theme <a href="https://startbootstrap.com/template-overviews/creative/">Creative</a> <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png"></a> powered by <a href="https://nixos.org/">NixOS</a></small>
-</footer> 
diff --git a/harmonie.php b/harmonie.php
deleted file mode 100644
index fa1be10..0000000
--- a/harmonie.php
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-
-<head>
-
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="Site de la musique de Meyenheim">
-    <meta name="author" content="Paul TREHIOU">
-
-    <title>Musique fraternité - Harmonie Intercommunale</title>
-
-    <?php include('include_head.html'); ?>
-
-</head>
-
-<body id="page-top">
-
-    <?php include('navbar.html'); ?>
-
-    <header style="background-image: url('img/harmonie.jpg')">
-        <div class="header-content">
-            <div class="header-content-inner">
-                <h1 id="homeHeading" style="text-shadow: 0px 0px 7px #000;">Harmonie intercommunale Centre Haut-Rhin</br>Des airs traditionnels ou classiques aux musiques actuelles</h1>
-                <hr>
-                <a href="#about" class="btn btn-primary btn-xl page-scroll">Plus d'informations</a>
-            </div>
-        </div>
-    </header>
-
-    <section class="bg-primary" id="about">
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-6 text-center">
-                    <h2 class="section-heading">Dirigée par Mimo ILIEV, l’harmonie intercommunale réunit des musiciens de tous les âges dans une ambiance conviviale.</h2>
-                    <hr class="light">
-                    <p class="text-faded">Le répertoire est des plus variés, toujours renouvelé, suivant les services et évènements musicaux prévus, passant des airs classiques et traditionnels aux musiques les plus actuelles.</p>
-                    <p class="text-faded">Les répétitions ont lieu le vendredi de 20h à 22h à Oberhergheim dans un local dédié mis à disposition par la Commune d’Oberhergheim.</p>
-                    <p class="text-faded">Les prestations musicales sont tout aussi variées, entre Cérémonies et animations diverses, jusqu’aux concerts, véritables temps forts. Un concert de printemps se tient chaque année à Oberhergheim.</p>
-                    <p class="text-faded">Un concert-spectacle a lieu le dernier samedi de novembre tous les deux ans à Meyenheim intitulé Music’IllFest, avec à chaque fois des découvertes proposées au public, dans une ambiance des plus festives.</p>
-                    <p class="text-faded">D’autres concerts ponctuent l’année, notamment en partenariat avec l’Harmonie municipale de Kembs ou encore la Chorale d’Oberhergheim.</p>
-                    <p class="text-faded">L’harmonie intercommunale est née de la réunion des harmonies de Meyenheim, Oberhergheim et Réguisheim mais est ouverte à tout musicien, notamment les jeunes musiciens après quelques années de pratiques mais aussi les adultes souhaitant reprendre une activité musicale après quelques années de pause.</p>
-                    <p class="text-faded">L’Harmonie intercommunale est financée par la Communauté de Communes Centre Haut-Rhin.</p>
-                </div>
-                <img src="img/IllFest_2013_Corentin_Christophe.jpg" class="col-lg-6 img-responsive">
-            </div>
-        </div>
-    </section>
-
-    <?php include('contact.html'); ?>
-
-    <?php include('footer.html'); ?>
-
-    <?php include('include_foot.html'); ?>
-
-</body>
-
-</html>
diff --git a/img/timeline/2016_Loto_11_novembre_affiche.jpg b/img/timeline/2016_Loto_11_novembre_affiche.jpg
deleted file mode 100644
index 20e819b..0000000
Binary files a/img/timeline/2016_Loto_11_novembre_affiche.jpg and /dev/null differ
diff --git a/img/timeline/2016_nov_11_IMG_20161111_182030_3.jpg b/img/timeline/2016_nov_11_IMG_20161111_182030_3.jpg
deleted file mode 100644
index 0496edd..0000000
Binary files a/img/timeline/2016_nov_11_IMG_20161111_182030_3.jpg and /dev/null differ
diff --git a/img/timeline/2016_novembre_02B_affiche_loto_meyenheim_light.jpg b/img/timeline/2016_novembre_02B_affiche_loto_meyenheim_light.jpg
deleted file mode 100644
index 8d5edc1..0000000
Binary files a/img/timeline/2016_novembre_02B_affiche_loto_meyenheim_light.jpg and /dev/null differ
diff --git a/img/timeline/2016_novembre_03_affiche_loto_meyenheim_light.jpg b/img/timeline/2016_novembre_03_affiche_loto_meyenheim_light.jpg
deleted file mode 100644
index 03883a4..0000000
Binary files a/img/timeline/2016_novembre_03_affiche_loto_meyenheim_light.jpg and /dev/null differ
diff --git a/img/timeline/2017_05_concert_ecole_affiche_2ct.jpg b/img/timeline/2017_05_concert_ecole_affiche_2ct.jpg
deleted file mode 100644
index 06ebcd0..0000000
Binary files a/img/timeline/2017_05_concert_ecole_affiche_2ct.jpg and /dev/null differ
diff --git a/img/timeline/2017_07_concert_chant_affiche_2.jpg b/img/timeline/2017_07_concert_chant_affiche_2.jpg
deleted file mode 100644
index 1e6ff0c..0000000
Binary files a/img/timeline/2017_07_concert_chant_affiche_2.jpg and /dev/null differ
diff --git a/img/timeline/2017_09_ecole_musique_flyer_light.jpg b/img/timeline/2017_09_ecole_musique_flyer_light.jpg
deleted file mode 100644
index 5b7dad0..0000000
Binary files a/img/timeline/2017_09_ecole_musique_flyer_light.jpg and /dev/null differ
diff --git a/img/timeline/2017_09_eveil_flyer_rentree_light.jpg b/img/timeline/2017_09_eveil_flyer_rentree_light.jpg
deleted file mode 100644
index 72dcb2d..0000000
Binary files a/img/timeline/2017_09_eveil_flyer_rentree_light.jpg and /dev/null differ
diff --git a/img/timeline/2017_11_concert_affiche_1.jpg b/img/timeline/2017_11_concert_affiche_1.jpg
deleted file mode 100644
index 6203430..0000000
Binary files a/img/timeline/2017_11_concert_affiche_1.jpg and /dev/null differ
diff --git a/img/timeline/2017_11_loto_verso2-1.jpg b/img/timeline/2017_11_loto_verso2-1.jpg
deleted file mode 100644
index 1021e50..0000000
Binary files a/img/timeline/2017_11_loto_verso2-1.jpg and /dev/null differ
diff --git a/img/timeline/2017_11_nov_affiche_loto_recto2.jpg b/img/timeline/2017_11_nov_affiche_loto_recto2.jpg
deleted file mode 100644
index 41ad486..0000000
Binary files a/img/timeline/2017_11_nov_affiche_loto_recto2.jpg and /dev/null differ
diff --git a/img/timeline/2017_12_nov_affiche_loto_recto2A.jpg b/img/timeline/2017_12_nov_affiche_loto_recto2A.jpg
deleted file mode 100644
index a899459..0000000
Binary files a/img/timeline/2017_12_nov_affiche_loto_recto2A.jpg and /dev/null differ
diff --git a/img/timeline/2017_6_mai_affiche_loto.jpg b/img/timeline/2017_6_mai_affiche_loto.jpg
deleted file mode 100644
index 885abec..0000000
Binary files a/img/timeline/2017_6_mai_affiche_loto.jpg and /dev/null differ
diff --git a/img/timeline/2017_7_mai_affiche_loto.jpg b/img/timeline/2017_7_mai_affiche_loto.jpg
deleted file mode 100644
index 9869176..0000000
Binary files a/img/timeline/2017_7_mai_affiche_loto.jpg and /dev/null differ
diff --git a/img/timeline/2017_7_mai_affiche_loto_2.jpg b/img/timeline/2017_7_mai_affiche_loto_2.jpg
deleted file mode 100644
index 61b285c..0000000
Binary files a/img/timeline/2017_7_mai_affiche_loto_2.jpg and /dev/null differ
diff --git a/img/timeline/2017_7_mai_affiche_loto_2_verso.jpg b/img/timeline/2017_7_mai_affiche_loto_2_verso.jpg
deleted file mode 100644
index 03f3080..0000000
Binary files a/img/timeline/2017_7_mai_affiche_loto_2_verso.jpg and /dev/null differ
diff --git a/img/timeline/2018_11_nov_affiche_loto_recto.jpg b/img/timeline/2018_11_nov_affiche_loto_recto.jpg
deleted file mode 100644
index 07a6f20..0000000
Binary files a/img/timeline/2018_11_nov_affiche_loto_recto.jpg and /dev/null differ
diff --git a/img/timeline/2018_12_nov_affiche_loto_recto_1.jpg b/img/timeline/2018_12_nov_affiche_loto_recto_1.jpg
deleted file mode 100644
index 884e706..0000000
Binary files a/img/timeline/2018_12_nov_affiche_loto_recto_1.jpg and /dev/null differ
diff --git a/img/timeline/2018_19_mai_affiche_loto_recto_2.jpg b/img/timeline/2018_19_mai_affiche_loto_recto_2.jpg
deleted file mode 100644
index 66b8135..0000000
Binary files a/img/timeline/2018_19_mai_affiche_loto_recto_2.jpg and /dev/null differ
diff --git a/img/timeline/2018_20_mai_affiche_loto_recto_2.jpg b/img/timeline/2018_20_mai_affiche_loto_recto_2.jpg
deleted file mode 100644
index bd79364..0000000
Binary files a/img/timeline/2018_20_mai_affiche_loto_recto_2.jpg and /dev/null differ
diff --git a/img/timeline/Affiche_1er_mai_2017_1.jpg b/img/timeline/Affiche_1er_mai_2017_1.jpg
deleted file mode 100644
index fdab133..0000000
Binary files a/img/timeline/Affiche_1er_mai_2017_1.jpg and /dev/null differ
diff --git a/img/timeline/Affiche_BigBand_2018.jpg b/img/timeline/Affiche_BigBand_2018.jpg
deleted file mode 100644
index 9efcb3d..0000000
Binary files a/img/timeline/Affiche_BigBand_2018.jpg and /dev/null differ
diff --git a/img/timeline/IMG_20180705_212412_2.jpg b/img/timeline/IMG_20180705_212412_2.jpg
deleted file mode 100644
index c25ad1d..0000000
Binary files a/img/timeline/IMG_20180705_212412_2.jpg and /dev/null differ
diff --git a/img/timeline/IMG_20180705_221046.jpg b/img/timeline/IMG_20180705_221046.jpg
deleted file mode 100644
index 19bbce4..0000000
Binary files a/img/timeline/IMG_20180705_221046.jpg and /dev/null differ
diff --git a/img/timeline/IMG_20180705_221739_1.jpg b/img/timeline/IMG_20180705_221739_1.jpg
deleted file mode 100644
index 2c29d3d..0000000
Binary files a/img/timeline/IMG_20180705_221739_1.jpg and /dev/null differ
diff --git a/img/timeline/IMG_2292.JPG b/img/timeline/IMG_2292.JPG
deleted file mode 100644
index d4a4c0c..0000000
Binary files a/img/timeline/IMG_2292.JPG and /dev/null differ
diff --git a/img/timeline/audition_2018_jeunes.JPG b/img/timeline/audition_2018_jeunes.JPG
deleted file mode 100644
index e9089fe..0000000
Binary files a/img/timeline/audition_2018_jeunes.JPG and /dev/null differ
diff --git a/img/timeline/audition_chant_2018_affiche_2_light.jpg b/img/timeline/audition_chant_2018_affiche_2_light.jpg
deleted file mode 100644
index b99ba1a..0000000
Binary files a/img/timeline/audition_chant_2018_affiche_2_light.jpg and /dev/null differ
diff --git a/img/timeline/concert_ecole_2018_affiche_1.jpg b/img/timeline/concert_ecole_2018_affiche_1.jpg
deleted file mode 100644
index 07042bd..0000000
Binary files a/img/timeline/concert_ecole_2018_affiche_1.jpg and /dev/null differ
diff --git a/img/timeline/loto_2018_208mai_verso2-001.jpg b/img/timeline/loto_2018_208mai_verso2-001.jpg
deleted file mode 100644
index a2f06e7..0000000
Binary files a/img/timeline/loto_2018_208mai_verso2-001.jpg and /dev/null differ
diff --git a/img/timeline/puces.jpg b/img/timeline/puces.jpg
deleted file mode 100644
index 8f7c7fd..0000000
Binary files a/img/timeline/puces.jpg and /dev/null differ
diff --git a/img/timeline/puces_t.jpg b/img/timeline/puces_t.jpg
deleted file mode 100644
index d7e1f33..0000000
Binary files a/img/timeline/puces_t.jpg and /dev/null differ
diff --git a/include_foot.html b/include_foot.html
deleted file mode 100644
index af08cdf..0000000
--- a/include_foot.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!-- jQuery -->
-<script src="vendor/jquery.min.js"></script>
-
-<!-- Bootstrap Core JavaScript -->
-<script src="vendor/bootstrap.min.js"></script>
-
-<!-- Plugin JavaScript -->
-<script src="vendor/jquery.easing.min.js"></script>
-<script src="vendor/scrollreveal.min.js"></script>
-<script src="vendor/appear.min.js"></script>
-
-<!-- Theme JavaScript -->
-<script src="js/creative.min.js"></script>
diff --git a/index.php b/index.php
deleted file mode 100644
index 8c179e7..0000000
--- a/index.php
+++ /dev/null
@@ -1,141 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-
-<head>
-
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="Site de la musique de Meyenheim">
-    <meta name="author" content="Paul TREHIOU">
-    <meta name="google-site-verification" content="vfIxnQkU6NJ__BiBJu2OXPP4JlijXV5Iq2R4Yskf3Ss" />
-
-    <title>Musique fraternité</title>
-
-    <?php include('include_head.html'); ?>
-    
-    <style>
-        .portfolio-box {
-            overflow: hidden;
-            max-height: 350px;
-        }
-        .portfolio-box img {
-            max-height: 350px;
-        }
-    </style>
-
-</head>
-
-<body id="page-top">
-
-    <?php include('navbar.html'); ?>
-
-    <header>
-        <div class="header-content">
-            <div class="header-content-inner">
-                <h1 id="homeHeading" style="text-shadow: 0px 0px 7px #000; margin-bottom: 300px;">Musique fraternité</br>Meyenheim</h1>
-                <a href="#about" class="btn btn-primary btn-xl page-scroll">Plus d'informations</a>
-            </div>
-        </div>
-    </header>
-
-    <section class="bg-primary" id="about">
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-8 col-lg-offset-2 text-center">
-                    <h2 class="section-heading">5 raisons de mieux nous connaître</h2>
-                    <hr class="light">
-                    <p class="text-faded">De nombreux évènements et activités organisés tout au long de l’année, un comité directeur bénévole dynamique pour faire vivre une association presque centenaire, une collaboration avec les Musiques voisines au travers de l’Harmonie intercommunale, une école de musique s’appuyant sur des professeurs qualifiés au sein d’une pédagogie basée sur la pratique instrumentale, une salle de musique entièrement rénovée et fonctionnelle disponible à la location.</p>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <section class="no-padding" id="portfolio">
-        <div class="container-fluid">
-            <div class="row no-gutter popup-gallery">
-                <div class="col-lg-4 col-sm-6">
-                    <a href="harmonie.php" class="portfolio-box">
-                        <img src="img/portfolio/thumbnails/1.jpg" alt="">
-                        <div class="portfolio-box-caption">
-                            <div class="portfolio-box-caption-content">
-                                <div class="project-name">
-                                    L’harmonie intercommunale, on y joue de tout
-                                </div>
-                            </div>
-                        </div>
-                    </a>
-                </div>
-                <div class="col-lg-4 col-sm-6">
-                    <a href="ecole.php" class="portfolio-box">
-                        <img src="img/portfolio/thumbnails/2.jpg" alt="">
-                        <div class="portfolio-box-caption">
-                            <div class="portfolio-box-caption-content">
-                                <div class="project-name">
-                                    l’École de Musique, ce n’est pas que pour les enfants…mais aussi
-                                </div>
-                            </div>
-                        </div>
-                    </a>
-                </div>
-                <div class="col-lg-4 col-sm-6">
-                    <a href="evenements.php" class="portfolio-box">
-                        <img src="img/portfolio/thumbnails/3.jpg" alt="">
-                        <div class="portfolio-box-caption">
-                            <div class="portfolio-box-caption-content">
-                                <div class="project-name">
-                                    Des évènements musicaux, des lotos…et mêmes des puces
-                                </div>
-                            </div>
-                        </div>
-                    </a>
-                </div>
-                <div class="col-lg-4 col-sm-6">
-                    <a href="direction.php" class="portfolio-box">
-                        <img src="img/portfolio/thumbnails/4.jpg" alt="">
-                        <div class="portfolio-box-caption">
-                            <div class="portfolio-box-caption-content">
-                                <div class="project-name">
-                                    La direction de l’association, du pur jus de bénévolat
-                                </div>
-                            </div>
-                        </div>
-                    </a>
-                </div>
-                <div class="col-lg-4 col-sm-6">
-                    <a href="salle.php" class="portfolio-box">
-                        <img src="img/portfolio/thumbnails/5.jpg" alt="">
-                        <div class="portfolio-box-caption">
-                            <div class="portfolio-box-caption-content">
-                                <div class="project-name">
-                                    La salle, entre scène et cuisine, pour tous vos évènements festifs
-                                </div>
-                            </div>
-                        </div>
-                    </a>
-                </div>
-                <div class="col-lg-4 col-sm-6">
-                    <a href="partenaires.php" class="portfolio-box">
-                        <img src="img/partenaires/vialis.jpg" alt="">
-                        <div class="portfolio-box-caption">
-                            <div class="portfolio-box-caption-content">
-                                <div class="project-name">
-                                    Partenaires
-                                </div>
-                            </div>
-                        </div>
-                    </a>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <?php include('contact.html'); ?>
-    
-    <?php include('footer.html'); ?>
-
-    <?php include('include_foot.html'); ?>
-
-</body>
-
-</html>
diff --git a/less/creative.less b/less/creative.less
deleted file mode 100644
index 5e71eb5..0000000
--- a/less/creative.less
+++ /dev/null
@@ -1,361 +0,0 @@
-@import "variables.less";
-@import "mixins.less";
-
-// Global Components
-html,
-body {
-    height: 100%;
-    width: 100%;
-}
-
-body {
-    .serif-font;
-}
-
-hr {
-    border-color: @theme-primary;
-    border-width: 3px;
-    max-width: 50px;
-}
-
-hr.light {
-    border-color: white;
-}
-
-a {
-    .transition-all;
-    color: @theme-primary;
-    &:hover,
-    &:focus {
-        color: darken(@theme-primary, 10%);
-    }
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    .sans-serif-font;
-}
-
-p {
-    font-size: 16px;
-    line-height: 1.5;
-    margin-bottom: 20px;
-}
-
-.bg-primary {
-    background-color: @theme-primary;
-}
-
-.bg-dark {
-    background-color: @gray-darker;
-    color: white;
-}
-
-.text-faded {
-    color: fade(white, 70%);
-}
-
-section {
-    padding: 100px 0;
-}
-
-aside {
-    padding: 50px 0;
-}
-
-.no-padding {
-    padding: 0;
-}
-
-// Navigation
-
-.navbar-default {
-    background-color: white;
-    border-color: fade(@gray-darker, 5%);
-    .sans-serif-font;
-    .transition-all;
-    .navbar-header .navbar-brand {
-        color: @theme-primary;
-        .sans-serif-font;
-        font-weight: 700;
-        text-transform: uppercase;
-        &:hover,
-        &:focus {
-            color: darken(@theme-primary, 10%);
-        }
-    }
-    .navbar-header .navbar-toggle {
-        font-weight: 700;
-        font-size: 12px;
-        color: @gray-darker;
-        text-transform: uppercase;
-    }
-    .nav {
-        > li {
-            > a,
-            > a:focus {
-                text-transform: uppercase;
-                font-weight: 700;
-                font-size: 13px;
-                color: @gray-darker;
-                &:hover {
-                    color: @theme-primary;
-                }
-            }
-            &.active {
-                > a,
-                > a:focus {
-                    color: @theme-primary !important;
-                    background-color: transparent;
-                    &:hover {
-                        background-color: transparent;
-                    }
-                }
-            }
-        }
-    }
-    @media (min-width: 768px) {
-        background-color: transparent;
-        border-color: fade(white, 30%);
-        .navbar-header .navbar-brand {
-            color: fade(white, 70%);
-            &:hover,
-            &:focus {
-                color: white;
-            }
-        }
-        .nav > li > a,
-        .nav > li > a:focus {
-            color: fade(white, 70%);
-            &:hover {
-                color: white;
-            }
-        }
-        &.affix {
-            background-color: white;
-            border-color: fade(@gray-darker, 5%);
-            .navbar-header .navbar-brand {
-                color: @theme-primary;
-                font-size: 14px;
-                &:hover,
-                &:focus {
-                    color: darken(@theme-primary, 10%);
-                }
-            }
-            .nav > li > a,
-            .nav > li > a:focus {
-                color: @gray-darker;
-                &:hover {
-                    color: @theme-primary;
-                }
-            }
-        }
-    }
-}
-
-// Homepage Header
-
-header {
-    position: relative;
-    width: 100%;
-    min-height: auto;
-    .background-cover;
-    background-position: center;
-    background-image: url('../img/header.jpg');
-    text-align: center;
-    color: white;
-    .header-content {
-        position: relative;
-        text-align: center;
-        padding: 100px 15px 100px;
-        width: 100%;
-        .header-content-inner {
-            h1 {
-                font-weight: 700;
-                text-transform: uppercase;
-                margin-top: 0;
-                margin-bottom: 0;
-                font-size: 30px;
-            }
-            hr {
-                margin: 30px auto;
-            }
-            p {
-                font-weight: 300;
-                color: fade(white, 70%);
-                font-size: 16px;
-                margin-bottom: 50px;
-            }
-        }
-    }
-    @media (min-width: 768px) {
-        min-height: 100%;
-        .header-content {
-            position: absolute;
-            top: 50%;
-            -webkit-transform: translateY(-50%);
-            -ms-transform: translateY(-50%);
-            transform: translateY(-50%);
-            padding: 0 50px;
-            .header-content-inner {
-                max-width: 1000px;
-                margin-left: auto;
-                margin-right: auto;
-                h1 {
-                    font-size: 50px;
-                }
-                p {
-                    font-size: 18px;
-                    max-width: 80%;
-                    margin-left: auto;
-                    margin-right: auto;
-                }
-            }
-        }
-    }
-}
-
-// Sections
-
-.section-heading {
-    margin-top: 0;
-}
-
-.service-box {
-    max-width: 400px;
-    margin: 50px auto 0;
-    @media (min-width: 992px) {
-        margin: 20px auto 0;
-    }
-    p {
-        margin-bottom: 0;
-    }
-}
-
-.portfolio-box {
-    position: relative;
-    display: block;
-    max-width: 650px;
-    margin: 0 auto;
-    .portfolio-box-caption {
-        color: white;
-        opacity: 0;
-        display: block;
-        background: fade(@theme-primary, 90%);
-        position: absolute;
-        bottom: 0;
-        text-align: center;
-        width: 100%;
-        height: 100%;
-        .transition-all;
-        .portfolio-box-caption-content {
-            width: 100%;
-            text-align: center;
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            .project-category,
-            .project-name {
-                .sans-serif-font;
-                padding: 0 15px;
-            }
-            .project-category {
-                text-transform: uppercase;
-                font-weight: 600;
-                font-size: 14px;
-            }
-            .project-name {
-                font-size: 18px;
-            }
-        }
-    }
-    &:hover {
-        .portfolio-box-caption {
-            opacity: 1;
-        }
-    }
-    &:focus {
-        outline: none;
-    }
-    @media (min-width: 768px) {
-        .portfolio-box-caption {
-            .portfolio-box-caption-content {
-                .project-category {
-                    font-size: 16px;
-                }
-                .project-name {
-                    font-size: 22px;
-                }
-            }
-        }
-    }
-}
-
-.call-to-action {
-    h2 {
-        margin: 0 auto 20px;
-    }
-}
-
-// Bootstrap Overrides
-.text-primary {
-    color: @theme-primary;
-}
-
-.no-gutter > [class*='col-'] {
-    padding-right:0;
-    padding-left:0;
-}
-
-// Button Styles
-.btn-default {
-    .button-variant(@gray-darker;white;white);
-}
-
-.btn-primary {
-    .button-variant(white;@theme-primary;@theme-primary);
-}
-
-.btn {
-    .sans-serif-font;
-    border: none;
-    border-radius: 300px;
-    font-weight: 700;
-    text-transform: uppercase;
-}
-
-.btn-xl {
-    padding: 15px 30px;
-}
-
-// Extras
-// -- Highlight Color Customization
-::-moz-selection {
-    color: white;
-    text-shadow: none;
-    background: @gray-darker;
-}
-
-::selection {
-    color: white;
-    text-shadow: none;
-    background: @gray-darker;
-}
-
-img::selection {
-    color: white;
-    background: transparent;
-}
-
-img::-moz-selection {
-    color: white;
-    background: transparent;
-}
-
-body {
-    webkit-tap-highlight-color: @gray-darker;
-}
\ No newline at end of file
diff --git a/less/mixins.less b/less/mixins.less
deleted file mode 100644
index 74de548..0000000
--- a/less/mixins.less
+++ /dev/null
@@ -1,63 +0,0 @@
-// Mixins
-
-.transition-all() {
-    -webkit-transition: all 0.35s;
-    -moz-transition: all 0.35s;
-    transition: all 0.35s;
-}
-
-.background-cover() {
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    background-size: cover;
-    -o-background-size: cover;
-}
-
-.button-variant(@color; @background; @border) {
-	color: @color;
-	background-color: @background;
-	border-color: @border;
-	.transition-all;
-
-	&:hover,
-	&:focus,
-	&.focus,
-	&:active,
-	&.active,
-	.open > .dropdown-toggle& {
-		color: @color;
-		background-color: darken(@background, 5%);
-	    border-color: darken(@border, 7%);
-	}
-	&:active,
-	&.active,
-	.open > .dropdown-toggle& {
-		background-image: none;
-	}
-	&.disabled,
-	&[disabled],
-	fieldset[disabled] & {
-		&,
-		&:hover,
-		&:focus,
-		&.focus,
-		&:active,
-		&.active {
-			background-color: @background;
-			border-color: @border;
-		}
-	}
-
-	.badge {
-		color: @background;
-		background-color: @color;
-	}
-}
-
-.sans-serif-font() {
-	font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
-}
-
-.serif-font() {
-	font-family: 'Merriweather', 'Helvetica Neue', Arial, sans-serif;
-}
\ No newline at end of file
diff --git a/less/variables.less b/less/variables.less
deleted file mode 100644
index c3eec98..0000000
--- a/less/variables.less
+++ /dev/null
@@ -1,12 +0,0 @@
-// Variables
-
-// Gray and Brand Colors for use across theme
-
-@theme-primary:    #F05F40;
-
-@gray-base:        #000;
-@gray-darker:      lighten(@gray-base, 13.5%); // #222
-@gray-dark:        lighten(@gray-base, 20%);   // #333
-@gray:             lighten(@gray-base, 33.5%); // #555
-@gray-light:       lighten(@gray-base, 46.7%); // #777
-@gray-lighter:     lighten(@gray-base, 93.5%); // #eee
\ No newline at end of file
diff --git a/manage.py b/manage.py
new file mode 100755
index 0000000..1ee345e
--- /dev/null
+++ b/manage.py
@@ -0,0 +1,22 @@
+#!/nix/store/yglc8kgzmdaskyngv90y1mw96fl00pjy-python3-3.7.4/bin/python
+import os
+import sys
+
+if __name__ == "__main__":
+    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "site_musique.settings.dev")
+    try:
+        from django.core.management import execute_from_command_line
+    except ImportError:
+        # The above import may fail for some other reason. Ensure that the
+        # issue is really that Django is missing to avoid masking other
+        # exceptions on Python 2.
+        try:
+            import django
+        except ImportError:
+            raise ImportError(
+                "Couldn't import Django. Are you sure it's installed and "
+                "available on your PYTHONPATH environment variable? Did you "
+                "forget to activate a virtual environment?"
+            )
+        raise
+    execute_from_command_line(sys.argv)
diff --git a/nginx.conf b/nginx.conf
deleted file mode 100644
index 663132c..0000000
--- a/nginx.conf
+++ /dev/null
@@ -1,21 +0,0 @@
-server {
-    listen       80;
-    
-    location / {
-        root   /usr/share/nginx/html;
-        index  index.php;
-    }
-    
-    #error_page  404              /404.html;
-
-    # pass the PHP scripts to FastCGI server listening on php:9000
-    #
-    location ~ \.php$ {
-        root           html;
-        fastcgi_pass   php:9000;
-        fastcgi_index  index.php;
-        fastcgi_param  SCRIPT_FILENAME  /usr/share/nginx/html/$fastcgi_script_name;
-        include        fastcgi_params;
-    }
-
-}
diff --git a/partenaires.php b/partenaires.php
deleted file mode 100644
index 80073b9..0000000
--- a/partenaires.php
+++ /dev/null
@@ -1,69 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-
-<head>
-
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="Site de la musique de Meyenheim">
-    <meta name="author" content="Paul TREHIOU">
-
-    <title>Musique fraternité - Partenaires</title>
-
-    <?php include('include_head.html'); ?>
-    
-        <style>
-        @media (min-width: 768px) {
-            .navbar-default .nav > li > a,
-            .navbar-default .nav > li > a:focus {
-                color: #222222;
-            }
-            .navbar-default .nav > li > a:hover,
-            .navbar-default .nav > li > a:focus:hover {
-                color: #F05F40;
-            }
-        }
-        
-        #partenaires {
-            overflow: hidden;
-        }
-        
-        #partenaires a {
-            height: 30rem;
-        }
-
-        #partenaires a img {
-            max-height: 100%;
-            max-width: 100%;
-        }
-
-    </style>
-
-</head>
-
-<body id="page-top">
-
-    <?php include('navbar.html'); ?>
-    
-    <section id="partenaires">
-        <h1 class="text-center">Nos partenaires</h1>
-
-        <a href="http://www.meyenheim.fr/" class="col-sm-6 col-md-4"><img class="img-responsive" src="img/partenaires/Meyenheim_logo.jpg"></a>
-        <a href="http://ccchr.fr/" class="col-sm-6 col-md-4"><img class="img-responsive" src="img/partenaires/logo-couleur-CCCHR-e1423820301297.jpg"></a>
-        <a href="https://www.haut-rhin.fr/" class="col-sm-6 col-md-4"><img class="img-responsive" src="img/partenaires/Logo_Alsace_CD68.png"></a>
-        <a href="https://culturegrandest.fr/" class="col-sm-6 col-md-4"><img class="img-responsive" src="img/partenaires/Agence-culturelle-Grand-Est-rouge.jpg"></a>
-        <a href="https://www.vialis.tm.fr/particulier/cable/internet" class="col-sm-6 col-md-4"><img class="img-responsive" src="img/partenaires/vialis.jpg"></a>
-        <a href="https://www.creditmutuel.fr/" class="col-sm-6 col-md-4"><img class="img-responsive" src="img/partenaires/04_credit_mutuel_2012.jpg"></a>
-        <a href="https://fr-fr.facebook.com/BoulangerieGoetz/" class="col-sm-6 col-md-4"><img class="img-responsive" src="img/partenaires/05_boulangerie_goetz2015_1.jpg"></a>
-        <a href="http://bapst.chauffagiste-viessmann.fr/" class="col-sm-6 col-md-4"><img class="img-responsive" src="img/partenaires/Bapst_2017-002.jpg"></a>
-        <a href="https://www.planetpizza-leresto.com/" class="col-sm-6 col-md-4"><img class="img-responsive" src="img/partenaires/Planetpizza_1-001.jpg"></a>
-    </section>
-
-    <?php include('footer.html'); ?>
-
-    <?php include('include_foot.html'); ?>
-
-</body>
-
-</html>
diff --git a/salle.php b/salle.php
deleted file mode 100644
index 8d19ad3..0000000
--- a/salle.php
+++ /dev/null
@@ -1,115 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-
-<head>
-
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="Site de la musique de Meyenheim">
-    <meta name="author" content="Paul TREHIOU">
-
-    <title>Musique fraternité - La Salle</title>
-
-    <?php include('include_head.html'); ?>
-
-</head>
-
-<body id="page-top">
-
-    <?php include('navbar.html'); ?>
-
-    <header style="background-image: url('img/salle.jpg')">
-        <div class="header-content">
-            <div class="header-content-inner">
-                <h1 id="homeHeading" style="text-shadow: 0px 0px 7px #000; margin-bottom: 300px;">La salle de l’association<br>pour tous vos évenements festifs</h1>
-                <a href="#about" class="btn btn-primary btn-xl page-scroll">Plus d'informations</a>
-            </div>
-        </div>
-    </header>
-
-    <section class="bg-primary" id="about">
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-8 col-lg-offset-2 text-center">
-                    <h2 class="section-heading">Adresse de la salle</h2>
-                    <hr class="light">
-                    <p class="text-faded">10, rue de l'Ill<br>68890 MEYENHEIM</p>
-                    <h2 class="section-heading">Présentation de la salle</h2>
-                    <hr class="light">
-                    <p class="text-faded">Une salle principale pour 20 à 80 personnes assises à table</p>
-                    <p class="text-faded">Une scène pour un DJ, un orchestre, une projection…</p>
-                    <p class="text-faded">Piano droit à disposition sur demande</p>
-                    <p class="text-faded">Nouvel éclairage d'ambiance</p>
-                    <p class="text-faded">Une cuisine équipée (plaques, fours, lave-verre, vaisselle), ouverte vers la salle et vers une salle annexe de 25m2 ;</p>
-                    <p class="text-faded">Un espace vert privé engazonné de 100m2 sous 2 tilleuls à disposition à côté de la salle pour apéritif extérieur ou barbecue ;</p>
-                    <p class="text-faded">Salle entièrement rénovée avec une mise aux normes accessibilité (notamment des sanitaires) et traitement acoustique. Travaux en partie financés grâce aux subventions de la Commune de Meyenheim et du Conseil Départemental du Haut-Rhin</p>
-                    <h2 class="section-heading">Mise à disposition pour évènements privés</h2>
-                    <hr class="light">
-                    <h3>Tarifs valables jusqu'en septembre 2019</h3>
-                    <ul class="list-group" style="color: #333;">
-                            <li class="list-group-item">Mise à disposition “week-end” (mariage, communion, anniversaire,…) : 130€
-                            <li class="list-group-item">Réunion (1/2 journée à 1 journée) : 50 € 
-                            <li class="list-group-item">+ Charges éventuelles (mise à disposition de la cuisine, vaisselle, chauffage,…)
-                            <li class="list-group-item">Caution : 150€
-                        </ul>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <section id="carousel-salle" class="carousel slide" data-ride="carousel">
-    <!-- Indicators -->
-    <ol class="carousel-indicators">
-        <li data-target="#carousel-salle" data-slide-to="0" class="active"></li>
-        <li data-target="#carousel-salle" data-slide-to="1"></li>
-        <li data-target="#carousel-salle" data-slide-to="2"></li>
-    </ol>
-    
-    <!-- Wrapper for slides -->
-    <div class="carousel-inner">
-        <div class="item active">
-            <img src="img/salle/01.jpg" alt="Photo interieur salle">
-        </div>
-    </div>
-    
-    <!-- Controls -->
-    <a class="left carousel-control" href="#carousel-salle" role="button" data-slide="prev">
-        <span class="glyphicon glyphicon-chevron-left"></span>
-    </a>
-    <a class="right carousel-control" href="#carousel-salle" role="button" data-slide="next">
-        <span class="glyphicon glyphicon-chevron-right"></span>
-    </a>
-    </section> <!-- Carousel -->
-    
-    <section id="contact">
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-8 col-lg-offset-2 text-center">
-                    <h2 class="section-heading">Contact</h2>
-                    <hr class="primary">
-                    <p>Céline TREHIOU</p>
-                </div>
-                <div class="col-lg-4 col-lg-offset-2 text-center">
-                    <i class="fa fa-phone fa-3x sr-contact"></i>
-                    <p>07 68 40 11 38</p>
-                </div>
-                <div class="col-lg-4 text-center">
-                    <i class="fa fa-at fa-3x sr-contact"></i>
-                    <p><a href="mailto:contact@musique-meyenheim.fr">salle@musique-meyenheim.fr</a></p>
-                </div>
-                <div class="col-lg-8 col-lg-offset-2 text-center">
-                    <i class="fa fa-envelope fa-3x sr-contact"></i>
-                    <p>Mme TREHIOU Céline</br>4 rue St Michel</br>68890 MEYENHEIM</p>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <?php include('footer.html'); ?>
-
-    <?php include('include_foot.html'); ?>
-
-</body>
-
-</html>
diff --git a/setup.py b/setup.py
new file mode 100644
index 0000000..1197e16
--- /dev/null
+++ b/setup.py
@@ -0,0 +1,8 @@
+#!/usr/bin/env python
+from setuptools import setup, find_packages
+
+setup(name='site_musique',
+      version='1.0',
+      packages=find_packages(),
+      scripts=['manage.py'],
+      include_package_data=True)
diff --git a/site_musique/__init__.py b/site_musique/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/site_musique/settings/__init__.py b/site_musique/settings/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/site_musique/settings/base.py b/site_musique/settings/base.py
new file mode 100644
index 0000000..ba53c0f
--- /dev/null
+++ b/site_musique/settings/base.py
@@ -0,0 +1,81 @@
+"""
+Django settings for site_musique project.
+
+Generated by 'django-admin startproject' using Django 1.11.23.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/1.11/topics/settings/
+
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/1.11/ref/settings/
+"""
+
+import os
+
+
+# Quick-start development settings - unsuitable for production
+# See https://docs.djangoproject.com/en/1.11/howto/deployment/checklist/
+
+# Application definition
+
+INSTALLED_APPS = [
+    'site_statique.apps.SiteStatiqueConfig',
+    'timeline.apps.TimelineConfig',
+    'common_files.apps.CommonFilesConfig',
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+]
+
+MIDDLEWARE = [
+    'django.middleware.security.SecurityMiddleware',
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    'django.middleware.common.CommonMiddleware',
+    'django.middleware.csrf.CsrfViewMiddleware',
+    'django.contrib.auth.middleware.AuthenticationMiddleware',
+    'django.contrib.messages.middleware.MessageMiddleware',
+    'django.middleware.clickjacking.XFrameOptionsMiddleware',
+]
+
+ROOT_URLCONF = 'site_musique.urls'
+
+TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]
+
+WSGI_APPLICATION = 'site_musique.wsgi.application'
+
+# Internationalization
+# https://docs.djangoproject.com/en/1.11/topics/i18n/
+
+LANGUAGE_CODE = 'fr-fr'
+
+TIME_ZONE = 'Europe/Paris'
+
+USE_I18N = True
+
+USE_L10N = True
+
+USE_TZ = True
+
+
+# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/1.11/howto/static-files/
+
+STATIC_URL = '/static/'
+
+MEDIA_URL = '/media/'
diff --git a/site_musique/settings/dev.py b/site_musique/settings/dev.py
new file mode 100644
index 0000000..a1a3e14
--- /dev/null
+++ b/site_musique/settings/dev.py
@@ -0,0 +1,23 @@
+from .base import *
+
+BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+
+DEBUG = True
+
+ALLOWED_HOSTS = []
+
+SECRET_KEY = '%y$(+on3*nzj0*fnq-@#=u4w_x-$4=l12+9be^xbq92nj5%0cd'
+
+# Database
+# https://docs.djangoproject.com/en/1.11/ref/settings/#databases
+
+DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
+    }
+}
+
+MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
+
+STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
diff --git a/site_musique/settings/prod.py b/site_musique/settings/prod.py
new file mode 100644
index 0000000..d5f0fa5
--- /dev/null
+++ b/site_musique/settings/prod.py
@@ -0,0 +1,40 @@
+from .base import *
+
+# Password validation
+# https://docs.djangoproject.com/en/1.11/ref/settings/#auth-password-validators
+
+AUTH_PASSWORD_VALIDATORS = [
+    {
+        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
+    },
+]
+
+DEBUG = False
+
+ALLOWED_HOSTS = ["musique-meyenheim.fr"]
+
+SECRET_KEY = os.environ['SECRET_KEY']
+
+VAR_DIR = os.environ['STATE_DIRECTORY']
+
+DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': os.path.join(VAR_DIR, 'db.sqlite3'),
+    }
+}
+
+NGINX_DIR = os.environ['NGINX_DIRECTORY']
+
+MEDIA_ROOT = os.path.join(NGINX_DIR, 'media')
+
+STATIC_ROOT = os.path.join(NGINX_DIR, 'staticfiles')
diff --git a/site_musique/urls.py b/site_musique/urls.py
new file mode 100644
index 0000000..800ec3e
--- /dev/null
+++ b/site_musique/urls.py
@@ -0,0 +1,29 @@
+"""site_musique URL Configuration
+
+The `urlpatterns` list routes URLs to views. For more information please see:
+    https://docs.djangoproject.com/en/1.11/topics/http/urls/
+Examples:
+Function views
+    1. Add an import:  from my_app import views
+    2. Add a URL to urlpatterns:  url(r'^$', views.home, name='home')
+Class-based views
+    1. Add an import:  from other_app.views import Home
+    2. Add a URL to urlpatterns:  url(r'^$', Home.as_view(), name='home')
+Including another URLconf
+    1. Import the include() function: from django.conf.urls import url, include
+    2. Add a URL to urlpatterns:  url(r'^blog/', include('blog.urls'))
+"""
+from django.contrib import admin
+from django.urls import include, path
+from django.contrib.staticfiles.urls import static
+from django.contrib.staticfiles.urls import staticfiles_urlpatterns
+from django.conf import settings
+
+urlpatterns = [
+    path('evenements/', include('timeline.urls')),
+    path('', include('site_statique.urls')),
+    path('admin/', admin.site.urls, name='admin'),
+]
+
+urlpatterns += staticfiles_urlpatterns()
+urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
diff --git a/site_musique/wsgi.py b/site_musique/wsgi.py
new file mode 100644
index 0000000..ab1fbe7
--- /dev/null
+++ b/site_musique/wsgi.py
@@ -0,0 +1,16 @@
+"""
+WSGI config for site_musique project.
+
+It exposes the WSGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/1.11/howto/deployment/wsgi/
+"""
+
+import os
+
+from django.core.wsgi import get_wsgi_application
+
+os.environ.setdefault("DJANGO_SETTINGS_MODULE", "site_musique.settings.dev")
+
+application = get_wsgi_application()
diff --git a/site_statique/__init__.py b/site_statique/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/site_statique/admin.py b/site_statique/admin.py
new file mode 100644
index 0000000..8c38f3f
--- /dev/null
+++ b/site_statique/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/site_statique/apps.py b/site_statique/apps.py
new file mode 100644
index 0000000..1b73e83
--- /dev/null
+++ b/site_statique/apps.py
@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class SiteStatiqueConfig(AppConfig):
+    name = 'site_statique'
diff --git a/site_statique/migrations/__init__.py b/site_statique/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/site_statique/models.py b/site_statique/models.py
new file mode 100644
index 0000000..71a8362
--- /dev/null
+++ b/site_statique/models.py
@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.
diff --git a/img/IllFest_2013_Corentin_Christophe.jpg b/site_statique/static/site_statique/IllFest_2013_Corentin_Christophe.jpg
similarity index 100%
rename from img/IllFest_2013_Corentin_Christophe.jpg
rename to site_statique/static/site_statique/IllFest_2013_Corentin_Christophe.jpg
diff --git a/img/direction.jpg b/site_statique/static/site_statique/direction.jpg
similarity index 100%
rename from img/direction.jpg
rename to site_statique/static/site_statique/direction.jpg
diff --git a/img/ecole.jpg b/site_statique/static/site_statique/ecole.jpg
similarity index 100%
rename from img/ecole.jpg
rename to site_statique/static/site_statique/ecole.jpg
diff --git a/img/galerie_ecole/01.jpg b/site_statique/static/site_statique/galerie_ecole/01.jpg
similarity index 100%
rename from img/galerie_ecole/01.jpg
rename to site_statique/static/site_statique/galerie_ecole/01.jpg
diff --git a/img/galerie_ecole/02.jpg b/site_statique/static/site_statique/galerie_ecole/02.jpg
similarity index 100%
rename from img/galerie_ecole/02.jpg
rename to site_statique/static/site_statique/galerie_ecole/02.jpg
diff --git a/img/galerie_ecole/03.jpg b/site_statique/static/site_statique/galerie_ecole/03.jpg
similarity index 100%
rename from img/galerie_ecole/03.jpg
rename to site_statique/static/site_statique/galerie_ecole/03.jpg
diff --git a/img/galerie_ecole/04.jpg b/site_statique/static/site_statique/galerie_ecole/04.jpg
similarity index 100%
rename from img/galerie_ecole/04.jpg
rename to site_statique/static/site_statique/galerie_ecole/04.jpg
diff --git a/img/harmonie.jpg b/site_statique/static/site_statique/harmonie.jpg
similarity index 100%
rename from img/harmonie.jpg
rename to site_statique/static/site_statique/harmonie.jpg
diff --git a/img/portfolio/thumbnails/1.jpg b/site_statique/static/site_statique/mosaique_accueil/1.jpg
similarity index 100%
rename from img/portfolio/thumbnails/1.jpg
rename to site_statique/static/site_statique/mosaique_accueil/1.jpg
diff --git a/img/portfolio/thumbnails/2.jpg b/site_statique/static/site_statique/mosaique_accueil/2.jpg
similarity index 100%
rename from img/portfolio/thumbnails/2.jpg
rename to site_statique/static/site_statique/mosaique_accueil/2.jpg
diff --git a/img/portfolio/thumbnails/3.jpg b/site_statique/static/site_statique/mosaique_accueil/3.jpg
similarity index 100%
rename from img/portfolio/thumbnails/3.jpg
rename to site_statique/static/site_statique/mosaique_accueil/3.jpg
diff --git a/img/portfolio/thumbnails/4.jpg b/site_statique/static/site_statique/mosaique_accueil/4.jpg
similarity index 100%
rename from img/portfolio/thumbnails/4.jpg
rename to site_statique/static/site_statique/mosaique_accueil/4.jpg
diff --git a/img/portfolio/thumbnails/5.jpg b/site_statique/static/site_statique/mosaique_accueil/5.jpg
similarity index 100%
rename from img/portfolio/thumbnails/5.jpg
rename to site_statique/static/site_statique/mosaique_accueil/5.jpg
diff --git a/img/portfolio/thumbnails/6.jpg b/site_statique/static/site_statique/mosaique_accueil/6.jpg
similarity index 100%
rename from img/portfolio/thumbnails/6.jpg
rename to site_statique/static/site_statique/mosaique_accueil/6.jpg
diff --git a/img/partenaires/04_credit_mutuel_2012.jpg b/site_statique/static/site_statique/partenaires/04_credit_mutuel_2012.jpg
similarity index 100%
rename from img/partenaires/04_credit_mutuel_2012.jpg
rename to site_statique/static/site_statique/partenaires/04_credit_mutuel_2012.jpg
diff --git a/img/partenaires/05_boulangerie_goetz2015_1.jpg b/site_statique/static/site_statique/partenaires/05_boulangerie_goetz2015_1.jpg
similarity index 100%
rename from img/partenaires/05_boulangerie_goetz2015_1.jpg
rename to site_statique/static/site_statique/partenaires/05_boulangerie_goetz2015_1.jpg
diff --git a/img/partenaires/Agence-culturelle-Grand-Est-rouge.jpg b/site_statique/static/site_statique/partenaires/Agence-culturelle-Grand-Est-rouge.jpg
similarity index 100%
rename from img/partenaires/Agence-culturelle-Grand-Est-rouge.jpg
rename to site_statique/static/site_statique/partenaires/Agence-culturelle-Grand-Est-rouge.jpg
diff --git a/img/partenaires/Bapst_2017-002.jpg b/site_statique/static/site_statique/partenaires/Bapst_2017-002.jpg
similarity index 100%
rename from img/partenaires/Bapst_2017-002.jpg
rename to site_statique/static/site_statique/partenaires/Bapst_2017-002.jpg
diff --git a/img/partenaires/Logo_Alsace_CD68.png b/site_statique/static/site_statique/partenaires/Logo_Alsace_CD68.png
similarity index 100%
rename from img/partenaires/Logo_Alsace_CD68.png
rename to site_statique/static/site_statique/partenaires/Logo_Alsace_CD68.png
diff --git a/img/partenaires/Meyenheim_logo.jpg b/site_statique/static/site_statique/partenaires/Meyenheim_logo.jpg
similarity index 100%
rename from img/partenaires/Meyenheim_logo.jpg
rename to site_statique/static/site_statique/partenaires/Meyenheim_logo.jpg
diff --git a/img/partenaires/Planetpizza_1-001.jpg b/site_statique/static/site_statique/partenaires/Planetpizza_1-001.jpg
similarity index 100%
rename from img/partenaires/Planetpizza_1-001.jpg
rename to site_statique/static/site_statique/partenaires/Planetpizza_1-001.jpg
diff --git a/site_statique/static/site_statique/partenaires/garage_RA_Oberentzen.jpg b/site_statique/static/site_statique/partenaires/garage_RA_Oberentzen.jpg
new file mode 100644
index 0000000..50439f5
Binary files /dev/null and b/site_statique/static/site_statique/partenaires/garage_RA_Oberentzen.jpg differ
diff --git a/img/partenaires/logo-couleur-CCCHR-e1423820301297.jpg b/site_statique/static/site_statique/partenaires/logo-couleur-CCCHR-e1423820301297.jpg
similarity index 100%
rename from img/partenaires/logo-couleur-CCCHR-e1423820301297.jpg
rename to site_statique/static/site_statique/partenaires/logo-couleur-CCCHR-e1423820301297.jpg
diff --git a/img/partenaires/vialis.jpg b/site_statique/static/site_statique/partenaires/vialis.jpg
similarity index 100%
rename from img/partenaires/vialis.jpg
rename to site_statique/static/site_statique/partenaires/vialis.jpg
diff --git a/img/salle.jpg b/site_statique/static/site_statique/salle.jpg
similarity index 100%
rename from img/salle.jpg
rename to site_statique/static/site_statique/salle.jpg
diff --git a/img/salle/01.jpg b/site_statique/static/site_statique/salle/01.jpg
similarity index 100%
rename from img/salle/01.jpg
rename to site_statique/static/site_statique/salle/01.jpg
diff --git a/img/trombone.gif b/site_statique/static/site_statique/trombone.gif
similarity index 100%
rename from img/trombone.gif
rename to site_statique/static/site_statique/trombone.gif
diff --git a/site_statique/templates/site_statique/direction.html b/site_statique/templates/site_statique/direction.html
new file mode 100644
index 0000000..7d73654
--- /dev/null
+++ b/site_statique/templates/site_statique/direction.html
@@ -0,0 +1,16 @@
+{% extends "common_files/base.html" %}
+
+{% block description %}Direction de la musique de Meyenheim{% endblock %}
+
+{% block titre %}Direction{% endblock %}
+
+{% load static %}
+{% block contenu %}
+    <header style="background: #F05F40;">
+        <div class="header-content">
+            <div class="header-content-inner">
+                <img src="{% static "site_statique/direction.jpg" %}" class="img-responsive" style="width: 2000px;"></img>
+            </div>
+        </div>
+    </header>
+{% endblock %}
diff --git a/site_statique/templates/site_statique/ecole.html b/site_statique/templates/site_statique/ecole.html
new file mode 100644
index 0000000..58e140c
--- /dev/null
+++ b/site_statique/templates/site_statique/ecole.html
@@ -0,0 +1,176 @@
+{% extends "common_files/base.html" %}
+
+{% block description %}Site de la musique de Meyenheim{% endblock %}
+
+{% block titre %}École de musique{% endblock %}
+
+{% load static %}
+{% block contenu %}
+  <header style="background-image: url('{% static "site_statique/ecole.jpg" %}')">
+      <div class="header-content">
+          <div class="header-content-inner">
+              <h1 id="homeHeading" style="text-shadow: 0px 0px 7px #000; margin-bottom: 400px;">École de Musique</br>«Les notes de l’Ill»</h1>
+              <a href="#about" class="btn btn-primary btn-xl page-scroll">Plus d'informations</a>
+          </div>
+      </div>
+  </header>
+
+  <section class="bg-primary" id="about">
+      <div class="container">
+          <div class="row">
+              <div class="col-lg-8 col-lg-offset-2 text-center">
+                  <h2 class="section-heading">Présentation</h2>
+                  <hr class="light">
+                  <p class="text-faded">L’école de musique "Les notes de l'Ill" a été créée par la Société de Musique Fraternité dont elle dépend exclusivement et est dirigée par Nathalie ROHRBACH. Les enseignements musicaux, notamment en groupe, tout en développant les techniques musicales et d’écoute mutuelle, permettent à chacun de s’exprimer poétiquement. L'école de musique contribue ainsi à un développement artistique personnel mais aussi au recrutement de futurs musiciens de l'Harmonie intercommunale Centre Haut-Rhin. L’école de Musique est subventionnée par la Commune de Meyenheim, la Communauté de Communes Centre Haut-Rhin et par le Conseil Départemental du Haut-Rhin.</p>
+                  <hr>
+                  <h2 class="section-heading">Fonctionnement</h2>
+                  <hr class="light">
+                  <p class="text-faded">Les cours sont dispensés tout au long de l'année scolaire par des professeurs qualifiés, reconnus au niveau départemental.</p>
+                  <!-- <hr>
+                  <h2 class="section-heading">Calendrier de rentrée</h2>
+                  <hr class="light">
+                  <h3>Kermesse musicale pour essayer tous les instruments et s'inscrire / se réinscrire</h3>
+                  <p class="text-faded"><i class="glyphicon glyphicon-calendar"></i> Samedi 10/09
+                  </br><i class="glyphicon glyphicon-time"></i> 9h30 à 11h30
+                  </br><i class="glyphicon glyphicon-map-marker"></i> Salle polyvalente de Meyenheim</p>
+                  
+                  <div class="panel panel-default" style="color: #333;">
+                      <div class="panel-heading">
+                          <h4 class="panel-title">Programme</h4>
+                      </div>
+                      <div class="panel-body">
+                          <div class="row">
+                              <b class="col-lg-2">9h30 - 11h</b>
+                              <ul class="col-lg-8 list-group">
+                                  <li class="list-group-item">Atelier d'essai des instruments et d'éveil musical
+                                  <li class="list-group-item">Planning des cours avec les professeurs
+                                  <li class="list-group-item">Inscription / réinscription
+                              </ul>
+                          </div>
+                          <div class="row">
+                              <b class="col-lg-2">vers 11h</b>
+                              <ul class="col-lg-8 list-group">
+                                  <li class="list-group-item">Le "boeuf" des professeurs
+                                  <li class="list-group-item">Tirage au sort de la tombola gratuite (Gros lot: 1 mois de cours offert pour l'instrument de son choix)
+                              </ul>
+                          </div>
+                      </div>
+                  </div>
+                  <h3>Début des cours</h3>
+                  <p class="text-faded"><i class="glyphicon glyphicon-calendar"></i> Lundi 12/09</p> -->
+                  <a href="#services" class="page-scroll btn btn-default btn-xl sr-button">Découvrez nos prestations</a>
+              </div>
+          </div>
+      </div>
+  </section>
+  
+  <section id="services">
+      <div class="container">
+          <div class="row">
+              <div class="col-lg-12 text-center">
+                  <h2 class="section-heading">L'école de musique propose</h2>
+                  <hr class="primary">
+              </div>
+          </div>
+      </div>
+      <div class="container">
+          <div class="row">
+              <div class="col-lg-4 col-md-6 text-center">
+                  <div class="service-box">
+                      <i class="fa fa-4x fa-music text-primary sr-icons"></i>
+                      <h3>Ateliers d’éveil musical et d’initiation musicale</h3>
+                      <h4>Pour les enfants dès la Moyenne section de Maternelle</h4>
+                      <p class="text-muted">L’élève intègre un des groupes proposés par les professeurs Nathalie ROHRBACH et Marie CLOG. Ces ateliers ont pour but de sensibiliser l’enfant aux sons, aux rythmes, aux couleurs musicales, de façon ludique et amusante. Ils offrent aux élèves la possibilité de découvrir leur voix comme outil musical et l’aideront à faire le choix d’un instrument pour la poursuite de l’apprentissage</p>
+                  </div>
+              </div>
+              <div class="col-lg-4 col-md-6 text-center">
+                  <div class="service-box">
+                      <i class="fa fa-4x fa-user text-primary sr-icons"></i>
+                      <h3>Pratique instrumentale ou vocale individualisée</h3>
+                      <h4>À partir du CE1 et pour les adultes</h4>
+                      <p class="text-muted">Cours d’instrument ou de chant seul avec l’enseignant (30' à 45’ suivant le cas). L’élève et l’enseignant établissent ensemble en début d’année scolaire le projet et le programme musical</p>
+                  </div>
+              </div>
+              <div class="col-lg-4 col-md-6 text-center">
+                  <div class="service-box">
+                      <i class="fa fa-4x fa-users text-primary sr-icons"></i>
+                      <h3>Classe de formation musicale avec instrument (Chant compris)</h3>
+                      <h4>À partir du CE1 et pour les adultes</h4>
+                      <p class="text-muted">L’élève intègre un des groupes proposés par le responsable pédagogique et son équipe. L’objectif est d’analyser et comprendre les éléments fondamentaux de la formation musicale par les partitions proposées et apprendre à jouer ensemble. Certains groupes interviennent en public lors de différentes manifestations</p>
+                  </div>
+              </div>
+              <div class="col-lg-4 col-md-6 text-center">
+                  <div class="service-box">
+                      <img src="{% static "site_statique/trombone.gif" %}" alt="icone trombone">
+                      <h3>Les instruments enseignés sont</h4>
+                      <ul class="list-group">
+                          <li class="list-group-item track" data-toggle="popover" data-content="Nathalie ROHRBACH" data-title="Enseignant">Le chant
+                          <li class="list-group-item" data-toggle="popover" data-content="Robert SCHMIDT" data-title="Enseignant">La flûte traversière et la flûte à bec
+                          <li class="list-group-item" data-toggle="popover" data-content="Régis MAERKY" data-title="Enseignant">La clarinette
+                          <li class="list-group-item" data-toggle="popover" data-content="Régis MAERKY" data-title="Enseignant">Les saxophones
+                          <li class="list-group-item" data-toggle="popover" data-content="Mimo ILIEV" data-title="Enseignant">La trompette
+                          <li class="list-group-item" data-toggle="popover" data-content="Mimo ILIEV" data-title="Enseignant">L'euphonium / baryton
+                          <li class="list-group-item" data-toggle="popover" data-content="Mimo ILIEV" data-title="Enseignant">Le trombone
+                          <li class="list-group-item" data-toggle="popover" data-content="Stephane AFFHOLDER" data-title="Enseignant">La batterie
+                          <li class="list-group-item" data-toggle="popover" data-content="Marie CLOG" data-title="Enseignant">Les percussions
+                          <li class="list-group-item" data-toggle="popover" data-content="Eric Uettwiller">La guitare acoustique
+                          <li class="list-group-item" data-toggle="popover" data-content="Eric Uettwiller">La guitare électrique
+                          <li class="list-group-item" data-toggle="popover" data-content="Patrick RAMSTEIN" data-title="Enseignant">Le piano
+                          <li class="list-group-item" data-toggle="popover" data-content="Sur demande">L'orgue d'église
+                      </ul>
+                  </div>
+              </div>
+          </div>
+      </div>
+  </section>
+  
+  <div id="carousel-ecole" class="carousel slide" data-ride="carousel">
+  
+      <!-- Wrapper for slides -->
+      <div class="carousel-inner" role="listbox">
+          <div class="item active">
+              <img src="{% static "site_statique/galerie_ecole/01.jpg" %}" alt="Illustration école de musique">
+          </div>
+          <div class="item">
+              <img src="{% static "site_statique/galerie_ecole/02.jpg" %}" alt="Illustration école de musique">
+          </div>
+          <div class="item">
+              <img src="{% static "site_statique/galerie_ecole/03.jpg" %}" alt="Illustration école de musique">
+          </div>
+          <div class="item">
+              <img src="{% static "site_statique/galerie_ecole/04.jpg" %}" alt="Illustration école de musique">
+          </div>
+      </div>
+
+      <!-- Controls -->
+      <a class="left carousel-control" href="#carousel-ecole" role="button" data-slide="prev">
+          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+          <span class="sr-only">Previous</span>
+      </a>
+      <a class="right carousel-control" href="#carousel-ecole" role="button" data-slide="next">
+          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+          <span class="sr-only">Next</span>
+      </a>
+  </div>
+
+  {% include "common_files/contact.html" with responsable="Nathalie ROHRBACH, Directrice" email="ecole@musique-meyenheim.fr" %}
+{% endblock %}
+
+{% block scripts %}
+  <script type="text/javascript">
+      $(function () {
+          $('[data-toggle="popover"]').popover({trigger: "hover"})
+      })
+
+      appear({
+          elements: function elements(){
+              // work with all elements with the class "track"
+              return document.getElementsByClassName('track');
+          },
+          appear: function appear(el){
+              console.log('visible', el);
+              $(el).popover('show');
+          },
+      });
+  </script>
+{% endblock %}
diff --git a/site_statique/templates/site_statique/harmonie.html b/site_statique/templates/site_statique/harmonie.html
new file mode 100644
index 0000000..96fe3f8
--- /dev/null
+++ b/site_statique/templates/site_statique/harmonie.html
@@ -0,0 +1,39 @@
+{% extends "common_files/base.html" %}
+
+{% block description %}Site de la musique de Meyenheim{% endblock %}
+
+{% block titre %}Harmonie Intercommunale{% endblock %}
+
+{% load static %}
+{% block contenu %}
+  <header style="background-image: url('{% static "site_statique/harmonie.jpg" %}')">
+      <div class="header-content">
+          <div class="header-content-inner">
+              <h1 id="homeHeading" style="text-shadow: 0px 0px 7px #000;">Harmonie intercommunale Centre Haut-Rhin</br>Des airs traditionnels ou classiques aux musiques actuelles</h1>
+              <hr>
+              <a href="#about" class="btn btn-primary btn-xl page-scroll">Plus d'informations</a>
+          </div>
+      </div>
+  </header>
+
+  <section class="bg-primary" id="about">
+      <div class="container">
+          <div class="row">
+              <div class="col-lg-6 text-center">
+                  <h2 class="section-heading">Dirigée par Mimo ILIEV, l’harmonie intercommunale réunit des musiciens de tous les âges dans une ambiance conviviale.</h2>
+                  <hr class="light">
+                  <p class="text-faded">Le répertoire est des plus variés, toujours renouvelé, suivant les services et évènements musicaux prévus, passant des airs classiques et traditionnels aux musiques les plus actuelles.</p>
+                  <p class="text-faded">Les répétitions ont lieu le vendredi de 20h à 22h à Oberhergheim dans un local dédié mis à disposition par la Commune d’Oberhergheim.</p>
+                  <p class="text-faded">Les prestations musicales sont tout aussi variées, entre Cérémonies et animations diverses, jusqu’aux concerts, véritables temps forts. Un concert de printemps se tient chaque année à Oberhergheim.</p>
+                  <p class="text-faded">Un concert-spectacle a lieu le dernier samedi de novembre tous les deux ans à Meyenheim intitulé Music’IllFest, avec à chaque fois des découvertes proposées au public, dans une ambiance des plus festives.</p>
+                  <p class="text-faded">D’autres concerts ponctuent l’année, notamment en partenariat avec l’Harmonie municipale de Kembs ou encore la Chorale d’Oberhergheim.</p>
+                  <p class="text-faded">L’harmonie intercommunale est née de la réunion des harmonies de Meyenheim, Oberhergheim et Réguisheim mais est ouverte à tout musicien, notamment les jeunes musiciens après quelques années de pratiques mais aussi les adultes souhaitant reprendre une activité musicale après quelques années de pause.</p>
+                  <p class="text-faded">L’Harmonie intercommunale est financée par la Communauté de Communes Centre Haut-Rhin.</p>
+              </div>
+              <img src="{% static "site_statique/IllFest_2013_Corentin_Christophe.jpg" %}" class="col-lg-6 img-responsive">
+          </div>
+      </div>
+  </section>
+
+  {% include "common_files/contact.html" %}
+{% endblock %}
diff --git a/site_statique/templates/site_statique/index.html b/site_statique/templates/site_statique/index.html
new file mode 100644
index 0000000..7ebf109
--- /dev/null
+++ b/site_statique/templates/site_statique/index.html
@@ -0,0 +1,123 @@
+{% extends "common_files/base.html" %}
+
+{% block description %}Site de la musique de Meyenheim{% endblock %}
+
+{% block titre %}Accueil{% endblock %}
+
+{% block extra_head %}
+  <style>
+      .portfolio-box {
+          overflow: hidden;
+          max-height: 350px;
+      }
+      .portfolio-box img {
+          max-height: 350px;
+      }
+  </style>
+{% endblock %}
+
+{% load static %}
+{% block contenu %}
+  <header>
+      <div class="header-content">
+          <div class="header-content-inner">
+              <h1 id="homeHeading" style="text-shadow: 0px 0px 7px #000; margin-bottom: 300px;">Musique fraternité</br>Meyenheim</h1>
+              <a href="#about" class="btn btn-primary btn-xl page-scroll">Plus d'informations</a>
+          </div>
+      </div>
+  </header>
+
+  <section class="bg-primary" id="about">
+      <div class="container">
+          <div class="row">
+              <div class="col-lg-8 col-lg-offset-2 text-center">
+                  <h2 class="section-heading">5 raisons de mieux nous connaître</h2>
+                  <hr class="light">
+                  <p class="text-faded">De nombreux évènements et activités organisés tout au long de l’année, un comité directeur bénévole dynamique pour faire vivre une association presque centenaire, une collaboration avec les Musiques voisines au travers de l’Harmonie intercommunale, une école de musique s’appuyant sur des professeurs qualifiés au sein d’une pédagogie basée sur la pratique instrumentale, une salle de musique entièrement rénovée et fonctionnelle disponible à la location.</p>
+              </div>
+          </div>
+      </div>
+  </section>
+
+  <section class="no-padding" id="portfolio">
+      <div class="container-fluid">
+          <div class="row no-gutter popup-gallery">
+              <div class="col-lg-4 col-sm-6">
+                  <a href="{% url 'harmonie' %}" class="portfolio-box">
+                      <img src="{% static "site_statique/mosaique_accueil/1.jpg" %}" alt="">
+                      <div class="portfolio-box-caption">
+                          <div class="portfolio-box-caption-content">
+                              <div class="project-name">
+                                  L’harmonie intercommunale, on y joue de tout
+                              </div>
+                          </div>
+                      </div>
+                  </a>
+              </div>
+              <div class="col-lg-4 col-sm-6">
+                  <a href="{% url 'ecole' %}" class="portfolio-box">
+                      <img src="{% static "site_statique/mosaique_accueil/2.jpg" %}" alt="">
+                      <div class="portfolio-box-caption">
+                          <div class="portfolio-box-caption-content">
+                              <div class="project-name">
+                                  l’École de Musique, ce n’est pas que pour les enfants…mais aussi
+                              </div>
+                          </div>
+                      </div>
+                  </a>
+              </div>
+              <div class="col-lg-4 col-sm-6">
+                  <a href="{% url 'evenements' %}" class="portfolio-box">
+                      <img src="{% static "site_statique/mosaique_accueil/3.jpg" %}" alt="">
+                      <div class="portfolio-box-caption">
+                          <div class="portfolio-box-caption-content">
+                              <div class="project-name">
+                                  Des évènements musicaux, des lotos…et mêmes des puces
+                              </div>
+                          </div>
+                      </div>
+                  </a>
+              </div>
+              <div class="col-lg-4 col-sm-6">
+                  <a href="{% url 'direction' %}" class="portfolio-box">
+                      <img src="{% static "site_statique/mosaique_accueil/4.jpg" %}" alt="">
+                      <div class="portfolio-box-caption">
+                          <div class="portfolio-box-caption-content">
+                              <div class="project-name">
+                                  La direction de l’association, du pur jus de bénévolat
+                              </div>
+                          </div>
+                      </div>
+                  </a>
+              </div>
+              <div class="col-lg-4 col-sm-6">
+                  <a href="{% url 'salle' %}" class="portfolio-box">
+                      <img src="{% static "site_statique/mosaique_accueil/5.jpg" %}" alt="">
+                      <div class="portfolio-box-caption">
+                          <div class="portfolio-box-caption-content">
+                              <div class="project-name">
+                                  La salle, entre scène et cuisine, pour tous vos évènements festifs
+                              </div>
+                          </div>
+                      </div>
+                  </a>
+              </div>
+              <div class="col-lg-4 col-sm-6">
+                  <a href="{% url 'partenaires' %}" class="portfolio-box">
+                      <img src="{% static "site_statique/partenaires/vialis.jpg" %}" alt="">
+                      <div class="portfolio-box-caption">
+                          <div class="portfolio-box-caption-content">
+                              <div class="project-name">
+                                  Partenaires
+                              </div>
+                          </div>
+                      </div>
+                  </a>
+              </div>
+          </div>
+      </div>
+  </section>
+
+  {% include "common_files/contact.html" %}
+
+{% endblock %}
diff --git a/site_statique/templates/site_statique/partenaires.html b/site_statique/templates/site_statique/partenaires.html
new file mode 100644
index 0000000..c609050
--- /dev/null
+++ b/site_statique/templates/site_statique/partenaires.html
@@ -0,0 +1,51 @@
+{% extends "common_files/base.html" %}
+
+{% block description %}Site de la musique de Meyenheim{% endblock %}
+
+{% block titre %}Partenaires{% endblock %}
+
+{% block extra_head %}
+  <style>
+    @media (min-width: 768px) {
+        .navbar-default .nav > li > a,
+        .navbar-default .nav > li > a:focus {
+            color: #222222;
+        }
+        .navbar-default .nav > li > a:hover,
+        .navbar-default .nav > li > a:focus:hover {
+            color: #F05F40;
+        }
+    }
+    
+    #partenaires {
+        overflow: hidden;
+    }
+    
+    #partenaires a {
+        height: 30rem;
+    }
+
+    #partenaires a img {
+        max-height: 100%;
+        max-width: 100%;
+    }
+  </style>
+{% endblock %}
+
+{% load static %}
+{% block contenu %}
+  <section id="partenaires">
+      <h1 class="text-center">Nos partenaires</h1>
+
+      <a href="http://www.meyenheim.fr/" class="col-sm-6 col-md-4"><img class="img-responsive" src="{% static "site_statique/partenaires/Meyenheim_logo.jpg" %}"></a>
+      <a href="http://ccchr.fr/" class="col-sm-6 col-md-4"><img class="img-responsive" src="{% static "site_statique/partenaires/logo-couleur-CCCHR-e1423820301297.jpg" %}"></a>
+      <a href="https://www.haut-rhin.fr/" class="col-sm-6 col-md-4"><img class="img-responsive" src="{% static "site_statique/partenaires/Logo_Alsace_CD68.png" %}"></a>
+      <a href="https://culturegrandest.fr/" class="col-sm-6 col-md-4"><img class="img-responsive" src="{% static "site_statique/partenaires/Agence-culturelle-Grand-Est-rouge.jpg" %}"></a>
+      <a href="https://www.vialis.tm.fr/particulier/cable/internet" class="col-sm-6 col-md-4"><img class="img-responsive" src="{% static "site_statique/partenaires/vialis.jpg" %}"></a>
+      <a href="https://www.creditmutuel.fr/" class="col-sm-6 col-md-4"><img class="img-responsive" src="{% static "site_statique/partenaires/04_credit_mutuel_2012.jpg" %}"></a>
+      <a href="https://fr-fr.facebook.com/BoulangerieGoetz/" class="col-sm-6 col-md-4"><img class="img-responsive" src="{% static "site_statique/partenaires/05_boulangerie_goetz2015_1.jpg" %}"></a>
+      <a href="http://bapst.chauffagiste-viessmann.fr/" class="col-sm-6 col-md-4"><img class="img-responsive" src="{% static "site_statique/partenaires/Bapst_2017-002.jpg" %}"></a>
+      <a href="https://www.planetpizza-leresto.com/" class="col-sm-6 col-md-4"><img class="img-responsive" src="{% static "site_statique/partenaires/Planetpizza_1-001.jpg" %}"></a>
+      <a href="https://www.reference-automobiles.com/" class="col-sm-6 col-md-4"><img class="img-responsive" src="{% static "site_statique/partenaires/garage_RA_Oberentzen.jpg" %}"></a>
+  </section>
+{% endblock %}
diff --git a/site_statique/templates/site_statique/salle.html b/site_statique/templates/site_statique/salle.html
new file mode 100644
index 0000000..3f83bfc
--- /dev/null
+++ b/site_statique/templates/site_statique/salle.html
@@ -0,0 +1,73 @@
+{% extends "common_files/base.html" %}
+
+{% block description %}Site de la musique de Meyenheim{% endblock %}
+
+{% block titre %}La Salle{% endblock %}
+
+{% load static %}
+{% block contenu %}
+  <header style="background-image: url('{% static "site_statique/salle.jpg" %}')">
+      <div class="header-content">
+          <div class="header-content-inner">
+              <h1 id="homeHeading" style="text-shadow: 0px 0px 7px #000; margin-bottom: 300px;">La salle de l’association<br>pour tous vos évenements festifs</h1>
+              <a href="#about" class="btn btn-primary btn-xl page-scroll">Plus d'informations</a>
+          </div>
+      </div>
+  </header>
+
+  <section class="bg-primary" id="about">
+      <div class="container">
+          <div class="row">
+              <div class="col-lg-8 col-lg-offset-2 text-center">
+                  <h2 class="section-heading">Adresse de la salle</h2>
+                  <hr class="light">
+                  <p class="text-faded">10, rue de l'Ill<br>68890 MEYENHEIM</p>
+                  <h2 class="section-heading">Présentation de la salle</h2>
+                  <hr class="light">
+                  <p class="text-faded">Une salle principale pour 20 à 80 personnes assises à table</p>
+                  <p class="text-faded">Une scène pour un DJ, un orchestre, une projection…</p>
+                  <p class="text-faded">Piano droit à disposition sur demande</p>
+                  <p class="text-faded">Nouvel éclairage d'ambiance</p>
+                  <p class="text-faded">Une cuisine équipée (plaques, fours, lave-verre, vaisselle), ouverte vers la salle et vers une salle annexe de 25m2 ;</p>
+                  <p class="text-faded">Un espace vert privé engazonné de 100m2 sous 2 tilleuls à disposition à côté de la salle pour apéritif extérieur ou barbecue ;</p>
+                  <p class="text-faded">Salle entièrement rénovée avec une mise aux normes accessibilité (notamment des sanitaires) et traitement acoustique. Travaux en partie financés grâce aux subventions de la Commune de Meyenheim et du Conseil Départemental du Haut-Rhin</p>
+                  <h2 class="section-heading">Mise à disposition pour évènements privés</h2>
+                  <hr class="light">
+                  <h3>Tarifs valables jusqu'en septembre 2019</h3>
+                  <ul class="list-group" style="color: #333;">
+                          <li class="list-group-item">Mise à disposition “week-end” (mariage, communion, anniversaire,…) : 130€
+                          <li class="list-group-item">Réunion (1/2 journée à 1 journée) : 50 € 
+                          <li class="list-group-item">+ Charges éventuelles (mise à disposition de la cuisine, vaisselle, chauffage,…)
+                          <li class="list-group-item">Caution : 150€
+                      </ul>
+              </div>
+          </div>
+      </div>
+  </section>
+
+  <section id="carousel-salle" class="carousel slide" data-ride="carousel">
+  <!-- Indicators -->
+  <ol class="carousel-indicators">
+      <li data-target="#carousel-salle" data-slide-to="0" class="active"></li>
+      <li data-target="#carousel-salle" data-slide-to="1"></li>
+      <li data-target="#carousel-salle" data-slide-to="2"></li>
+  </ol>
+  
+  <!-- Wrapper for slides -->
+  <div class="carousel-inner">
+      <div class="item active">
+          <img src="{% static "site_statique/salle/01.jpg" %}" alt="Photo interieur salle">
+      </div>
+  </div>
+  
+  <!-- Controls -->
+  <a class="left carousel-control" href="#carousel-salle" role="button" data-slide="prev">
+      <span class="glyphicon glyphicon-chevron-left"></span>
+  </a>
+  <a class="right carousel-control" href="#carousel-salle" role="button" data-slide="next">
+      <span class="glyphicon glyphicon-chevron-right"></span>
+  </a>
+  </section> <!-- Carousel -->
+
+  {% include "common_files/contact.html" with responsable="Céline TREHIOU" email="salle@musique-meyenheim.fr" adresse="Mme TREHIOU Céline</br>4 rue St Michel</br>68890 MEYENHEIM" %}
+{% endblock %}
diff --git a/site_statique/tests.py b/site_statique/tests.py
new file mode 100644
index 0000000..7ce503c
--- /dev/null
+++ b/site_statique/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/site_statique/urls.py b/site_statique/urls.py
new file mode 100644
index 0000000..251eff7
--- /dev/null
+++ b/site_statique/urls.py
@@ -0,0 +1,12 @@
+from django.urls import path
+
+from . import views
+
+urlpatterns = [
+    path('', views.index, name='accueil'),
+    path('harmonie/', views.harmonie, name='harmonie'),
+    path('ecole', views.ecole, name='ecole'),
+    path('direction', views.direction, name='direction'),
+    path('salle', views.salle, name='salle'),
+    path('partenaires', views.partenaires, name='partenaires'),
+]
diff --git a/site_statique/views.py b/site_statique/views.py
new file mode 100644
index 0000000..bd2fbb6
--- /dev/null
+++ b/site_statique/views.py
@@ -0,0 +1,19 @@
+from django.shortcuts import render
+
+def index(request):
+    return render(request, 'site_statique/index.html')
+
+def harmonie(request):
+    return render(request, 'site_statique/harmonie.html')
+
+def ecole(request):
+    return render(request, 'site_statique/ecole.html')
+
+def direction(request):
+    return render(request, 'site_statique/direction.html')
+
+def salle(request):
+    return render(request, 'site_statique/salle.html')
+
+def partenaires(request):
+    return render(request, 'site_statique/partenaires.html')
diff --git a/sitemap.xml b/sitemap.xml
deleted file mode 100644
index be2c2ee..0000000
--- a/sitemap.xml
+++ /dev/null
@@ -1,33 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<urlset
-      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
-      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
-            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
-<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->
-
-<url>
-  <loc>https://musique-meyenheim.fr/</loc>
-</url>
-<url>
-  <loc>https://musique-meyenheim.fr/index.php</loc>
-</url>
-<url>
-  <loc>https://musique-meyenheim.fr/harmonie.php</loc>
-</url>
-<url>
-  <loc>https://musique-meyenheim.fr/ecole.php</loc>
-</url>
-<url>
-  <loc>https://musique-meyenheim.fr/evenements.php</loc>
-</url>
-<url>
-  <loc>https://musique-meyenheim.fr/direction.php</loc>
-</url>
-<url>
-  <loc>https://musique-meyenheim.fr/salle.php</loc>
-</url>
-<url>
-  <loc>https://musique-meyenheim.fr/files/2016_09_puces_tract.pdf</loc>
-</url>
-</urlset>
\ No newline at end of file
diff --git a/timeline/__init__.py b/timeline/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/timeline/admin.py b/timeline/admin.py
new file mode 100644
index 0000000..4cfc5e6
--- /dev/null
+++ b/timeline/admin.py
@@ -0,0 +1,13 @@
+from django.contrib import admin
+
+from .models import Evenement, Illustration
+
+class IllustrationInline(admin.TabularInline):
+    model = Illustration
+
+@admin.register(Evenement)
+class EvenementAdmin(admin.ModelAdmin):
+    ordering=["-date"]
+    inlines = [
+        IllustrationInline,
+    ]
diff --git a/timeline/apps.py b/timeline/apps.py
new file mode 100644
index 0000000..4d33052
--- /dev/null
+++ b/timeline/apps.py
@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class TimelineConfig(AppConfig):
+    name = 'timeline'
diff --git a/timeline/migrations/0001_initial.py b/timeline/migrations/0001_initial.py
new file mode 100644
index 0000000..0248475
--- /dev/null
+++ b/timeline/migrations/0001_initial.py
@@ -0,0 +1,28 @@
+# Generated by Django 2.2.4 on 2019-09-01 08:30
+
+import datetime
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Timeline',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('titre', models.CharField(max_length=200)),
+                ('date', models.DateField(default=datetime.date.today)),
+                ('heure_debut', models.TimeField(blank=True, null=True)),
+                ('heure_fin', models.TimeField(blank=True, null=True)),
+                ('lieu', models.CharField(blank=True, max_length=200)),
+                ('illustration', models.ImageField(upload_to='timeline')),
+                ('description', models.TextField(blank=True)),
+            ],
+        ),
+    ]
diff --git a/timeline/migrations/0002_auto_20190908_1550.py b/timeline/migrations/0002_auto_20190908_1550.py
new file mode 100644
index 0000000..451403e
--- /dev/null
+++ b/timeline/migrations/0002_auto_20190908_1550.py
@@ -0,0 +1,39 @@
+# Generated by Django 2.2.4 on 2019-09-08 13:50
+
+import datetime
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('timeline', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Evenement',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('titre', models.CharField(max_length=200)),
+                ('date', models.DateField(default=datetime.date.today)),
+                ('heure_debut', models.TimeField(blank=True, null=True)),
+                ('heure_fin', models.TimeField(blank=True, null=True)),
+                ('lieu', models.CharField(blank=True, max_length=200)),
+                ('description', models.TextField(blank=True)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Illustration',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('nom', models.CharField(max_length=200)),
+                ('image', models.ImageField(upload_to='timeline')),
+                ('evenement', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='timeline.Evenement')),
+            ],
+        ),
+        migrations.DeleteModel(
+            name='Timeline',
+        ),
+    ]
diff --git a/timeline/migrations/__init__.py b/timeline/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/timeline/models.py b/timeline/models.py
new file mode 100644
index 0000000..8044499
--- /dev/null
+++ b/timeline/models.py
@@ -0,0 +1,30 @@
+from django.db import models
+from datetime import date
+
+class Evenement(models.Model):
+    titre = models.CharField(max_length=200)
+    date = models.DateField(default=date.today)
+    heure_debut = models.TimeField(null=True, blank=True)
+    heure_fin = models.TimeField(null=True, blank=True)
+    lieu = models.CharField(max_length=200, blank=True)
+    description = models.TextField(blank=True)
+
+    @property
+    def evenement_passe(self):
+        return date.today() > self.date
+
+    @property
+    def annee(self):
+        return self.date.year
+
+    def __str__(self):
+        return f"[{self.date}] {self.titre}"
+
+
+class Illustration(models.Model):
+    nom = models.CharField(max_length=200)
+    image = models.ImageField(upload_to='timeline')
+    evenement = models.ForeignKey(Evenement, on_delete=models.CASCADE)
+
+    def __str__(self):
+        return f"[{self.evenement}] {self.nom}"
diff --git a/css/timeline.css b/timeline/static/timeline/timeline.css
similarity index 100%
rename from css/timeline.css
rename to timeline/static/timeline/timeline.css
diff --git a/timeline/templates/timeline/evenements.html b/timeline/templates/timeline/evenements.html
new file mode 100644
index 0000000..f26d125
--- /dev/null
+++ b/timeline/templates/timeline/evenements.html
@@ -0,0 +1,178 @@
+{% extends "common_files/base.html" %}
+
+{% block description %}Site de la musique de Meyenheim{% endblock %}
+
+{% block titre %}Évènements{% endblock %}
+
+{% load static %}
+
+{% block extra_head %}
+<link href="{% static "timeline/timeline.css" %}" rel="stylesheet">
+
+<style>
+    @media (min-width: 768px) {
+        .navbar-default .nav > li > a,
+        .navbar-default .nav > li > a:focus {
+            color: #222222;
+        }
+        .navbar-default .nav > li > a:hover,
+        .navbar-default .nav > li > a:focus:hover {
+            color: #F05F40;
+        }
+    }
+    
+    .timeline-body > a > img {
+        margin-left: auto;
+        margin-right: auto;
+        display: block;
+        margin-bottom: 15px;
+    }
+    
+</style>
+{% endblock %}
+
+{% block contenu %} 
+  {% if liste_evenements %}
+
+  {% for evenement in liste_evenements %}
+
+    {% ifchanged evenement.annee evenement.evenement_passe %}
+
+    {% if not forloop.first %}
+        </ul>
+        </div>
+    </section>
+    {% endif %}
+
+    <section id="timeline">
+        <div class="container">
+
+        {% ifchanged evenement.evenement_passe %}
+        <div class="page-header">
+          <h1 id="timeline">{{ evenement.evenement_passe | yesno:"Évènements passés, Evènements à venir" }}</h1>
+        </div>
+        {% endifchanged %}
+
+        {% ifchanged evenement.annee evenement.evenement_passe %}
+        <h2>{{ evenement.annee }}</h2>
+        {% endifchanged %}
+
+        <ul class="timeline">
+
+    {% endifchanged %}
+
+          <li class="{% cycle 'timeline-inverted' 'timeline' %}">
+              <div class="timeline-badge info"><i class="glyphicon {% cycle 'glyphicon-menu-right' 'glyphicon-menu-left' %}"></i></div>
+              <div class="timeline-panel">
+                  <div class="timeline-heading">
+                    <h4 class="timeline-title">{{ evenement.titre }}</h4>
+                  <p><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i>{{ evenement.date }}</small></br>
+                  <small class="text-muted"><i class="glyphicon glyphicon-time"></i>{{ evenement.heure_debut }} - {{ evenement.heure_fin }}</small></br>
+                  <small class="text-muted"><i class="glyphicon glyphicon-map-marker"></i>{{ evenement.lieu }}</small></p>
+                  </div>
+                  <div class="timeline-body">
+                    {% if evenement.illustration_set.count > 1 %}
+                      <div id="carousel-{{ forloop.counter }}" class="carousel slide" data-ride="carousel">
+                        <div class="carousel-inner" role="listbox">
+                          {% for illustration in evenement.illustration_set.all %}
+                          <div class="item{% if forloop.first %} active{% endif %}">
+                              <a href="#pop_timeline_{{ forloop.parentloop.counter }}_{{ forloop.counter }}" data-toggle="modal">
+                                <img src="{{ illustration.image.url }}" alt="{{ illustration.nom }}" class="img-responsive">
+                              </a>
+                            </div>
+                          {% endfor %}
+                        </div>
+
+                        <a class="left carousel-control" href="#carousel-{{ forloop.counter }}" role="button" data-slide="prev">
+                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+                            <span class="sr-only">Previous</span>
+                        </a>
+                        <a class="right carousel-control" href="#carousel-{{ forloop.counter }}" role="button" data-slide="next">
+                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+                            <span class="sr-only">Next</span>
+                        </a>
+                      </div>
+
+                      <hr>
+
+                      <p>{{ evenement.description }}</p>
+
+                      {% for illustration in evenement.illustration_set.all %}
+                        <div id="pop_timeline_{{ forloop.parentloop.counter }}_{{ forloop.counter }}" class="modal fade">
+                          <div class="modal-dialog">
+                            <div class="modal-content">
+                              <div class="modal-body">
+                                <img src="{{ illustration.image.url }}" alt="{{ illustration.nom }}" class="img-responsive">
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      {% endfor %}
+                    {% else %}
+                      {% with evenement.illustration_set.all|first as illustration %}
+                      <a href="#pop_timeline_{{ forloop.counter }}" data-toggle="modal">
+                        <img src="{{ illustration.image.url }}" alt="{{ illustration.nom }}" class="img-responsive">
+                      </a>
+
+                      <hr>
+
+                      <p>{{ evenement.description }}</p>
+
+                      <div id="pop_timeline_{{ forloop.counter }}" class="modal fade">
+                        <div class="modal-dialog">
+                          <div class="modal-content">
+                            <div class="modal-body">
+                              <img src="{{ illustration.image.url }}" alt="{{ illustration.nom }}" class="img-responsive">
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      {% endwith %}
+                    {% endif %}
+                  </div>
+              </div>
+          </li>
+
+    {% if forloop.last %}
+
+        </ul>
+        </div>
+    </section>
+
+    {% endif %}
+
+  {% endfor %}
+
+  {% endif %}
+
+  {% include "common_files/contact.html" %}
+
+  <script>
+  window.onload = function(){$('.carousel').each(function(){
+      var items = $(this).find(".item"),
+          heights = [],
+          tallest;
+
+      if (items.length) {
+          function normalizeHeights() {
+              items.each(function() { //add heights to array
+                  heights.push($(this).height());
+              });
+              tallest = Math.max.apply(null, heights); //cache largest value
+              items.each(function() {
+                  $(this).css('min-height',tallest + 'px');
+              });
+          };
+          normalizeHeights();
+
+          $(window).on('resize orientationchange', function () {
+              tallest = 0, heights.length = 0; //reset vars
+              items.each(function() {
+                  $(this).css('min-height','0'); //reset min-height
+              });
+              normalizeHeights(); //run it again
+          });
+      }
+  })}
+  </script>
+{% endblock %}
diff --git a/timeline/tests.py b/timeline/tests.py
new file mode 100644
index 0000000..7ce503c
--- /dev/null
+++ b/timeline/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/timeline/urls.py b/timeline/urls.py
new file mode 100644
index 0000000..aba43cc
--- /dev/null
+++ b/timeline/urls.py
@@ -0,0 +1,7 @@
+from django.urls import path
+
+from . import views
+
+urlpatterns = [
+    path('', views.index, name='evenements'),
+]
diff --git a/timeline/views.py b/timeline/views.py
new file mode 100644
index 0000000..8dac944
--- /dev/null
+++ b/timeline/views.py
@@ -0,0 +1,10 @@
+from django.shortcuts import render
+
+from .models import Evenement
+
+def index(request):
+    liste_evenements = Evenement.objects.order_by('-date')
+    context = {
+        'liste_evenements': liste_evenements,
+    }
+    return render(request, 'timeline/evenements.html', context)