ForX is a responsive, multi-page website template for agencies, studios, freelancers and small businesses. It covers the pages such a website usually needs: four homepages, a filterable portfolio with three detailed case studies, nineteen blog layouts, about, services, team, pricing, FAQ and contact pages, plus a coming-soon page with a countdown.

Included pages (54)

• Homepages (4): Agency (hero slider, features, process, testimonials, clients), Business (tabbed hero), Studio (thumbnail slider, skills), Magazine blog (featured stories, newsletter)
• Portfolio (13): classic, no-space and text grids in 2, 3 and 4 columns with a category filter, plus 3 case studies with results, story, gallery, before/after slider and client quote
• Blog (19): classic, masonry, large and medium layouts, left and right sidebars, and 2 article layouts with image, video and audio posts
• Company: About Us, About Me (timeline, education, awards, tools, CV download), Services, Team, Pricing with comparison table, FAQ
• Contact (3): three contact layouts with a validated form (service, budget and timeline fields)
• Utility: Coming Soon, 404, full-width, left-sidebar and right-sidebar layouts, and 4 element pages (elements, tabs, toggles, typography)

Style options

Set with one attribute on the <html> tag, no CSS editing needed:

• Dark or light colour mode
• 7 colour presets: orange (default), blue, green, purple, red, teal, amber
• Wide or boxed layout
• 3 heading fonts

An optional style switcher (a small settings panel) is included in the demo for trying these in the browser.

Components

• Hero sliders with tab, thumbnail and story pagination, autoplay progress and animated captions
• Portfolio filter, gallery viewer (zoom, fullscreen, thumbnails, keyboard and swipe), before/after image slider
• Masonry blog grids, self-hosted video and audio posts
• Countdown timer, counters, progress bars, testimonial wall, client logo carousel
• Accordion, tabs, toggles, alerts, tooltips and popovers
• Page loader with real progress, cookie notice, back-to-top button, scroll-progress bar

Technical details

• Bootstrap 5.3.8, Swiper 14.4.0, Font Awesome Free 6.7.2; Masonry and imagesLoaded on the masonry blog pages
• Plain HTML, CSS and vanilla JavaScript: no jQuery, no build step or package manager needed
• Design tokens (CSS custom properties) for colours, fonts, radii and shadows
• Scroll reveals, word-by-word headings, image wipes, parallax, magnetic buttons and tilting cards; all switch off for reduced-motion users
• Keyboard-accessible menus, gallery, filters and forms; landmarks, labels and visible focus states
• Lighthouse Performance 96-100 on desktop and 91-98 on mobile; Accessibility, Best Practices and SEO 100 (self-hosted libraries and fonts, WebP images with srcset, lazy loading, deferred scripts)
• SEO-ready: unique titles and descriptions, one h1 per page, descriptive links, Open Graph tags, robots.txt
• Valid HTML on every page; unminified, commented CSS and JavaScript
• Offline HTML documentation and changelog included

Important notes

• Demo photos are included. All sample photos are CC0 (public domain); each one's source is listed in the credits file. Replace them with your own images before launch.
• Forms need a connection. The contact, comment and newsletter forms validate in the browser and show a thank-you message, but they do not send email until you connect them to a form service or your own server script.
• External services: none required. Bootstrap, Swiper, Font Awesome and the fonts are included in the download; only the optional Google Maps embed on the home and contact pages loads from Google.
• Demo content is fictional, including all business names, people, projects, awards, prices and testimonials.