Блок мобильного приложения

Ссылка на скачивание приложения с QR

Готовый блок с картинкой, текстом и кнопками для скачивания можно найти в Базовом макете. Самый сложный его элемент – ссылка на скачивание, которая имеет зависимость от устройства и операционной системы. Так, в десктопе это QR-код, а в мобилке – соответствующая ОС ссылка на магазин приложений: AppStore, Play Market и App Gallery.

<section class="section section--app">
    <div class="section-layer">
        <h3 class="title-mobile">С&nbsp;приложением все проще</h3>
        <div class="box-content">
            <h3 class="box-content__title title-desktop"> С&nbsp;приложением все проще </h3>
            <div class="box-content__text">
                <p class="subtitle"> Пользоваться всеми возможностями вашего тарифа удобнее всего <a href="https://redirect.appmetrica.yandex.com/serve/388563671611160636?utm_medium=text_link&amp;utm_campaign=sphynx" target="_blank" class="js-gtm-event" data-event="text-link_app"
                    data-section="section--app"> в&nbsp;мобильном приложении «Мой&nbsp;Tele2». </a> </p>
            </div>
            <div class="box-app fadeInUp wow animated" data-wow-delay=".6s" style="visibility: visible;-webkit-animation-delay: .6s; -moz-animation-delay: .6s; animation-delay: .6s;">
                <div class="box-app__title">Скачайте приложение</div>
                <div class="box-app__links">
                    <div class="qr-code"> <img src="qrcode-app.fb7d49b3.png" alt="qr" title="Отсканируй код"> </div>
                    <div class="app-links">
                        
                        <a href="https://redirect.appmetrica.yandex.com/serve/388563671611160636?utm_medium=text_link&amp;utm_campaign=sphynx" class="app-gallery-link app-links__item js-gtm-event"
                        data-event="app-download" data-section="section-app"> <img src="appgallery.1749a613.png" srcset="appgallery.1749a613.png 2x" alt="appgallery"> </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="box-pic">
            <div class="phone pic-layer">
                <picture>
                    <source srcset="phone-mobile@2x.115902b7.png" media="(max-width: 600px)"> <img class="fadeIn wow animated" data-wow-delay=".4s" src="phones-desktop.4852610f.png" srcset="phones-desktop@2x.3ba3df85.png 2x" alt="phone" style="visibility: visible;-webkit-animation-delay: .4s; -moz-animation-delay: .4s; animation-delay: .4s;">                    </picture>
            </div>
            <div class="floor pic-layer">
                <picture> <img data-wow-delay=".4s" src="floor.ea0b81ee.png" alt=""> </picture>
            </div>
        </div>
    </div>
</section>