<?php

/* @var $this yii\web\View */

use yii\helpers\Html;

$this->title = 'Вакансии';
$this->params['breadcrumbs'][] = $this->title;

$this->registerCssFile('/css/vacancies.css');

$this->registerJsFile('/js/jquery.scrollbox.min.js');
$this->registerJsFile('/js/vacancies.js');
//$this->registerJsFile('/js/vacancies2.js');
$this->registerJs("
$(function () {
        $('#demo5').scrollbox({
            direction: 'h',
            distance: 150,
            autoPlay: false
        });
        $('#prew').click(function () {
            $('#demo5').trigger('backward');
        });
        $('#next').click(function () {
            $('#demo5').trigger('forward');
        });
    });", 3);
?>
<script type="text/javascript">
	$(document).ready(function() {
		$('.special-talents-text-2-img').click( function(event){
			event.preventDefault();
			$('#overlay').fadeIn(400,
				function(){
					$('#modal_form').css('display', 'block').animate({opacity: 1, top: '45%'}, 200);
				});
		});
		$('#overlay').click( function(){
			$('#modal_form').animate({opacity: 0, top: '20%'}, 200,
				function(){
					$(this).css('display', 'none');
					$('#overlay').fadeOut(400);
				}
			);
		});
	});
</script>
<div class="bill-wrap">
	<div class="comands-all-wrap">
		<div class="bill-wrap-img">
			<img src="/images/vacancies/bill.png" width="125" height="125" />
		</div>
		<div class="bill-wrap-text">
			<div class="bill-text">
				<p>
					Умные люди для успешных проектов

					<span>Мы ищем крутых специалистов в сфере онлайн-маркетинга, будущих гуру PHP-кодинга и сейлзов, которые могут продать песок африканцам. Выберите свое направление и стройте карьеру с нами.</span>
				</p>
			</div>
		</div>
	</div>
</div>
<div class="tallants-img-wrap">
	<div class="tallants-img-block" id="tallants-img-block-1">
		<img id="tallants-img-1" src="/images/vacancies/tallants-f-1.png" width="180" height="180"/>
		<div class="tallants-img-text img-text1">
			<p style="z-index: 9999">Маркетинг</p>
		</div>
	</div>
	<div class="tallants-img-block" id="tallants-img-block-2">
		<img id="tallants-img-2" src="/images/vacancies/tallants-f-2.png" width="180" height="180"/>
		<div class="tallants-img-text img-text2">
			<p style="z-index: 9999">Разработка</p>
		</div>
	</div>
	<div class="tallants-img-block"  id="tallants-img-block-3">
		<img id="tallants-img-3"  src="/images/vacancies/tallants-f-3.png" width="180" height="180"/>
		<div class="tallants-img-text img-text3">
			<p style="z-index: 9999">Продажи</p>
		</div>
	</div>
</div>
<div class="special-talents-wrap">
	<div class="special-talents-text-1">
		<div class="special-talents-text-1-wrap">
			<div class="special-talents-text-1-wrap-text">
				<p>У вас особенные таланты?</p>
			</div>
			<div class="special-talents-text-1-wrap-img">
				<img src="/images/vacancies/rocket-line.png" width="181" height="16" />
			</div>
		</div>
	</div>
	<div class="special-talents-text-2">
		<p>Мы ценим креативность и не шаблонное мышление.</br>
			Если ваши таланты выходят за рамки стандартного предложения, то расскажите о себе.</p>
		<a href="#" class="special-talents-text-2-img">
			Рассказать о себе
		</a>
	</div>
</div>
<div class="darts-wrap">
	<div class="comands-all-wrap">
		<div id="darts-block">
			<div class="darts-nav-circle-wrap">
				<a href="#" class="darts-circle darts-circle-1" id="darts-circle-active"></a>
				<a href="#" class="darts-circle darts-circle-2"></a>
				<a href="#" class="darts-circle darts-circle-3"></a>
				<a href="#" class="darts-circle darts-circle-4 darts-circle-last"></a>
			</div>
			<div class="sveta-img-block" id="sveta-img-block-1">
				<div class="sveta-img-foto">
					<img src="/images/vacancies/sveta-darts.png" width="159" height="349"/>
				</div>
				<div class="darts-block-text-wrap">
					<p>
						<span style="font-weight: bold">artweb</span> это не только профессионалы онлайн-маркетинга, но и отличная команда креативных ребят, которые желают развиваться и умеют весело проводить время. Если утром хочется идти на работу, значит, ты на своем месте!

					</p>
				</div>
				<div class="darts-block-circle">
					<p>“</p>
				</div>
				<div class="darts-shadow"></div>
				<div class="darts-text-job">
					<p>
						<span style="font-weight: bold; color: #525252;">Светлана Борисюк</span></br>
						менеджер по контекстной рекламе
					</p>
				</div>
			</div>
			<div class="sveta-img-block" id="sveta-img-block-2">
				<div class="sveta-img-foto">
					<img src="/images/vacancies/sveta-darts.png" width="159" height="349"/>
				</div>
				<div class="darts-block-text-wrap">
					<p>
						<span style="font-weight: bold">2artweb</span> это не только профессионалы онлайн-маркетинга, но и отличная команда креативных ребят, которые желают развиваться и умеют весело проводить время. Если утром хочется идти на работу, значит, ты на своем месте!

					</p>
				</div>
				<div class="darts-block-circle">
					<p>“</p>
				</div>
				<div class="darts-shadow"></div>
				<div class="darts-text-job">
					<p>
						<span style="font-weight: bold; color: #525252;">Светлана Борисюк</span></br>
						менеджер по контекстной рекламе
					</p>
				</div>
			</div>
			<div class="sveta-img-block" id="sveta-img-block-3">
				<div class="sveta-img-foto">
					<img src="/images/vacancies/sveta-darts.png" width="159" height="349"/>
				</div>
				<div class="darts-block-text-wrap">
					<p>
						<span style="font-weight: bold">3artweb</span> это не только профессионалы онлайн-маркетинга, но и отличная команда креативных ребят, которые желают развиваться и умеют весело проводить время. Если утром хочется идти на работу, значит, ты на своем месте!

					</p>
				</div>
				<div class="darts-block-circle">
					<p>“</p>
				</div>
				<div class="darts-shadow"></div>
				<div class="darts-text-job">
					<p>
						<span style="font-weight: bold; color: #525252;">Светлана Борисюк</span></br>
						менеджер по контекстной рекламе
					</p>
				</div>
			</div>
			<div class="sveta-img-block" id="sveta-img-block-4">
				<div class="sveta-img-foto">
					<img src="/images/vacancies/sveta-darts.png" width="159" height="349"/>
				</div>
				<div class="darts-block-text-wrap">
					<p>
						<span style="font-weight: bold">4artweb</span> это не только профессионалы онлайн-маркетинга, но и отличная команда креативных ребят, которые желают развиваться и умеют весело проводить время. Если утром хочется идти на работу, значит, ты на своем месте!

					</p>
				</div>
				<div class="darts-block-circle">
					<p>“</p>
				</div>
				<div class="darts-shadow"></div>
				<div class="darts-text-job">
					<p>
						<span style="font-weight: bold; color: #525252;">Светлана Борисюк</span></br>
						менеджер по контекстной рекламе
					</p>
				</div>
			</div>
			<div class="darts-block-img"></div>
		</div>
	</div>
</div>
<div class="proposition-wrap">
	<div class="comands-all-wrap">
		<div class="special-talents-text-1-wrap" id="certificates-text">
			<div class="special-talents-text-1-wrap-text" id="certificates-text-color">
				<p>Что мы можем предложить</p>
			</div>
			<div class="special-talents-text-1-wrap-img">
				<img src="/images/vacancies/rocket-line-2.png" width="181" height="16">
			</div>
		</div>
		<div class="proposition-wrap-block">
			<div class="proposition-wrap-block-img-text">
				<div class="proposition-wrap-block-img">
					<img src="/images/vacancies/proposition-f-1.png" width="64" height="64" />
				</div>
				<div class="proposition-wrap-block-text">
					<p>Рабочий день с 10 до 18</p>
				</div>
			</div>
			<div class="proposition-wrap-block-img-text">
				<div class="proposition-wrap-block-img">
					<img src="/images/vacancies/proposition-f-2.png" width="64" height="64" />
				</div>
				<div class="proposition-wrap-block-text">
					<p>Адекватное руководство</p>
				</div>
			</div>
			<div class="proposition-wrap-block-img-text">
				<div class="proposition-wrap-block-img">
					<img src="/images/vacancies/proposition-f-3.png" width="64" height="64" />
				</div>
				<div class="proposition-wrap-block-text">
					<p>Клевый коллектив</p>
				</div>
			</div>
			<div class="proposition-wrap-block-img-text">
				<div class="proposition-wrap-block-img">
					<img src="/images/vacancies/proposition-f-4.png" width="64" height="64" />
				</div>
				<div class="proposition-wrap-block-text">
					<p>Интересные проекты</p>
				</div>
			</div>
			<div class="proposition-wrap-block-img-text-wrap-2">
				<div class="proposition-wrap-block-img-text">
					<div class="proposition-wrap-block-img">
						<img src="/images/vacancies/proposition-f-5.png" width="64" height="64" />
					</div>
					<div class="proposition-wrap-block-text">
						<p>Настольный теннис</p>
					</div>
				</div>
				<div class="proposition-wrap-block-img-text">
					<div class="proposition-wrap-block-img">
						<img src="/images/vacancies/proposition-f-6.png" width="64" height="64" />
					</div>
					<div class="proposition-wrap-block-text">
						<p>Чай, кофе, печеньки</p>
					</div>
				</div>
				<div class="proposition-wrap-block-img-text">
					<div class="proposition-wrap-block-img">
						<img src="/images/vacancies/proposition-f-7.png" width="64" height="64" />
					</div>
					<div class="proposition-wrap-block-text">
						<p>Обучение</p>
					</div>
				</div>
				<div class="proposition-wrap-block-img-text">
					<div class="proposition-wrap-block-img">
						<img src="/images/vacancies/proposition-f-8.png" width="64" height="64" />
					</div>
					<div class="proposition-wrap-block-text">
						<p>Пиво по пятницам</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="vacant-wrap-php">
	<div class="special-talents-text-1-wrap" style="text-align: center;">
		<div class="special-talents-text-1-wrap-text">
			<p>Открытые вакансии</p>
		</div>
		<div class="special-talents-text-1-wrap-img">
			<img src="/images/vacancies/rocket-line.png" width="181" height="16">
		</div>
	</div>
	<div class="vacant-profession-php">
		<div class="vacant-profession-img">
			<img src="/images/vacancies/ico-php.jpg" width="180" height="180" />
		</div>
		<div class="vacant-profession-text">
			<p>РНР-разработчик</p>
		</div>
		<div class="vacant-text-block">
			<p>
				У вас не возникнет проблем с техническими заданиями — заказчик знает, что ему нужно и учитывает все тонкости в ТЗ.
				Наши клиенты пользуются, практически всеми коммерческими CMS. Знание и опыт работы с определенными из них приветствуются.</br>
				Задачи комплексные, много кастомизации и онлайн-маркетинг настроек для клиентов. Для работы вам придется стать профессионалом своей CMS, а мы поможем вам это достичь.
				</br>
				У вас не возникнет проблем с техническими заданиями — заказчик знает, что ему нужно и учитывает все тонкости в ТЗ.
				Наши клиенты пользуются, практически всеми коммерческими CMS. Знание и опыт работы с определенными из них приветствуются.</br>
				Задачи комплексные, много кастомизации и онлайн-маркетинг настроек для клиентов. Для работы вам придется стать профессионалом своей CMS, а мы поможем вам это достичь.

			</p>
		</div>
		<div class="vacant-text-block-line">
			<a href="#"><img src="/images/vacancies/line-php.png" width="440" height="66" /></a>
		</div>
	</div>
	<div class="vacant-profession-seo">
		<div class="vacant-profession-img">
			<img src="/images/vacancies/ico-seo.jpg" width="180" height="180" />
		</div>
		<div class="vacant-profession-text">
			<p>SEO-специалист</p>
		</div>
		<div class="vacant-text-block-two">
			<p>
				Задачи покрывают весь спектр технического SEO. Но в первую очередь это будут задачи по сбору семантического ядра.
				Мы будем рады, если вы будете быстро обучаться и проявлять инициативу и станете лидером. Карьерный рост зависит только от вас, со своей стороны, мы будем всячески содействовать вашему обучению.
				</br>
				Задачи покрывают весь спектр технического SEO. Но в первую очередь это будут задачи по сбору семантического ядра.
				Мы будем рады, если вы будете быстро обучаться и проявлять инициативу и станете лидером. Карьерный рост зависит только от вас, со своей стороны, мы будем всячески содействовать вашему обучению.

			</p>
		</div>
		<div class="vacant-text-block-line-two">
			<a href="#"><img src="/images/vacancies/line-php.png" width="440" height="66" /></a>
		</div>
	</div>
</div>
<div class="vacant-wrap">
	<div class="vacant-wrap-all">
		<div class="vacant-wrap-block" id="vacant-wrap-block-1">
			<div class="vacant-wrap-block-text">
				<p>
					Задача организации, в особенности же консультация с широким активом играет важную роль в формировании систем массового участия. Не следует, однако забывать, что дальнейшее развитие различных форм деятельности позволяет выполнять важные задания по разработке систем массового участия.
				</p>
				<p id="vacant-text-2">
					Вячеслав Мижарев, <span style="font-weight: normal;">директор</span>
				</p>
				<table cellpadding="0" cellspacing="0" border="0" id="vacant-table">
					<tr>
						<td width="100" height="42">skype:</br>artwebstudio</td>
						<td width="110" height="42">e-mail:</br>mail@artweb.ua</td>
						<td>
							<table cellpadding="0" cellspacing="0" border="0">
								<tr>
									<td height="29" valign="bottom">+38 044 5937376</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<div class="vacant-wrap-block" id="vacant-wrap-block-2">
			<div class="vacant-wrap-block-text" id="vacant-wrap-block-text-2">
				<p>
					Задача организации, в особенности же консультация с широким активом играет важную роль в формировании систем массового участия. Не следует, однако забывать, что дальнейшее развитие различных форм деятельности позволяет выполнять важные задания по разработке систем массового участия.
				</p>
				<p id="vacant-text-2">
					Антона Зозуля, <span style="font-weight: normal;">директор по маркетингу</span>
				</p>
				<table cellpadding="0" cellspacing="0" border="0" id="vacant-table">
					<tr>
						<td width="100" height="42">skype:</br>artwebstudio</td>
						<td width="110" height="42">e-mail:</br>mail@artweb.ua</td>
						<td>
							<table cellpadding="0" cellspacing="0" border="0">
								<tr>
									<td height="29" valign="bottom">+38 044 5937376</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<div class="vacant-wrap-block" id="vacant-wrap-block-3">
			<div class="vacant-wrap-block-text">
				<p>
					Задача организации, в особенности же консультация с широким активом играет важную роль в формировании систем массового участия. Не следует, однако забывать, что дальнейшее развитие различных форм деятельности позволяет выполнять важные задания по разработке систем массового участия.
				</p>
				<p id="vacant-text-2">
					Андрей Белый, <span style="font-weight: normal;">начальник отдела разработки</span>
				</p>
				<table cellpadding="0" cellspacing="0" border="0" id="vacant-table">
					<tr>
						<td width="100" height="42">skype:</br>artwebstudio</td>
						<td width="110" height="42">e-mail:</br>mail@artweb.ua</td>
						<td>
							<table cellpadding="0" cellspacing="0" border="0">
								<tr>
									<td height="29" valign="bottom">+38 044 5937376</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</div>
<div class="certificates-wrap">
	<div class="comands-all-wrap">
		<div class="special-talents-text-1-wrap" id="certificates-text">
			<div class="special-talents-text-1-wrap-text" id="certificates-text-color">
				<p>Сертификаты</p>
			</div>
			<div class="special-talents-text-1-wrap-img">
				<img src="/images/vacancies/rocket-line-2.png" width="181" height="16">
			</div>
		</div>
		<div class="certificates-img">
			<img src="/images/vacancies/certificates.png" width="960" height="121" />
		</div>
	</div>
</div>

<div class="our-clients-wrap">
	<div class="comands-all-wrap">
		<div class="special-talents-text-1-wrap" id="certificates-text">
			<div class="special-talents-text-1-wrap-text">
				<p>Клиенты</br>
					<span style="font-weight: normal; font-size: 12px;">У нас каждый клиент  —</span>  <span style="font-weight: bold; font-size: 12px;">любимый</span>
				</p>
			</div>
			<div class="special-talents-text-1-wrap-img">
				<img src="/images/vacancies/rocket-line.png" width="181" height="16">
			</div>
		</div>
		<div class="our-clients-wrap-slider">
			<div class="our-clients-arrow-1">
				<a id="prew"></a>
			</div>
			<div class="our-clients-slider">
				<div id="demo5" class="scroll-img">
					<ul>
						<?php foreach($clients as $client) :?>
						<li><img id="logos-<?= $client->id?>" src="/files/<?= $client->logo?>" style="height: 90px"></li>
						<?php endforeach?>
					</ul>
				</div>
			</div>
			<div class="our-clients-arrow-2">
				<a id="next"></a>
			</div>
		</div>
	</div>
</div>

<div id="modal_form">
	<form class="vacancies_form" action="" method="post">

			<input type="text" name="" value=""  placeholder="Имя">

			<input type="text" name="" value="" placeholder="E-mail">

			<input type="text" name="" value="" placeholder="Телефон">

		   <textarea name="" placeholder="Сообщение"></textarea>

		<input type="file" />

			<input type="submit" value="Отправить">
		</p>
	</form>
</div>
<div id="overlay"></div>