frontend/views/site/index.php

<?php
/* @var $this yii\web\View */
$this->title = 'My Yii Application';
?>
    <div class="section-box-1">
        <div class="box-wr">
            <div class="box-all">
                <div class="section-box-base">
                    Самая полная база текущих и реализованных
                    строительных проектов с исполнителями
                </div>
                <div class="section-box-base-block">
                    <div class="base-blocks">
                        <a href="#" class="base-blocks-button first_butt">Хочу заказать проект</a>
                        <div class="base-blocks-text">
                            <p>Лучшие компании и исполнители готовы помочь вам</p>
                        </div>
                    </div>
                    <div class="base-blocks">
                        <a href="#" class="base-blocks-button second_butt">Проектант/Фрилансер</a>
                        <div class="base-blocks-text">
                            <p>
                                Частные проекты и субподряды от лучших компаний и заказчиков для вас
                            </p>
                            <p>
                                <a href="#">Ищу работу</a>
                                Вакансии компаний и заказчиков на полную занятость и резюме свободных проектантов
                            </p>
                        </div>
                    </div>
                    <div class="base-blocks">
                        <a href="#" class="base-blocks-button third_butt">Представляю компанию</a>
                        <div class="base-blocks-text">
                            <p>Презентуйте лучшую команду профессиональных проектантов и получите актуальные тендеры на проектирование.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section-box-2">
        <div class="box-wr">
            <div class="box-all">
                <div class="menu-two-wrapp-title">Специализация работ по исполнителям</div>
                <div class="menu-two-wrapp" style="background: url('images/menu-pic-1.jpg') 100% 100% no-repeat">
                    <ul class="content-menu-first">
                        <li data-img="images/menu-pic-1-2.jpg">
                            <span data-menu-bg="#bb0f3f"  style="background: #bb0f3f"></span><a href="#">Жилые</a>
                            <ul>
                                <li>
                                    <a href="#">Жилые дома</a>
                                    <ul>
                                        <li><a href="#">Дизайн</a></li>
                                        <li>
                                            <a href="#">Разработка градостроительной документации</a>
                                            <ul>
                                                <li><a href="#">Архитекторы</a></li>
                                                <li><a href="#">Junior-архитекторы</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#">Проектирование объектов архитектуры</a></li>
                                        <li><a href="#">Инжиниринговая деятельность в сфере строительства</a>
                                            <ul>
                                                <li><a href="#">йййййй</a></li>
                                                <li><a href="#">ййййййййййй</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#">Анимация и реклама</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Виллы</a></li>
                                <li><a href="#">Коттеджи</a></li>
                                <li><a href="#">Гостиницы</a></li>
                                <li>
                                    <a href="#">Базы отдыха</a>
                                    <ul>
                                        <li><a href="#">2---2</a></li>
                                        <li><a href="#">2---3</a></li>
                                        <li><a href="#">2---4</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Таунхаусы</a></li>
                                <li><a href="#">Квартиры</a></li>
                                <li><a href="#">Квартиры</a></li>
                                <li><a href="#">Квартиры</a></li>
                            </ul>
                        </li>
                        <li data-img="images/menu-pic-1.jpg">
                            <span data-menu-bg="#ea640b"  style="background: #ea640b"></span><a href="#">Офисные</a>
                            <ul>
                                <li>
                                    <a href="#">Коттеджи</a>
                                    <ul>
                                        <li><a href="#">1---1</a></li>
                                        <li>
                                            <a href="#">1---2</a>
                                            <ul>
                                                <li><a href="#">Архитекторы</a></li>
                                                <li><a href="#">Junior-архитекторы</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#">1---3</a></li>
                                        <li><a href="#">1---4</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Гостиницы</a></li>
                                <li>
                                    <a href="#">Базы отдыха</a>
                                    <ul>
                                        <li><a href="#">2---2</a></li>
                                        <li><a href="#">2---3</a></li>
                                        <li><a href="#">2---4</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li data-img="images/menu-pic-1-2.jpg"><span  data-menu-bg="#f7a901" style="background: #f7a901"></span><a href="#">Торговые</a></li>
                        <li data-img="images/menu-pic-1.jpg"><span  data-menu-bg="#53a827" style="background: #53a827"></span><a href="#">Мосты</a></li>
                        <li data-img="images/menu-pic-1-2.jpg"><span  data-menu-bg="#018232" style="background: #018232"></span><a href="#">Дороги</a></li>
                        <li data-img="images/menu-pic-1.jpg"><span  data-menu-bg="#02857d" style="background: #02857d"></span><a href="#">Сооружения</a></li>
                        <li data-img="images/menu-pic-1-2.jpg"><span  data-menu-bg="#019abf" style="background: #019abf"></span><a href="#">Склады</a></li>
                        <li data-img="images/menu-pic-1.jpg"><span  data-menu-bg="#116da8" style="background: #116da8"></span><a href="#">Заводы</a></li>
                        <li data-img="images/menu-pic-1-2.jpg"><span  data-menu-bg="#413e7f" style="background: #413e7f"></span><a href="#">Разное</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="section-box-3">
        <div class="box-wr">
            <div class="box-all">
                <div class="all-project-home-title_menu">
                    <p>Проекты на нашем сайте</p>
                    <ul>
                        <li class="project-home-active"><span>Текущие</span></li>
                        <li><span>Завершенные</span></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="section-box-map">
            <div class="shadow-map"></div>
            <div id="map_cloud" style="display: none;">
                <script type="text/javascript">
                    function initialize() {
                        var start_position = new google.maps.LatLng('56', '30');
                        var settings = {
                            zoom: 7,
                            scrollwheel: false,
                            center: start_position,
                            mapTypeControl: false,
                            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
                            navigationControl: false,
                            navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                            scaleControl: false,
                            streetViewControl: false,
                            rotateControl: false,
                            zoomControl:true,
                            mapTypeId: google.maps.MapTypeId.ROADMAP};
                        var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
                        var image1 = new google.maps.MarkerImage('images/markers/marker-we-1.png',
                            new google.maps.Size(21, 32),
                            new google.maps.Point(0,0),
                            new google.maps.Point(16, 35)
                        );
                        var image2 = new google.maps.MarkerImage('images/markers/marker-we-2.png',
                            new google.maps.Size(21, 32),
                            new google.maps.Point(0,0),
                            new google.maps.Point(16, 35)
                        );
                        var image3 = new google.maps.MarkerImage('images/markers/marker-we-3.png',
                            new google.maps.Size(21, 32),
                            new google.maps.Point(0,0),
                            new google.maps.Point(16, 35)
                        );
                        var image4 = new google.maps.MarkerImage('images/markers/marker-we-4.png',
                            new google.maps.Size(21, 32),
                            new google.maps.Point(0,0),
                            new google.maps.Point(16, 35)
                        );
                        var image5 = new google.maps.MarkerImage('images/markers/marker-we-5.png',
                            new google.maps.Size(21, 32),
                            new google.maps.Point(0,0),
                            new google.maps.Point(16, 35)
                        );
                        var image6 = new google.maps.MarkerImage('images/markers/marker-we-6.png',
                            new google.maps.Size(21, 32),
                            new google.maps.Point(0,0),
                            new google.maps.Point(16, 35)
                        );
                        var image7 = new google.maps.MarkerImage('images/markers/marker-we-7.png',
                            new google.maps.Size(21, 32),
                            new google.maps.Point(0,0),
                            new google.maps.Point(16, 35)
                        );
                        var image8 = new google.maps.MarkerImage('images/markers/marker-we-8.png',
                            new google.maps.Size(21, 32),
                            new google.maps.Point(0,0),
                            new google.maps.Point(16, 35)
                        );
                        var image9 = new google.maps.MarkerImage('images/markers/marker-we-9.png',
                            new google.maps.Size(21, 32),
                            new google.maps.Point(0,0),
                            new google.maps.Point(16, 35)
                        );
                        var image10 = new google.maps.MarkerImage('images/markers/marker-empl-1.png',
                            new google.maps.Size(21, 32),
                            new google.maps.Point(0,0),
                            new google.maps.Point(16, 35)
                        );
                        var image11 = new google.maps.MarkerImage('images/markers/marker-empl-2.png',
                            new google.maps.Size(21, 32),
                            new google.maps.Point(0,0),
                            new google.maps.Point(16, 35)
                        );
                        var image12 = new google.maps.MarkerImage('images/markers/marker-empl-3.png',
                            new google.maps.Size(21, 32),
                            new google.maps.Point(0,0),
                            new google.maps.Point(16, 35)
                        );
                        var image13 = new google.maps.MarkerImage('images/markers/marker-empl-4.png',
                            new google.maps.Size(21, 32),
                            new google.maps.Point(0,0),
                            new google.maps.Point(16, 35)
                        );
                        var image14 = new google.maps.MarkerImage('images/markers/marker-empl-5.png',
                            new google.maps.Size(21, 32),
                            new google.maps.Point(0,0),
                            new google.maps.Point(16, 35)
                        );
                        var image15 = new google.maps.MarkerImage('images/markers/marker-empl-6.png',
                            new google.maps.Size(21, 32),
                            new google.maps.Point(0,0),
                            new google.maps.Point(16, 35)
                        );
                        var image16 = new google.maps.MarkerImage('images/markers/marker-empl-7.png',
                            new google.maps.Size(21, 32),
                            new google.maps.Point(0,0),
                            new google.maps.Point(16, 35)
                        );
                        var image17 = new google.maps.MarkerImage('images/markers/marker-empl-8.png',
                            new google.maps.Size(21, 32),
                            new google.maps.Point(0,0),
                            new google.maps.Point(16, 35)
                        );
                        var image18 = new google.maps.MarkerImage('images/markers/marker-empl-9.png',
                            new google.maps.Size(21, 32),
                            new google.maps.Point(0,0),
                            new google.maps.Point(16, 35)
                        );
                        var markers = [];
                        var marker = new google.maps.Marker({
                            position: new google.maps.LatLng('56', '35.3'),
                            map: map,
                            title: 'Marker Title2',
                            icon: image1
                        });
                        markers.push(marker);
                        var marker = new google.maps.Marker({
                            position: new google.maps.LatLng('56', '36'),
                            map: map,
                            title: 'Marker Title2',
                            icon: image2
                        });
                        markers.push(marker);
                        var marker = new google.maps.Marker({
                            position: new google.maps.LatLng('56', '34.5'),
                            map: map,
                            title: 'Marker Title3',
                            icon: image18
                        });
                        markers.push(marker);
                        var marker = new google.maps.Marker({
                            position: new google.maps.LatLng('56', '35'),
                            map: map,
                            title: 'Marker Title4',
                            icon: image13
                        });
                        markers.push(marker);
                        var clusterStyles = [
                            {
                                url: 'images/markers/clasters.png',
                                height: 36,
                                width: 36
                            }
                        ];
                        markerClusterer = new MarkerClusterer(map, markers,
                            {
                                maxZoom: 10,
                                gridSize: 100,
                                styles: clusterStyles
                            });
                    }
                </script>
            </div>
            <div id="map_canvas" style="width: 100%; height:100%;"></div>
        </div>
    </div>
    <div class="section-box-4">
        <div class="box-wr">
            <div class="box-all">
                <div class="federation-home-title">Зачем нужна Международная федерация проектантов</div>
                <div class="federation-home-list-wr">
                    <ul class="federation-home-list">
                        <li class="federation-home-list-active"><span>Заказчикам</span></li>
                        <li><span>Компаниям</span></li>
                        <li><span>Проектантам</span></li>
                        <li><span>Наша миссия</span></li>
                    </ul>
                </div>
                <div class="federation-home-blocks-wr">
                    <div class="federation-home-blocks-wr-blocks">
                        <div class="federation-home-blocks">
                            <div class="federation-home-ico"><img src="images/ico-fed-1.png" alt=""/></div>
                            <div class="federation-home-text">Описания рейтингов</div>
                        </div>
                        <div class="federation-home-blocks">
                            <div class="federation-home-ico"><img src="images/ico-fed-2.png" alt=""/></div>
                            <div class="federation-home-text">Вы получаете лучшую цену</div>
                        </div>
                        <div class="federation-home-blocks">
                            <div class="federation-home-ico"><img src="images/ico-fed-3.png" alt=""/></div>
                            <div class="federation-home-text">Гарантии получения проекта в срок</div>
                        </div>
                    </div>
                    <div class="federation-home-blocks-wr-blocks">
                        <div class="federation-home-blocks">
                            <div class="federation-home-ico"><img src="images/ico-fed-1.png" alt=""/></div>
                            <div class="federation-home-text">2Описания рейтингов</div>
                        </div>
                        <div class="federation-home-blocks">
                            <div class="federation-home-ico"><img src="images/ico-fed-2.png" alt=""/></div>
                            <div class="federation-home-text">2Вы получаете лучшую цену</div>
                        </div>
                        <div class="federation-home-blocks">
                            <div class="federation-home-ico"><img src="images/ico-fed-3.png" alt=""/></div>
                            <div class="federation-home-text">2Гарантии получения проекта в срок</div>
                        </div>
                    </div>
                    <div class="federation-home-blocks-wr-blocks">
                        <div class="federation-home-blocks">
                            <div class="federation-home-ico"><img src="images/ico-fed-1.png" alt=""/></div>
                            <div class="federation-home-text">3Описания рейтингов</div>
                        </div>
                        <div class="federation-home-blocks">
                            <div class="federation-home-ico"><img src="images/ico-fed-2.png" alt=""/></div>
                            <div class="federation-home-text">3Вы получаете лучшую цену</div>
                        </div>
                        <div class="federation-home-blocks">
                            <div class="federation-home-ico"><img src="images/ico-fed-3.png" alt=""/></div>
                            <div class="federation-home-text">3Гарантии получения проекта в срок</div>
                        </div>
                    </div>
                    <div class="federation-home-blocks-wr-blocks">
                        <div class="federation-home-blocks">
                            <div class="federation-home-ico"><img src="images/ico-fed-1.png" alt=""/></div>
                            <div class="federation-home-text">4Описания рейтингов</div>
                        </div>
                        <div class="federation-home-blocks">
                            <div class="federation-home-ico"><img src="images/ico-fed-2.png" alt=""/></div>
                            <div class="federation-home-text">4Вы получаете лучшую цену</div>
                        </div>
                        <div class="federation-home-blocks">
                            <div class="federation-home-ico"><img src="images/ico-fed-3.png" alt=""/></div>
                            <div class="federation-home-text">4Гарантии получения проекта в срок</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>