<commit_before><!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Agency - Start Bootstrap Theme</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>

    <!-- Custom styles for this template -->
    <!-- АНдрюха ЛОШАРА!!!!! -->
    <!-- АНдрюха ЛОШАРА!!!!! -->
    <!-- АНдрюха ЛОШАРА!!!!! -->
    <!-- АНдрюха ЛОШАРА!!!!! -->
    <!-- АНдрюха ЛОШАРА!!!!! -->
    <link href="css/agency.min.css" rel="stylesheet">
    <link href="css/owl/owl.carousel.css" rel="stylesheet">
    <link href="css/owl/owl.theme.css" rel="stylesheet">
    <link href="css/responsive.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <link href="css/formstyle.css" rel="stylesheet">

  </head>

  <body id="page-top">
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
      <div class="container">
        <a class="navbar-brand js-scroll-trigger" href="#page-top">intoDevOps</a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          Menu
          <i class="fa fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#services">Сервисы</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#team">Team</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
            </li>
          </ul>
          <a class="navbar-brand" data-toggle="modal" href="#portfolioModal1">Let's speek</a>
        </div>
      </div>
    </nav>

    <!-- Header -->
    <header class="masthead">

      <div id="carousel-area">
        <div id="carousel-slider" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carousel-slider" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-slider" data-slide-to="1"></li>
            <li data-target="#carousel-slider" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
              <img src="img/bg.png" alt="">
              <div class="carousel-caption">
                <h2>
                  Автоматизация деплоя
                </h2>
                <h3 class="mb-3">
                  Наша специализация
                </h3>
                <a class="btn btn-lg btn-common js-scroll-trigger" href="#services">
                  Узнать больше
                </a>
              </div>
            </div>
            <div class="carousel-item">
              <img src="img/bg.png" alt="">
              <div class="carousel-caption">

                <h2>
                  DevOps лучшие практики и инструменты для облачной инфраструктуры.
                  Все построено с Kubernetes.
                </h2>
                <h3 class="mb-3">
                  Наши эксперты DevOps оптимизируют, а затем поддерживают вашу инфраструктуру.
                </h3>
                <a class="btn btn-common btn-lg js-scroll-trigger" href="#services">
                  Узнать больше
                </a>
              </div>
            </div>
            <div class="carousel-item">
              <img src="img/bg.png" alt="">
              <div class="carousel-caption">

                <h2>
                  Мы - ваша собственная команда инженеров DevOps:
                  Создаем надежные платформы и поддерживаем их 24/7/365.
                </h2>
                <h3 class="mb-3">
                  Позаботимся о вашей инфраструктуре, чтобы вы могли вернуться к созданию продукта, который приносит доход
                </h3>
                <a class="btn btn-lg btn-common js-scroll-trigger" href="#services">
                  Узнать больше
                </a>
              </div>
            </div>
          </div>
          <a class="carousel-control-prev" href="#carousel-slider" role="button" data-slide="prev">
            <span class="carousel-control carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carousel-slider" role="button" data-slide="next">
            <span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </header>
    <!-- My paste -->

    <!-- Services -->
    <section class="bg-light" id="services">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <!--  Комент -->
            <h2 class="section-heading">Сервисы</h2>
            <h3 class="section-subheading text-muted"></h3>
          </div>
        </div>
        <!--  Комент 2 -->
        <div class="row text-center">
          <div class="col-md-4">
            <span class="fa-stack fa-4x">
              <i class="fa fa-circle fa-stack-2x text-primary"></i>
              <i class="fa fa-send fa-stack-1x fa-inverse"></i>
            </span>
            <h4 class="service-heading">Cопровождение проектов по методологии DevOps</h4>
            <p class="text-muted">Выстраивание и сопровождение процессов CI/CD,
              применение подхода Infrastructure as Code (IaC),
              создание рабочего окружения для разработчиков,
              разворачивание staging, production серверовю
              Подготовка для высоких нагрузок (highload)</p>
          </div>
          <div class="col-md-4">
            <span class="fa-stack fa-4x">
              <i class="fa fa-circle fa-stack-2x text-primary"></i>
              <i class="fa fa-openid fa-stack-1x fa-inverse"></i>
            </span>
            <h4 class="service-heading">Автоматизация процессов c помощью DevOps</h4>
            <p class="text-muted">Применяем технологий с открытым исходным кодом, такие как Ansible, Docker, Kubernetes для упрощения управлением конфигурацией и развертыванием приложений. Shell, bash scripting для автоматизации процессов
              Системы контроля версий.
            </p>
          </div>
          <div class="col-md-4">
            <span class="fa-stack fa-4x">
              <i class="fa fa-circle fa-stack-2x text-primary"></i>
              <i class="fa fa-lock fa-stack-1x fa-inverse"></i>
            </span>
            <h4 class="service-heading">Техническая поддержка 7/24/365</h4>
            <p class="text-muted">Умная  техническуя поддержка 24×7×365: постоянное сопровождение процессов разработки, оперативное внесение изменений в инфраструктуру, помощь разработчикам и тимлидам по смежным проблемам, консультации по архитектуре.</p>
          </div>

        </div>
      </div>
    </section>

    <section id="kubernetes">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h2 class="section-heading">&nbsp;</h2>
          <h3 class="section-subheading text-muted">&nbsp;</h3>
        </div>
        <div class="col-lg-12 text-center">
          <h2 class="section-heading">Почему мы за Kubernetes?</h2>
          <h3 class="section-subheading text-muted"></h3>
        </div>
      </div>
      <div class="row justify-content-around">
        <div class="col-md-3 mb-4">
          <h4 class="mb-3">Горизонтальное масштабирование</h4>
        </div>
        <div class="col-md-3 mb-4">
          <h4 class="mb-3">Надзор за состоянием контейнеров</h4>
        </div>
      </div>
      <div class="row align-items-center">
        <div class="col-md-3 mb-4">
          <h4 class="mb-3">Автоматические развертывания и откаты</h4>
        </div>
        <div class="col-md-6 mb-4 text-center">
          <img class="mb-4 img-fluid" src="img/kubernetes.png" >
        </div>
        <div class="col-md-3 mb-4">
          <h4 class="mb-3">Vendor lock-in</h4>
        </div>
      </div>
      <div class="row justify-content-around">
        <div class="col-md-3 mb-4">
          <h3>Встроенные инструменты сбора метрик и логирования</h3>
        </div>
        <div class="col-md-3 mb-4">
          <h3>CI/CD </h3>
        </div>
      </div>
    </div>
    </section>

    <!--  <section id="directions">
       <div class="container">
         <div class="row">
           <div class="col-lg-12 text-center">
             <h2 class="section-heading">Основные направления</h2>
             <h3 class="section-subheading text-muted"></h3>
           </div>
            <div class="col-md-6 text-center text-md-left pl-5">
              <h3 class="mb-4 mt-4">Автоматизация деплоя по методологии DevOps</h3>
              <p class="mb-4">Сопровождение проектов по методологии DevOps — приоритетное направление нашей деятельности. Что мы подразумеваем и предлагаем под DevOps? </p>
            </div>
            <div class="col-md-6 text-center">
              <img class="mb-4 img-fluid" src="img/devops-process.png" >
            </div>
         </div>
       </div>
       <div class="container">
         <div class="row">
           <div class="col-lg-12 text-center">
             <h2 class="section-heading"></h2>
             <h3 class="section-subheading text-muted"></h3>
           </div>
            <div class="col-md-6 text-center">
              <img class="mb4 img-fluid" src="img/support.png">
            </div>
            <div class="col-md-6 text-center text-md-left pl-5">
             <h3 class="mb-4 mt-4">Техническая поддержка</h3>
             <p class="mb-4">Сопровождение проектов по методологии DevOps — приоритетное направление нашей деятельности. Что мы подразумеваем и предлагаем под DevOps? </p>
            </div>
         </div>
       </div>

       </div>
     </section> -->

    <section class="bg-light" class="features" id="features">
      <div class="container">
        <div class="section-heading text-center">
          <h2>Проффесионально проконсультируем в:</h2>
          <p class="text-muted"> И настроим дополнительные сервисы </p>
          <hr>
        </div>
        <div class="row">
          <div class="col-lg-12 my-auto">
            <div class="container-fluid">
              <div class="row">
                <div class="col-lg-6">
                  <div class="fa-stack fa-2x">
                    <i class="fa fa-circle fa-stack-2x text-primary"></i>
                    <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
                  </div>
                  <div class="feature-item">
                    <i class="icon-screen-smartphone text-primary"></i>
                    <h3></h3>
                    <p class="text-muted">Навыки AWS и GCP  на уровне экспертов, консультации и внедрение. Опыт работы Heroku, Azure и Hetzner.</p>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="fa-stack fa-2x">
                    <i class="fa fa-circle fa-stack-2x text-primary"></i>
                    <i class="fa fa-lock fa-stack-1x fa-inverse"></i>
                  </div>
                  <div class="feature-item">
                    <i class="icon-camera text-primary"></i>
                    <h3></h3>
                    <p class="text-muted">Мы активно работаем с различными инструментами виртуализации  Linux KVM под управлением libvirt (или OpenStack в случае больших инсталляций) и контейнеризации Docker.  </p>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-lg-6">
                  <div class="fa-stack fa-2x">
                    <i class="fa fa-circle fa-stack-2x text-primary"></i>
                    <i class="fa fa-lock fa-stack-1x fa-inverse"></i>
                  </div>
                  <div class="feature-item">
                    <i class="icon-present text-primary"></i>
                    <h3></h3>
                    <p class="text-muted">Наша команда DevOps разрабатывает и внедряет различные системы автоматизированной сборки ПО для таких технологических платформ, как Java, Python? PHP, .NET др. </p>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="fa-stack fa-2x">
                    <i class="fa fa-circle fa-stack-2x text-primary"></i>
                    <i class="fa fa-lock fa-stack-1x fa-inverse"></i>
                  </div>
                  <div class="feature-item">
                    <i class="icon-lock-open text-primary"></i>
                    <h3></h3>
                    <p class="text-muted">Надежные планы аварийного восстановления. В качестве инструментов мониторинга инфраструктуры и прогнозирования возможных изменений используем Zabbix, Nagios, Graphite, и др.</p>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="fa-stack fa-2x">
                    <i class="fa fa-circle fa-stack-2x text-primary"></i>
                    <i class="fa fa-lock fa-stack-1x fa-inverse"></i>
                  </div>
                  <div class="feature-item">
                    <i class="icon-lock-open text-primary"></i>
                    <h3></h3>
                    <p class="text-muted">Мы комплексно подойдем к настройке с функционала и производительности веб-проекта.Оптимизация производительности и highload.
                      Отказоустойчивость, кластеры, сложные архитектурные решения.</p>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="fa-stack fa-2x">
                    <i class="fa fa-circle fa-stack-2x text-primary"></i>
                    <i class="fa fa-lock fa-stack-1x fa-inverse"></i>
                  </div>
                  <div class="feature-item">
                    <i class="icon-lock-open text-primary"></i>
                    <h3></h3>
                    <p class="text-muted">Создание неизменяемых инфраструктур с использованием синих / зеленых процедур с нулевым временем простоя</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>


    <!-- /Features -->
     <!-- About -->
    <section id="about">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading">Наш подход</h2>
            <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <ul class="timeline">
              <li>
                <div class="timeline-image">
                  <img class="rounded-circle img-fluid" src="img/about/180012.png" alt="">
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h4>Этап 1</h4>
                    <h4 class="subheading">Аудит и исследования </h4>
                  </div>
                  <div class="timeline-body">
                    <p class="text-muted"> Наш процесс консультаций начинается с работы с вами, чтобы понять и документировать существующую реальность вашей инфраструктуры. Вы проводите время с нами, показывая нам, что вы сделали, и решения, которые вы приняли в своей архитектуре. Слишком занят? Вы можете дать нам ключи и дать нам карту для вас.</p>
                  </div>
                </div>
              </li>
              <li class="timeline-inverted">
                <div class="timeline-image">
                  <img class="rounded-circle img-fluid" src="img/about/21.jpg" alt="">
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h4>Этап 2</h4>
                    <h4 class="subheading">Стратегия и планирование инфраструктуры</h4>
                  </div>
                  <div class="timeline-body">
                    <p class="text-muted">Затем наши специалисты составят план по повышению производительности, безопасности, доступности и помогут вам выполнить ваши инфраструктурные цели. Если вам нужно ChatOps или перейти на микросервисы и контейнеры, мы обсудим приоритеты, преимущества и архитектуру будущего вашей компании.</p>
                  </div>
                </div>
              </li>
              <li>
                <div class="timeline-image">
                  <img class="rounded-circle img-fluid" src="img/about/31.jpg" alt="">
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h4>Этап 3</h4>
                    <h4 class="subheading">Transition to Full Service</h4>
                  </div>
                  <div class="timeline-body">
                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                  </div>
                </div>
              </li>
              <li class="timeline-inverted">
                <div class="timeline-image">
                  <img class="rounded-circle img-fluid" src="img/about/41.jpg" alt="">
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h4>Этап 4</h4>
                    <h4 class="subheading">Phase Two Expansion</h4>
                  </div>
                  <div class="timeline-body">
                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                  </div>
                </div>
              </li>
              <li class="timeline-inverted">
                <div class="timeline-image">
                  <h4>Be Part
                    <br>Of Our
                    <br>Story!</h4>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
     <!-- Инструменты -->

    <!-- Clients -->
    <section class="bg-light py-5">
      <div class="container">
        <div class="row">
          <div class="col-md-3 col-sm-6">
            <a href="#">
              <img class="img-fluid d-block mx-auto" src="img/logos/envato.jpg" alt="">
            </a>
          </div>
          <div class="col-md-3 col-sm-6">
            <a href="#">
              <img class="img-fluid d-block mx-auto" src="img/logos/designmodo.jpg" alt="">
            </a>
          </div>
          <div class="col-md-3 col-sm-6">
            <a href="#">
              <img class="img-fluid d-block mx-auto" src="img/logos/themeforest.jpg" alt="">
            </a>
          </div>
          <div class="col-md-3 col-sm-6">
            <a href="#">
              <img class="img-fluid d-block mx-auto" src="img/logos/creative-market.jpg" alt="">
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- Pricing -->
    <section id="price">
    <div class="container py-4">
      <div class="row">
        <div class="col-md-10 my-4 mx-auto">
          <h2 class="text-center">Цены</h2>
          <div class="row no-gutters my-3">
            <div class="col-md-4 pr-1">
              <div class="list-group text-center my-3">
                <div class="list-group-item text-white bg-dark">
                  <h4 class="text-center my-1">Basic</h4>
                </div>
                <div class="list-group-item text-uppercase font-weight-bold">
                  Free
                </div>
                <a href="#" class="list-group-item">
                  100 GB HDD Storage
                </a>
                <a href="#" class="list-group-item">
                  Web Server
                </a>
                <a href="#" class="list-group-item">
                  DNS Hosting
                </a>
                <a href="#" class="list-group-item">
                  Mail Server
                </a>
                <div class="list-group-item">
                  <button class="btn btn-secondary btn-lg btn-block text-truncate">Sign-up</button>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="list-group text-center bg-alt">
                <div href="#" class="list-group-item text-white bg-dark">
                  <h4 class="text-center my-1">Standard<br></h4>
                </div>
                <div class="list-group-item text-uppercase font-weight-bold">
                  $99/mo.
                </div>
                <a href="#" class="list-group-item">
                  1 TB HDD Storage
                </a>
                <a href="#" class="list-group-item">
                  <span class="float-right"><i class="ion-ios-star-outline fa fa-star-o"></i></span> Database Option
                </a>
                <a href="#" class="list-group-item">
                  Web Server
                </a>
                <a href="#" class="list-group-item">
                  DNS Hosting
                </a>
                <a href="#" class="list-group-item">
                  Mail Server
                </a>
                <a href="#" class="list-group-item">
                  24/7 Monitoring
                </a>
                <div class="list-group-item bg-inverse">
                  <button class="btn btn-secondary btn-lg btn-block text-truncate">Buy Now</button>
                </div>
              </div>
            </div>
            <div class="col-md-4 pl-1">
              <div class="list-group text-center my-3">
                <div href="#" class="list-group-item text-white bg-dark">
                  <h4 class="text-center my-1">Managed</h4>
                </div>
                <div class="list-group-item text-uppercase font-weight-bold">
                  Contact Us
                </div>
                <a href="#" class="list-group-item">
                  Upto 10 TB HDD Storage
                </a>
                <a href="#" class="list-group-item">
                  Consultation
                </a>
                <a href="#" class="list-group-item">
                  Custom Servers
                </a>
                <a href="#" class="list-group-item">
                  24/7 Support
                </a>
                <div class="list-group-item">
                  <button class="btn btn-secondary btn-lg btn-block text-truncate">Contact Us</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </section>

    <!-- Team -->
    <section class="bg-light" id="team">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading">Our Amazing Team</h2>
            <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4">
            <div class="team-member">
              <img class="mx-auto rounded-circle" src="img/team/1.jpg" alt="">
              <h4><NAME>land</h4>
              <p class="text-muted">Lead Designer</p>
              <ul class="list-inline social-buttons">
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-twitter"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-facebook"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-linkedin"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="team-member">
              <img class="mx-auto rounded-circle" src="img/team/2.jpg" alt="">
              <h4><NAME></h4>
              <p class="text-muted">Lead Marketer</p>
              <ul class="list-inline social-buttons">
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-twitter"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-facebook"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-linkedin"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="team-member">
              <img class="mx-auto rounded-circle" src="img/team/3.jpg" alt="">
              <h4><NAME></h4>
              <p class="text-muted">Lead Developer</p>
              <ul class="list-inline social-buttons">
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-twitter"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-facebook"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-linkedin"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-8 mx-auto text-center">
            <p class="large text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Contact -->
    <section id="contact">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading">Contact Us</h2>
            <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <form id="contactForm" name="sentMessage" novalidate>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <input class="form-control" id="name" type="text" placeholder="Your Name *" required data-validation-required-message="Please enter your name.">
                    <p class="help-block text-danger"></p>
                  </div>
                  <div class="form-group">
                    <input class="form-control" id="email" type="email" placeholder="Your Email *" required data-validation-required-message="Please enter your email address.">
                    <p class="help-block text-danger"></p>
                  </div>
                  <div class="form-group">
                    <input class="form-control" id="phone1" type="tel" placeholder="Your Phone *" required data-validation-required-message="Please enter your phone number.">
                    <p class="help-block text-danger"></p>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <textarea class="form-control" id="message" placeholder="Your Message *" required data-validation-required-message="Please enter a message."></textarea>
                    <p class="help-block text-danger"></p>
                  </div>
                </div>
                <div class="clearfix"></div>
                <div class="col-lg-12 text-center">
                  <div id="success"></div>
                  <button id="sendMessageButton" class="btn btn-xl" type="submit">Send Message</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer>
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <span class="copyright">Copyright &copy; Your Website 2017</span>
          </div>
          <div class="col-md-4">
            <ul class="list-inline social-buttons">
              <li class="list-inline-item">
                <a href="#">
                  <i class="fa fa-twitter"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fa fa-facebook"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fa fa-linkedin"></i>
                </a>
              </li>
            </ul>
          </div>
          <div class="col-md-4">
            <ul class="list-inline quicklinks">
              <li class="list-inline-item">
                <a href="#">Privacy Policy</a>
              </li>
              <li class="list-inline-item">
                <a href="#">Terms of Use</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>

  <!-- Modal 1 -->
  <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
          <div class="lr">
            <div class="rl"></div>
          </div>
        </div>
        <div class="container">
          <div class="row">
            <div class="col-lg-8 mx-auto">
              <div class="modal-body">
                <!-- Project Details Go Here -->
                <h2></h2>
                    <div class="formArea">
                    <form id="form" class="form" method="post" action="/process" enctype="application/x-www-form-urlencoded">
                      <p class="formTitle">Оставте заявку либо свяжитесь с нами через Telegram</p>
                      <p class="msgs"></p>

                      <fieldset class="form-fieldset ui-input __first">
                        <input name="name" type="text" id="username" tabindex="0" autocomplete="off"/>
                        <label for="username">
                          <span data-text="Введите ваше имя">Введите ваше имя</span>
                        </label>
                      </fieldset>

                      <fieldset class="form-fieldset ui-input __second">
                        <input name="phone" type="tel" id="phone" tabindex="0" pattern="^[ 0-9]+$" autocomplete="off"/>
                        <label for="phone">
                          <span data-text="Введите ваш телефон">Введите ваш телефон</span>
                        </label>
                      </fieldset>

                      <fieldset class="form-fieldset ui-input __third">
                        <textarea name="messages" id="messages" rows="3" tabindex="0"></textarea>
                        <label for="messages">
                          <span data-text="Введите сообщение">Введите сообщение</span>
                        </label>
                      </fieldset>

                      <div class="form-footer">
                        <input type="submit" class="formBtn" value="Отправить" />
                      </div>
                      <p class="formCreator"><a href="http://intodevops.tk">intodevops.tk</a></p>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/popper/popper.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Contact form JavaScript -->
    <script src="js/jqBootstrapValidation.js"></script>
    <script src="js/contact_me.js"></script>

    <!-- Custom scripts for this template -->
    <script src="js/agency.min.js"></script>
    <script src="js/owl.carousel.js"></script>
    <script src="js/form.js"></script>
  </body>

</html>
<commit_msg>remove<commit_after><!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Agency - Start Bootstrap Theme</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>

    <!-- Custom styles for this template -->
    <link href="css/agency.min.css" rel="stylesheet">
    <link href="css/owl/owl.carousel.css" rel="stylesheet">
    <link href="css/owl/owl.theme.css" rel="stylesheet">
    <link href="css/responsive.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <link href="css/formstyle.css" rel="stylesheet">

  </head>

  <body id="page-top">
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
      <div class="container">
        <a class="navbar-brand js-scroll-trigger" href="#page-top">intoDevOps</a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          Menu
          <i class="fa fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#services">Сервисы</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#team">Team</a>
            </li>
            <li class="nav-item">
              <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
            </li>
          </ul>
          <a class="navbar-brand" data-toggle="modal" href="#portfolioModal1">Let's speek</a>
        </div>
      </div>
    </nav>

    <!-- Header -->
    <header class="masthead">

      <div id="carousel-area">
        <div id="carousel-slider" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carousel-slider" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-slider" data-slide-to="1"></li>
            <li data-target="#carousel-slider" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
              <img src="img/bg.png" alt="">
              <div class="carousel-caption">
                <h2>
                  Автоматизация деплоя
                </h2>
                <h3 class="mb-3">
                  Наша специализация
                </h3>
                <a class="btn btn-lg btn-common js-scroll-trigger" href="#services">
                  Узнать больше
                </a>
              </div>
            </div>
            <div class="carousel-item">
              <img src="img/bg.png" alt="">
              <div class="carousel-caption">

                <h2>
                  DevOps лучшие практики и инструменты для облачной инфраструктуры.
                  Все построено с Kubernetes.
                </h2>
                <h3 class="mb-3">
                  Наши эксперты DevOps оптимизируют, а затем поддерживают вашу инфраструктуру.
                </h3>
                <a class="btn btn-common btn-lg js-scroll-trigger" href="#services">
                  Узнать больше
                </a>
              </div>
            </div>
            <div class="carousel-item">
              <img src="img/bg.png" alt="">
              <div class="carousel-caption">

                <h2>
                  Мы - ваша собственная команда инженеров DevOps:
                  Создаем надежные платформы и поддерживаем их 24/7/365.
                </h2>
                <h3 class="mb-3">
                  Позаботимся о вашей инфраструктуре, чтобы вы могли вернуться к созданию продукта, который приносит доход
                </h3>
                <a class="btn btn-lg btn-common js-scroll-trigger" href="#services">
                  Узнать больше
                </a>
              </div>
            </div>
          </div>
          <a class="carousel-control-prev" href="#carousel-slider" role="button" data-slide="prev">
            <span class="carousel-control carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carousel-slider" role="button" data-slide="next">
            <span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </header>
    <!-- My paste -->

    <!-- Services -->
    <section class="bg-light" id="services">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <!--  Комент -->
            <h2 class="section-heading">Сервисы</h2>
            <h3 class="section-subheading text-muted"></h3>
          </div>
        </div>
        <!--  Комент 2 -->
        <div class="row text-center">
          <div class="col-md-4">
            <span class="fa-stack fa-4x">
              <i class="fa fa-circle fa-stack-2x text-primary"></i>
              <i class="fa fa-send fa-stack-1x fa-inverse"></i>
            </span>
            <h4 class="service-heading">Cопровождение проектов по методологии DevOps</h4>
            <p class="text-muted">Выстраивание и сопровождение процессов CI/CD,
              применение подхода Infrastructure as Code (IaC),
              создание рабочего окружения для разработчиков,
              разворачивание staging, production серверовю
              Подготовка для высоких нагрузок (highload)</p>
          </div>
          <div class="col-md-4">
            <span class="fa-stack fa-4x">
              <i class="fa fa-circle fa-stack-2x text-primary"></i>
              <i class="fa fa-openid fa-stack-1x fa-inverse"></i>
            </span>
            <h4 class="service-heading">Автоматизация процессов c помощью DevOps</h4>
            <p class="text-muted">Применяем технологий с открытым исходным кодом, такие как Ansible, Docker, Kubernetes для упрощения управлением конфигурацией и развертыванием приложений. Shell, bash scripting для автоматизации процессов
              Системы контроля версий.
            </p>
          </div>
          <div class="col-md-4">
            <span class="fa-stack fa-4x">
              <i class="fa fa-circle fa-stack-2x text-primary"></i>
              <i class="fa fa-lock fa-stack-1x fa-inverse"></i>
            </span>
            <h4 class="service-heading">Техническая поддержка 7/24/365</h4>
            <p class="text-muted">Умная  техническуя поддержка 24×7×365: постоянное сопровождение процессов разработки, оперативное внесение изменений в инфраструктуру, помощь разработчикам и тимлидам по смежным проблемам, консультации по архитектуре.</p>
          </div>

        </div>
      </div>
    </section>

    <section id="kubernetes">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h2 class="section-heading">&nbsp;</h2>
          <h3 class="section-subheading text-muted">&nbsp;</h3>
        </div>
        <div class="col-lg-12 text-center">
          <h2 class="section-heading">Почему мы за Kubernetes?</h2>
          <h3 class="section-subheading text-muted"></h3>
        </div>
      </div>
      <div class="row justify-content-around">
        <div class="col-md-3 mb-4">
          <h4 class="mb-3">Горизонтальное масштабирование</h4>
        </div>
        <div class="col-md-3 mb-4">
          <h4 class="mb-3">Надзор за состоянием контейнеров</h4>
        </div>
      </div>
      <div class="row align-items-center">
        <div class="col-md-3 mb-4">
          <h4 class="mb-3">Автоматические развертывания и откаты</h4>
        </div>
        <div class="col-md-6 mb-4 text-center">
          <img class="mb-4 img-fluid" src="img/kubernetes.png" >
        </div>
        <div class="col-md-3 mb-4">
          <h4 class="mb-3">Vendor lock-in</h4>
        </div>
      </div>
      <div class="row justify-content-around">
        <div class="col-md-3 mb-4">
          <h3>Встроенные инструменты сбора метрик и логирования</h3>
        </div>
        <div class="col-md-3 mb-4">
          <h3>CI/CD </h3>
        </div>
      </div>
    </div>
    </section>

    <!--  <section id="directions">
       <div class="container">
         <div class="row">
           <div class="col-lg-12 text-center">
             <h2 class="section-heading">Основные направления</h2>
             <h3 class="section-subheading text-muted"></h3>
           </div>
            <div class="col-md-6 text-center text-md-left pl-5">
              <h3 class="mb-4 mt-4">Автоматизация деплоя по методологии DevOps</h3>
              <p class="mb-4">Сопровождение проектов по методологии DevOps — приоритетное направление нашей деятельности. Что мы подразумеваем и предлагаем под DevOps? </p>
            </div>
            <div class="col-md-6 text-center">
              <img class="mb-4 img-fluid" src="img/devops-process.png" >
            </div>
         </div>
       </div>
       <div class="container">
         <div class="row">
           <div class="col-lg-12 text-center">
             <h2 class="section-heading"></h2>
             <h3 class="section-subheading text-muted"></h3>
           </div>
            <div class="col-md-6 text-center">
              <img class="mb4 img-fluid" src="img/support.png">
            </div>
            <div class="col-md-6 text-center text-md-left pl-5">
             <h3 class="mb-4 mt-4">Техническая поддержка</h3>
             <p class="mb-4">Сопровождение проектов по методологии DevOps — приоритетное направление нашей деятельности. Что мы подразумеваем и предлагаем под DevOps? </p>
            </div>
         </div>
       </div>

       </div>
     </section> -->

    <section class="bg-light" class="features" id="features">
      <div class="container">
        <div class="section-heading text-center">
          <h2>Проффесионально проконсультируем в:</h2>
          <p class="text-muted"> И настроим дополнительные сервисы </p>
          <hr>
        </div>
        <div class="row">
          <div class="col-lg-12 my-auto">
            <div class="container-fluid">
              <div class="row">
                <div class="col-lg-6">
                  <div class="fa-stack fa-2x">
                    <i class="fa fa-circle fa-stack-2x text-primary"></i>
                    <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
                  </div>
                  <div class="feature-item">
                    <i class="icon-screen-smartphone text-primary"></i>
                    <h3></h3>
                    <p class="text-muted">Навыки AWS и GCP  на уровне экспертов, консультации и внедрение. Опыт работы Heroku, Azure и Hetzner.</p>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="fa-stack fa-2x">
                    <i class="fa fa-circle fa-stack-2x text-primary"></i>
                    <i class="fa fa-lock fa-stack-1x fa-inverse"></i>
                  </div>
                  <div class="feature-item">
                    <i class="icon-camera text-primary"></i>
                    <h3></h3>
                    <p class="text-muted">Мы активно работаем с различными инструментами виртуализации  Linux KVM под управлением libvirt (или OpenStack в случае больших инсталляций) и контейнеризации Docker.  </p>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-lg-6">
                  <div class="fa-stack fa-2x">
                    <i class="fa fa-circle fa-stack-2x text-primary"></i>
                    <i class="fa fa-lock fa-stack-1x fa-inverse"></i>
                  </div>
                  <div class="feature-item">
                    <i class="icon-present text-primary"></i>
                    <h3></h3>
                    <p class="text-muted">Наша команда DevOps разрабатывает и внедряет различные системы автоматизированной сборки ПО для таких технологических платформ, как Java, Python? PHP, .NET др. </p>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="fa-stack fa-2x">
                    <i class="fa fa-circle fa-stack-2x text-primary"></i>
                    <i class="fa fa-lock fa-stack-1x fa-inverse"></i>
                  </div>
                  <div class="feature-item">
                    <i class="icon-lock-open text-primary"></i>
                    <h3></h3>
                    <p class="text-muted">Надежные планы аварийного восстановления. В качестве инструментов мониторинга инфраструктуры и прогнозирования возможных изменений используем Zabbix, Nagios, Graphite, и др.</p>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="fa-stack fa-2x">
                    <i class="fa fa-circle fa-stack-2x text-primary"></i>
                    <i class="fa fa-lock fa-stack-1x fa-inverse"></i>
                  </div>
                  <div class="feature-item">
                    <i class="icon-lock-open text-primary"></i>
                    <h3></h3>
                    <p class="text-muted">Мы комплексно подойдем к настройке с функционала и производительности веб-проекта.Оптимизация производительности и highload.
                      Отказоустойчивость, кластеры, сложные архитектурные решения.</p>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="fa-stack fa-2x">
                    <i class="fa fa-circle fa-stack-2x text-primary"></i>
                    <i class="fa fa-lock fa-stack-1x fa-inverse"></i>
                  </div>
                  <div class="feature-item">
                    <i class="icon-lock-open text-primary"></i>
                    <h3></h3>
                    <p class="text-muted">Создание неизменяемых инфраструктур с использованием синих / зеленых процедур с нулевым временем простоя</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>


    <!-- /Features -->
     <!-- About -->
    <section id="about">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading">Наш подход</h2>
            <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <ul class="timeline">
              <li>
                <div class="timeline-image">
                  <img class="rounded-circle img-fluid" src="img/about/180012.png" alt="">
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h4>Этап 1</h4>
                    <h4 class="subheading">Аудит и исследования </h4>
                  </div>
                  <div class="timeline-body">
                    <p class="text-muted"> Наш процесс консультаций начинается с работы с вами, чтобы понять и документировать существующую реальность вашей инфраструктуры. Вы проводите время с нами, показывая нам, что вы сделали, и решения, которые вы приняли в своей архитектуре. Слишком занят? Вы можете дать нам ключи и дать нам карту для вас.</p>
                  </div>
                </div>
              </li>
              <li class="timeline-inverted">
                <div class="timeline-image">
                  <img class="rounded-circle img-fluid" src="img/about/21.jpg" alt="">
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h4>Этап 2</h4>
                    <h4 class="subheading">Стратегия и планирование инфраструктуры</h4>
                  </div>
                  <div class="timeline-body">
                    <p class="text-muted">Затем наши специалисты составят план по повышению производительности, безопасности, доступности и помогут вам выполнить ваши инфраструктурные цели. Если вам нужно ChatOps или перейти на микросервисы и контейнеры, мы обсудим приоритеты, преимущества и архитектуру будущего вашей компании.</p>
                  </div>
                </div>
              </li>
              <li>
                <div class="timeline-image">
                  <img class="rounded-circle img-fluid" src="img/about/31.jpg" alt="">
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h4>Этап 3</h4>
                    <h4 class="subheading">Transition to Full Service</h4>
                  </div>
                  <div class="timeline-body">
                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                  </div>
                </div>
              </li>
              <li class="timeline-inverted">
                <div class="timeline-image">
                  <img class="rounded-circle img-fluid" src="img/about/41.jpg" alt="">
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h4>Этап 4</h4>
                    <h4 class="subheading">Phase Two Expansion</h4>
                  </div>
                  <div class="timeline-body">
                    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                  </div>
                </div>
              </li>
              <li class="timeline-inverted">
                <div class="timeline-image">
                  <h4>Be Part
                    <br>Of Our
                    <br>Story!</h4>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
     <!-- Инструменты -->

    <!-- Clients -->
    <section class="bg-light py-5">
      <div class="container">
        <div class="row">
          <div class="col-md-3 col-sm-6">
            <a href="#">
              <img class="img-fluid d-block mx-auto" src="img/logos/envato.jpg" alt="">
            </a>
          </div>
          <div class="col-md-3 col-sm-6">
            <a href="#">
              <img class="img-fluid d-block mx-auto" src="img/logos/designmodo.jpg" alt="">
            </a>
          </div>
          <div class="col-md-3 col-sm-6">
            <a href="#">
              <img class="img-fluid d-block mx-auto" src="img/logos/themeforest.jpg" alt="">
            </a>
          </div>
          <div class="col-md-3 col-sm-6">
            <a href="#">
              <img class="img-fluid d-block mx-auto" src="img/logos/creative-market.jpg" alt="">
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- Pricing -->
    <section id="price">
    <div class="container py-4">
      <div class="row">
        <div class="col-md-10 my-4 mx-auto">
          <h2 class="text-center">Цены</h2>
          <div class="row no-gutters my-3">
            <div class="col-md-4 pr-1">
              <div class="list-group text-center my-3">
                <div class="list-group-item text-white bg-dark">
                  <h4 class="text-center my-1">Basic</h4>
                </div>
                <div class="list-group-item text-uppercase font-weight-bold">
                  Free
                </div>
                <a href="#" class="list-group-item">
                  100 GB HDD Storage
                </a>
                <a href="#" class="list-group-item">
                  Web Server
                </a>
                <a href="#" class="list-group-item">
                  DNS Hosting
                </a>
                <a href="#" class="list-group-item">
                  Mail Server
                </a>
                <div class="list-group-item">
                  <button class="btn btn-secondary btn-lg btn-block text-truncate">Sign-up</button>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="list-group text-center bg-alt">
                <div href="#" class="list-group-item text-white bg-dark">
                  <h4 class="text-center my-1">Standard<br></h4>
                </div>
                <div class="list-group-item text-uppercase font-weight-bold">
                  $99/mo.
                </div>
                <a href="#" class="list-group-item">
                  1 TB HDD Storage
                </a>
                <a href="#" class="list-group-item">
                  <span class="float-right"><i class="ion-ios-star-outline fa fa-star-o"></i></span> Database Option
                </a>
                <a href="#" class="list-group-item">
                  Web Server
                </a>
                <a href="#" class="list-group-item">
                  DNS Hosting
                </a>
                <a href="#" class="list-group-item">
                  Mail Server
                </a>
                <a href="#" class="list-group-item">
                  24/7 Monitoring
                </a>
                <div class="list-group-item bg-inverse">
                  <button class="btn btn-secondary btn-lg btn-block text-truncate">Buy Now</button>
                </div>
              </div>
            </div>
            <div class="col-md-4 pl-1">
              <div class="list-group text-center my-3">
                <div href="#" class="list-group-item text-white bg-dark">
                  <h4 class="text-center my-1">Managed</h4>
                </div>
                <div class="list-group-item text-uppercase font-weight-bold">
                  Contact Us
                </div>
                <a href="#" class="list-group-item">
                  Upto 10 TB HDD Storage
                </a>
                <a href="#" class="list-group-item">
                  Consultation
                </a>
                <a href="#" class="list-group-item">
                  Custom Servers
                </a>
                <a href="#" class="list-group-item">
                  24/7 Support
                </a>
                <div class="list-group-item">
                  <button class="btn btn-secondary btn-lg btn-block text-truncate">Contact Us</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </section>

    <!-- Team -->
    <section class="bg-light" id="team">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading">Our Amazing Team</h2>
            <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4">
            <div class="team-member">
              <img class="mx-auto rounded-circle" src="img/team/1.jpg" alt="">
              <h4>Kay Garland</h4>
              <p class="text-muted">Lead Designer</p>
              <ul class="list-inline social-buttons">
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-twitter"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-facebook"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-linkedin"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="team-member">
              <img class="mx-auto rounded-circle" src="img/team/2.jpg" alt="">
              <h4><NAME></h4>
              <p class="text-muted">Lead Marketer</p>
              <ul class="list-inline social-buttons">
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-twitter"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-facebook"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-linkedin"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="team-member">
              <img class="mx-auto rounded-circle" src="img/team/3.jpg" alt="">
              <h4><NAME></h4>
              <p class="text-muted">Lead Developer</p>
              <ul class="list-inline social-buttons">
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-twitter"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-facebook"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#">
                    <i class="fa fa-linkedin"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-8 mx-auto text-center">
            <p class="large text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Contact -->
    <section id="contact">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center">
            <h2 class="section-heading">Contact Us</h2>
            <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <form id="contactForm" name="sentMessage" novalidate>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <input class="form-control" id="name" type="text" placeholder="Your Name *" required data-validation-required-message="Please enter your name.">
                    <p class="help-block text-danger"></p>
                  </div>
                  <div class="form-group">
                    <input class="form-control" id="email" type="email" placeholder="Your Email *" required data-validation-required-message="Please enter your email address.">
                    <p class="help-block text-danger"></p>
                  </div>
                  <div class="form-group">
                    <input class="form-control" id="phone1" type="tel" placeholder="Your Phone *" required data-validation-required-message="Please enter your phone number.">
                    <p class="help-block text-danger"></p>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <textarea class="form-control" id="message" placeholder="Your Message *" required data-validation-required-message="Please enter a message."></textarea>
                    <p class="help-block text-danger"></p>
                  </div>
                </div>
                <div class="clearfix"></div>
                <div class="col-lg-12 text-center">
                  <div id="success"></div>
                  <button id="sendMessageButton" class="btn btn-xl" type="submit">Send Message</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer>
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <span class="copyright">Copyright &copy; Your Website 2017</span>
          </div>
          <div class="col-md-4">
            <ul class="list-inline social-buttons">
              <li class="list-inline-item">
                <a href="#">
                  <i class="fa fa-twitter"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fa fa-facebook"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fa fa-linkedin"></i>
                </a>
              </li>
            </ul>
          </div>
          <div class="col-md-4">
            <ul class="list-inline quicklinks">
              <li class="list-inline-item">
                <a href="#">Privacy Policy</a>
              </li>
              <li class="list-inline-item">
                <a href="#">Terms of Use</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>

  <!-- Modal 1 -->
  <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
          <div class="lr">
            <div class="rl"></div>
          </div>
        </div>
        <div class="container">
          <div class="row">
            <div class="col-lg-8 mx-auto">
              <div class="modal-body">
                <!-- Project Details Go Here -->
                <h2></h2>
                    <div class="formArea">
                    <form id="form" class="form" method="post" action="/process" enctype="application/x-www-form-urlencoded">
                      <p class="formTitle">Оставте заявку либо свяжитесь с нами через Telegram</p>
                      <p class="msgs"></p>

                      <fieldset class="form-fieldset ui-input __first">
                        <input name="name" type="text" id="username" tabindex="0" autocomplete="off"/>
                        <label for="username">
                          <span data-text="Введите ваше имя">Введите ваше имя</span>
                        </label>
                      </fieldset>

                      <fieldset class="form-fieldset ui-input __second">
                        <input name="phone" type="tel" id="phone" tabindex="0" pattern="^[ 0-9]+$" autocomplete="off"/>
                        <label for="phone">
                          <span data-text="Введите ваш телефон">Введите ваш телефон</span>
                        </label>
                      </fieldset>

                      <fieldset class="form-fieldset ui-input __third">
                        <textarea name="messages" id="messages" rows="3" tabindex="0"></textarea>
                        <label for="messages">
                          <span data-text="Введите сообщение">Введите сообщение</span>
                        </label>
                      </fieldset>

                      <div class="form-footer">
                        <input type="submit" class="formBtn" value="Отправить" />
                      </div>
                      <p class="formCreator"><a href="http://intodevops.tk">intodevops.tk</a></p>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/popper/popper.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Contact form JavaScript -->
    <script src="js/jqBootstrapValidation.js"></script>
    <script src="js/contact_me.js"></script>

    <!-- Custom scripts for this template -->
    <script src="js/agency.min.js"></script>
    <script src="js/owl.carousel.js"></script>
    <script src="js/form.js"></script>
  </body>

</html>

{'fraction_non_alphanumeric': 0.14985700667302193, 'fraction_numerical': 0.010148859719879739, 'mean_word_length': 1.4803928701345943, 'pattern_counts': {'":': 0, '<': 1801, '<?xml version=': 0, '>': 1801, 'https://': 8, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 20, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5860806', 'n_tokens_mistral': 21210, 'n_tokens_neox': 20899, 'n_words': 4349}