<div class="loud-frontpage">
<div class="carousel container" tabindex="-1">
<div class="home-carousel">
<a href="" tabindex="-1"><img src="https://source.unsplash.com/DTSDD968Mpw"></a>
<a href="" tabindex="-1"><img src="https://source.unsplash.com/DTSDD968Mpw"></a>
<a href="" tabindex="-1"><img src="https://source.unsplash.com/DTSDD968Mpw"></a>
<a href="" tabindex="-1"><img src="https://source.unsplash.com/DTSDD968Mpw"></a>
<a href="" tabindex="-1"><img src="https://source.unsplash.com/DTSDD968Mpw"></a>
<a href="" tabindex="-1"><img src="https://source.unsplash.com/DTSDD968Mpw"></a>
</div>
<a href="#facebookLike" class="carousel__facebook">
<i class="icon icon--facebook"></i>
<span>17890 personnes nous suivent sur Facebook. Et vous ?</span>
</a>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
var slider = tns({
container: '.home-carousel',
items: 1,
nav: true,
navPosition: 'bottom',
mouseDrag: true,
controls: false,
autoplay: true,
autoplayButtonOutput: false
});
})
</script>
<div class="container loud-frontpage__content">
<h2>Trouvez un magasin proche de chez vous</h2>
<form class="form-search-location" action="">
<label class="input--find-location">
<span>
<span>Votre ville ou code postal</span>
<input type="text" value="" class="input--unstyled" />
</span>
<span>
<button type="submit" value="">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="27px" height="36px" viewBox="0 0 27 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Templates" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="12---Shop-index---Desktop-HD" transform="translate(-479.000000, -7326.000000)">
<g id="elements/blocks/block-shop-search" transform="translate(0.000000, 7106.000000)">
<g id="block-shop-search">
<g transform="translate(342.000000, 102.000000)">
<g>
<g id="icons/icon-map-atoms/icons/icon-map" transform="translate(137.000000, 118.000000)">
<g id="map-marker-alt" fill-rule="nonzero">
<path d="M13.5,2.25 C16.5050156,2.25 19.3301016,3.42021094 21.4549453,5.54505469 C23.5797891,7.66989843 24.75,10.4949844 24.75,13.5 C24.75,18.0344531 23.2950937,19.1580469 13.5,33.3232734 C3.70582031,19.1593125 2.25,18.0347344 2.25,13.5 C2.25,10.4949844 3.42021094,7.66989843 5.54505469,5.54505469 C7.66989844,3.42021094 10.4949844,2.25 13.5,2.25 Z M13.5,9 C11.0186719,9 9,11.0186719 9,13.5 C9,15.9813281 11.0186719,18 13.5,18 C15.9813281,18 18,15.9813281 18,13.5 C18,11.0186719 15.9813281,9 13.5,9 Z" id="Combined-Shape" fill="#F05D61"></path>
<path d="M10.9335938,31.5 L22.1132812,15.75 C22.9170617,14.5814744 23.4561242,13.2338182 23.7304687,11.7070312 C24.0048133,10.1802443 24.0048133,8.5279006 23.7304688,6.75 L25.9101562,11.7070312 L25.9101562,16.171875 L22.1132812,23.4140625 L13.5,35.0859375 L10.9335938,31.5 Z" id="Path-2" fill="#D4484C"></path>
<path d="M13.5,6.75 C9.77800781,6.75 6.75,9.77800781 6.75,13.5 C6.75,17.2219922 9.77800781,20.25 13.5,20.25 C17.2219922,20.25 20.25,17.2219922 20.25,13.5 C20.25,9.77800781 17.2219922,6.75 13.5,6.75 Z M13.5,18 C11.0186719,18 9,15.9813281 9,13.5 C9,11.0186719 11.0186719,9 13.5,9 C15.9813281,9 18,11.0186719 18,13.5 C18,15.9813281 15.9813281,18 13.5,18 Z M13.5,0 C6.04413281,0 0,6.04413288 0,13.5 C0,18.9431018 1.89632813,20.4631174 12.1125938,35.2736723 C12.7829531,36.242016 14.2169766,36.2421567 14.8874766,35.2736723 C25.1036719,20.4631174 27,18.9431018 27,13.5 C27,6.04413288 20.9558672,0 13.5,0 Z M13.5,33.3232734 C3.70582031,19.1593125 2.25,18.0347344 2.25,13.5 C2.25,10.4949844 3.42021094,7.66989843 5.54505469,5.54505469 C7.66989844,3.42021094 10.4949844,2.25 13.5,2.25 C16.5050156,2.25 19.3301016,3.42021094 21.4549453,5.54505469 C23.5797891,7.66989843 24.75,10.4949844 24.75,13.5 C24.75,18.0344531 23.2950937,19.1580469 13.5,33.3232734 Z" id="Shape" fill="#4C4636"></path>
</g>
<path d="M6.49992344,8.96756592 C8.7910422,8.96756592 10.6483609,8.55832621 10.6483609,8.05350344 C10.6483609,7.54868067 8.8213067,6.57644337 6.53018794,6.57644337 C4.23906917,6.57644337 2.35148594,7.54868067 2.35148594,8.05350344 C2.35148594,8.55832621 4.20880467,8.96756592 6.49992344,8.96756592 Z" id="Oval" fill="#FFC6C6" transform="translate(6.499923, 7.772005) rotate(-51.000000) translate(-6.499923, -7.772005) "></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg> </button>
</span>
</label></form>
</div>
</div>
<div class="loud-frontpage">
{{> @carousel }}
<div class="container loud-frontpage__content">
<h2>Trouvez un magasin proche de chez vous</h2>
{{> @form-search-location }}
</div>
</div>
/* No context defined for this component. */
.loud-frontpage {
background-image: linear-gradient(#5EA4E9, #B8E1FC);
&__content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 50vh;
h2 { text-align: center }
}
@include mediaWQuery($media-query-l) {
padding-top: $margin-xl;
&__content {
min-height: 60vh;
padding-top: $margin-xxl;
padding-bottom: $margin-xxl;
}
}
}
There are no notes for this item.