index.html 8.2 KB
<!DOCTYPE html>
<html>
  <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="stylesheet" href="bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <title>KrystalVPN</title>
  </head>
  <body>
    <header class="d-flex justify-content-center py-3">
      <ul class="nav nav-pills">
        <li class="nav-item">
          <img src="assets/krystal_logo.svg" alt="krystal header" />
          <span class="header_title-one">krystal</span>
          <span class="header_title-two">vpn</span>
        </li>
        <li class="nav-item detailed">
          <div class="dropdown">
            <div class="chevron"></div>
            <div
              class="btn lng-switcher"
              id="langSwitcher"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
              onclick="openLang()"
            >
              Русский
            </div>
            <div class="dropdown-menu" aria-labelledby="langSwitcher">
              <span
                class="dropdown-item active"
                data-lang="ru"
                onclick="switchLang('ru')"
                >Русский</span
              >
              <span
                class="dropdown-item"
                data-lang="en"
                onclick="switchLang('en')"
                >English</span
              >
            </div>
          </div>

          <button type="button" data-lang="download" class="btn download" onclick="do_download()">
            Скачать KRYSTALVPN
          </button>
        </li>
      </ul>
    </header>

    <div class="main">
      <div class="main-first">
        <div class="card bcg-one">
          <img src="./assets/background_1.svg" alt="background image one" />
        </div>
        <div class="card descr">
          <div class="descr-top">
            <div class="descr-top__title-top" data-lang="truely">
              Открой для себя по-настоящему
            </div>
            <div class="descr-top__title-bottom">
              <span class="title__colored" data-lang="fast">быстрый и безопасный</span>
              <span class="title__uncolored" data-lang="vpn-service">VPN сервис</span>
            </div>
          </div>
          <div class="descr-bottom">
            <div class="row-data">
              <div class="img-wrapper">
                <img src="./assets/planet.svg" alt="description logo" />
              </div>
              <div class="d-card-wrapper">
                <div class="d-card-wrapper__title" data-lang="world-points">
                  Защищенный доступ в любой точке мира
                </div>
                <div class="d-card-wrapper__content" data-lang="servers">
                  Надежное подключение к виртуальной частной сети (ВПН) из любой
                  точки мира. Наши высокоскоростные серверы в 94 странах помогут
                  вам взять контроль в свои руки.
                </div>
              </div>
            </div>
            <div class="row-data">
              <div class="img-wrapper">
                <img src="./assets/speed.svg" alt="description logo" />
              </div>
              <div class="d-card-wrapper">
                <div class="lng d-card-wrapper__title" data-lang="speed">
                  Высокая скорость везде и всегда
                </div>
                <div class="d-card-wrapper__content" data-lang="details">
                  Наша VPN-сеть создана для скорости и использует технологии
                  нового поколения.
                </div>
              </div>
            </div>
            <div class="row-data">
              <div class="img-wrapper">
                <img src="./assets/safe.svg" alt="description logo" />
              </div>
              <div class="d-card-wrapper">
                <div class="d-card-wrapper__title" data-lang="safety">
                  Безопасный Интернет за пару секунд
                </div>
                <div class="d-card-wrapper__content" data-lang="description">
                  Использование Интернета не означает, что все должны видеть
                  ваши личные данные. Совершаете ли вы покупки онлайн или
                  подключаетесь к Wi-Fi в кафе, вы можете обеспечить более
                  серьезную защиту своей персональной информации
                </div>
              </div>
            </div>
            <div class="row-data">
              <div class="img-wrapper">
                <img src="./assets/cashback.svg" alt="description logo" />
              </div>
              <div class="d-card-wrapper">
                <div class="d-card-wrapper__title" data-lang="guarantees">
                  Гарантия возврата денег 30 дней
                </div>
                <div class="d-card-wrapper__content" data-lang="our-service">
                  Наш VPN-сервис прост в использовании. Как и наша гарантия.
                  Если вам что-то не нравится, мы вернем ваши деньги. Никаких
                  вопросов, никакого риска
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main-second">
        <div class="card descr">
          <div class="third-description-wrapper">
            <div class="third-top-title" data-lang="can-use">
              Можно использовать
            </div>
            <span class="third-top-second" data-lang="all-devs">на всех устройствах</span>
          </div>

          <article class="notation-one" data-lang="subscribes">
            Оформив подписку на Krystal VPN, вы получите удобные приложения для всех ваших устройств, включая телефоны, планшеты,
            компьютеры, роутеры и многие другие девайсы.
          </article>

          <div class="gp-wrapper">
            <img src="./assets/google_play.svg" alt="google play">
          </div>

          <div class="gp-code-wrapper">
            <img src="./assets/code.svg" alt="google play code">
          </div>

          <div class="gp-link">
            https://play.google.com/store/apps/details?id=tw.mobileapp.qrcode.banner&hl=ru&gl=US
          </div>
        </div>
        <div class="card bcg-two">
          <img src="./assets/background_2.svg" alt="background image two" />
        </div>
      </div>
      <div class="main-third">
        <div class="main-third__title" data-lang="support-onl">
          Наши специалисты доступны 24/7 в онлайн-чате и по электронной почте,
          чтобы помочь вам с установкой и устранением неполадок.
        </div>

        <div class="support-btn">
          <button type="button" data-lang="support" class="btn support" onclick="do_support()">
            Связаться с нами
          </button>
        </div>
      </div>
    </div>

    <footer class="footer">
      <div class="text-center first">
        <img src="assets/krystal_logo.svg" alt="krystal footer" />
        <span class="footer_title-one">krystal</span>
        <span class="footer_title-two">vpn</span>
      </div>
      <div class="text-center second">
        &copy;
        <span class="year"></span>
        <span data-lang="rights">Все права защищены.</span>
      </div>
    </footer>
    <script src="bootstrap.min.js"></script>
    <script src="lang.js"></script>
    <script src="index.js"></script>
  </body>
</html>