index.html

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/fontello.css">
  <link rel="stylesheet" href="css/style.css">
  <title>Видео курс по вёрстке</title>
</head>

<body>
  <!-- Шапка -->
  <header>
    <div class="container">
      <div class="row">
        <div class="col-12">
          <h1 class="text-center text-white">Видео курс по вёрстке для начинающих HTML & CSS</h1>
          <div class="itd_play" data-bs-toggle="modal" data-bs-target="#exampleModal">
            <div class="itd_triangle"></div>
          </div>
          <a href="#footer" class="btn btn-itd btn-lg text-uppercase">Заказать</a>
        </div>
      </div>
    </div>
  </header>
  <!-- О курсе -->
  <section class="about">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <h2 class="text-center text-uppercase color1 mb-5">О курсе</h2>
        </div>
      </div>
      <div class="row">
        <div class="col-xl-4 col-md-6 col-sm-12">
          <div class="itd_circle"><i class="icon-list-numbered"></i></div>
          <h5 class="text-center">Структурированный материал</h5>
          <div class="line"></div>
        </div>
        <div class="col-xl-4 col-md-6 col-sm-12">
          <div class="itd_circle"><i class="icon-rouble"></i></div>
          <h5 class="text-center">Символическая цена</h5>
          <div class="line"></div>
        </div>
        <div class="col-xl-4 col-md-6 col-sm-12">
          <div class="itd_circle"><i class="icon-chart-bar"></i></div>
          <h5 class="text-center">Пожизненный доступ</h5>
          <div class="line"></div>
        </div>
        <div class="col-xl-4 col-md-6 col-sm-12">
          <div class="itd_circle"><i class="icon-code"></i></div>
          <h5 class="text-center">Практические задания</h5>
          <div class="line"></div>
        </div>
        <div class="col-xl-4 col-md-6 col-sm-12">
          <div class="itd_circle"><i class="icon-file-video"></i></div>
          <h5 class="text-center">35 видео уроков (5 часов)</h5>
          <div class="line"></div>
        </div>
        <div class="col-xl-4 col-md-6 col-sm-12">
          <div class="itd_circle"><i class="icon-mobile"></i></div>
          <h5 class="text-center">Просмотр со смартфона</h5>
          <div class="line"></div>
        </div>
      </div>
    </div>
  </section>
  <!-- Для кого курс -->
  <section class="forwhom">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <h2 class="text-center text-uppercase color2 mb-5">Курс для тех, кто</h2>
        </div>
      </div>
      <div class="row mb-5">
        <div class="col-md-6 col-sm-12">
          <h5 class="text-center">Хочет научиться создавать сайты своими силами</h5>
        </div>
        <div class="col-md-6 col-sm-12">
          <h5 class="text-center">Учится современным инструментам разработки</h5>
        </div>
        <div class="col-md-6 col-sm-12">
          <h5 class="text-center">Еще не знает язык HTML и CSS, но хочет выучить</h5>
        </div>
        <div class="col-md-6 col-sm-12">
          <h5 class="text-center">Хочет стать крутым мастером и зарабатывать деньги</h5>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <a href="#footer" class="btn btn-itd btn-lg text-uppercase">Заказать</a>
        </div>
      </div>
    </div>
  </section>
  <!-- Программа курса -->
  <section class="schedule">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <h2 class="text-center text-uppercase color1 mb-3">Программа курса</h2>
        </div>
      </div>
      <div class="row">
        <!-- Первый столбец -->
        <div class="col-md-4 col-sm-12">
          <h4 class="text-center fw-bold mb-3 mt-3">Модуль 1<br>(HTML)</h4>
          <!-- 1 аккордион -->
          <div class="accordion accordion-flush" id="accordion1">
            <!-- Открытый элемент -->
            <div class="accordion-item">
              <h2 class="accordion-header" id="heading1">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1"
                  aria-expanded="true" aria-controls="collapse1">Введение</button>
              </h2>
              <div id="collapse1" class="accordion-collapse collapse show" aria-labelledby="heading1"
                data-bs-parent="#accordion1">
                <div class="accordion-body fst-italic">Краткий обзор того, что мы будем изучать в данном видео курсе.
                </div>
              </div>
            </div>
            <!-- Закрытые элементы -->
            <div class="accordion-item">
              <h2 class="accordion-header" id="heading2">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2">Установка браузера и
                  редактора кода</button>
              </h2>
              <div id="collapse2" class="accordion-collapse collapse" aria-labelledby="heading2"
                data-bs-parent="#accordion1">
                <div class="accordion-body fst-italic">В этом уроке мы установим браузер Google Chrome и редактор кода
                  VS Code.</div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header fst-italic" id="heading3">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3">Обзор функций
                  редактора</button>
              </h2>
              <div id="collapse3" class="accordion-collapse collapse" aria-labelledby="heading3"
                data-bs-parent="#accordion1">
                <div class="accordion-body fst-italic">Рассмотрим функции редактора VS Code и узнаем как с ним работать.
                </div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="heading4">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse4" aria-expanded="false" aria-controls="collapse4">Первые HTML теги</button>
              </h2>
              <div id="collapse4" class="accordion-collapse collapse" aria-labelledby="heading4"
                data-bs-parent="#accordion1">
                <div class="accordion-body fst-italic">Выучим свои первые HTML теги, с помощью которых и создаются любые
                  сайты.</div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="heading5">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse5" aria-expanded="false" aria-controls="collapse5">Как задавать путь к
                  файлу</button>
              </h2>
              <div id="collapse5" class="accordion-collapse collapse" aria-labelledby="heading5"
                data-bs-parent="#accordion1">
                <div class="accordion-body fst-italic">Научимся правильно указывать путь к файлам изображений и другим
                  страницам сайта.</div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="heading6">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse6" aria-expanded="false" aria-controls="collapse6">Создание списка</button>
              </h2>
              <div id="collapse6" class="accordion-collapse collapse" aria-labelledby="heading6"
                data-bs-parent="#accordion1">
                <div class="accordion-body fst-italic">Научимся создавать списки на своем сайте.</div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="heading7">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse7" aria-expanded="false" aria-controls="collapse7">Создание таблиц</button>
              </h2>
              <div id="collapse7" class="accordion-collapse collapse" aria-labelledby="heading7"
                data-bs-parent="#accordion1">
                <div class="accordion-body fst-italic">В этом уроке мы рассмотри, как создавать таблицы на языке HTML.
                </div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="heading8">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse8" aria-expanded="false" aria-controls="collapse8">Работа с текстом</button>
              </h2>
              <div id="collapse8" class="accordion-collapse collapse" aria-labelledby="heading8"
                data-bs-parent="#accordion1">
                <div class="accordion-body fst-italic">В этом видео уроке мы узнаем, как работать с текстом.</div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="heading9">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse9" aria-expanded="false" aria-controls="collapse9">Создание формы</button>
              </h2>
              <div id="collapse9" class="accordion-collapse collapse" aria-labelledby="heading9"
                data-bs-parent="#accordion1">
                <div class="accordion-body fst-italic">Научимся создавать формы для ввода текста, флажки и кнопки.</div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="heading10">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse10" aria-expanded="false" aria-controls="collapse10">Универсальные
                  атрибуты</button>
              </h2>
              <div id="collapse10" class="accordion-collapse collapse" aria-labelledby="heading10"
                data-bs-parent="#accordion1">
                <div class="accordion-body fst-italic">Рассмотрим универсальные атрибуты, которые можно добавлять любому
                  HTML тегу.</div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="heading11">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse11" aria-expanded="false" aria-controls="collapse11">Цвет RGB и
                  спецсимволы</button>
              </h2>
              <div id="collapse11" class="accordion-collapse collapse" aria-labelledby="heading11"
                data-bs-parent="#accordion1">
                <div class="accordion-body fst-italic">Научимся работать с RGB цветом и добавлять специальные символы на
                  свой сайт.</div>
              </div>
            </div>

          </div>
          <!-- Конец 1 аккордиона -->
        </div>
        <!-- Второй толбец -->
        <div class="col-md-4 col-sm-12">
          <h4 class="text-center fw-bold mb-3 mt-3">Модуль 2<br>(CSS)</h4>

          <!-- 2 аккордион -->
          <div class="accordion accordion-flush" id="accordion2">
            <!-- Открытый элемент -->
            <div class="accordion-item">
              <h2 class="accordion-header" id="heading12">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse12"
                  aria-expanded="true" aria-controls="collapse12">CSS селекторы</button>
              </h2>
              <div id="collapse12" class="accordion-collapse collapse show" aria-labelledby="heading12"
                data-bs-parent="#accordion2">
                <div class="accordion-body fst-italic">Рассмотрим основные CSS селекторы, узнаем что это такое и зачем
                  они нужны.</div>
              </div>
            </div>
            <!-- Закрытые элементы -->
            <div class="accordion-item">
              <h2 class="accordion-header" id="heading13">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse13" aria-expanded="false" aria-controls="collapse13">Работа с
                  изображениями</button>
              </h2>
              <div id="collapse13" class="accordion-collapse collapse" aria-labelledby="heading13"
                data-bs-parent="#accordion2">
                <div class="accordion-body fst-italic">Научимся работать с изображениями на языке CSS.</div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header fst-italic" id="heading14">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse14" aria-expanded="false" aria-controls="collapse14">Границы</button>
              </h2>
              <div id="collapse14" class="accordion-collapse collapse" aria-labelledby="heading14"
                data-bs-parent="#accordion2">
                <div class="accordion-body fst-italic">В этом уроке мы научимся создавать границы вокруг любого элемента
                  на сайте и стилизовать их.</div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="heading15">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse15" aria-expanded="false" aria-controls="collapse15">Размеры
                  элементов</button>
              </h2>
              <div id="collapse15" class="accordion-collapse collapse" aria-labelledby="heading15"
                data-bs-parent="#accordion2">
                <div class="accordion-body fst-italic">Разберемся, как изменять размеры элементов на странице с помощью
                  CSS.</div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="heading16">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse16" aria-expanded="false" aria-controls="collapse16">Работа с
                  шрифтом</button>
              </h2>
              <div id="collapse16" class="accordion-collapse collapse" aria-labelledby="heading16"
                data-bs-parent="#accordion2">
                <div class="accordion-body fst-italic">Научимся работать со шрифтами. Установим свой шрифт на сайт.
                </div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="heading17">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse17" aria-expanded="false" aria-controls="collapse17">Блочная модель
                  документа</button>
              </h2>
              <div id="collapse17" class="accordion-collapse collapse" aria-labelledby="heading17"
                data-bs-parent="#accordion2">
                <div class="accordion-body fst-italic">В этом уроке мы поговорим про блочную модель документа и научимся
                  пользоваться блочной моделью.</div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="heading18">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse18" aria-expanded="false" aria-controls="collapse18">Псевдоклассы и
                  псевдоэлементы</button>
              </h2>
              <div id="collapse18" class="accordion-collapse collapse" aria-labelledby="heading18"
                data-bs-parent="#accordion2">
                <div class="accordion-body fst-italic">Псевдоклассы и псевдоэлементы на языке CSS позволяют расширять
                  основные возможности языка, которые мы уже выучили.</div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="heading19">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse19" aria-expanded="false" aria-controls="collapse19">CSS Flexbox</button>
              </h2>
              <div id="collapse19" class="accordion-collapse collapse" aria-labelledby="heading19"
                data-bs-parent="#accordion2">
                <div class="accordion-body fst-italic">В этом уроке мы изучим базовые приемы Flexbox верстки и будем
                  применять их в следующем модуле.</div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="heading20">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse20" aria-expanded="false" aria-controls="collapse20">Адаптивная версия
                  сайта</button>
              </h2>
              <div id="collapse20" class="accordion-collapse collapse" aria-labelledby="heading20"
                data-bs-parent="#accordion2">
                <div class="accordion-body fst-italic">В этом уроке мы будем учиться создавать адаптивную сетку на CSS.
                  Так же научимся работать с переменными и функцией calc. Узнаем, как создавать медиа-запросы, чтобы
                  сделать адаптивную версию своего сайта для мобильных устройств. Научимся создавать макет с
                  12-колончатой сеткой в Photoshop, сравним нашу сетку с сеткой Bootstrap 5, а так же научимся её
                  подключать и узнаем как проверять свой сайт на эмуляторе мобильных устроств прямо с браузера на ПК.
                </div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="heading21">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse21" aria-expanded="false" aria-controls="collapse21">Домашнее
                  задание</button>
              </h2>
              <div id="collapse21" class="accordion-collapse collapse" aria-labelledby="heading21"
                data-bs-parent="#accordion2">
                <div class="accordion-body fst-italic">Задание для практики по теме 'создание адаптивной сетки на CSS'.
                </div>
              </div>
            </div>

          </div>
          <!-- Конец 2 аккордиона -->
        </div>
        <!-- Третий столбец -->
        <div class="col-md-4 col-sm-12">
          <h4 class="text-center fw-bold mb-3 mt-3">Модуль 3<br>(Практика)</h4>
          <!-- 3 аккордион -->
          <div class="accordion accordion-flush" id="accordion3">
            <!-- Открытый элемент -->
            <div class="accordion-item">
              <h2 class="accordion-header" id="heading22">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse22"
                  aria-expanded="true" aria-controls="collapse22">Верстка меню сайта</button>
              </h2>
              <div id="collapse22" class="accordion-collapse collapse show" aria-labelledby="heading22"
                data-bs-parent="#accordion3">
                <div class="accordion-body fst-italic">Урок, в котором мы будем верстать фрагмент современного сайта,
                  используя все полученные ранее знания.</div>
              </div>
            </div>
            <!-- Закрытые элементы -->
            <div class="accordion-item">
              <h2 class="accordion-header" id="heading23">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse23" aria-expanded="false" aria-controls="collapse23">Домашнее
                  задание</button>
              </h2>
              <div id="collapse23" class="accordion-collapse collapse" aria-labelledby="heading23"
                data-bs-parent="#accordion3">
                <div class="accordion-body fst-italic">Домашнее задание для закрепления изученного материала в
                  предыдущем уроке.</div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header fst-italic" id="heading24">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse24" aria-expanded="false" aria-controls="collapse24">Верстке фрагмента
                  сайта</button>
              </h2>
              <div id="collapse24" class="accordion-collapse collapse" aria-labelledby="heading24"
                data-bs-parent="#accordion3">
                <div class="accordion-body fst-italic">Урок, в котором мы будем верстать фрагмент современного сайта,
                  используя все полученные ранее знания.</div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="heading25">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse25" aria-expanded="false" aria-controls="collapse25">Домашнее
                  задание</button>
              </h2>
              <div id="collapse25" class="accordion-collapse collapse" aria-labelledby="heading25"
                data-bs-parent="#accordion3">
                <div class="accordion-body fst-italic">Домашнее задание для закрепления изученного материала в
                  предыдущем уроке.</div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header fst-italic" id="heading26">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse26" aria-expanded="false" aria-controls="collapse26">Верстке фрагмента
                  сайта</button>
              </h2>
              <div id="collapse26" class="accordion-collapse collapse" aria-labelledby="heading26"
                data-bs-parent="#accordion3">
                <div class="accordion-body fst-italic">Урок, в котором мы будем верстать фрагмент современного сайта,
                  используя все полученные ранее знания.</div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="heading27">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse27" aria-expanded="false" aria-controls="collapse27">Домашнее
                  задание</button>
              </h2>
              <div id="collapse27" class="accordion-collapse collapse" aria-labelledby="heading27"
                data-bs-parent="#accordion3">
                <div class="accordion-body fst-italic">Домашнее задание для закрепления изученного материала в
                  предыдущем уроке.</div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="heading28">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse28" aria-expanded="false" aria-controls="collapse28">Photoshop для
                  верстальщика</button>
              </h2>
              <div id="collapse28" class="accordion-collapse collapse" aria-labelledby="heading28"
                data-bs-parent="#accordion3">
                <div class="accordion-body fst-italic">В этом уроке мы рассмотрим графический редактор Photoshop и
                  научимся основным приемам, которые могут пригодиться верстальщику.</div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header fst-italic" id="heading29">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse29" aria-expanded="false" aria-controls="collapse29">Верстке фрагмента
                  сайта</button>
              </h2>
              <div id="collapse29" class="accordion-collapse collapse" aria-labelledby="heading29"
                data-bs-parent="#accordion3">
                <div class="accordion-body fst-italic">Урок, в котором мы будем верстать фрагмент современного сайта,
                  используя все полученные ранее знания.</div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="heading30">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse30" aria-expanded="false" aria-controls="collapse30">Домашнее
                  задание</button>
              </h2>
              <div id="collapse30" class="accordion-collapse collapse" aria-labelledby="heading30"
                data-bs-parent="#accordion3">
                <div class="accordion-body fst-italic">Домашнее задание для закрепления изученного материала в
                  предыдущем уроке.</div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="heading31">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse31" aria-expanded="false" aria-controls="collapse31">Финальный
                  проект-задание</button>
              </h2>
              <div id="collapse31" class="accordion-collapse collapse" aria-labelledby="heading31"
                data-bs-parent="#accordion3">
                <div class="accordion-body fst-italic">Подведение итогов и финальный проект, который вы сможете
                  выполнить самостоятельно и добавить эту работу себе в портфолио.</div>
              </div>
            </div>

            <div class="accordion-item">
              <h2 class="accordion-header" id="heading32">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse32" aria-expanded="false" aria-controls="collapse32">Бонусы</button>
              </h2>
              <div id="collapse32" class="accordion-collapse collapse" aria-labelledby="heading32"
                data-bs-parent="#accordion3">
                <div class="accordion-body fst-italic">Вы получите все исходные коды к лекциям и домашним заданиям этого
                  модуля, дополнительные материалами, которые будут вам полезны при разработке и ссылки на большое
                  количество проверенных онлайн ресурсов, которые помогут вам при создании сайта.</div>
              </div>
            </div>

          </div>
          <!-- Конец 3 аккордиона -->
        </div>
      </div>
    </div>
  </section>
  <!-- Об авторе -->
  <section class="author">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <h2 class="text-center text-uppercase color1 mb-5">Об авторе</h2>
        </div>
      </div>
      <div class="row">
        <div class="col-xl-9 col-lg-12">
          <h4>Исмаил Усеинов</h4>
          <p>Занимаюсь веб-разработкой с 2013 года.</p>
          <p>В 2017 году основал обучающий YouTube канал ITDoctor. Делюсь своими знаниями в области программирования и
            создания сайтов. Сформировал свою собственную методику обучения, которая позволяет ученикам максимально
            эффективно осваивать изучаемый материал.</p>
          <p>Обучаю языкам HTML, CSS, JavaScript, PHP, работе с препроцессорами, сборщиками и системой контроля версий
            Git, а также многому другому из мира веб-технологий. Уже более тысячи моих учеников научились создавать
            сайты самостоятельно и зарабатывать на этом деньги.</p>
          <p>В этом видео курсе я хочу научить вас основам сайтостроения - это языки HTML и CSS. Эти языки являются
            основой и знать их должен каждый, кто хочет развиваться в этой области. Вы получите знания, которые нужны в
            самом начале пути любого веб-разработчика и будите их использовать на протяжение всего своего пути. Вся
            теоретическая информация разложена по полочкам, доступно объясняется и подкрепляется практическими заданиями
            и домашними работами. Курс намерено не содержит лишней информации, тем самым позволяет лучше освоить
            материал, который действительно важен.</p>
        </div>
        <div class="col-xl-3 col-lg-12 text-center">
          <img src="img/author.png" class="img-fluid itd_img" alt="Исмаил Усеинов">
        </div>
      </div>
    </div>
  </section>
  <!-- Отзывы о курсе -->
  <section class="reviews">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <h2 class="text-center text-uppercase color2 mb-5">Отзывы о курсе</h2>
        </div>
      </div>
      <div class="row justify-content-center">
        <div class="col-lg-4 col-md-6 col-sm-12">
          <img src="img/people.jpg" class="rounded mx-auto d-block" alt="фото">
          <h4 class="text-center mb-3 mt-3">Кристина Трибой</h4>
          <p>Исмаил, спасибо Вам большое! Очень толковый курс у Вас получился, обучение прошло легко и интересно. Узнала
            много нового, отдельное спасибо за большое количество полезной информации в конце, очень пригодится в работе
            и сэкономит много времени. Очень рада, что открыла для себя Ваш канал.</p>
          <p>Мне есть с чем сравнить, т.к. начала обучение с 0 по книгам и другим источникам в интернете 6 месяцев назад
            и уроки на канале ITDoctor могу смело назвать лучшими для новичков. Пересмотрела уже почти все, они очень
            качественные, хорошо продуманные, не затянутые. Автор всегда на связи, отвечает на вопросы, помогает -
            просто фантастика! ITDoctor - это уже бренд! С чем Вас, Исмаил и поздравляю!</p>
          <div class="line bg2"></div>
        </div>
      </div>
    </div>
  </section>
  <!-- Купить -->
  <section class="buy">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <h2 class="text-center text-uppercase color1 mb-5">Курс по HTML & CSS</h2>
        </div>
      </div>
      <div class="row align-items-center justify-content-center">
        <div class="col-lg-6 col-sm-12">
          <img src="img/preview.png" class="img-fluid mx-auto d-block" alt="html+css">
        </div>
        <div class="col-lg-6 col-sm-12">
          <p>Обучающий курс по изучению языка гипертекстовой разметки HTML и каскадных таблиц стилей CSS от автора
            образовательного канала ITDoctor. Это практический видеокурс: в каждой главе теоретический материал будет
            закрепляться множеством наглядных примеров кода.</p>
          <ul>
            <li>35 практических уроков</li>
            <li>Продолжительность 5 часов</li>
            <li>Готовые примеры кода</li>
            <li>Никаких ограничений по времени</li>
            <li>7 домашних заданий</li>
          </ul>
          <a href="https://stepik.org/z/101175" class="btn btn-itd btn-lg text-uppercase" target="_blank">Купить</a>
        </div>
      </div>
    </div>
  </section>
  <!-- Подвал -->
  <footer id="footer">
    <div class="container">
      <div class="row">
        <div class="col-12 text-center">
          <a class="btn btn-outline-light" target="_blank" href="https://www.youtube.com/c/ITDoctor"><i
              class="icon-youtube-play"></i></a>
          <a class="btn btn-outline-light" target="_blank"
            href="mailto:ismail_2016@mail.ru?subject=Вопрос по курсу html+css&body=Здравствуйте, ITDoctor,"><i
              class="icon-mail-alt"></i></a>
          <a class="btn btn-outline-light" target="_blank" href="https://t.me/itdoctorstudio"><i
              class="icon-paper-plane"></i></a>
          <a class="btn btn-outline-light" target="_blank" href="https://vk.com/itdoctorstudio"><i
              class="icon-vkontakte"></i></a>
          <a class="btn btn-outline-light" target="_blank" href="https://instagram.com/ismail_asanovich/"><i
              class="icon-instagram"></i></a>
          <a class="btn btn-outline-light" target="_blank" href="https://github.com/morphIsmail"><i
              class="icon-github-circled"></i></a>
        </div>
      </div>
    </div>
  </footer>
  <!-- Модальное окно -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Трейлер видео курса по HTML и CSS</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class='embed-container'><iframe src='https://www.youtube.com/embed//41tdjZWeCH0' frameborder='0'
              allowfullscreen></iframe></div>
        </div>
      </div>
    </div>
  </div>
  <!-- Скрипты -->
  <script src="js/bootstrap.bundle.min.js"></script>
</body>

</html>