<div class="hero hero--innerpage hero--search">
<div class="container">
<div class="hero--innerpage__content">
<h1>Location de matériel audiovisuel pour événements</h1>
<form class="hero--search__form form-search" action="#" method="POST">
<label>Rechercher parmi nos 2000 produits</label>
<span class="input-container">
<input type="search" class="js-open-search" />
<button type="submit"><i class="icon icon--search icon--search-black"></i></button>
</span>
</form>
</div>
<div class="hero--innerpage__thumbnail">
<div class="outer--box">
<div class="inner-box">
<img src="https://source.unsplash.com/featured/?rental" alt="" />
</div>
</div>
</div>
</div>
</div>
<script>
// Temporary stop event
document.querySelector('.hero--search__form button').onclick = event => event.preventDefault();
</script>
<div class="hero hero--innerpage hero--search">
<div class="container">
<div class="hero--innerpage__content">
<h1>{{hero.title}}</h1>
<form class="hero--search__form form-search" action="#" method="POST">
<label>{{hero.search.label}}</label>
<span class="input-container">
<input type="search" class="js-open-search" />
<button type="submit"><i class="icon icon--search icon--search-black"></i></button>
</span>
</form>
</div>
<div class="hero--innerpage__thumbnail">
<div class="outer--box">
<div class="inner-box">
{{{hero.thumbnail}}}
</div>
</div>
</div>
</div>
</div>
<script>
// Temporary stop event
document.querySelector('.hero--search__form button').onclick = event => event.preventDefault();
</script>
{
"hero": {
"title": "Location de matériel audiovisuel pour événements",
"thumbnail": "<img src=\"https://source.unsplash.com/featured/?rental\" alt=\"\" />",
"search": {
"label": "Rechercher parmi nos 2000 produits"
}
}
}
.hero--search {
.container {
.hero--innerpage__content {
flex-direction: column;
.hero--search__form {
@include mediaWQuery($media-query-l) {
margin-bottom: 3rem;
}
.input-container {
position: relative;
display: block;
@include mediaWQuery($media-query-l) {
width: calc(100% - 3rem);
}
> input {
display: block;
width: 100%;
font-size: $font-size-m;
border: 1px solid $c-gray-30;
border-radius: $border-radius-s;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.2);
padding: $margin-m $margin-xl $margin-m $margin-m;
@include transition;
&:hover, &:focus {
box-shadow: inset 0 3px 5px 0 rgba(0, 0, 0, 0.2);
}
}
> button {
@include absPosition($top: 50%, $right: 5px);
transform: translateY(-50%);
-webkit-appearance: none;
border: 0;
background: transparent;
cursor: pointer;
> i {
width: 35px;
height: 35px;
}
}
}
label {
font-size: $font-size-m;
font-family: $font-primary;
}
}
}
}
}
There are no notes for this item.