WQP

https://toster.ru/answer?answer_id=883173#comments...

CSS transform:scale

Собственно решение:

.img-wrap {
	width: 100%;
	background-color: #ccc;
	width: 100vw;
	position: relative;
	margin-left: -50vw;
	left: 50%;
	margin-bottom: 30px;
}

Нужен контроллер (PHP), который будет принимать запрос (AJAX) и выдавать данные (JSON). Допустим будет файл ajax.php и функция renderMap которая будет наносить точки на карту

Далее два обработчика (JQUERY):

1) Подгружает список городов передавая ajax.php GET запрос.
Запрос: site.ru/ajax.php?type=get_cities
Результат ["moscow","perm","samara"]

2) Подгружает список точек для карты передавая ajax.php GET запрос.
Запрос: site.ru/ajax.php?type=get_marks&city=moscow
Результат {"count":1,"marks":{"3758":"55.7146,37.6470"}}

Ну и после второго запроса вызывайте callback на функцию renderMap

PS Для тех кто скажет "нужно было через ID всё указывать и т.д." - да, это правильно, но человеку будет сложней это понять чем так как я написал выше

Для нижнего слайдера используйте OwlCarousel2, а по клику на слайд напишите обработчик.

Пример тут в блоке "НАШИ ФОТОГРАФИИ"

Вот так

<a href="image.png" download="картинка.png">Скачать!</a>

В атрибуте download можете написать название файла который будет в конечном итоге скачен.

$('.form').ajaxForm(function() {
        $('.wrapper-message').fadeIn(1200, function() {
            $('.message').css('display', 'block').animate({
                "opacity": 1,
            }, 1200);
        });
        $('.form').find("input[name*='phone']").val('');
        $('.form').find("input[name*='name']").val('');
        $('#callback').fadeOut(200);
        $('.form-callback').css({
            'transform': 'rotateX(0)',
            'opacity': '0'
        });

        window.location = "СТРАНИЦА"

    });