Part Quest
+372 652-59-33Kadaka tee 72a, 12818, TallinnПн-Пт: . . . . . . . . 9:00 - 18:00Сб . . . . . . . . . . 10:00 - 15:00Ищите автосервис?
Ищите автозапчасти?
У нас есть всё!
Отправьте нам запрос и получите предложение за 15 минут:
This pattern contains:
organisms-part-quest-header
organisms-part-quest-body
organisms-part-quest-footer
HTML
<div class="wrapper">
<div class="wrapper__content">
<div class="header">
<div class="header__content">
<div class="row">
<div class="logo"><a href="http://www.autospetsialist.ee/ru.html"><img src="../../images/global/logo.png" alt="Autospetsialist.ee logo" width="298" height="57"/></a></div>
<div class="address__short"><span><sup>+372</sup><span> 652-59-33</span></span><span>Kadaka tee 72a, 12818, Tallinn</span><span>Пн-Пт: . . . . . . . . 9:00 - 18:00</span><span>Сб . . . . . . . . . . 10:00 - 15:00</span><a href="" class="link__white">Ищите автосервис?</a></div>
<div class="switch"><a href="" class="link__switch">ЭСТ</a><a href="" class="link__switch--active">РУС</a></div>
</div>
<h1>Ищите автозапчасти?</h1>
</div>
</div>
<div class="body">
<div class="body__content">
<h1>У нас есть всё!</h1>
<h2 class="formSubHeading">Отправьте нам запрос и получите предложение за 15 минут:</h2><img src="../../images/part-quest/carPartMood.png" title="cartPartMood" alt="cartPartMood" width="332" height="271" class="body__img--cart"/>
<div class="body__form">
<form>
<div class="body__form--selectize">
<select id="al-searchModel--selectName" placeholder="Марка авто">
<option value="">Марка авто</option>
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Skoda">Skoda</option>
<option value="Volvo">Volvo</option>
</select>
<div class="input__tooltip"><span>Интересующие вас детали</span></div>
</div>
<div class="body__form--selectize">
<select id="al-searchModel--selectModel" placeholder="Модель авто" disabled="disabled">
<option value="">Модель авто</option>
<option value="TT">TT</option>
<option value="A3">A3</option>
<option value="A6">A6</option>
<option value="A8">A8</option>
</select>
<div class="input__tooltip"><span>Интересующие вас детали</span></div>
</div>
<div class="body__form--selectize">
<select id="al-searchModel--selectEngine" placeholder="Тип двигателя" disabled="disabled">
<option value="">Тип двигателя</option>
<option value="TT">1L</option>
<option value="A3">2.8L</option>
<option value="A6">3L</option>
<option value="A8">3.4L</option>
</select>
<div class="input__tooltip"><span>Интересующие вас детали</span></div>
</div>
<div class="form__input input--error">
<div class="input--required"><img src="../../images/part-quest/asteriskRed.png" title="обязательное поле" alt="обязательное поле" width="20" height="20"/></div>
<input type="text" name="tel" placeholder="Телефон"/>
<div class="input__tooltip"><span>Неверный номер телефона</span></div>
</div>
<div class="form__input">
<div class="input--required"><img src="../../images/part-quest/asterisk.png" title="обязательное поле" alt="обязательное поле" width="20" height="20"/></div>
<input type="email" name="email" placeholder="Email"/>
<div class="input__tooltip"><span>Ваш Email</span></div>
</div>
<div class="form__input">
<div class="input--required"><img src="../../images/part-quest/asterisk.png" title="обязательное поле" alt="обязательное поле" width="20" height="20"/></div>
<textarea placeholder="Искомые детали"></textarea>
<div class="textarea--tooltip"><span>Интересующие вас детали</span></div>
</div>
<div class="form__submit">
<input value="Отправить запрос" type="button" onclick="location.reload();location.href="../../patterns/03-templates-autospetsialist-landings-02-part-quest-sended/03-templates-autospetsialist-landings-02-part-quest-sended.html"" class="btn--red"/>
</div>
</form>
</div>
</div>
</div>
<!-- скрипт переписывайте по вашей религии - Появление подсказок при фокусе инпутов формы-->
<script type="text/javascript">
$( document ).ready(function() {
var is_mobile = false;
if( $('.body__img--cart').css('display')=='none') {
is_mobile = true;
}
if (is_mobile == false) {
$('.form__input input, .form__input textarea').focusin(function() {
$(this).next('.input__tooltip, .textarea--tooltip').css('display', 'inline-block');
}).focusout(function () {
$('.input__tooltip, .textarea--tooltip').hide();
});
$('.body__form--selectize').focusin(function() {
$(this).children('.input__tooltip').css('display', 'inline-block');
}).focusout(function () {
console.log(this)
$('.input__tooltip').hide();
});
}
});
</script>
<!-- скрипт переписывайте по вашей религии - Selectize is the hybrid of a textbox and <select> box - https://brianreavis.github.io/selectize.js/-->
<script type="text/javascript" src="../../js/selectize/selectize.js"></script>
<link rel="stylesheet" type="text/css" href="../../js/selectize/selectize.css"/>
<script type="text/javascript">
$( document ).ready(function() {
//======= Selectize для селектов =======
$('#al-searchModel--selectName').selectize();
$('#al-searchModel--selectModel').selectize();
$('#al-searchModel--selectEngine').selectize();
});
</script>
<!-- скрипт подключения плейсходлеров для ие8-ие9-->
<script type="text/javascript">
$( document ).ready(function() {
$('input, textarea').placeholder();
});
</script>
<div class="footer">
<div class="footer__content">
<div class="footer__content--left">
<div class="logo"><a href="http://www.autospetsialist.ee/ru.html"><img src="../../images/global/logoWhite.png" alt="Autospetsialist.ee logo" width="298" height="57"/></a></div>
<div class="social">
<div id="fb-root"></div>
<script type="text/javascript">
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ru_RU/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div data-href="http://autospetsialist.ee/" data-layout="standard" data-colorscheme="dark" data-width="300" data-action="like" data-show-faces="false" data-share="true" class="fb-like"></div>
</div>
</div>
<div class="footer__content--right">
<div class="footer__info">
<div class="info__phone"><sup>+372</sup> 659-71-22</div>
<h3>Autospetsialist OÜ</h3><span>Пн-Пт: 9:00 - 18:00 Сб: 10:00 - 15:00</span><a href="mailto:info@autospetsialist.ee" class="link__white">info@autospetsialist.ee</a>
</div>
</div>
</div>
</div> </div>
</div>
Part Quest Sended
+372 652-59-33Kadaka tee 72a, 12818, TallinnПн-Пт: . . . . . . . . 9:00 - 18:00Сб . . . . . . . . . . 10:00 - 15:00Ищите автосервис?
Ваш запрос обрабатывается
Спасибо мы получили ваше сообщение!
Ответим Вам в течение 15 минут.
Следите за нашими спецпредложениями в фейсбуке.
Автосервис
Купив у нас запчасть, Вы получите -10% скидку с каждого часа работы.
Ознакомиться с услугами »
This pattern contains:
organisms-part-quest-header-sent
organisms-part-quest-body-sended
organisms-part-quest-footer
HTML
<div class="wrapper">
<div class="wrapper__content">
<div class="header">
<div class="header__content">
<div class="row">
<div class="logo"><a href="http://www.autospetsialist.ee/ru.html"><img src="../../images/global/logo.png" alt="Autospetsialist.ee logo" width="298" height="57"/></a></div>
<div class="address__short"><span><sup>+372</sup><span> 652-59-33</span></span><span>Kadaka tee 72a, 12818, Tallinn</span><span>Пн-Пт: . . . . . . . . 9:00 - 18:00</span><span>Сб . . . . . . . . . . 10:00 - 15:00</span><a href="" class="link__white">Ищите автосервис?</a></div>
<div class="switch"><a href="" class="link__switch">ЭСТ</a><a href="" class="link__switch--active">РУС</a></div>
</div>
<h1>Ваш запрос обрабатывается</h1>
</div>
</div>
<div class="body">
<div class="body__content"><img src="../../images/part-quest/carPartMood.png" title="cartPartMood" alt="cartPartMood" width="332" height="271" class="body__img--cart"/>
<div class="body__cart"><img src="../../images/part-quest/sent.png" title="send icon" alt="send icon" width="90" height="30" class="img--sent"/>
<h4>Спасибо мы получили ваше сообщение!<br/>Ответим Вам в течение 15 минут.</h4>
<div class="social"><span>Следите за нашими спецпредложениями в фейсбуке.<img src="../../images/part-quest/like.png" title="like icon" alt="like icon" width="28" height="24" class="img--like"/></span>
<div id="fb-root"></div>
<script type="text/javascript">
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ru_RU/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div data-href="https://facebook.com/profile.php?id=136740333171744" data-width="340" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false" class="fb-page"></div>
</div>
</div>
<div onclick="location.reload();location.href="http://www.autospetsialist.ee/"" class="body__cart goToService"><img src="../../images/part-quest/discount.png" title="discount icon" alt="discount icon" width="65" height="65" class="img--discount"/>
<h2>Автосервис<img src="../../images/global/smallLogo.png" title="Автосервис Autospetsialist.ee" alt="autospetsialist logo" width="148" height="28"/></h2>
<p>Купив у нас запчасть, Вы получите -10% скидку с каждого часа работы.</p><a href="http://autospetsialist.ee/ru.html" class="link__light">Ознакомиться с услугами »</a>
</div><br/><br/><br/><br/>
</div>
</div>
<div class="footer">
<div class="footer__content">
<div class="footer__content--left">
<div class="logo"><a href="http://www.autospetsialist.ee/ru.html"><img src="../../images/global/logoWhite.png" alt="Autospetsialist.ee logo" width="298" height="57"/></a></div>
<div class="social">
<div id="fb-root"></div>
<script type="text/javascript">
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ru_RU/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div data-href="http://autospetsialist.ee/" data-layout="standard" data-colorscheme="dark" data-width="300" data-action="like" data-show-faces="false" data-share="true" class="fb-like"></div>
</div>
</div>
<div class="footer__content--right">
<div class="footer__info">
<div class="info__phone"><sup>+372</sup> 659-71-22</div>
<h3>Autospetsialist OÜ</h3><span>Пн-Пт: 9:00 - 18:00 Сб: 10:00 - 15:00</span><a href="mailto:info@autospetsialist.ee" class="link__white">info@autospetsialist.ee</a>
</div>
</div>
</div>
</div> </div>
</div>