<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Главная</title>
    <link rel="stylesheet" href="lp/css/globals.css">
    <link rel="stylesheet" href="lp/css/header.css">
    <link rel="stylesheet" href="lp/css/footer.css">
    <link rel="stylesheet" href="lp/css/main.css">
    <link rel="stylesheet" href="lp/css/modal.css">
    <link rel="stylesheet" href="lp/css/media.css">

</head>
<body>

<div class="modal-reg">
    <div class="modal-window-reg">
        <button class="modal-close-reg">✕</button>
        <form action="" class="modal-form-reg">
            <h1>Регистрация</h1>
            <input type="text" placeholder="Ваше имя">
            <input type="text" placeholder="Введите вашу почту">
            <input type="text" placeholder="Ваш телефон">
            <button class="modal-submit-reg">Зарегистрироваться</button>
        </form>
    </div>
    <div class="modal-overlay-reg"></div>
</div>

<div class="modal">
    <div class="modal-window">
        <button class="modal-close">✕</button>
        <form action="" class="modal-form">
            <script data-b24-form="inline/9/j1qs3u" data-skip-moving="true">
                (function(w,d,u){
                    let s=d.createElement('script');s.async=true;s.src=u+'?'+(Date.now()/180000|0);
                    let h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);
                })(window,document,'https://cdn-ru.bitrix24.ru/b28048600/crm/form/loader_9.js');
            </script>
        </form>
    </div>
    <div class="modal-overlay"></div>
</div>





<div class="container">
    <div class="header">
        <div class="header-block-up">
            <div class="header-block-logo">
                <div class="header-logo">
                    <a href="https://f3.kz">
                        <img src="img/logo.svg" alt="">
                    </a>
                </div>
            </div>

            <div class="header-block header-search">
                <div class='header-search-block' href="">
                    <img src="img/lupa.svg" alt="lupa">
                    <input placeholder="Поиск по товарам, магазинам, скидкам..." type="text"/>
                </div>
                <ul class="search-list">
                    <li>
                        <a href="lp/category/monoblocks.html">Моноблоки</a>
                    </li>
                    <li>
                        <a href="lp/category/panels.html">Интерактивные панели</a>
                    </li>
                    <li>
                        <a href="lp/category/stoyks.html">Стойки</a>
                    </li>
                    <li>
                        <a href="lp/category/ops.html">OPS</a>
                    </li>
                </ul>
            </div>

            <div class="header-block-login">
                <img src="img/like.svg" alt="">
                <button class="item-btn header-btn2">Связаться</button>
            </div>
        </div>


        <div class="header-links">
            <a href="lp/catalog.html">Каталог</a>
            <a href="lp/juridical.html">Юридическим лицам</a>
            <a href="lp/about.html">О компании</a>
            <a href="lp/contact.html">Контакты</a>
        </div>
    </div>

    <div class="header-mobile">
        <div class="burger">
            <span></span>
        </div>
        <a href="https://f3.kz"><img src="img/logo-mobile.svg" alt=""></a>
        <div class="header-mobile-block">
            <img src="img/mobile-search.svg" alt="" class="header-mobile-search-btn">
            <a href="tel: +77008555082"><img src="img/mobile-call.svg" alt=""></a>
        </div>
    </div>

    <input placeholder="Поиск по товарам, магазинам, скидкам..." type="text" class="header-mobile-search-input"/>
    <ul class="search-list-mobile">
        <li>
            <a href="lp/category/monoblocks.html">Моноблоки</a>
        </li>
        <li>
            <a href="lp/category/panels.html">Интерактивные панели</a>
        </li>
        <li>
            <a href="lp/category/stoyks.html">Стойки</a>
        </li>
        <li>
            <a href="lp/category/ops.html">OPS</a>
        </li>
    </ul>

    <ul class="burger-list">
        <li>
            <img src="img/burger-catalog.svg" alt="">
            <a href="lp/catalog.html">Каталог</a>
        </li>
        <li>
            <img src="img/burger-yr.svg" alt="">
            <a href="lp/juridical.html">Юридическим лицам</a>
        </li>
        <li>
            <img src="img/burger-company.svg" alt="">
            <a href="lp/about.html">О компании</a>
        </li>
        <li>
            <a href="lp/contact.html">Контакты</a>
        </li>
    </ul>


    <div class="intro-start">
        <img src="img/index-arrow.png" class="intro-slider-arrow arrow-right" alt="arrow">
        <img src="img/index-arrow.png" class="intro-slider-arrow arrow-left" alt="arrow">
        <div class="intro-slider">
            <div class="intro intro-check">
                <div class="intro-block">
                    <h1>Интерактивные панели</h1>
                    <h2>Наши интерактивные панели - это ключ к инновационному обучению и продуктивному рабочему процессу</h2>
                    <img class="intro-block-img" src="img/intro%20logo.svg" alt="logo">
                </div>
                <div class="intro-block">
                    <img src="img/intro%20img.png" alt="">
                </div>
                <img class='intro-bg' src="img/intro%20bg.svg" alt="">
            </div>


            <div class="intro2 intro-check">
                <div class="intro-block">
                    <img src="img/intro-img2.png" alt="" class="intro-img2">
                </div>
                <div class="intro-block">
                    <h1>Мощь и мобильность</h1>
                    <h2>Откройте для себя лучшие технологии с F3: мощные ПК, стильные ноутбуки и надежные моноблоки для вашего бизнеса</h2>
                    <img class="intro-block-img" src="img/intro%20logo.svg" alt="logo">
                </div>
                <img class='intro-bg2' src="img/index-bg2.svg" alt="">
            </div>
        </div>
        <div class="intro-mobile">
            <img src="img/intro-mobile.png" alt="" class="intro-mobile-img">
            <h1>Интерактивные панели</h1>
            <h2>Наши интерактивные панели - это ключ к инновационному обучению и продуктивному рабочему процессу</h2>
            <img src="img/intro-mobile-svg.svg" alt="" class="intro-mobile-bg">
        </div>
    </div>


    <div class="client-cards">
        <div class="client-card">
            <img src="img/main-cards.svg" alt="">
            <h1>Клиентский сервис</h1>
            <h2>Отвечаем на вопросы покупателей за 10 минут</h2>
        </div>
        <div class="client-card">
            <img src="img/main-cards2.svg" alt="">
            <h1>Клиентский сервис</h1>
            <h2>Отвечаем на вопросы покупателей за 10 минут</h2>
        </div>
        <div class="client-card">
            <img src="img/main-cards3.svg" alt="">
            <h1>Клиентский сервис</h1>
            <h2>Отвечаем на вопросы покупателей за 10 минут</h2>
        </div>
        <div class="client-card">
            <img src="img/main-cards4.svg" alt="">
            <h1>Клиентский сервис</h1>
            <h2>Отвечаем на вопросы покупателей за 10 минут</h2>
        </div>
    </div>


    <div class="catalog-cards index-catalog-cards">
        <a href="lp/category/noutes.html" class="catalog-card">
            <div class="catalog-card-text">
                <h1>Ноутбуки</h1>
                <h2>Проекты всегда под рукой с надежными и производительными решениями для работы и творчества.</h2>
                <img src="img/main-btn-next.svg" alt="button">
            </div>
            <img src="img/main-catalog-card.png" alt="">
        </a>
        <a href="lp/category/monoblocks.html" class="catalog-card">
            <div class="catalog-card-text">
                <h1>Моноблоки</h1>
                <h2>Большой дисплей, клавиатура и мышь. Максимум возможностей, минимум пространства.</h2>
                <img src="img/main-btn-next.svg" alt="button">
            </div>
            <img src="img/main-catalog-card2.png" alt="">
        </a>
        <a href="lp/category/monoblocks.html" class="catalog-card">
            <div class="catalog-card-text">
                <h1>Персональные
                    компьютеры</h1>
                <h2>Надежные и производительные ПК для ваших задач</h2>
                <img src="img/main-btn-next.svg" alt="button">
            </div>
            <img src="img/main-catalog-card3.png" alt="">
        </a>
        <a href="lp/category/panels.html" class="catalog-card">
            <div class="catalog-card-text">
                <h1>Интерактивные <br>
                    панели</h1>
                <h2>Надежные и многофункциональные панели обеспечивают максимальные возможности в образовании и бизнесе</h2>
                <img src="img/main-btn-next.svg" alt="button">
            </div>
            <img src="img/main-catalog-card4.png" alt="">
        </a>
    </div>


    <div class="dls-catalog">
        <div class="dls-catalog-text">
            <h1>Дополните ваше устройство</h1>
            <h2>Аксессуары, комплектующие и OPS</h2>
        </div>
        <div class="dls-cards">
            <div class="dls-card">
                <img src="img/main-dls-card.png" alt="">
                <h1 class="dls-h1">OPS</h1>
                <h2 class="dls-h2 dls-h2-wd">Превращает интерактивные панели в полноценные компьютеры, обеспечивая возможности вывода изображения и сенсорного управления</h2>
                <button class="item-btn dls-btn">Подробнее</button>
            </div>
            <div class="dls-cards2">
                <div class="dls-card2">
                    <img src="img/main-dls-card2.png" alt="">
                    <div>
                        <h1 class="dls-h1">Мобильные стойки</h1>
                        <h2 class="dls-h2">Широкий ассортимент стендов и <br> тележек для LCD/LED/OLED панелей</h2>
                        <button class="item-btn dls-btn">Подробнее</button>
                    </div>
                </div>
                <div class="dls-card2">
                    <img src="img/main-dls-card3.png" alt="">
                    <div>
                        <h1 class="dls-h1">Мониторы</h1>
                        <h2 class="dls-h2">Надежный инструмент для яркого и <br> комфортного взаимодействия с <br> вашими данными и приложениями</h2>
                        <button class="item-btn dls-btn">Подробнее</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="decisions">
        <h1>Решения для вашего бизнеса</h1>
        <div class="decisions-cards">
            <div class="decisions-card">
                <img src="img/decisions-card.svg" alt="">
                <h2>Образование</h2>
            </div>
            <div class="decisions-card">
                <img src="img/decisions-card2.svg" alt="">
                <h2>Розничная торговля</h2>
            </div>
            <div class="decisions-card">
                <img src="img/decisions-card3.svg" alt="">
                <h2>Государственные <br>
                    органы</h2>
            </div>
            <div class="decisions-card">
                <img src="img/decisions-card4.svg" alt="">
                <h2>Компании</h2>
            </div>
            <div class="decisions-card">
                <img src="img/decisions-card5.svg" alt="">
                <h2>Строительные <br>
                    компании</h2>
            </div>
            <div class="decisions-card">
                <img src="img/decisions-card6.svg" alt="">
                <h2>Комплексное <br>
                    оснащение</h2>
            </div>
        </div>
    </div>


    <div class="footer">
        <div class="footer-block">
            <img src="img/footer-logo.svg" alt="">
            <div class="footer-links">
                <a href="lp/catalog.html">Каталог</a>
                <a href="lp/juridical.html">Юридическим лицам</a>
                <a href="lp/about.html">О компании</a>
                <a href="lp/contact.html">Контакты</a>
            </div>
            <div class="footer-info">
                <h2>Отдел продаж: <span>+7 (700) 855 50 82</span></h2>
                <h2>Сервис: <span>+7 (700) 455 50 41</span></h2>
            </div>
        </div>
        <div class="footer-block2">
            <h2>г. Астана, Коргалжинское шоссе 110, НП 15</h2>
            <div class="footer-social">
                <a href="https://www.instagram.com/f3.kz/" target="_blank"><img src="img/footer-inst.svg"  alt=""></a>
            </div>
        </div>
    </div>



</div>

<div class="footer-mobile">
    <div class="footer-mobile-block">
        <h1>Меню</h1>
        <div class="footer-mobile-links">
            <a href="./lp/catalog.html">Каталог</a>
            <a href="./lp/juridical.html">Юридическим лицам</a>
            <a href="./lp/about.html">О компании</a>
            <a href="./lp/contact.html">Контакты</a>
        </div>
    </div>

    <div class="footer-mobile-block">
        <h1>Контакты</h1>
        <div class="footer-mobile-links">
            <a href="">Отдел продаж <br>+7(700)-855-50-82</a>
            <a href="">Клиентский сервис <br>+7(700)-455-50-41</a>
        </div>
    </div>

    <div class="footer-mobile-block">
        <h1>Мы в сетях</h1>
        <div class="footer-mobile-img">
            <a href="https://www.instagram.com/f3.kz/"><img src="img/footer-inst-white.svg" alt=""></a>
        </div>
    </div>
</div>
<a href="" class="footer-mobile-pol">
    <h2>Политика конфедициальности</h2>
</a>



<script src="lp/scripts/modalWindow.js"></script>
<script src="lp/scripts/slider-index-title.js"></script>
<script src="lp/scripts/search.js"></script>
<script src="lp/scripts/modal-reg.js"></script>
<script src="lp/scripts/burger.js"></script>

</body>
</html>