Ответьте на 3 вопроса
и узнайте стоимость
вашего сайта
МЕНЮ
ДРУГИЕ УСЛУГИ

История платежей для интернет-магазинов Tilda
Автоскейл для стандартных блоков
Карта сайта
ОСНОВНОЕ

Главная
Сайты на тильде
Портфолио
Цены
Калькулятор стоимости
Бриф на сайт
Обо мне
Отзывы
Ответы на вопросы
Контакты
САЙТЫ НА ТИЛЬДЕ

Лендинг
Квиз-лендинг
Квиз
Многостраничник
Сайт-визитка
Интернет-магазин
Корпоративный сайт
Сайт-услуг
Сайт-каталог
Лонгрид
Промо-сайт
Личный сайт
БЛОГ

C чего начать разработку сайта?
Ответы на вопросы по разработке сайта
Примеры сайтов в нише недвижимость
Как работать с самозанятыми
Как сделать прототип сайта
Пример прототипа сайта
Как подготовить тексы для сайта
Все о процессе работы
От чего зависит стоимость сайта
Стили в веб-дизайне
Мобильная версия на Тильде
Лучшие сайты на Тильде
Генератор норм карты
для тильды

Чтобы код работал:

1. Создайте карту в яндекс конструкторе карт, возьмите Javascript код и вставьте в форму.

2. И подпишитесь на меня в ВК (иначе не заработает) vk.com/ahmedes

<div class="map">
    <div class='map-text'>Нажмите, чтобы<br/>разблокировать карту</div>
    <div class="map-overlay"></div>
    
    
    <script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A5314a6bfca45a4be6695eba38f356e3beb09fc887c4d0c9be34f1f5a56498973&amp;width=100%&amp;height=454&amp;lang=ru_RU&amp;scroll=true"></script>

</div>

<style>
    .map {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-around;
    }
    .map-text {
        z-index: 20;
        position: absolute;
        color: white;
        font-family: system-ui;
        text-align: center;
        width: 100%;
    }
    .map-overlay {
        background-color: black;
        opacity: 80%;
        width: 100%;
        height: 100%;
        z-index: 10;
        position: absolute;
    }
    @media screen and (min-width: 479px) {
        .map-text, .map-overlay {
            display: none;
        }
    }
</style>

<script>
    $( document ).ready(function(e) {
        $(document).click(function (e) {
            if ($(e.target).closest(".map").length) {
                 $('.map-text, .map-overlay').hide()
                 
                return;
            }
            $('.map-text, .map-overlay').show()
        });
    });
</script>
Как выглядит?
Данная карта меняется конкретно на телефоне, пример приведен для наглядности, чтобы вы не доставали телефон и не проверяли. Добавьте в форму сверху свою ссылку и карта появится в блоке
Нажмите, чтобы
разблокировать карту

Делаю сайты, пишу код, рисую дизайн
https://vk.com/ahmedes
Made on
Tilda