Skip to content

Instantly share code, notes, and snippets.

@andreybolonin
Created September 13, 2016 12:21
Show Gist options
  • Save andreybolonin/e6248d4d3e55259418dfe00da53fa2ce to your computer and use it in GitHub Desktop.
Save andreybolonin/e6248d4d3e55259418dfe00da53fa2ce to your computer and use it in GitHub Desktop.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Автоподбор бесплатно | Услуги автоэксперта в Киеве</title>
<!-- core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="images/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">
</head><!--/head-->
<body class="homepage">
<section id="main-slider" class="no-margin">
<div class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
<li data-target="#main-slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active" style="background-image: url(images/slider/bg1.jpg)">
<div class="container">
<div class="row slide-margin">
<div class="col-sm-6">
<div class="carousel-content">
<h1 class="animation animated-item-1">Хотите купить б/у автомобиль на рынке или в интернете?</h1>
<h2 class="animation animated-item-2">Мы поможем проверить и подобрать достойные варианты, которые не потребуют неожиданных вложений!</h2>
<a class="btn-slide animation animated-item-3" href="#contact-page">Воспользоваться услугой бесплатно</a>
</div>
</div>
</div>
</div>
</div><!--/.item-->
<div class="item" style="background-image: url(images/slider/bg2.jpg)">
<div class="container">
<div class="row slide-margin">
<div class="col-sm-6">
<div class="carousel-content">
<h1 class="animation animated-item-1">Хотите купить б/у автомобиль на рынке или в интернете?</h1>
<h2 class="animation animated-item-2">Мы поможем проверить и подобрать достойные варианты, которые не потребуют неожиданных вложений!</h2>
<a class="btn-slide animation animated-item-3" href="#">Воспользоваться услугой бесплатно</a>
</div>
</div>
</div>
</div>
</div><!--/.item-->
<div class="item" style="background-image: url(images/slider/bg3.jpg)">
<div class="container">
<div class="row slide-margin">
<div class="col-sm-6">
<div class="carousel-content">
<h1 class="animation animated-item-1">Хотите купить б/у автомобиль на рынке или в интернете?</h1>
<h2 class="animation animated-item-2">Мы поможем проверить и подобрать достойные варианты, которые не потребуют неожиданных вложений!</h2>
<a class="btn-slide animation animated-item-3" href="#">Воспользоваться услугой бесплатно</a>
</div>
</div>
</div>
</div>
</div><!--/.item-->
</div><!--/.carousel-inner-->
</div><!--/.carousel-->
<a class="prev hidden-xs" href="#main-slider" data-slide="prev">
<i class="fa fa-chevron-left"></i>
</a>
<a class="next hidden-xs" href="#main-slider" data-slide="next">
<i class="fa fa-chevron-right"></i>
</a>
</section><!--/#main-slider-->
<section id="feature" >
<div class="container">
<div class="center wow fadeInDown">
<h2>Бесплатно</h2>
<p class="lead">проведем полную проверку автомобиля, который вы хотите купить на рынке или в интернете.<br>Или подберем б/у авто по выбранным вами параметрам в рамках вашего бюджета</p>
</div>
<div class="row">
<div class="features">
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-eye"></i>
<h2>Кузов</h2>
<h3>Бит/не бит, наличие подкрасов, шпаклевки, скрытой коррозии</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-tachometer"></i>
<h2>Двигатель</h2>
<h3>Скручен ли пробег, тест всех рабочих узлов, не экономили ли на з/ч</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-cogs"></i>
<h2>КПП</h2>
<h3>Работа всех передач, меняли ли масло по регламенту</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-keyboard-o"></i>
<h2>Электроника</h2>
<h3>Генератор и стартер, компьютерная диагностика всех систем</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-check"></i>
<h2>Ходовая</h2>
<h3>Степень износа деталей (проверка на подъемнике и на ходу)</h3>
</div>
</div><!--/.col-md-4-->
<div class="col-md-4 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="feature-wrap">
<i class="fa fa-inbox"></i>
<h2>Салон</h2>
<h3>Проводилась ли хим-чистка, были ли замены деталей интерьера</h3>
</div>
</div><!--/.col-md-4-->
</div><!--/.services-->
</div><!--/.row-->
</div><!--/.container-->
</section><!--/#feature-->
<section id="recent-works">
<div class="container">
<div class="center wow fadeInDown">
<h2>Мы обоснованно торговались</h2>
<p class="lead">на каждой подобранной машине, снизив начальную цену на 3-7%. Также можем всего за 2 часа<br>поставить на учет и выбрать красивые номера (регистрация стоит 1200 грн)</p>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item1.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#"></a> </h3>
<p></p>
<a class="preview" href="images/portfolio/full/item1.png" rel="prettyPhoto"><i class="fa fa-eye"></i> Увеличить</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item2.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#"></a> </h3>
<p></p>
<a class="preview" href="images/portfolio/full/item2.png" rel="prettyPhoto"><i class="fa fa-eye"></i> Увеличить</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item3.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#"></a> </h3>
<p></p>
<a class="preview" href="images/portfolio/full/item3.png" rel="prettyPhoto"><i class="fa fa-eye"></i> Увеличить</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item4.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#"></a> </h3>
<p></p>
<a class="preview" href="images/portfolio/full/item4.png" rel="prettyPhoto"><i class="fa fa-eye"></i> Увеличить</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item5.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#"></a> </h3>
<p></p>
<a class="preview" href="images/portfolio/full/item5.png" rel="prettyPhoto"><i class="fa fa-eye"></i> Увеличить</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item6.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#"></a> </h3>
<p></p>
<a class="preview" href="images/portfolio/full/item6.png" rel="prettyPhoto"><i class="fa fa-eye"></i> Увеличить</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item7.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#"></a> </h3>
<p></p>
<a class="preview" href="images/portfolio/full/item7.png" rel="prettyPhoto"><i class="fa fa-eye"></i> Увеличить</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/portfolio/recent/item8.png" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#"></a> </h3>
<p></p>
<a class="preview" href="images/portfolio/full/item8.png" rel="prettyPhoto"><i class="fa fa-eye"></i> Увеличить</a>
</div>
</div>
</div>
</div>
</div><!--/.row-->
</div><!--/.container-->
</section><!--/#recent-works-->
<section id="content">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 wow fadeInDown">
<div class="tab-wrap">
<div class="media">
<div class="parrent pull-left">
<ul class="nav nav-tabs nav-stacked">
<li class=""><a href="#tab1" data-toggle="tab" class="analistic-01">О нас</a></li>
<li class="active"><a href="#tab2" data-toggle="tab" class="analistic-02">Как происходит подбор</a></li>
<li class=""><a href="#tab3" data-toggle="tab" class="tehnical">Какие авто мы подбираем</a></li>
<li class=""><a href="#tab4" data-toggle="tab" class="tehnical">Почему бесплатно</a></li>
<li class=""><a href="#tab5" data-toggle="tab" class="tehnical">Какие гарантии</a></li>
</ul>
</div>
<div class="parrent media-body">
<div class="tab-content">
<div class="tab-pane fade" id="tab1">
<div class="media">
<div class="media-body">
<h2>Работаем с 1998 г.</h2>
<p>За это время занимались пригоном автомобилей под заказ из Европы, автовыкупом, организовывали разборки запчастей, открыли несколько СТО. Выступали в авторалли. Подбирали надежные автомобили для друзей и знакомых, а теперь решили дать такую возможность всем. Имеем огромный опыт и знаем особенности почти всех моделей машин.</p>
</div>
</div>
</div>
<div class="tab-pane fade active in" id="tab2">
<div class="media">
<div class="media-body">
<h2>Работать с нами просто</h2>
<p>Свяжитесь с нами, укажите марку авто, которое ищете, год, состояние, цвет, комплектацию. Можете дать ссылки на объявления. Мы проверим автомобили на месте и на СТО, документы по всем базам, поторгуемся, и предоставим вам полный отчет. Порекомендуем, стоит ли брать данное авто. Если какой-то вариант вам подходит - поможем поставить на учет или сделаем это без вашего присутствия.</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab3">
<p>Работаем с любыми марками и моделями. Подбираем как Ланосы (средняя цена с ГБО после торга 3300-3700$), так и Порше, Ленд Крузеры, Мазератти итд (цены после торга обычно на 5-10% ниже тех, что вы видите в интернете или на рынке). Знаем лично всех владельцев автоплощадок, так что о появившихся в продаже редких моделях узнаем одними из первых.</p>
</div>
<div class="tab-pane fade" id="tab4">
<p>Как говорили выше, раньше мы проверяли машины для знакомых и друзей. Узнав, что данная услуга пользуется спросом, мы решили сделать ее бесплатной для покупателей, таким образом заслужить хорошие отзывы и рекомендации. Также мы рады если вы будете обслуживать свой новый авто на одной из наших станций.</p>
</div>
<div class="tab-pane fade" id="tab5">
<p>Мы проверяем автомобили настолько дотошно, что ни одна система не останется без внимания. Главная наша цель - застраховать вас от непредвиденных вложений. Также каждая машина проверяется по базам ГАИ, Интерпола, нотариальной базе запрета отчуждения.</p>
</div>
</div> <!--/.tab-content-->
</div> <!--/.media-body-->
</div> <!--/.media-->
</div><!--/.tab-wrap-->
</div><!--/.col-sm-6-->
<div class="col-xs-12 col-sm-4 wow fadeInDown">
<div class="testimonial">
<h2>Отзывы</h2>
<div class="media testimonial-inner">
<div class="pull-left">
<img class="img-responsive img-circle" src="images/testimonials1.png">
</div>
<div class="media-body">
<p>Чуть не купил битую машину, хорошо, что заказал проверку и взял другой, хороший вариант</p>
<span><strong>-Максим/</strong> Купил Toyota RAV4 2010</span>
</div>
</div>
<div class="media testimonial-inner">
<div class="pull-left">
<img class="img-responsive img-circle" src="images/testimonials2.png">
</div>
<div class="media-body">
<p>Мужчины-механика рядом нет, потому обратилась за помощью. Выбрали очень хороший Гетц</p>
<span><strong>-Ирина/</strong> Купила Hyundai Getz 2007</span>
</div>
</div>
</div>
</div>
</div><!--/.row-->
</div><!--/.container-->
</section><!--/#content-->
<section id="services" class="service-item">
<div class="container">
<div class="center wow fadeInDown">
<h2>Какие выгоды вы получите</h2>
<p class="lead">Вы можете купить авто самостоятельно, но все обратившиеся говорят, что с нами работать выгоднее</p>
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="media services-wrap wow fadeInDown">
<div class="pull-left">
<img class="img-responsive" src="images/services/services1.png">
</div>
<div class="media-body">
<h3 class="media-heading">Лучшие варианты</h3>
<p>Мы в курсе всех стоящих предложений в Киеве</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="media services-wrap wow fadeInDown">
<div class="pull-left">
<img class="img-responsive" src="images/services/services2.png">
</div>
<div class="media-body">
<h3 class="media-heading">Экономия времени</h3>
<p>Не ездите на просмотры всех подряд машин</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="media services-wrap wow fadeInDown">
<div class="pull-left">
<img class="img-responsive" src="images/services/services3.png">
</div>
<div class="media-body">
<h3 class="media-heading">Проверка СТО</h3>
<p>Будьте застрахованы от непредвиденных трат</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="media services-wrap wow fadeInDown">
<div class="pull-left">
<img class="img-responsive" src="images/services/services4.png">
</div>
<div class="media-body">
<h3 class="media-heading">Рекомендации</h3>
<p>Поможем выбрать модель авто под ваш бюджет</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="media services-wrap wow fadeInDown">
<div class="pull-left">
<img class="img-responsive" src="images/services/services5.png">
</div>
<div class="media-body">
<h3 class="media-heading">На связи 8-23</h3>
<p>Окажем помощь по любым вопросам с авто</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="media services-wrap wow fadeInDown">
<div class="pull-left">
<img class="img-responsive" src="images/services/services6.png">
</div>
<div class="media-body">
<h3 class="media-heading">Честный авто</h3>
<p>Гарантируем юридическую чистоту сделки</p>
</div>
</div>
</div>
</div><!--/.row-->
</div><!--/.container-->
</section><!--/#services-->
<section id="conatcat-info">
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="media contact-info wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
<div class="pull-left">
<i class="fa fa-phone"></i>
</div>
<div class="media-body">
<h2>Закажите бесплатный автоподбор</h2>
<p>Звоните в любое время по тел. 063-578-25-63 или отправьте заявку ниже. Мы ответим на все вопросы по подбору и проверке б/у автомобиля перед покупкой:</p>
</div>
</div>
</div>
</div>
</div><!--/.container-->
</section><!--/#conatcat-info-->
<section id="contact-page">
<div class="container">
<div class="row contact-wrap">
<div class="status alert alert-success" style="display: none"></div>
<form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="sendemail.php">
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group">
<label>Ваше имя *</label>
<input type="text" name="name" class="form-control" required="required">
</div>
<div class="form-group">
<label>Номер тел. для связи</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label>Марка авто, вопросы итд *</label>
<textarea name="message" id="message" required="required" class="form-control" rows="8"></textarea>
</div>
<div class="form-group">
<button type="submit" name="submit" class="btn btn-primary btn-lg" required="required">Отправить</button>
</div>
</div>
</form>
</div>
</div><!--/.container-->
</section><!--/#contact-page-->
<footer id="footer" class="midnight-blue">
<div class="container">
<div class="row">
<div class="col-sm-6">
&copy; 1998-2016 <a target="_blank" href="http://avto.fare.com.ua" title="Автоподбор">Автоподбор, услуги автоэксперта, проверить авто б/у в Киеве</a>.
</div>
</div>
</div>
</footer><!--/#footer-->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/main.js"></script>
<script src="js/wow.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment