footer map

Scroll Section

July 23, 2022

Testimonial Section Layout

July 23, 2022

Published by Bhaskar at July 23, 2022

Screenshots

Code

Note: Have used bootstrap to change to an accordion layout for 767px

<body>
    <link href="http://fonts.cdnfonts.com/css/rawline" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="main_style.css">
    <main>
        <section class="ns_section ">
            <div class="container">
                <div class="ns_map_container">
                    <div>
                        <img src="map-xl.webp" alt="" class="ns_image">
                    </div>
                   <div class="ns_map_marker ns_la ns_active" >
                    <svg class="ns_map_line ns_map_line_in" xmlns="http://www.w3.org/2000/svg" width="331.1736173629761" height="209.7552251815796" style="left: 0; top: 0; stroke-dasharray: 416.643px; stroke-dashoffset: 416.643px;"><path d="M0 0 208.7552251815796 208.7552251815796 330.1736173629761 208.7552251815796"></path></svg>
                   </div>
                   <div class="ns_map_marker ns_c" >
                    <svg class="ns_map_line" xmlns="http://www.w3.org/2000/svg" width="247.75347137451172" height="224.63369369506836" style="left: 0; top: 0; stroke-dasharray: 339.386px; stroke-dashoffset: 339.386px;"><path d="M0 0 223.63369369506836 223.63369369506836 246.75347137451172 223.63369369506836"></path></svg>
                   </div>
                   <div class="ns_map_marker ns_t">
                    <!-- <svg class="ns_map_line ns_map_line_t" xmlns="http://www.w3.org/2000/svg" width="227.38887786865234" height="237.0989646911621" style="left: 238.611px; top: 188.49px; stroke-dasharray: 329.872px;"><path d="M0 0 8 9.710086822509766 226.38887786865234 236.0989646911621"></path></svg> -->
                    <svg class="ns_map_line" xmlns="http://www.w3.org/2000/svg" width="227.38888502120972" height="237.09897184371948" style="left: 7px; top: 0px; stroke-dasharray: 329.872px; stroke-dashoffset: 329.872px;"><path d="M0 0 0 9.710086822509766 226.38888502120972 236.09897184371948"></path></svg>
                   </div>
                   <div class="ns_map_marker ns_l">
                    <svg class="ns_map_line" xmlns="http://www.w3.org/2000/svg" width="75.23609161376953" height="207.33680725097656" style="left: 9px; top:15px; stroke-dasharray: 237.086px; stroke-dashoffset: 237.086px;"><path d="M0 0 74.23609161376953 74.23609161376953 74.23609161376953 206.33680725097656"></path></svg>
                   </div>
                   <div class="ns_map_marker ns_m">
                    <svg class="ns_map_line" xmlns="http://www.w3.org/2000/svg" width="216.10421752929688" height="5.432277679443359" style="left: -216px; top: 9px; stroke-dasharray: 216.94px; stroke-dashoffset: 216.94px;"><path d="M215.10421752929688 0 210.67193984985352 4.432277679443359 0 4.432277679443359"></path></svg>
                   </div>
                </div>
                <div>
                    <ul class="ns_location-list">
                        <li class="ns_location ns_losAngeles ns_active">
                            <h3 class="ns_text-white ns_location_heading">
                                <a class="ns_text-white"  href="#la">
                                    Los Angeles
                                </a>
                            </h3>
                            <div id="la" class="collapse show">
                                <p>
                                    +1 (847) 970-6190<br>
                                Civic Opera Building<br>
                                20 N Wacker Dr., Suite 1200<br>
                                Chicago, IL 60606<br>
                            </p>
                        </div>
                        </li>
                        <li class="ns_location ns_chicago">
                            <h3 class="ns_text-white ns_location_heading">
                                <a class="ns_text-white"  href="#Chicago">
                                    Chicago
                                </a>
                            </h3>
                                <div id="Chicago" class="collapse show">
                                    <p>
                                        +1 (847) 970-6190<br>
                                    Civic Opera Building<br>
                                    20 N Wacker Dr., Suite 1200<br>
                                    Chicago, IL 60606<br>
                                </p>
                            </div>
                            
                        </li>
                        <li class="ns_location ns_toronto">
                            <h3 class="ns_text-white ns_location_heading">
                                <a class="ns_text-white"  href="#Toronto">
                                    Toronto
                                </a>
                            </h3>
                            <div id="Toronto" class="collapse show">
                                <p>
                                    +1 (847) 970-6190<br>
                                    Civic Opera Building<br>
                                    20 N Wacker Dr., Suite 1200<br>
                                    Chicago, IL 60606<br>
                                </p>
                            </div>
                        </li>
                        <li class="ns_location ns_london">
                            <h3 class="ns_text-white ns_location_heading">
                                <a class="ns_text-white"  href="#London">
                                    London
                                </a>
                            </h3>
                            <div id="London" class="collapse show">
                                <p>
                                    +1 (847) 970-6190<br>
                                    Civic Opera Building<br>
                                    20 N Wacker Dr., Suite 1200<br>
                                    Chicago, IL 60606<br>
                                </p>
                            </div>
                        </li>
                        <li class="ns_location ns_melbourne">
                            <h3 class="ns_text-white ns_location_heading">
                                <a class="ns_text-white"  href="#Melbourne">
                                Melbourne
                                </a>
                            </h3>
                            <div id="Melbourne" class="collapse show">
                                <p>
                                    +1 (847) 970-6190<br>
                                    Civic Opera Building<br>
                                    20 N Wacker Dr., Suite 1200<br>
                                    Chicago, IL 60606<br>
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
    </main>
<script src="main_script.js"></script>

body{
    margin:0;
    font-family: 'Rawline', sans-serif;
}  
svg{
    pointer-events: none;
}
a{
    text-decoration: none !important;
}
a:hover{
    color: #fff ;
}                 
p{
    color: #fff;
}                            
.ns_section{
   background: #221f1f;
   padding: 50px 100px ;
}
.ns_text-white{
    color: #fff;
}
.ns_height_100vh{
    height:100vh;
}
.ns_image{
    width: 100%;
}
.ns_container{
    /* background: red; */
    max-width: 100%;
    margin: auto 100px;
    /* background-image: url(map-xl.webp); */
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    
}
.ns_map_container{
    /* padding:60px 25px; */
    height: 100%;
    /* background-image: url(map-mask.webp); */
    position: relative;
}
.ns_map_container::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(map-mask.webp);
    background-repeat:  repeat;
}
.ns_map_marker{
    display: inline-block;
    /* margin:10px; */
    background: #d82533;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    position: absolute;
    z-index: 999;
    /* transform: scale(1); */
    transition: all 0.4s cubic-bezier(0.25,0.74,0.22,0.99);
}
.ns_map_marker:not(:last-child):hover{
    /* background: rebeccapurple; */
    transform: scale(1.3);
}
svg{}
.ns_la {
    left: 15%;
    bottom: 55.5%;
}
.ns_c {
    left: 22%;
    bottom: 61%;
}
.ns_t {
    left: 25%;
    bottom: 64%;
}
.ns_l {
    left: 44.6%;
    bottom: 71%;
}
.ns_m {
    right: 12%;
    bottom: 11%;
}
.ns_map_marker.ns_active{
    background: #fff;
    pointer-events: none;
    /* transform: scale(1.3); */
}

.ns_location-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 46%;
}
.ns_location-list> .ns_location{
    display: none;
    margin: 0;
}
.ns_location-list> .ns_location>h3>a{
    font-size: 30px;
    margin: 0;
}
.ns_losAngeles.ns_active{
    display: block;
    
}

.ns_map_line {
    position: absolute;
    z-index: 1;
    fill: none;
    stroke: #fff;
    stroke-width: 1px;
    opacity: .3;
    transition-timing-function: cubic-bezier(0.55,0,0.1,1);
    transition-property: stroke-dashoffset;
}
.ns_map_line_in {
    stroke-dashoffset: 0px !important;
}
.stroke_white{
    stroke: #fff;
}
.ns_map_line_m{
    position: absolute;
}
.ns_location p{
    font-size: 11px;
    font-weight: 300;
    margin: 0;
}
@media only screen and (max-width:767px) {
    .ns_map_container{
        display: none;
    }
    .ns_section{
        padding: 0;
    }
    .ns_location-list{
        position: relative;
        left: 0;
    }
    .ns_location-list> .ns_location{
        display: block;
    }
}
@media only screen and (min-width:900px) and (max-width:991px) {
    .ns_location-list{
        bottom: 20%;
    }
}
@media only screen and (max-width:992px) and (min-width:768px) {
    .ns_location-list{
       position: relative;
       left: 0;
    }
    svg{
        display: none;
    }
}

var map_marker = document.getElementsByClassName('ns_map_marker');
var current=""
for (let index = 0; index < map_marker.length; index++) {
    map_marker[index].addEventListener('click',(e)=>{
        var current = this.map_marker[index];
        console.log(current);
        
        for (let index = 0; index < map_marker.length; index++) { 
            console.warn(map_marker[index]);  
        if(current != map_marker[index]){
            map_marker[index].classList.remove('ns_active');
            map_marker[index].children[0].classList.remove('ns_map_line_in')
        }
        else if(current.classList.contains('ns_active') === true && current.children[0].classList.contains('ns_map_line_in')== true){
           current.classList.remove('ns_active');
           current.children[0].classList.remove('ns_map_line_in');
           
        }
        else{
            // console.log('jj');
            current.classList.add('ns_active');
            current.children[0].classList.add('ns_map_line_in');
            
            
        }
    }
       return current;
})
}

window.addEventListener('load',()=>{
for (let index = 0; index < map_marker.length; index++) {
    map_marker[index].addEventListener('click',(e)=>{
        var current_loc = this.map_marker[index];
        // console.warn(current_loc);
        // console.log(e.target.childNodes[1]);
        var l =document.querySelectorAll('.ns_location');
        if(window.innerWidth > 767){
        for (let index = 0; index < l.length; index++) {
            // const e = l[index];
            // console.log(e);
            // console.warn(
            //     l[index].classList.contains('ns_losAngeles')
            // );
            if(current_loc.classList.contains('ns_la') && l[index].classList.contains('ns_losAngeles')){
                document.querySelector('.ns_location.ns_losAngeles').style.display='block';
                
            }
            else if(current_loc.classList.contains('ns_l') && l[index].classList.contains('ns_london')){
                document.querySelector('.ns_location.ns_london').style.display='block';
            }
            else if(current_loc.classList.contains('ns_c') && l[index].classList.contains('ns_chicago')){
                document.querySelector('.ns_location.ns_chicago').style.display='block'
            }
            else if(current_loc.classList.contains('ns_t') && l[index].classList.contains('ns_toronto')){
                document.querySelector('.ns_location.ns_toronto').style.display='block'
               
            }
            else if(current_loc.classList.contains('ns_m') && l[index].classList.contains('ns_melbourne')){
                document.querySelector('.ns_location.ns_melbourne').style.display='block'
            }
            else{
                l[index].style.display="none"
                // e.target.childNodes[1].style.display="none";
            }
            
            
            
        }
    }
    })
    
}
});


window.addEventListener("load", ()=>{
    // console.warn(window.innerWidth);
    if(window.innerWidth <= 767){
        // document.querySelector('.ns_map_container').style.display='none';
      var loc_h =  document.querySelectorAll('.ns_location_heading');
        for (let index = 0; index < loc_h.length; index++) {
            loc_h[index].children[0].setAttribute('data-bs-toggle','collapse');
            loc_h[index].nextElementSibling.classList.remove('show');
            loc_h[index].addEventListener('click',(e)=>{
                e.preventDefault();
                if(loc_h[index].nextElementSibling.classList.contains('show')== false){
                this.loc_h[index].nextElementSibling.classList.add('show');
                }
            })
        }
        
       
    }
});

footer map

Scroll Section

Testimonial Section Layout

Screenshots

Code

Bhaskar

Related posts

Team Slider Style 4

Testimonial layout-2

Map SVG Animation

Leave a Reply Cancel reply