<div class="site single single-product">
<header class="main-header header--white">
<div class="container">
<div class="header__brand">
<a href="/">
<img src="../../images/brand/brand-black.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>
<main id="main" class="container">
<nav class="breadcrumb">
<ol>
<li class="item-first">
<a href="/" title="Accueil">
Accueil
</a>
</li>
<li class="item-last">
<span>Current page</span>
</li>
</ol>
</nav>
<h1>Moduled barre led RVB Ayrton 150</h1>
<div class="container--single-product">
<div class="single-product__thumbnail">
<aside class="block-product-image js-productGallery">
<div class="block-product-image__thumbnail js-mainPicture">
<a href="https://source.unsplash.com/67TZmPNs9yM" class="inner-box" data-target-id="1">
<img src="https://source.unsplash.com/67TZmPNs9yM" alt="" />
</a>
</div>
<div class="block-product-image__navigation js-productGalleryLists">
<button class="scrollLeft"></button>
<button class="scrollTop"></button>
<ul class="block-product-image__pictures lst__unstyled">
<li>
<a href="https://source.unsplash.com/67TZmPNs9yM" data-pics-id="1" data-fslightbox="blockProductImage">
<img src="https://source.unsplash.com/67TZmPNs9yM" alt="" />
</a>
</li>
<li>
<a href="https://source.unsplash.com/QfAX7_xjxm4" data-pics-id="2" data-fslightbox="blockProductImage">
<img src="https://source.unsplash.com/QfAX7_xjxm4" alt="" />
</a>
</li>
<li>
<a href="https://source.unsplash.com/UgNjyPkphtU" data-pics-id="3" data-fslightbox="blockProductImage">
<img src="https://source.unsplash.com/UgNjyPkphtU" alt="" />
</a>
</li>
<li>
<a href="https://source.unsplash.com/UgNjyPkphtU" data-pics-id="4" data-fslightbox="blockProductImage">
<img src="https://source.unsplash.com/UgNjyPkphtU" alt="" />
</a>
</li>
<li>
<a href="https://source.unsplash.com/UgNjyPkphtU" data-pics-id="5" data-fslightbox="blockProductImage">
<img src="https://source.unsplash.com/UgNjyPkphtU" alt="" />
</a>
</li>
<li>
<a href="https://source.unsplash.com/UgNjyPkphtU" data-pics-id="6" data-fslightbox="blockProductImage">
<img src="https://source.unsplash.com/UgNjyPkphtU" alt="" />
</a>
</li>
<li>
<a href="https://source.unsplash.com/UgNjyPkphtU" data-pics-id="7" data-fslightbox="blockProductImage">
<img src="https://source.unsplash.com/UgNjyPkphtU" alt="" />
</a>
</li>
<li>
<a href="https://source.unsplash.com/UgNjyPkphtU" data-pics-id="8" data-fslightbox="blockProductImage">
<img src="https://source.unsplash.com/UgNjyPkphtU" alt="" />
</a>
</li>
<li>
<a href="https://source.unsplash.com/UgNjyPkphtU" data-pics-id="9" data-fslightbox="blockProductImage">
<img src="https://source.unsplash.com/UgNjyPkphtU" alt="" />
</a>
</li>
<li>
<a href="https://source.unsplash.com/UgNjyPkphtU" data-pics-id="10" data-fslightbox="blockProductImage">
<img src="https://source.unsplash.com/UgNjyPkphtU" alt="" />
</a>
</li>
</ul>
<button class="scrollRight"></button>
<button class="scrollBottom"></button>
</div>
</aside>
</div>
<div class="single-product__details">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at dapibus ante, id tempor enim. Sed eleifend iaculis nibh sit amet posuere. Donec eu quam non ligula suscipit interdum venenatis eget felis. Donec lobortis tempor accumsan.</p>
<p>Aliquam quis dapibus lacus, at sagittis quam. Suspendisse feugiat ligula ut massa malesuada efficitur. Etiam non tincidunt nisl. Cras at semper nibh, ac mattis diam. Morbi ac venenatis massa. Suspendisse sit amet orci nec turpis dapibus
posuere id at libero. Aenean dapibus luctus gravida. Phasellus sit amet aliquam purus.</p>
<div class="single-product__price single-product__price-empty-variations">
<p><span>42.00€</span> tous nos prix sont hors taxe</p>
<form method="" action="" class="form-add-to-cart">
<button class="button button--gold btn-add-to-cart" type="button" data-product-initial-id="131512" data-product-id="131512-blue" data-product-name="Un bouton bleu" data-product-thumbnail="">
Ajouter au panier
</button>
</form>
</div>
<aside class="single-product__description block-text">
<h4>Informations techniques</h4>
<div class="block-highlight">
<table>
<tr>
<td>Title</td>
<td>Item</td>
</tr>
<tr>
<td>Title</td>
<td>Item</td>
</tr>
<tr>
<td>Title</td>
<td>Item</td>
</tr>
<tr>
<td>Title</td>
<td>Item</td>
</tr>
<tr>
<td>Title</td>
<td>Item</td>
</tr>
</table>
</div>
</aside>
</div>
</div>
</main>
<section class="about-section">
<div class="container container--quicklink-right container--spaced">
<div class="section-card-product">
<h3>Ces produits pourraient vous intéresser</h3>
<div class="wrapper wrapper--three wrapper--no-row-gap">
<article class="card-product">
<a href="#">
<div class="card-product__thumb">
<img src="https://source.unsplash.com/featured/?light" alt="" />
</div>
<div class="card-product__content">
<h3 class="h5">Moduled Barre LED RVB Ayrton 250</h3>
<span class="card-product__content-price theme-color">
35€
</span>
</div>
<div class="card-product__buttons">
<span class="button button--gray">Voir</span>
<object>
<button class="button button--blue js-add-to-cart theme-button">Ajouter au devis</button>
</object>
</div>
</a>
</article>
<article class="card-product">
<a href="#">
<div class="card-product__thumb">
<img src="https://source.unsplash.com/featured/?light" alt="" />
</div>
<div class="card-product__content">
<h3 class="h5">Moduled Barre LED RVB Ayrton 250</h3>
<span class="card-product__content-price theme-color">
35€
</span>
</div>
<div class="card-product__buttons">
<span class="button button--gray">Voir</span>
<object>
<button class="button button--blue js-add-to-cart theme-button">Ajouter au devis</button>
</object>
</div>
</a>
</article>
<article class="card-product">
<a href="#">
<div class="card-product__thumb">
<img src="https://source.unsplash.com/featured/?light" alt="" />
</div>
<div class="card-product__content">
<h3 class="h5">Moduled Barre LED RVB Ayrton 250</h3>
<span class="card-product__content-price theme-color">
35€
</span>
</div>
<div class="card-product__buttons">
<span class="button button--gray">Voir</span>
<object>
<button class="button button--blue js-add-to-cart theme-button">Ajouter au devis</button>
</object>
</div>
</a>
</article>
</div>
</div>
<aside class="block-quicklink">
<h4>Accès rapide</h4>
<nav class="nav-quicklink">
<ul>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">
<a href="#">
<span>Link</span>
<i class="icon icon--chevron-down"></i>
</a>
<ul aria-hidden="true">
<li><a href="#">Sublink</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-submenu">
<a href="#">
Sublink
<i class="icon icon--chevron-down"></i>
</a>
<ul aria-hidden="true">
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
</ul>
</li>
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="#">
<span>Link</span>
</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">
<a href="#">
<span>Link</span>
<i class="icon icon--chevron-down"></i>
</a>
<ul aria-hidden="true">
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
<li><a href="#">Sublink</a></li>
</ul>
</li>
</ul>
</nav>
</aside>
</div>
</section>
<div class="container">
<div class="block-cta">
<h2>Besoin d'une offre sur mesure ?</h2>
<a href="#" class="button button--white button--rounded">Demander un devis</a>
</div>
</div>
<section class="section-last-news">
<div class="container container--sidebar-right container--spaced">
<div class="last-news">
</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>z
<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">
<article class="card-product">
<a href="#">
<div class="card-product__thumb">
<img src="https://source.unsplash.com/featured/?light" alt="" />
</div>
<div class="card-product__content">
<h3 class="h5">Moduled Barre LED RVB Ayrton 250</h3>
<span class="card-product__content-price theme-color">
35€
</span>
</div>
<div class="card-product__buttons">
<span class="button button--gray">Voir</span>
<object>
<button class="button button--blue js-add-to-cart theme-button">Ajouter au devis</button>
</object>
</div>
</a>
</article>
<article class="card-product">
<a href="#">
<div class="card-product__thumb">
<img src="https://source.unsplash.com/featured/?light" alt="" />
</div>
<div class="card-product__content">
<h3 class="h5">Moduled Barre LED RVB Ayrton 250</h3>
<span class="card-product__content-price theme-color">
35€
</span>
</div>
<div class="card-product__buttons">
<span class="button button--gray">Voir</span>
<object>
<button class="button button--blue js-add-to-cart theme-button">Ajouter au devis</button>
</object>
</div>
</a>
</article>
<article class="card-product">
<a href="#">
<div class="card-product__thumb">
<img src="https://source.unsplash.com/featured/?light" alt="" />
</div>
<div class="card-product__content">
<h3 class="h5">Moduled Barre LED RVB Ayrton 250</h3>
<span class="card-product__content-price theme-color">
35€
</span>
</div>
<div class="card-product__buttons">
<span class="button button--gray">Voir</span>
<object>
<button class="button button--blue js-add-to-cart theme-button">Ajouter au devis</button>
</object>
</div>
</a>
</article>
</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 single single-product">
{{> @header header_white=true }}
<main id="main" class="container">
{{> @nav-breadcrumb }}
<h1>{{post.title}}</h1>
<div class="container--single-product">
<div class="single-product__thumbnail">
{{> @block-product-image }}
</div>
<div class="single-product__details">
{{{post.content}}}
<div class="single-product__price{{#unless product.variations }} single-product__price-empty-variations{{/unless}}">
<p><span>42.00€</span> tous nos prix sont hors taxe</p>
{{!-- S'il y a plus qu'une variation, ajouter la classe multiple-variations à form --}}
<form method="" action="" class="form-add-to-cart">
{{#if product.variations}}
<div class="input-element">
<label for="color-element">Couleur</label>
<select id="color-element" name="product-variations" id="product-variations" onchange="preciseVariation()" data-product-id="131512">
{{#each product.variations }}
<option data-product-thumbnail="" value="{{this.attribute_pa_couleurs}}">{{this.attribute_pa_couleurs}}</option>
{{/each}}
</select>
</div>
{{/if}}
<button
class="button button--gold btn-add-to-cart"
type="button"
data-product-initial-id="131512"
data-product-id="131512-blue"
data-product-name="Un bouton bleu"
data-product-thumbnail= ""
>
Ajouter au panier
</button>
</form>
</div>
<aside class="single-product__description block-text">
<h4>Informations techniques</h4>
<div class="block-highlight">
<table>
<tr>
<td>Title</td>
<td>Item</td>
</tr>
<tr>
<td>Title</td>
<td>Item</td>
</tr>
<tr>
<td>Title</td>
<td>Item</td>
</tr>
<tr>
<td>Title</td>
<td>Item</td>
</tr>
<tr>
<td>Title</td>
<td>Item</td>
</tr>
</table>
</div>
</aside>
</div>
</div>
</main>
<section class="about-section">
<div class="container container--quicklink-right container--spaced">
<div class="section-card-product">
<h3>Ces produits pourraient vous intéresser</h3>
<div class="wrapper wrapper--three wrapper--no-row-gap">
{{#each cards_product}}
{{> @card-product card_product=this }}
{{/each}}
</div>
</div>
{{> @nav-quicklink }}
</div>
</section>
<div class="container">
{{> @block-cta }}
</div>
{{!-- {{> @block-product-modal }} --}}
{{> @section-recent-news only_follow=true }}z
{{> @footer }}
</div>
{
"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": "#"
}
]
}
},
"post": {
"title": "Moduled barre led RVB Ayrton 150",
"content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at dapibus ante, id tempor enim. Sed eleifend iaculis nibh sit amet posuere. Donec eu quam non ligula suscipit interdum venenatis eget felis. Donec lobortis tempor accumsan.</p><p>Aliquam quis dapibus lacus, at sagittis quam. Suspendisse feugiat ligula ut massa malesuada efficitur. Etiam non tincidunt nisl. Cras at semper nibh, ac mattis diam. Morbi ac venenatis massa. Suspendisse sit amet orci nec turpis dapibus posuere id at libero. Aenean dapibus luctus gravida. Phasellus sit amet aliquam purus.</p>",
"second_content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam purus nisl, iaculis a elementum in, feugiat ut metus. Donec elit sapien, facilisis ut orci sit amet, hendrerit eleifend ante. Aliquam sagittis sodales magna, in iaculis nibh convallis vitae. Morbi nec lacinia urna.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam purus nisl, iaculis a elementum in, feugiat ut metus. Donec elit sapien, facilisis ut orci sit amet, hendrerit eleifend ante. Aliquam sagittis sodales magna, in iaculis nibh convallis vitae. Morbi nec lacinia urna.</p>"
},
"product": {
"about": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam purus nisl, iaculis a elementum in, feugiat ut metus.</p><p>Donec elit sapien, facilisis ut orci sit amet, hendrerit eleifend ante. Aliquam sagittis sodales magna, in iaculis nibh convallis vitae. Morbi nec lacinia urna</p>",
"variations": null
},
"cards_product": [
{
"title": "Moduled Barre LED RVB Ayrton 250",
"thumb": "<img src=\"https://source.unsplash.com/featured/?light\" alt=\"\" />",
"price": "35€"
},
{
"title": "Moduled Barre LED RVB Ayrton 250",
"thumb": "<img src=\"https://source.unsplash.com/featured/?light\" alt=\"\" />",
"price": "35€"
},
{
"title": "Moduled Barre LED RVB Ayrton 250",
"thumb": "<img src=\"https://source.unsplash.com/featured/?light\" alt=\"\" />",
"price": "35€"
}
],
"block_cta": {
"title": "Besoin d'une offre sur mesure ?",
"button": {
"title": "Demander un devis",
"link": "#"
}
},
"card_product": {
"title": "Moduled Barre LED RVB Ayrton 250",
"thumb": "<img src=\"https://source.unsplash.com/featured/?light\" alt=\"\" />",
"price": "35€"
},
"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": "#"
}
]
}
}
}
.single-product {
header {
margin-bottom: $margin-s;
@include mediaWQuery($media-query-m) {
margin-bottom: $margin-l;
}
}
.about-section {
@include mediaWQuery($media-query-m) {
margin-top: $margin-xxl;
}
.wrapper {
margin-left: -.5rem;
margin-right: -.5rem;
}
}
.container--single-product {
display: grid;
grid-gap: $margin-m;
@include mediaWQuery($media-query-m) {
grid-template-columns: 6fr 8fr;
grid-column-gap: $margin-l;
}
@include mediaWQuery($media-query-l) {
grid-column-gap: $margin-xl;
}
}
&__details {
p:first-child { margin-top: 0 }
}
&__description {
padding-bottom: $margin-l;
> p:first-child {
margin-top: 0;
}
> aside {
.block-highlight {
margin-top: 0;
}
}
table {
background: transparent;
margin: 0;
tr {
margin-bottom: 1rem;
@include mediaWQuery($media-query-m) {
margin-bottom: .5rem;
}
}
tr:hover td { background: rgba(255, 255, 255, .2) }
td {
padding: 0;
&:first-child {
font-weight: 700;
}
&:last-child {
@include mediaWQuery($media-query-m) {
text-align: right;
}
}
}
@media screen and(max-width: $media-query-m) {
&, tr, td { display: block }
}
}
}
&__price {
border-top: 2px solid $c-gray-20;
border-bottom: 2px solid $c-gray-20;
padding: 1rem 0 2rem;
margin: 2rem 0;
@include mediaWQuery($media-query-m) {
padding: 2rem 1rem 3rem;
}
> p {
max-width: none;
display: block;
color: $c-gray-60;
font-family: $font-primary;
@include mediaWQuery($media-query-m) {
margin-bottom: 4rem;
}
> span {
color: $c-black;
font-size: rem(44);
display: block;
line-height: 1.1;
}
}
form {
display: flex;
width: 100%;
margin: 0 auto;
flex-wrap: wrap;
@include mediaWQuery($media-query-m) {
flex-wrap: initial;
}
&.multiple-variations {
flex-direction: column;
flex: 1;
> * {
margin-bottom: 2rem!important;
&:first-child {
margin-top: 0!important;
}
}
}
.input-element {
flex: 1;
}
}
.form-add-to-cart {
margin-top: 2rem;
@include mediaWQuery($media-query-m) { margin-top: 0 }
.input-element {
position: relative;
margin: 0 0 1rem;
@include mediaWQuery($media-query-s) { margin: 0 1rem 0 0 }
label {
position: absolute;
top: 0;
left: 0;
transform: translateY(calc(-100% - 5px));
}
select {
width: 100%;
height: 100%;
-webkit-appearance: none;
border: 1px solid $c-gray-60;
padding: .5rem;
@include mediaWQuery($media-query-m) {
padding: .2rem .5rem;
}
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fas' data-icon='caret-down' class='svg-inline--fa fa-caret-down fa-w-10' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23817F74' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E");
background-position: calc(100% - 10px) center;
background-size: 20px 20px;
background-repeat: no-repeat;
}
}
.button {
padding: .75rem 3rem;
}
}
&-empty-variations {
@include mediaWQuery($media-query-s) {
display: flex;
align-items: center;
}
> p {
margin-bottom: 0;
width: 100%;
}
.button {
width: 100%
}
}
}
}
There are no notes for this item.