Compare commits

...

15 Commits

182 changed files with 1167 additions and 2151 deletions

4
.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
__pycache__/
db.sqlite3
media/
result

6
MANIFEST.in Normal file
View File

@ -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

0
common_files/__init__.py Normal file
View File

3
common_files/admin.py Normal file
View File

@ -0,0 +1,3 @@
from django.contrib import admin
# Register your models here.

5
common_files/apps.py Normal file
View File

@ -0,0 +1,5 @@
from django.apps import AppConfig
class CommonFilesConfig(AppConfig):
name = 'common_files'

View File

3
common_files/models.py Normal file
View File

@ -0,0 +1,3 @@
from django.db import models
# Create your models here.

View File

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

View File

Before

Width:  |  Height:  |  Size: 223 KiB

After

Width:  |  Height:  |  Size: 223 KiB

View File

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View File

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 106 KiB

View File

Before

Width:  |  Height:  |  Size: 382 KiB

After

Width:  |  Height:  |  Size: 382 KiB

View File

@ -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>

View File

@ -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 lIll</br>68890 MEYENHEIM</p>
<p>{{ adresse | default:"Société de Musique Fraternité</br>10 rue de lIll</br>68890 MEYENHEIM" }}</p>
</div>
</div>
</div>

View File

@ -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>

View File

@ -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>

View File

@ -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" %}" />

View File

@ -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>

3
common_files/tests.py Normal file
View File

@ -0,0 +1,3 @@
from django.test import TestCase
# Create your tests here.

3
common_files/views.py Normal file
View File

@ -0,0 +1,3 @@
from django.shortcuts import render
# Create your views here.

View File

@ -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 = {

View File

@ -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>

216
ecole.php
View File

@ -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 lIll»</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 sexprimer 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 dinitiation 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 lenfant 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 laideront à faire le choix dun instrument pour la poursuite de lapprentissage</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 dinstrument ou de chant seul avec lenseignant (30' à 45 suivant le cas). Lélève et lenseignant établissent ensemble en début danné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. Lobjectif est danalyser 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 lIll</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>

View File

@ -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>

Binary file not shown.

View File

@ -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>

View File

@ -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, lharmonie 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 dOberhergheim.</p>
<p class="text-faded">Les prestations musicales sont tout aussi variées, entre Cérémonies et animations diverses, jusquaux 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é MusicIllFest, avec à chaque fois des découvertes proposées au public, dans une ambiance des plus festives.</p>
<p class="text-faded">Dautres concerts ponctuent lannée, notamment en partenariat avec lHarmonie municipale de Kembs ou encore la Chorale dOberhergheim.</p>
<p class="text-faded">Lharmonie 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">LHarmonie 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>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 604 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 680 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 322 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 339 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 292 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 224 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 313 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 253 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 415 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 310 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 585 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 320 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 499 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 316 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 618 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 482 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 502 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 644 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 594 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 314 KiB

Some files were not shown because too many files have changed in this diff Show More