List of Contents

Documentation forLandpagy - HTML Temaplate

Thank you for purchasing this template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact from here ( https://themeforest.net/username ).

Title Changing

Logo Changing

Service Area

Client Area

Features Area

Logo-grid Area

Why Choose Area

Testimonial

CTA Area

Team Area

FAQs Area

Pricing Area

Counter Area

CSS & JS Files & Structure

CSS Files

Js Files

Changing Font

Landpagy uses Font family: Inter as a default font and Poppins as a Heading Font from the Google Fonts Library. To change the Font, you will need to Edit the Bottom Link with your Custom Font link in style.css file and change the body css font-family

If you plan to use a Self Hosted font. Here is an Example for using Self Hosted Font.

    @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700;800;900&display=swap");

    body {
        font-family: "Poppins", sans-serif
    }

    h1,h2,h3,h4,h5,h6 {
        font-family : "Inter", sans-serif
    }

CSS coding standard:

We followed css and css3 coding standard. Here is the example:


/*----------------------------------------*/
/*  02. Header Area
/*----------------------------------------*/
.header-area {
  position: relative;
  z-index: 99999;
}

.navbar {
  border: 0;
  border-radius: 0;
  padding: 0;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 20;
  position: absolute;
}

.navbar-brand {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.menu_one {
  background: transparent;
  transition: all 0.2s linear;
}

.header_logo img:not(.main_logo),
.header_logo img.sticky_logo {
  display: none;
}

.header_logo img.main_logo {
  display: block;
}

Javascript File Structure

Custom JS coding standard:

    
(function ($) {
  ("use strict");

  // scrollToTop
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
      $(".scrollToTop").fadeIn();
    } else {
      $(".scrollToTop").fadeOut();
    }
  });
  //Click event to scroll to top
  $(".scrollToTop").click(function () {
    $("html, body").animate(
      {
        scrollTop: 0,
      },
      800
    );
    return false;
  });

  /*  Menu Click js  */
  function Menu_js() {
    if ($(".submenu").length) {
      $(".submenu > .dropdown-toggle").click(function () {
        var location = $(this).attr("href");
        window.location.href = location;
        return false;
      });
    }
  }
  Menu_js();

  /*--------------- mobile dropdown js--------*/
  function active_dropdown2() {
    $(".menu > li .mobile_dropdown_icon").on("click", function (e) {
      $(this).parent().find("ul").first().slideToggle(300);
      $(this).parent().siblings().find("ul").hide(300);
    });
  }

  active_dropdown2();

  // counter
  $(".counter").counterUp({
    delay: 20,
    time: 1000,
  });

  if ($("#scroll-container").length) {
    // init controller
    var controller = new ScrollMagic.Controller();

    // define movement of panels
    var wipeAnimation = new TimelineMax().to("#scroll-container", 1, {
      x: "-55%",
    });

    // create scene to pin and link animation
    new ScrollMagic.Scene({
      triggerElement: "#fixedWrapper",
      triggerHook: "onLeave",
      duration: "350%",
    })
      .setPin("#fixedWrapper")
      .setTween(wipeAnimation)
      .addIndicators()
      .addTo(controller);

    var horizontal = new ScrollMagic.Scene({
      offset: 50,
      duration: 300,
      // reverse: false
    })

      // .addIndicators()
      .addTo(controller);
  }

  const slider2 = new Swiper("#testimonial-2", {
    slidesPerView: 1,
    spaceBetween: 50,
    centeredSlides: true,

    breakpoints: {
      768: {
        slidesPerView: 2,
      },
    },
  });

  const slider3 = new Swiper("#testimonial-3", {
    slidesPerView: 1,
    spaceBetween: 0,
    loop: true,
    breakpoints: {
      768: {
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    },
  });

  $("select").niceSelect();

  new WOW().init();

  //Tippy JS
  if ($(".marking-point").length) {
    const template = document.getElementById("map");
    const template2 = document.getElementById("map2");
    const template3 = document.getElementById("map3");
    const template4 = document.getElementById("map4");
    const template5 = document.getElementById("map5");
    const template6 = document.getElementById("map6");
    const template7 = document.getElementById("map7");

    tippy(".marking-point", {
      content: template.innerHTML,
      allowHTML: true,
      animation: "scale",
      theme: "tooltip",
    });

    tippy(".marking-point", {
      content: template2.innerHTML,
      allowHTML: true,
      animation: "scale",
      theme: "tooltip",
    });

    tippy(".marking-point", {
      content: template3.innerHTML,
      allowHTML: true,
      animation: "scale",
      theme: "tooltip",
    });

    tippy(".marking-point", {
      content: template4.innerHTML,
      allowHTML: true,
      animation: "scale",
      theme: "tooltip",
    });

    tippy(".marking-point", {
      content: template5.innerHTML,
      allowHTML: true,
      animation: "scale",
      theme: "tooltip",
    });

    tippy(".marking-point", {
      content: template6.innerHTML,
      allowHTML: true,
      animation: "scale",
      theme: "tooltip",
    });

    tippy(".marking-point", {
      content: template7.innerHTML,
      allowHTML: true,
      animation: "scale",
      theme: "tooltip",
    });
  }  

})(jQuery);

Sources & Credits

I've used the following images, icons or other files as listed.

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme feel free to email via my user page contact from here.