index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Крылья</title>
  <link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow|Roboto+Condensed:700|Roboto:100,300,400,500,700,900&amp;subset=cyrillic"rel="stylesheet">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
  <link rel="stylesheet" href="static/css/owl.carousel.css">
  <link rel="stylesheet" href="static/css/style.css">
  
</head>
<body>
  <div class="container-fluid hidder">
    <div class="row">

      <div class="container">
        <div class="row">
          <nav class="navbar menu">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">
                <img src="static/images/logo.png" alt="krylia logotip">
              </a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
              <ul class="nav navbar-nav navbar-right menu-items">
                <li>
                  <a class="active" href="#">Главная</a>
                </li>
                <li>
                  <a class="menu-item" href="#">Преимущества</a>
                </li>
                <li>
                  <a class="menu-item" href="#">Мероприятия</a>
                </li>
                <li>
                  <a class="menu-item" href="#">Портфолио</a>
                </li>
                <li>
                  <a class="menu-item" href="#">Отзывы</a>
                </li>
                <li>
                  <a class="menu-item" href="#">Команда</a>
                </li>
              </ul>
            </div>
          </nav>
        </div>
      </div>

      <div class="container-fluid relative">
        <div class="row hidder">
          <div id="myCarousel" class="carousel slide slider center-block visible-lg-block rectangle" data-ride="carousel">
             <div class="carousel-inner ">
                
              <div class="item active">
                <img src="static/images/slide1.jpg" alt="Los Angeles" >
              </div>
          
              <div class="item">
                <img src="static/images/slide1.jpg" alt="Chicago" >
              </div>
            </div>
            <div class="slider-wrapper"></div>
            <!-- Left and right controls -->
            <a class="slider-arrow-left" href="#myCarousel" data-slide="prev">
            </a>
            <a class="slider-arrow-right" href="#myCarousel" data-slide="next">
            </a>
            <div class="col-lg-12 section center-block">
              <div class="col-lg-offset-4 col-lg-4">
                <img class="center-block main-logo" src="static/images/logomain.png" alt="logo">
              </div>
              <div class="col-lg-4 phone">
                <a class="phone-number center-block" href="tel:+79788497707">+7(978) 849 77 07
                  <p class="under-phone">позвоните нам</p>
                </a>
              </div>
              <div class="col-lg-12">
                <a href="#" class="center-block btn main-btm main-btm-label" role="button">Выберите свое мероприятие</a>
              </div>
            </div>
          </div>
          <div class="col-xs-12 hidden-lg section-md center-block">
            <div class="col-xs-12 col-lg-offset-4 col-lg-4">
              <img class="center-block main-logo" src="static/images/logomain.png" alt="logo">
          
            </div>
            <div class="col-xs-12 phone">
              <a class="phone-number center-block" href="tel:+79788497707">+7(978) 849 77 07
                <p class="under-phone">позвоните нам</p>
              </a>
            </div>
              <div class="row">
                <button href="#" class="col-xs-12 center-block btn main-btm" role="button">Выберите свое мероприятие</button>
              </div>
          </div>
        </div>
        <div class="container philosophy hidder">
          <h2 id="subhead_1" class="subhead" >Наша философия
            <span>философия</span>
          </h2>
          <div class="row philosophy-row">
            <div class="col-xs-12 col-sm-6 col-lg-push-1 legend">
              <h3>ЭМОЦИИ</h3>
              <p class="">События, созданные Крыльями, можно прописывать вместо антидепрессантов. Мы вас удивим, вдохновим, окутаем теплом и вызовем
              мурашки…</p>
            </div>
            <img class="col-xs-12 col-sm-6" src="static/images/dg1.jpg" alt="">
          </div>
          <div class="row philosophy-row">
            <div class="col-xs-12 col-sm-6 col-sm-push-6 col-lg-push-5 legend">
              <h3>РЕЗУЛЬТАТ</h3>
              <p>Вы же пришли именно за этим? Тогда позвольте нам взять все в свои руки и превзойти ваши ожидания. Крыльям можно доверять.
              </p>
            </div>
            <img class="col-xs-12 col-sm-6 col-sm-pull-6" src="static/images/dg2.jpg" alt="">
          </div>
          <div class="row philosophy-row">
            <div class="col-xs-12 col-sm-6 col-lg-push-1 legend">
              <h3>УНИКАЛЬНОСТЬ</h3>
              <p>События, созданные Крыльями, можно прописывать вместо антидепрессантов. Мы вас удивим, вдохновим, окутаем теплом и вызовем мурашки…</p>
            </div>
            <img class="col-xs-12 col-sm-6" src="static/images/dg3.jpg" alt="">
          </div>
        </div>
        <div class="container">
          <div class="row">
            <h2 id="subhead_2" class="subhead">Типы мероприятий
              <span>мероприятия</span>
            </h2>
            <div class="container">
              <div class="row">
                <div class="event col-xs-12 col-sm-6 col-md-4">
                  <p>Деловые(MICE)</p>
                </div>
                <div id="teambuilding" class="event col-xs-12 col-sm-6 col-md-4">
                  <p>Командообразующие</p>
                </div>
                <div class="event col-xs-12 col-sm-6 col-md-4">
                  <p>Маркетинговые</p>
                </div>
                <div class="event col-xs-12 col-sm-6 ">
                  <p>Праздничные</p>
                </div>
                <div class="event col-xs-12 col-sm-6 ">
                  <p>Спортивные</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="container-fluid">
            <div class="row details">
              <div class="clearfix"></div>
              <h2 id="subhead_3" class="subhead">Узнайте подробности
                <span>подробности</span>
              </h2>
              <form class="center-block" action="submit">
                  <div class="col-xs-12 col-sm-6 col-md-4">
                    <select class="col-xs-12">
                      <option value="" hidden>Тип мероприятия</option>
                      <option value="business">Деловые(MICE)</option>
                      <option value="teambuild">Командообразующие</option>
                      <option value="marketing">Маркетинговые</option>
                      <option value="celebration">Праздничные</option>
                      <option value="sport">Спортивные</option>
                    </select>
                  </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                  <input class="col-xs-12" type="text" placeholder="Примерная дата">
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                  <input class="col-xs-12" type="text" placeholder="Количество человек">
                </div>
                <div class="col-xs-12  col-sm-6 col-md-4">
                  <input class="col-xs-12" type="text" placeholder="Ваше имя">
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                  <input class="col-xs-12" type="text" placeholder="Ваш телефон">
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                  <input class="col-xs-12" type="text" placeholder="Ваш e-mail">
                </div>
                <div class="clearfix"></div>
                <input type="submit" value="Получить предложение" class="col-xs-12 center-block btn main-btm">
          
              </form>
              <div class="clearfix"></div>
            </div>
            <h2 id="subhead_4" class="subhead">Портфолио
              <span>Портфолио</span>
            </h2>
            <div class="row">
              <div class="center-block carousel-container visible-lg-block">
              
                <div id="carousel">
                  <div class="carousel-feature">
                    <a href="#">
                      <img class="carousel-image" alt="Image Caption" src="static/images/slider1.jpg">
                    </a>
                    <div class="carousel-caption">
                      <h3>Спортивное мероприятие для компании «Миранда-Медиа»</h3>
                      <p>
                        Корпоративное мероприятие для компании «Миранда-Медиа» (дочерняя компания "Ростелеком") в формате open air на стадионе по
                        случаю празднования маевки с официальной сдачей норм ГТО. Множество интерактивно-развлекательных зон, программа на сцене,
                        розыгрыш призов с корпоративной символикой.
                      </p>
                    </div>
                  </div>
                  <div class="carousel-feature">
                    <a href="#">
                      <img class="carousel-image" alt="Image Caption" src="static/images/slider3.jpg">
                    </a>
                    <div class="carousel-caption">
                      <h3>Спортивное мероприятие для компании «Миранда-Медиа»</h3>
                      <p>
                         Корпоративное мероприятие для компании «Миранда-Медиа» (дочерняя компания "Ростелеком") в формате open air на стадионе по
                        случаю празднования маевки с официальной сдачей норм ГТО. Множество интерактивно-развлекательных зон, программа на сцене,
                        розыгрыш призов с корпоративной символикой.
                      </p>
                    </div>
                  </div>
                  <div class="carousel-feature">
                    <a href="#">
                      <img class="carousel-image" alt="Image Caption" src="static/images/slider3.jpg">
                    </a>
                    <div class="carousel-caption">
                      <h3>Спортивное мероприятие для компании «Миранда-Медиа»</h3>
                      <p>
                        Корпоративное мероприятие для компании «Миранда-Медиа» (дочерняя компания "Ростелеком") в формате open air на стадионе по
                        случаю празднования маевки с официальной сдачей норм ГТО. Множество интерактивно-развлекательных зон, программа на сцене,
                        розыгрыш призов с корпоративной символикой.
                      </p>
                    </div>
                  </div>
                </div>
              
                <div id="carousel-left">
                  <img src="static/images/sliderarrow.png" />
                </div>
                <div id="carousel-right">
                  <img src="static/images/sliderarrow.png" />
                </div>
                <button href="#" class="col-xs-12 center-block btn main-btm" role="button">Посмотреть галерею</button>
              </div>
              <div class="no-carousel hidden-lg">
                <div class="col-xs-12">
                  <a href="#">
                    <img class="carousel-image col-xs-12 col-sm-6" alt="Image Caption" src="static/images/slider1.jpg">
                  </a>
                  <div class="col-xs-12 col-sm-6">
                    <h3>Спортивное мероприятие для компании «Миранда-Медиа»</h3>
                    <p>
                      Корпоративное мероприятие для компании «Миранда-Медиа» (дочерняя компания "Ростелеком") в формате open air на стадионе по
                      случаю празднования маевки с официальной сдачей норм ГТО. Множество интерактивно-развлекательных зон, программа на
                      сцене, розыгрыш призов с корпоративной символикой.
                    </p>
                  </div>
                </div>
                <div class="col-xs-12">
                  <a href="#">
                    <img class="carousel-image col-xs-12 col-sm-6" alt="Image Caption" src="static/images/slider3.jpg">
                  </a>
                  <div class="col-xs-12 col-sm-6">
                    <h3>Спортивное мероприятие для компании «Миранда-Медиа»</h3>
                    <p>
                      Корпоративное мероприятие для компании «Миранда-Медиа» (дочерняя компания "Ростелеком") в формате open air на стадионе по
                      случаю празднования маевки с официальной сдачей норм ГТО. Множество интерактивно-развлекательных зон, программа на
                      сцене, розыгрыш призов с корпоративной символикой.
                    </p>
                  </div>
                </div>
                <button href="#" class="col-xs-12 center-block btn main-btm" role="button">Посмотреть галерею</button>
              </div>
            </div>
            <div style="position:relative" class="row line">
              <div class="container">
                <div class="row">
                  <h2 id="subhead_5" class="subhead">Клиенты и партнеры
                    <span>партнеры</span>
                  </h2>
                  <div class="owl-carousel ">
                    <div><img src="static/images/111.jpg" alt="ukrzoloto"></div>
                    <div><img src="static/images/222.jpg" alt="arda"></div>
                    <div><img src="static/images/333.jpg" alt="motive"></div>
                    <div><img src="static/images/444.jpg" alt="zarina"></div>
                    <div>
                      <img src="static/images/222.jpg" alt="arda">
                    </div>
                    <div>
                      <img src="static/images/333.jpg" alt="motive">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="container-fluid">
                <div class="row feedback">
                  <div class="feedback-inner"></div>
                  <div class="clearfix"></div>
                  <h2 id="subhead_6" class="subhead">Отзывы
                    <span>Отзывы</span>
                  </h2>
                  <div class="col-xs-12 col-md-4 col-md-offset-1 feedback__caption">
                    <p>Каждый элемент программы трех дней был ярким, интересным и качественно подготовленным. Нас приятно удивил ответственный и
                    творческий подход Студии к подготовке проекта, искренняя забота и поддержка на каждом этапе мероприятия.</p>
                    <h3>Черняков Е.А.</h3>
                  </div>
                  <div class="clearfix"></div>
                  
                </div>
              </div>
            </div>
            <h2 id="subhead_7" class="subhead">Узнайте подробности
              <span>подробности</span>
            </h2>
            <div class="row details details-second">
              <div class="clearfix"></div>
              <div class="slider-wrapper"></div>
              <form class="center-block" action="submit">
                <div class="col-xs-12 col-sm-6 col-md-4">
                  <select class="col-xs-12">
                    <option value="" hidden>Тип мероприятия</option>
                    <option value="business">Деловые(MICE)</option>
                    <option value="teambuild">Командообразующие</option>
                    <option value="marketing">Маркетинговые</option>
                    <option value="celebration">Праздничные</option>
                    <option value="sport">Спортивные</option>
                  </select>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                  <input class="col-xs-12" type="text" placeholder="Примерная дата">
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                  <input class="col-xs-12" type="text" placeholder="Количество человек">
                </div>
                <div class="col-xs-12  col-sm-6 col-md-4">
                  <input class="col-xs-12" type="text" placeholder="Ваше имя">
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                  <input class="col-xs-12" type="text" placeholder="Ваш телефон">
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                  <input class="col-xs-12" type="text" placeholder="Ваш e-mail">
                </div>
                <div class="clearfix"></div>
                <input type="submit" value="Получить предложение" class="col-xs-12 center-block btn main-btm">
            
              </form>
              <div class="clearfix"></div>
            </div>
            <div class="row">
              <h2 id="subhead_8" class="subhead">Наша команда
                <span>команда</span>
              </h2>
              <div class="container team">      
                               
                <div class="row team-row">
                  <div class="col-xs-12 col-sm-6 col-sm-push-6 col-lg-push-5 col-lg-push-4">
                    <div class="col-lg-push-1 legend">
                      <h3>Александр Колусенко <span>Партнер</span></h3>
                      <p>Главный двигатель прогресса в Студии, человек больших масштабов и грандиозных целей, самый душевный переговорщик, которого
                      вам приходилось встречать.
                      </p>
                    </div>
                  </div>
                  <img class="col-xs-12 col-sm-6 col-sm-pull-6 col-lg-4 col-lg-pull-5" src="static/images/man.jpg" alt="">
                </div>
                <div class="row team-row">
                  <div class="col-xs-12 col-sm-6 col-lg-pull-1">
                    <div class="col-lg-push-1 legend">
                      <h3><span>Партнер</span>Алена Колусенко</h3>
                      <p>Душа и Крылья нашей команды, человек с горящими глазами и неисчерпаемой любовью ко всем людям, она наполняет проекты Студии
                      эмоциями, красками и смыслами.</p>
                    </div>
                  </div>
                  <img class="col-xs-12 col-sm-6 col-lg-4 col-lg-pull-1" src="static/images/woman.jpg" alt="">
                </div>
                <div class="row team-row">
                  <div class="col-xs-12 col-sm-6 col-sm-push-6 col-lg-push-5 col-lg-push-4">
                    <div class="col-lg-push-1 legend">
                      <h3>Александр Колусенко
                        <span>Партнер</span>
                      </h3>
                      <p>Главный двигатель прогресса в Студии, человек больших масштабов и грандиозных целей, самый душевный переговорщик, которого
                        вам приходилось встречать.
                      </p>
                    </div>
                  </div>
                  <img class="col-xs-12 col-sm-6 col-sm-pull-6 col-lg-4 col-lg-pull-5" src="static/images/man.jpg" alt="">
                </div>
                <div class="row team-row">
                  <div class="col-xs-12 col-sm-6 col-lg-pull-1">
                    <div class="col-lg-push-1 legend">
                      <h3>
                        <span>Партнер</span>Алена Колусенко</h3>
                      <p>Душа и Крылья нашей команды, человек с горящими глазами и неисчерпаемой любовью ко всем людям, она наполняет проекты
                        Студии эмоциями, красками и смыслами.</p>
                    </div>
                  </div>
                  <img class="col-xs-12 col-sm-6 col-lg-4 col-lg-pull-1" src="static/images/woman.jpg" alt="">
                </div>
                <div class="row team-row">
                  <div class="col-xs-12 col-sm-6 col-sm-push-6 col-lg-push-5 col-lg-push-4">
                    <div class="col-lg-push-1 legend">
                      <h3>Александр Колусенко
                        <span>Партнер</span>
                      </h3>
                      <p>Главный двигатель прогресса в Студии, человек больших масштабов и грандиозных целей, самый душевный переговорщик, которого
                        вам приходилось встречать.
                      </p>
                    </div>
                  </div>
                  <img class="col-xs-12 col-sm-6 col-sm-pull-6 col-lg-4 col-lg-pull-5" src="static/images/man.jpg" alt="">
                </div>
                
              </div>
            </div>
          </div> 
        </div>
        <div class="row">
          <div class="container-fluid">
            <div class="row">
              <div class="map-wrapper">
                <div class="map">
                  <iframe src="https://snazzymaps.com/embed/59520" width="100%" height="100%" style="border:none;"></iframe>
                </div>
                <div class="contacts">
                  <div class="col-lg-5 col-lg-offset-3 contacts-inner">
                    <a class="mail" href="mailto:namecompany@mail.com">namecompany@mail.com</a>
                    <a class="tel" href="tel:+79788497707">+7(978) 849 77 07</a>
                  </div>
                </div>
              </div>
              
            </div>
          </div>
        </div>
        <span class="fun visible-lg-block" ></span>
        <span class="chicly visible-lg-block"></span>
        <span class="fun1 visible-lg-block"></span>
        <span class="fun2 visible-lg-block"></span>
        <span class="chicly1 visible-lg-block"></span>
        <span class="chicly2 visible-lg-block"></span>
      </div>
    </div>
  </div>
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  <!-- jQuery -->
  <script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>
  <!-- Future carousel -->
  <script src="static/js/featureCarousel.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      var carousel = $("#carousel").featureCarousel({
        autoPlay: 0,
        smallFeatureOffset: 90,
      });
    });
  </script>
  <!-- OwlCarousel2 -->
  <script src="static/js/owl.carousel.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){ $(".owl-carousel").owlCarousel({
      loop: true,
      margin: 100,
      responsiveClass: true,
      dots: false,
      responsive: {
        0: {
          items: 2,
          nav: true,
          loop: true
        },
        600: {
          items: 3,
          nav: true,
          loop: true
        },
        1000: {
          items: 4,
          nav: true,
          loop: true
        }
      }
    }
  ); });
  </script>
 
  </body>
</html>