<div class="site page-frontpage">
<header class="main-header">
<div class="container">
<div class="header__brand">
<a href="/">
<img src="../../images/brand/brand-white.svg" alt="" class="XXL Organisation brand" />
</a>
</div>
<div class="header__nav js-nav-inside">
<!--
* The primary subnav can have two different states:
*
* 1) By default, the subnav appear on hover from the trigger link.
*
* 2) With the 'js-dropdown--onclick' on the ul.primary-nav,
* the subnav appear on click from the trigger link.
*
-->
<nav class="main-nav">
<ul class="nav-primary" data-ui-component="primary-main">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="https://google.com" class="js-dropdown-link">About</a>
<ul class="nav-primary__sub-nav js-dropdown-menu">
<li><a href="#">Products</a></li>
<li><a href="#">Company</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#" class="js-dropdown-link">Services</a>
<ul class="nav-primary__sub-nav js-dropdown-menu">
<li><a href="#">Web</a></li>
<li><a href="#">Data</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="header__search header__tools">
<button class="button button--search js-open-search">
<i class="icon icon--search"></i>
<span>Rechercher</span>
</button>
</div>
<div class="header__devis header__tools">
<a href="#" class="button button--devis">
<i class="icon icon--devis"></i>
<span>Finaliser mon devis</span>
</a>
<div class="block-cart" id="cartSummary">
<ul class="lst__unstyled">
<li></li>
<li></li>
<li></li>
<span>et 7 autres produits...</span>
</ul>
<a href="#" class="button button--rounded button--black button--full-width">Finaliser mon devis</a>
</div>
</div>
<div class="header__button">
<button class="button button--menu js-toggle-menu">
<svg width="15" height="12" xmlns="http://www.w3.org/2000/svg" id="menu-icon">
<defs>
<linearGradient x1=".615%" y1="50%" y2="50%" id="a">
<stop stop-color="#E3CB78" offset="0%"/>
<stop stop-color="#BDA450" offset="49.584%"/>
<stop stop-color="#A07C2A" offset="100%"/>
</linearGradient>
</defs>
<g fill="url(#a)" fill-rule="evenodd">
<rect id="bars-1" width="15" height="2" rx="1"/>
<rect id="bars-2" y="5" width="15" height="2" rx="1"/>
<rect id="bars-3" y="10" width="15" height="2" rx="1"/>
</g>
</svg>
<span>Menu</span>
</button>
</div>
</div>
</header>
<div class="hero hero--frontpage">
<div class="container hero--inner">
<a href="#openVideo" id="openVideoBtn" class="block-modal-video">
<div class="block-modal-video__container">
<video autoplay preload muted loop>
<source src="../../videos/xxl-video-homepage.mp4" type="video/mp4">
<source src="../../videos/xxl-video-homepage.webm" type="video/webm">
</video>
<h2>Donnez<br>une autre dimension<br>à vos événements</h2>
</div>
<span>Lire la vidéo</span>
</a>
</div>
</div>
<div class="modal-video">
<div class="modal-video__container">
<div class="modal-video__container-close">
<button class="button mk-icon-close btn__unstyled" id="closeVideoBtn">
<svg aria-hidden="true" data-prefix="far" data-icon="times" class="svg-inline--fa fa-times fa-w-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="#000" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
Fermer
</button>
</div>
<div class="modal-video__container-iframe">
<iframe src="https://player.vimeo.com/video/108018156" width="640" height="360" autoplay="true" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
</div>
</div>
<main id="main">
<section class="section-card-page container ">
<h2 class="h1">Nos services</h2>
<div class="section-card-page__listing">
<article class="card card-section">
<a href="#" title="Location" class="inner-box">
<img src="https://source.unsplash.com/random" alt="" />
<div class="card-section--inner">
<h3 class="h2">Location</h3>
<p>Son, structure, vidéo, lumière, distribution, mobilier</p>
</div>
</a>
</article>
<article class="card card-section">
<a href="#" title="Événements" class="inner-box">
<img src="https://source.unsplash.com/random" alt="" />
<div class="card-section--inner">
<h3 class="h2">Événements</h3>
<p>Conception, prestation, réalisation</p>
</div>
</a>
</article>
<article class="card card-section">
<a href="#" title="Mariage" class="inner-box">
<img src="https://source.unsplash.com/random" alt="" />
<div class="card-section--inner">
<h3 class="h2">Mariage</h3>
<p>Animation, DJ, son lumière</p>
</div>
</a>
</article>
<article class="card card-section">
<a href="#" title="Mariage" class="inner-box">
<img src="https://source.unsplash.com/random" alt="" />
<div class="card-section--inner">
<h3 class="h2">Mariage</h3>
<p>Animation, DJ, son lumière</p>
</div>
</a>
</article>
</div>
</section>
<section class="about-section">
<div class="container container--sidebar-right container--spaced">
<article>
<h2>À propos de nous</h2>
<p>Depuis 1999, XXL Organisation est une entreprise référente dans l'univers de l'événementiel avec près de 2000 réalisations.</p>
<p>Autour de 3 activités que sont la <a href=''>location de matériel</a>, la <a href=''>conception/organisation de manifestations pour les professionnels</a>, et <a href=''>l'animation de mariages pour les particuliers</a>, nous nous
engageons à donner quotidiennement une autre dimension à vos événements !</p>
<a href="#" class="button button--linear button--linear-left">
Découvrir l'équipe
</a>
</article>
<aside class="block-text">
<h3>Envie de nous rejoindre ?</h3>
<p>Nous recherchons actuellement des DJ's professionnels pour rejoindre notre équipe.<br>Intéressé ? <a href=''>Contactez-nous!</a>
</aside>
</div>
</section>
</main>
<section class="section-last-news">
<div class="container container--sidebar-right container--spaced">
<div class="last-news">
<h2>Récemment</h2>
<article class="card card-news">
<a href="#" title="RCF NX15">
<img src="https://source.unsplash.com/random" alt=""/>
<div class="card-news__content">
<h2>RCF NX15</h2>
<span>Lire cette actualité</span>
</div>
</a>
</article>
<a href="#" class="button button--linear button--linear-right">
Voir tous les événements
</a>
</div>
<div class="follow-components">
<div class="icons-social">
<h3>Suivez-nous</h3>
<div class="icons-social__list">
<div class="icon-social icon-social--facebook">
<a href="#" title="Facebook" target="_blank" class="outer-box">
<div class="inner-box"></div>
</a>
</div>
<div class="icon-social icon-social--youtube">
<a href="#" title="Youtube" target="_blank" class="outer-box">
<div class="inner-box"></div>
</a>
</div>
<div class="icon-social icon-social--twitter">
<a href="#" title="Twitter" target="_blank" class="outer-box">
<div class="inner-box"></div>
</a>
</div>
<div class="icon-social icon-social--instagram">
<a href="#" title="Instagram" target="_blank" class="outer-box">
<div class="inner-box"></div>
</a>
</div>
<div class="icon-social icon-social--linkedin">
<a href="#" title="LinkedIn" target="_blank" class="outer-box">
<div class="inner-box"></div>
</a>
</div>
<div class="icon-social icon-social--vimeo">
<a href="#" title="Vimeo" target="_blank" class="outer-box">
<div class="inner-box"></div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="block-search" id="modal-block-search">
<button class="block-search__close button js-close-search">
<i class="icon icon--close"></i>
<span>Annuler ma recherche</span>
</button>
<form class="block-search__form container container-l form-search" action="#" method="POST">
<label>Rechercher parmi nos 2000 produits</label>
<span class="input-container">
<input type="search" />
<button type="submit"><i class="icon icon--search icon--search-black"></i></button>
</span>
</form>
<div class="block-search__result">
<div class="container cards-result">
<p class="result-number">127 produits répondent à votre recherche</p>
<div class="cards-result__listing">
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="subfooter container container-m">
<nav class="nav__footer">
<h6>Location</h6>
<button class="js-nav-toogle">Location</button>
<ul>
<li><a href="">Lien</a></li>
<li><a href="">Lien</a></li>
<li><a href="">Lien</a></li>
<li><a href="">Lien</a></li>
<li><a href="">Lien</a></li>
<li><a href="">Lien</a></li>
</ul>
</nav>
<nav class="nav__footer">
<h6>Mariages</h6>
<button class="js-nav-toogle">Mariages</button>
<ul>
<li><a href="">Lien</a></li>
<li><a href="">Lien</a></li>
<li><a href="">Lien</a></li>
<li><a href="">Lien</a></li>
</ul>
</nav>
<nav class="nav__footer">
<h6>Événements</h6>
<button class="js-nav-toogle">Événements</button>
<ul>
<li><a href="">Lien</a></li>
<li><a href="">Lien</a></li>
<li><a href="">Lien</a></li>
<li><a href="">Lien</a></li>
</ul>
</nav>
<nav class="nav__footer">
<h6>XXL Organisation</h6>
<button class="js-nav-toogle">XXL Organisation</button>
<ul>
<li><a href="">Lien</a></li>
<li><a href="">Lien</a></li>
<li><a href="">Lien</a></li>
<li><a href="">Lien</a></li>
</ul>
</nav>
</div>
<div class="footer">
<div class="logo">
<img src="/images/logo-label.png" alt="Logo Label des prestataires de service du spectacle vivant" />
</div>
<div class="copyright">
© XXL Organisation 2019
<ul class="lst__unstyled lst__inline">
<li><a href="#">Mentions légales</a></li>
<li><a href="#">Politique de confidentialité</a></li>
</ul>
</div>
<div class="animated-icons">
Réalisé avec
<div class="icons js-animate-icons">
<div class="icons-container">
<svg aria-hidden="true" data-prefix="fas" data-icon="cheeseburger" class="svg-inline--fa fa-cheeseburger fa-w-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M464 256h-48l-96 64-96-64H48a48 48 0 0 0 0 96h416a48 48 0 0 0 0-96zM58.6 224h394.7c34.6 0 54.6-43.9 34.8-75.9C448 83.2 359.5 32.1 256 32c-103.5.1-192 51.2-232.2 116.1-19.8 32 .3 75.9 34.8 75.9zM384 112a16 16 0 1 1-16 16 16 16 0 0 1 16-16zM256 80a16 16 0 1 1-16 16 16 16 0 0 1 16-16zm-128 32a16 16 0 1 1-16 16 16 16 0 0 1 16-16zm352 272H32a16 16 0 0 0-16 16v16a64.06 64.06 0 0 0 64 64h352a64.06 64.06 0 0 0 64-64v-16a16 16 0 0 0-16-16z"/></svg>
<svg aria-hidden="true" data-prefix="fas" data-icon="french-fries" class="svg-inline--fa fa-french-fries fa-w-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M432 224h-34c-6.92 0-13.7 4.27-15.19 11-8.6 39-62.09 69-126.79 69s-118.19-30-126.79-69c-1.49-6.76-8.27-11-15.19-11H80a16 16 0 0 0-15.62 19.47l54.1 243.47A32 32 0 0 0 149.73 512h212.54a32 32 0 0 0 31.24-25.06l54.1-243.47A16 16 0 0 0 432 224zm-80.45 4.14c.4-1.78 1.46-3.22 2.06-4.91l30.14-172.46a16 16 0 0 0-20.34-18.08l-34.28 10.25c-4.24 1.27-7.17 4.51-9.13 8.33v207.27c17.55-8.38 29.15-19.54 31.54-30.4zm79.9-36.14l16.3-93.23a16 16 0 0 0-20.34-18.08l-17.31 5.17-18.75 107.26c2.24-.32 4.33-1.12 6.63-1.12zM288 268.78V32a16 16 0 0 0-8.84-14.31l-32-16A16 16 0 0 0 224 16v252.78a160.62 160.62 0 0 0 64 0zM114 192c3.6 0 7 1 10.35 1.75l-20-107.16-19.74-5.9a16 16 0 0 0-20.36 18.08L80.55 192zm78 66.54V33.17l-3.76-20.1a16 16 0 0 0-25.39-9.81l-28.51 21.62a16 16 0 0 0-6.07 15.69l36.9 197.22c5.3 7.58 14.49 14.86 26.83 20.75z"/></svg>
<svg aria-hidden="true" data-prefix="fas" data-icon="beer" class="svg-inline--fa fa-beer fa-w-14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M368 96h-48V56c0-13.255-10.745-24-24-24H24C10.745 32 0 42.745 0 56v400c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24v-42.11l80.606-35.977C429.396 365.063 448 336.388 448 304.86V176c0-44.112-35.888-80-80-80zm16 208.86a16.018 16.018 0 0 1-9.479 14.611L320 343.805V160h48c8.822 0 16 7.178 16 16v128.86zM208 384c-8.836 0-16-7.164-16-16V144c0-8.836 7.164-16 16-16s16 7.164 16 16v224c0 8.836-7.164 16-16 16zm-96 0c-8.836 0-16-7.164-16-16V144c0-8.836 7.164-16 16-16s16 7.164 16 16v224c0 8.836-7.164 16-16 16z"/></svg>
<svg aria-hidden="true" data-prefix="fas" data-icon="heart" class="svg-inline--fa fa-heart fa-w-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"/></svg>
</div>
</div>
par
<a rel="noopener" href="http://www.mediakod.com" title="Mediakod" class="mycopy" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="30" height="30" viewBox="0 0 595.2 524.2"><path d="M528 409.5v-45.3V162.5c0 0-0.5-5.4-2.9-12.6 -1.8-6.7-5-12.8-9.4-18 -4.3-5.6-10.2-10.5-18-13.5 -5.8-2.5-12.2-3.9-19-3.9h-92.3c0.8 0-79 92-84.6 98.3L209.5 115h-0.3c-0.3-0.3-0.5-0.5-0.5-0.5 -47.6 0-82.3 0-82.3 0 -26.5 0-48 21.5-48 48v201.7 4.7c0 26.5 21.5 48 48 48h401.6M320.4 274.8l75-93.5h68.2l-81.8 92.4 83.8 90.5h-69L320.4 274.8z"></path></svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="site page-frontpage">
{{> @header }}
{{> @hero-frontpage }}
<main id="main">
{{> @section-card-section }}
<section class="about-section">
<div class="container container--sidebar-right container--spaced">
{{> @block-text-button block_text_button=section_about.about }}
{{> @block-text block_text=section_about.contact aside=true heading_level=3}}
</div>
</section>
</main>
{{> @section-recent-news }}
{{> @footer }}
</div>
{
"section_card_page": {
"title": "Nos services",
"items": [
{
"theme": "location",
"title": "Location",
"content": "<p>Son, structure, vidéo, lumière, distribution, mobilier</p>",
"link": "#",
"thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
},
{
"theme": "event",
"title": "Événements",
"content": "<p>Conception, prestation, réalisation</p>",
"link": "#",
"thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
},
{
"theme": "mariage",
"title": "Mariage",
"content": "<p>Animation, DJ, son lumière</p>",
"link": "#",
"thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
},
{
"theme": "mariage",
"title": "Mariage",
"content": "<p>Animation, DJ, son lumière</p>",
"link": "#",
"thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\" />"
}
]
},
"section_about": {
"about": {
"title": "À propos de nous",
"content": "<p>Depuis 1999, XXL Organisation est une entreprise référente dans l'univers de l'événementiel avec près de 2000 réalisations.</p><p>Autour de 3 activités que sont la <a href=''>location de matériel</a>, la <a href=''>conception/organisation de manifestations pour les professionnels</a>, et <a href=''>l'animation de mariages pour les particuliers</a>, nous nous engageons à donner quotidiennement une autre dimension à vos événements !</p>",
"button": {
"link": "#",
"title": "Découvrir l'équipe"
}
},
"contact": {
"title": "Envie de nous rejoindre ?",
"content": "<p>Nous recherchons actuellement des DJ's professionnels pour rejoindre notre équipe.<br>Intéressé ? <a href=''>Contactez-nous!</a>"
}
},
"section_last_news": {
"title": "Récemment",
"card_news": {
"title": "RCF NX15",
"link": "#",
"thumbnail": "<img src=\"https://source.unsplash.com/random\" alt=\"\"/>",
"content": "<p>Le retour de scène NX 15-SMA est équipé d'un nouvel amplificateur numérique de 700 watts et d'un nouvea transducteur 15\" coaxial à moteur néodyme qui garantissent une qualité et une définition son sans égal.</p>"
},
"button": {
"link": "#",
"title": "Voir tous les événements"
}
},
"block_socials": {
"title": "Suivez-nous",
"icons": [
{
"title": "Facebook",
"class": "facebook",
"link": "#"
},
{
"title": "Youtube",
"class": "youtube",
"link": "#"
},
{
"title": "Twitter",
"class": "twitter",
"link": "#"
},
{
"title": "Instagram",
"class": "instagram",
"link": "#"
}
]
},
"site": {
"title": "XXL Organisation",
"current_year": 2019,
"social": {
"title": "Suivez-nous",
"icons": [
{
"title": "Facebook",
"class": "facebook",
"link": "#"
},
{
"title": "Youtube",
"class": "youtube",
"link": "#"
},
{
"title": "Twitter",
"class": "twitter",
"link": "#"
},
{
"title": "Instagram",
"class": "instagram",
"link": "#"
},
{
"title": "LinkedIn",
"class": "linkedin",
"link": "#"
},
{
"title": "Vimeo",
"class": "vimeo",
"link": "#"
}
]
}
},
"footer_menu": {
"menu_location": {
"title": "Location",
"items": [
{
"title": "Lien",
"link": "#"
},
{
"title": "Lien",
"link": "#"
},
{
"title": "Lien",
"link": "#"
},
{
"title": "Lien",
"link": "#"
},
{
"title": "Lien",
"link": "#"
},
{
"title": "Lien",
"link": "#"
}
]
},
"menu_events": {
"title": "Événements",
"items": [
{
"title": "Lien",
"link": "#"
},
{
"title": "Lien",
"link": "#"
},
{
"title": "Lien",
"link": "#"
},
{
"title": "Lien",
"link": "#"
}
]
},
"menu_mariage": {
"title": "Mariages",
"items": [
{
"title": "Lien",
"link": "#"
},
{
"title": "Lien",
"link": "#"
},
{
"title": "Lien",
"link": "#"
},
{
"title": "Lien",
"link": "#"
}
]
},
"menu_about": {
"title": "XXL Organisation",
"items": [
{
"title": "Lien",
"link": "#"
},
{
"title": "Lien",
"link": "#"
},
{
"title": "Lien",
"link": "#"
},
{
"title": "Lien",
"link": "#"
}
]
},
"menu_footer": {
"items": [
{
"title": "Mentions légales",
"link": "#"
},
{
"title": "Politique de confidentialité",
"link": "#"
}
]
}
}
}
.page-frontpage {
.about-section,
.section-last-news {
@include mediaWQuery($media-query-l) {
margin-top: $margin-xxl;
}
}
}
.last-news {
opacity: 1 !important;
}
There are no notes for this item.