{% 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 %}
