File: /home/imensosw/www/imenso.co/dev/octb-website/index_c - Copy.html
<!doctype html>
<html lang="en-US" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<title>Site Title</title>
<link rel='stylesheet' href='css/bootstrap.min.css' media='all' />
<link rel='stylesheet' href='css/style.css' media='all' />
<script src='js/modernizr.min.js'></script>
<link rel="icon" type="image/png" href="images/favicon.png" />
<link rel="stylesheet" type="text/css" href="css/slick.css">
<link rel="stylesheet" type="text/css" href="css/slick-theme.css">
</head>
<body class="home_c">
<!-- top area open -->
<header class="top_area" style="background:url('images/gif/CombinedForVersionC.gif') center top no-repeat; background-size:cover;">
<nav class="navbar navbar-expand-lg" id="nav_fix">
<div class="container">
<a class="navbar-brand" href="#"><img src="images/logo.png" alt="OCTB logo" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><img src="images/menu.png" alt="icon" /></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto"></ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Pages
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="index.html">Index 1</a>
<a class="dropdown-item" href="index_b.html">Index 2</a>
<a class="dropdown-item" href="index_c.html">Index 3</a>
<a class="dropdown-item" href="octglobal_about.html">About</a>
<a class="dropdown-item" href="octglobal_select_teacher.html">Select Teacher</a>
<a class="dropdown-item" href="octglobal_teacher_detail.html">Teacher Detail</a>
</div>
</li>
<li><a href="#">Ученикам</a></li>
<li><a href="#">Родителям</a></li>
<li><a href="#">Бизнесу</a></li>
<li><a href="#" class="bdr btn btn-secondary">войти</a></li>
</ul>
</div>
<div class="login-icon mobile_show"><a href="#"><img src="images/login.png" alt="icon" /></a></div>
</div>
</nav>
<div class="top_msg">
<div class="container">
<div class="jumbotron">
<h1>Интерактивное изучение <br />английского языка</h1>
<p>Изучайте английский по skype c визуальным отображением общения</p>
<a href="#" class="bdr btn btn-lg btn-primary">Попробовать бесплатно</a>
</div>
</div>
</div>
<!-- <div class="top_light">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="points">
<div class="p_img"><img src="images/icon_1.png" alt="icon" /></div>
<div class="p_text">Иностранные и русскоговорящие<br /> преподаватели</div>
</div>
</div>
<div class="col-sm-4">
<div class="points">
<div class="p_img"><img src="images/icon_2.png" alt="icon" /></div>
<div class="p_text">Объединение визуального<br /> и голосового обучения</div>
</div>
</div>
<div class="col-sm-4">
<div class="points">
<div class="p_img"><img src="images/icon_3.png" alt="icon" /></div>
<div class="p_text">Интелектуальная система<br /> прогресса обучения</div>
</div>
</div>
</div>
</div>
</div>
<div class="banner_texture">
<img src="images/b/banner_texture.png" alt="banner_texture" class="w_100" />
</div> -->
<div class="overlary_bg"></div>
</header>
<!-- top area close -->
<!-- middle-content area open -->
<div class="content bg_texture_top p_t100">
<div class="content p_t100 feature_area1">
<section class="bg_texture_bottom p_b100">
<div class="container">
<h2 class="text-center m_b50 heading_second">Делаем обучение простым <br />и интересным</h2>
<div class="row p_b50">
<div class="col-md-4 col-sm-6">
<div class="row">
<div class="feature_option">
<a href="#">
<img src="images/b/image_1.png" alt="image" class="w_100" />
<div>
<img src="images/b/icon_1.png" alt="icon" />
<p>Удобное для Вас время <br />и место для занятий</p>
</div>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="row">
<div class="feature_option">
<a href="#">
<img src="images/b/image_2.png" alt="image" class="w_100" />
<div>
<img src="images/b/icon_2.png" alt="icon" />
<p>Учи через <br />диалог</p>
</div>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="row">
<div class="feature_option">
<a href="#">
<img src="images/b/image_3.png" alt="image" class="w_100" />
<div>
<img src="images/b/icon_3.png" alt="icon" />
<p>Преподаватель не перебивает <br />с исправлениями</p>
</div>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="row">
<div class="feature_option">
<a href="#">
<img src="images/b/image_4.png" alt="image" class="w_100" />
<div>
<img src="images/b/icon_4.png" alt="icon" />
<p>Полный транскрипт <br />с исправлениями</p>
</div>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="row">
<div class="feature_option">
<a href="#">
<img src="images/b/image_5.png" alt="image" class="w_100" />
<div>
<img src="images/b/icon_5.png" alt="icon" />
<p>Персонализированное <br />домашнее задание</p>
</div>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="row">
<div class="feature_option">
<a href="#">
<img src="images/b/image_6.png" alt="image" class="w_100" />
<div>
<img src="images/b/icon_6.png" alt="icon" />
<p>Отслеживай прогресс <br />по урочно</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<section class="p_tb150 highlight_area1">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="m_t50">
<h3>Изучай английский <br />с искусственным <br />интеллектом</h3>
<ol class="m_t20 m_b50">
<li><span>01</span> <img src="images/b/icon_user.png" alt="icon" class="mobile_show" />Веселое и вовлекающее общение</li>
<li><span>02</span> <img src="images/b/icon_computer.png" alt="icon" class="mobile_show" />Статистика и «машинное обучение» исправлений </li>
</ol>
<div class="clearfix"></div>
<a href="#" class="btn-lg btn btn-primary">Попробовать бесплатно</a>
</div>
</div>
<div class="col-md-6 mobile_hide">
<img src="images/b/process.png" alt="process" class="w_100" />
</div>
</div>
</div>
</section>
<section class="highlight_area p_t150 p_b100">
<div class="container">
<div class="content_1 p_50">
<div class="img">
<img src="images/professional_girl.png" alt="professional_girl" class="w_100" />
</div>
<div class="txt">
<h4>Почему Вы хотите выучить английский?</h4>
<p>Мы можем найти для Вас преподавателя подходящего под Ваши специфические требования.</p>
<ul class="list-inline">
<li class="list-inline-item"><a href="#">Сдать Toefl</a></li>
<li class="list-inline-item"><a href="#">увеличить доход</a></li>
<li class="list-inline-item"><a href="#">Дать ребёнку будущее</a></li>
<li class="list-inline-item"><a href="#">Работа в иностранной компании</a></li>
</ul>
</div>
</div>
</div>
</section>
<div class="bg_texture_top bg_texture_top_no p_t100">
<section class="m_b80">
<div class="container">
<h2 class="text-center m_b50 heading_second">Наши преподаватели</h2>
<div class="people_area slider">
<div class="slide">
<div class="teacher">
<div class="scile"><span>842</span>занятия</div>
<div class="userdtl">
<h5>Елена</h5>
<p>Подготовка к MBA, сдать ЕГЭ, фриланс, путешествия</p>
<div class="text-center"><a href="#" class="btn btn-secondary">Записаться </a></div>
</div>
<img src="images/people_1.png" alt="people" class="w_100" />
</div>
</div>
<div class="slide">
<div class="teacher">
<div class="scile"><span>513</span>занятий</div>
<div class="userdtl">
<h5>Антон</h5>
<p>Подготовка к MBA, сдать ЕГЭ, фриланс, путешествия</p>
<div class="text-center"><a href="#" class="btn btn-secondary">Записаться </a></div>
</div>
<img src="images/people_2.png" alt="people" class="w_100" />
</div>
</div>
<div class="slide">
<div class="teacher">
<div class="scile"><span>125</span>занятия</div>
<div class="userdtl">
<h5>Максим</h5>
<p>Подготовка к MBA, сдать ЕГЭ, фриланс, путешествия</p>
<div class="text-center"><a href="#" class="btn btn-secondary">Записаться </a></div>
</div>
<img src="images/people_3.png" alt="people" class="w_100" />
</div>
</div>
<div class="slide slide_hide">
<div class="teacher blank">
<div class="blank_pro">
<img src="images/icon_1.png" alt="icon" />
<h5>Ещё 42<br />преподавателя</h5>
</div>
<div class="userdtl text-center">
<a href="#" class="btn btn-secondary reverse">Показать всех </a>
</div>
<img src="images/people_blank.png" alt="people" class="w_100" />
</div>
</div>
</div>
</div>
</section>
<section class="bg_texture_middle p_t50 m_b100 customer-tes">
<div class="container">
<div class="row">
<div class="offset-sm-1 col-sm-10">
<h2 class="text-center heading_second m_b50">Довольные клиенты</h2>
<div class="customer-testimonial slider">
<div class="slide">
<div>
<div class="t_cnt">
<div class="t_header">
<div class="circle text-center"><img src="images/pro_pic_2.png" alt="pro_pic_2" /></div>
<div class="f_dtl">
<div class="name">Dong Roming</div>
<div class="date">18 June 2018</div>
</div>
</div>
<div class="clearfix">
<p>Полтора часа живого общения с постоянным контролем того, что ты говоришь, и с последующей корректировкой - на мой взгляд отличный метод.</p>
</div>
<div class="t_footer">
16
</div>
</div>
</div>
</div>
<div class="slide">
<div>
<div class="t_cnt">
<div class="t_header">
<div class="circle text-center"><img src="images/pro_pic_1.png" alt="pro_pic_2" /></div>
<div class="f_dtl">
<div class="name">Lanzee Lai</div>
<div class="date">18 June 2018</div>
</div>
</div>
<div class="clearfix">
<p>Полтора часа живого общения с постоянным контролем того, что ты говоришь, и с последующей корректировкой - на мой взгляд отличный метод.</p>
</div>
<div class="t_footer">
16
</div>
</div>
</div>
</div>
<div class="slide">
<div>
<div class="t_cnt">
<div class="t_header">
<div class="circle text-center"><img src="images/pro_pic_2.png" alt="pro_pic_2" /></div>
<div class="f_dtl">
<div class="name">Dong Roming</div>
<div class="date">18 June 2018</div>
</div>
</div>
<div class="clearfix">
<p>Полтора часа живого общения с постоянным контролем того, что ты говоришь, и с последующей корректировкой - на мой взгляд отличный метод.</p>
</div>
<div class="t_footer">
16
</div>
</div>
</div>
</div>
<div class="slide">
<div>
<div class="t_cnt">
<div class="t_header">
<div class="circle text-center"><img src="images/pro_pic_1.png" alt="pro_pic_2" /></div>
<div class="f_dtl">
<div class="name">Lanzee Lai</div>
<div class="date">18 June 2018</div>
</div>
</div>
<div class="clearfix">
<p>Полтора часа живого общения с постоянным контролем того, что ты говоришь, и с последующей корректировкой - на мой взгляд отличный метод.</p>
</div>
<div class="t_footer">
16
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="p_b100 p_t50 client-logos">
<div class="container">
<h2 class="text-center heading_second">Нам доверяют</h2>
<p class="para_highlight text-center">На протяжении 10 лет мы работаем с этими и другими корпоративными клиентами.<br />Теперь мы открываем наши двери для всех. </p>
<div class="row m_t50">
<div class="col-sm-4 col-md-2 col-4"><a href="#"><img src="images/client/cat.jpg" class="w_100"> </a> </div>
<div class="col-sm-4 col-md-2 col-4"><a href="#"><img src="images/client/dhl.jpg" class="w_100"> </a> </div>
<div class="col-sm-4 col-md-2 col-4"><a href="#"><img src="images/client/federal_mogul.jpg" class="w_100"> </a> </div>
<div class="col-sm-4 col-md-2 col-4"><a href="#"><img src="images/client/gazprom.jpg" class="w_100"> </a> </div>
<div class="col-sm-4 col-md-2 col-4"><a href="#"><img src="images/client/gohnsonngohnson.jpg" class="w_100"> </a> </div>
<div class="col-sm-4 col-md-2 col-4"><a href="#"><img src="images/client/qiwi.jpg" class="w_100"> </a> </div>
</div>
</div>
</section>
</div>
</div>
<!-- middle-content area close -->
<!-- footer area open -->
<section class="footer">
<footer>
<div class="container">
<div class="row p_tb120">
<div class="col-md-7">
<div class="footer_cnt" style="margin-top: 60px;">
<h3>Преодолей свой языковой барьер</h3>
<p>Запишитесь на пробное бесплатное занятие</p>
</div>
</div>
<div class="col-md-5">
<div class="form m_b20">
<form>
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Имя">
</div>
<div class="form-group">
<input type="email" class="form-control" id="formGroupExampleInput2" placeholder=Email">
</div>
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="+7 (___) ___-__-__">
</div>
<button type="submit" class="btn-lg btn btn-primary primary1 btn-block">Записаться бесплатно</button>
<p>Нажимая, вы принимаете <a href="#">условия соглашения</a></p>
</form>
</div>
</div>
</div>
<div class="copywrite">
<div class="row">
<div class="mobile_show">
<div class="text-center">
<a href="#" class="social_icon twitter"></a>
<a href="#" class="social_icon facebook"></a>
<a href="#" class="social_icon youtube"></a>
</div>
</div>
<div class="col-md-6"> © 2018 Все права зарегистрированы </div>
<div class="col-md-6 mobile_hide">
<div class="text-right">
<a href="#" class="social_icon twitter"></a>
<a href="#" class="social_icon facebook"></a>
<a href="#" class="social_icon youtube"></a>
</div>
</div>
</div>
</div>
</div>
</footer>
</section>
<!-- footer area close -->
<script src='js/jquery3.2.1.min.js'></script>
<script src='js/bootstrap.min.js'></script>
<script src="js/slick.min.js"></script>
<script src="js/custom.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.customer-testimonial').slick({
slidesToShow: 2,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 5000,
arrows: true,
dots: true,
pauseOnHover: true,
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 1
}
}, {
breakpoint: 520,
settings: {
slidesToShow: 1
}
}]
});
$('.people_area').slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 5000,
arrows: false,
dots: true,
pauseOnHover: true,
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 1
}
}, {
breakpoint: 520,
settings: {
slidesToShow: 1
}
}]
});
});
</script>
</body>
</html>