//= header.html

  <div class="container">
    <div class="row">
      <div class="col">
        <h3 class="headline_elements">Хлебные крошки</h3>
          <div class="breadcrumbs">
            <span class="breadcrumbs__item"><a href="#">Главная</a></span>
            <span class="breadcrumbs__arrow">&gt;</span>
            <span class="breadcrumbs__item"><a href="#">Свет</a></span>
            <span class="breadcrumbs__arrow">&gt;</span>
            <span class="breadcrumbs__item"><a href="#tessst">Студийный свет</a></span>
            <span class="breadcrumbs__arrow">&gt;</span>
            <span class="breadcrumbs__item">Logocam BL-1000</span>
          </div>
      </div>
    </div>
  </div>

  <hr>

  <div class="container">
    <div class="row">
      <div class="col">
        <h3 class="headline_elements">Уведомления</h3>
        <div class="alert alert-primary" role="alert">
          Это обычное уведомление. Это <a href="#" class="alert-link">ссылка для такого уведомления.</a>
        </div>
        <div class="alert alert-success" role="alert">
          Ваше сообщение было успешно отправлено. Это <a href="#" class="alert-link">ссылка для такого уведомления.</a>
        </div>
        <div class="alert alert-danger" role="alert">
          Во время отправки сообщения произошла ошибка. Это <a href="#" class="alert-link">ссылка для такого уведомления.</a>
        </div>
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
          <strong>Жирное сообщение!</strong> И его можно закрыть.
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="alert alert-success alert-dismissible">
          <button type="button" class="close" data-dismiss="alert">&times;</button>
          <strong>Жирное сообщение!</strong> И его можно закрыть.
        </div>
      </div>
    </div>
  </div>

  <hr>

  <div class="container">
    <div class="row">
      <div class="col">
        <h3 class="headline_elements">Кнопки</h3>
      </div>
      <div class="w-100"></div>
      <div class="col-sm">
        <a href="#" class="button button_primary"><span>Почему нас выбирают<br>даже самые придирчивые<br>клиенты</span></a>
      </div>
      <div class="col-sm">
        <a href="#" class="button button_secondary"><span>Зарегистрируйтесь прямо сейчас</span></a>
      </div>
      <div class="col-sm">
        <a href="#" class="button button_additional"><span>Кнопка</span></a>
      </div>
      <div class="w-100"></div>
      <div class="col">
        <div class="element element_background">
          <a href="#" class="button button_primary button_background"><span>Кнопка на темном фоне</span></a>
        </div>
      </div>
    </div>
  </div>

  <hr>

  <div class="container">
    <div class="row">
      <div class="col">
        <h3 class="headline_elements">Промо-блоки на главной странице</h3>
      </div>
      <div class="w-100"></div>
      <div class="col-sm">
        <section class="promo-block promo-block_front" style="background-image: url('images/promo-block-front.jpg');">
          <div class="promo-block__content">
              <span class="promo-block__subtitle">Скидки до 25%</span>
              <h1 class="promo-block__title">Распродажа</h1>
              <p class="promo-block__description">Лучшие ценовые предложения месяца</p>
              <a href="#" class="button button_primary button_background promo-block__button"><span>Смотреть</span></a>
          </div>
        </section>
      </div>
      <div class="col-sm"></div>
    </div>
  </div>

  <hr>

  <div class="container">
    <div class="row">
      <div class="col">
        <h3 class="headline_elements">Контейнер с 4 иконками</h3>
      </div>
    </div>
  </div>

  <section class="block-space block-space_icon" data-parallax="scroll" data-image-src="images/icon-space-bg.jpg">
    <div class="container">
      <div class="row">

        <div class="col-md-6 col-lg-3">
          <div class="block-space__item">
            <div class="block-space__icon" style="background-image: url('images/icons/ribbon.svg');"></div>
            <p class="block-space__title">Эксклюзивные бренды</p>
            <p class="block-space__description">Cras mattis iudicium purus sit amet fermentum at nos hinc posthac, sitientis piros afros. </p>
          </div>
        </div>

        <div class="col-md-6 col-lg-3">
          <div class="block-space__item">
            <div class="block-space__icon" style="background-image: url('images/icons/target.svg');"></div>
            <p class="block-space__title">Эксклюзивные бренды</p>
            <p class="block-space__description">Cras mattis iudicium purus sit amet fermentum at nos hinc posthac, sitientis piros afros. </p>
          </div>
        </div>

        <div class="col-md-6 col-lg-3">
          <div class="block-space__item">
            <div class="block-space__icon" style="background-image: url('images/icons/podium.svg');"></div>
            <p class="block-space__title">Эксклюзивные бренды</p>
            <p class="block-space__description">Cras mattis iudicium purus sit amet fermentum at nos hinc posthac, sitientis piros afros. </p>
          </div>
        </div>

        <div class="col-md-6 col-lg-3">
          <div class="block-space__item">
            <div class="block-space__icon" style="background-image: url('images/icons/support.svg');"></div>
            <p class="block-space__title">Эксклюзивные бренды</p>
            <p class="block-space__description">Cras mattis iudicium purus sit amet fermentum at nos hinc posthac, sitientis piros afros. </p>
          </div>
        </div>

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

  <hr>

  <div class="container">
    <div class="row">
      <div class="col">
        <h3 class="headline_elements">Контейнер с 4 счетчиками</h3>
      </div>
    </div>
  </div>

  <section class="block-space block-space_number" data-parallax="scroll" data-image-src="images/number-space-bg.jpg">
    <div class="container">
      <div class="row">

        <div class="col-md-6 col-lg-3">
          <div class="block-space__item">
            <h1 class="block-space__number">18</h1>
            <p class="block-space__title">Лет работы</p>
            <p class="block-space__description">Работаем с 2000 года</p>
          </div>
        </div>

        <div class="col-md-6 col-lg-3">
          <div class="block-space__item">
            <h1 class="block-space__number">120</h1>
            <p class="block-space__title">Официальных дилеров</p>
            <p class="block-space__description">Имеем широкую дилерскую сеть</p>
          </div>
        </div>

        <div class="col-md-6 col-lg-3">
          <div class="block-space__item">
            <h1 class="block-space__number">360</h1>
            <p class="block-space__title">Видов оборудования</p>
            <p class="block-space__description">Имеем широкую дилерскую сеть</p>
          </div>
        </div>

        <div class="col-md-6 col-lg-3">
          <div class="block-space__item">
            <h1 class="block-space__number">50000</h1>
            <p class="block-space__title">Довольных клиентов</p>
            <p class="block-space__description">Имеем широкую дилерскую сеть</p>
          </div>
        </div>

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

  <hr>

  <!-- TODO: Убери класс element и data-элемент -->
  <div class="container element" data-smooth-bg="0.3">
    <div class="row">
      <div class="col">
        <h3 class="headline_elements">Пагинация</h3>
      </div>
      <div class="w-100"></div>
      <div class="col">
        <!-- Пагинация "Загрузить ещё" -->
        <div class="pagination pagination_loadmore">
          <div class="pagination__button pagination__button_load">Показать ещё <span class="pagination__load-number">12</span></div>
        </div>
        <!-- конец пагинации -->
      </div>
    </div>
    <div class="row">
      <div class="col">
        <!-- Пагинация классическая -->
        <div class="pagination pagination_classic">
          <span class="pagination__button pagination__button_disabled pagination__button_prev d-none d-md-block"><i class="icon icon-pagination-left"></i> Назад</span>
          <div class="pagination__pages">
            <a href="#" class="pagination__button pagination__button_page pagination__button_active">1</a>
            <a href="#" class="pagination__button pagination__button_page">2</a>
            <span href="#" class="pagination__dots">...</span>
            <a href="#" class="pagination__button pagination__button_page">5</a>
          </div>
          <span class="pagination__button pagination__button_next d-none d-md-block">Вперёд <i class="icon icon-pagination-right"></i></span>
        </div>
        <!-- конец пагинации -->
      </div>
    </div>
    <div class="row">
      <div class="col">
        <!-- Пагинация внутри новостей -->
        <div class="pagination pagination_classic pagination_classic_inner">
          <span class="pagination__button pagination__button_prev d-none d-md-block"><i class="icon icon-pagination-left"></i> Предыдущая новость</span>
          <span class="pagination__button pagination__button_next d-none d-md-block">Следующая новость <i class="icon icon-pagination-right"></i></span>
        </div>
        <!-- конец пагинации -->
      </div>
    </div>
  </div>

  <hr>

  <div id="tessst" class="container mb-12">
    <div class="row">
      <div class="col-12">
        <h3>Формы</h3>
      </div>
      <div class="col-12">
        <div class="col-md-8 order-md-1">
          <h4 class="mb-3">Billing address</h4>
          <form class="needs-validation" novalidate="">
            <div class="row">
              <div class="col-md-6 mb-3">
                <label for="firstName">First name</label>
                <input type="text" class="form-control" id="firstName" placeholder="" value="" required="" style="background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==');
                background-repeat: no-repeat;
                background-attachment: scroll;
                background-size: 16px 18px;
                background-position: 98% 50%;">
                <div class="invalid-feedback">
                  Valid first name is required.
                </div>
              </div>
              <div class="col-md-6 mb-3">
                <label for="lastName">Last name</label>
                <input type="text" class="form-control" id="lastName" placeholder="" value="" required="">
                <div class="invalid-feedback">
                  Valid last name is required.
                </div>
              </div>
            </div>
    
            <div class="mb-3">
              <label for="username">Username</label>
              <div class="input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text">@</span>
                </div>
                <input type="text" class="form-control" id="username" placeholder="Username" required="">
                <div class="invalid-feedback" style="width: 100%;">
                  Your username is required.
                </div>
              </div>
            </div>
    
            <div class="mb-3">
              <label for="email">Email <span class="text-muted">(Optional)</span></label>
              <input type="email" class="form-control" id="email" placeholder="you@example.com">
              <div class="invalid-feedback">
                Please enter a valid email address for shipping updates.
              </div>
            </div>
    
            <div class="mb-3">
              <label for="address">Address</label>
              <input type="text" class="form-control" id="address" placeholder="1234 Main St" required="">
              <div class="invalid-feedback">
                Please enter your shipping address.
              </div>
            </div>
    
            <div class="mb-3">
              <label for="address2">Address 2 <span class="text-muted">(Optional)</span></label>
              <input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
            </div>
    
            <div class="row">
              <div class="col-md-5 mb-3">
                <label for="country">Country</label>
                <select class="custom-select d-block w-100" id="country" required="">
                  <option value="">Choose...</option>
                  <option>United States</option>
                </select>
                <div class="invalid-feedback">
                  Please select a valid country.
                </div>
              </div>
              <div class="col-md-4 mb-3">
                <label for="state">State</label>
                <select class="custom-select d-block w-100" id="state" required="">
                  <option value="">Choose...</option>
                  <option>California</option>
                </select>
                <div class="invalid-feedback">
                  Please provide a valid state.
                </div>
              </div>
              <div class="col-md-3 mb-3">
                <label for="zip">Zip</label>
                <input type="text" class="form-control" id="zip" placeholder="" required="">
                <div class="invalid-feedback">
                  Zip code required.
                </div>
              </div>
            </div>
            <hr class="mb-4">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="same-address">
              <label class="custom-control-label" for="same-address">Shipping address is the same as my billing address</label>
            </div>
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="save-info">
              <label class="custom-control-label" for="save-info">Save this information for next time</label>
            </div>
            <hr class="mb-4">
    
            <h4 class="mb-3">Payment</h4>
    
            <div class="d-block my-3">
              <div class="custom-control custom-radio">
                <input id="credit" name="paymentMethod" type="radio" class="custom-control-input" checked="" required="">
                <label class="custom-control-label" for="credit">Credit card</label>
              </div>
              <div class="custom-control custom-radio">
                <input id="debit" name="paymentMethod" type="radio" class="custom-control-input" required="">
                <label class="custom-control-label" for="debit">Debit card</label>
              </div>
              <div class="custom-control custom-radio">
                <input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" required="">
                <label class="custom-control-label" for="paypal">PayPal</label>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6 mb-3">
                <label for="cc-name">Name on card</label>
                <input type="text" class="form-control" id="cc-name" placeholder="" required="">
                <small class="text-muted">Full name as displayed on card</small>
                <div class="invalid-feedback">
                  Name on card is required
                </div>
              </div>
              <div class="col-md-6 mb-3">
                <label for="cc-number">Credit card number</label>
                <input type="text" class="form-control" id="cc-number" placeholder="" required="">
                <div class="invalid-feedback">
                  Credit card number is required
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-3 mb-3">
                <label for="cc-expiration">Expiration</label>
                <input type="text" class="form-control" id="cc-expiration" placeholder="" required="">
                <div class="invalid-feedback">
                  Expiration date required
                </div>
              </div>
              <div class="col-md-3 mb-3">
                <label for="cc-cvv">CVV</label>
                <input type="text" class="form-control" id="cc-cvv" placeholder="" required="">
                <div class="invalid-feedback">
                  Security code required
                </div>
              </div>
            </div>
            <hr class="mb-4">
            <button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
          </form>
        </div>
      </div>
    </div>
  </div>





  <div class="container">
    <div class="row">
      <div class="col-12">
        <h3>Collapse</h3>
      </div>
      <div class="col-12">
        <p>
          <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            Link with href
          </a>
          <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            Button with data-target
          </button>
        </p>
        <div class="collapse" id="collapseExample">
          <div class="card card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
          </div>
        </div>
      </div>
    </div>
  </div>





  //= footer.html