Multi-purpose Template

Create Your Website

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Service 1

Service 2

Service 3

Amazing Things for You

Always write benefits over features. Mention all the benefits or services with some real examples. Focus on how you can help and benefit your user. Use simple words so that you don’t confuse people. Say as much in as few words as possible.

Speak directly to users using you not I or we.

Call to Action

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

(function () { 'use strict'; /* ── 1. STICKY HEADER SHADOW ──────────────────────────────── Adds .scrolled class once page scrolls past 10px */ const header = document.getElementById('fs-header'); if (header) { const onScroll = () => { header.classList.toggle('scrolled', window.scrollY > 10); }; window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); // run once on load in case page is already scrolled } /* ── 2. MOBILE HAMBURGER MENU ─────────────────────────────── Toggles .open on both the button and the drawer */ const hamburger = document.getElementById('fs-hamburger'); const mobileNav = document.getElementById('fs-mobile-nav'); if (hamburger && mobileNav) { hamburger.addEventListener('click', () => { const isOpen = hamburger.classList.toggle('open'); mobileNav.classList.toggle('open', isOpen); hamburger.setAttribute('aria-expanded', String(isOpen)); mobileNav.setAttribute('aria-hidden', String(!isOpen)); }); /* Close drawer when a nav link is tapped */ mobileNav.querySelectorAll('.fs-nav__link').forEach(link => { link.addEventListener('click', () => { hamburger.classList.remove('open'); mobileNav.classList.remove('open'); hamburger.setAttribute('aria-expanded', 'false'); mobileNav.setAttribute('aria-hidden', 'true'); }); }); /* Close drawer on outside click */ document.addEventListener('click', (e) => { if (!header.contains(e.target)) { hamburger.classList.remove('open'); mobileNav.classList.remove('open'); hamburger.setAttribute('aria-expanded', 'false'); mobileNav.setAttribute('aria-hidden', 'true'); } }); } /* ── 3. SMOOTH SCROLL for anchor links ───────────────────── Handles #how-it-works and similar in-page anchors */ document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', (e) => { const target = document.querySelector(anchor.getAttribute('href')); if (!target) return; e.preventDefault(); const headerHeight = header ? header.offsetHeight : 0; const top = target.getBoundingClientRect().top + window.scrollY - headerHeight - 16; window.scrollTo({ top, behavior: 'smooth' }); }); }); /* ── 4. TIMELINE STEP ENTRANCE ANIMATION ─────────────────── Uses IntersectionObserver — no layout shift, no deps */ const steps = document.querySelectorAll('.fs-tl-step'); if (steps.length && 'IntersectionObserver' in window) { const observer = new IntersectionObserver( (entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('fs-tl-step--visible'); observer.unobserve(entry.target); } }); }, { threshold: 0.15 } ); steps.forEach((step, i) => { /* stagger via inline style so no extra CSS class needed */ step.style.transitionDelay = `${i * 90}ms`; observer.observe(step); }); } })();