Logistic Express is a website template for freight forwarders, couriers and logistics companies, built on Bootstrap 5, with a navy and orange design and a hero with a Track & Trace box. The layout is responsive and mobile-ready. There are seven pages: home, about, services, blog, blog post (one page for each of the eight posts), contact and elements.
The home page has the hero, three services, an about block, a quote request form, the team, client testimonials with a quick quote box, the latest blog posts and a call-to-action band. The about page repeats the about block, the quote form, the team and the testimonials, and the services page lists six services: land, ship and air transport, warehousing, customs clearance and express delivery. The blog has eight posts over two pages and a sidebar with search, categories, recent posts, tags and a newsletter form, and each post has an author box, links to the previous and next posts, comments and a comment form. The contact page has a contact form, the contact details and a map that loads on click, and the elements page shows typography, buttons, lists, tables, progress bars, forms and an image gallery with a lightbox. The header stays at the top as you scroll, and a back-to-top button appears further down. Use Logistic Express for a freight forwarder, a courier or a transport and logistics company.
What’s new in 3.0
Bootstrap 5.3.8 (the earlier release used Bootstrap 4.1.3 and jQuery 1.12.4), compiled from Sass with only the parts the pages use and the Bootstrap 4 proportions, and plain JavaScript with no jQuery. Swiper 14 replaces Slick on the testimonial slider, PhotoSwipe 5 replaces Magnific Popup on the elements gallery, a keyboard-operable menu panel replaces SlickNav, and native selects replace Nice Select; Owl Carousel, WOW, the animated headline, ajaxChimp, jQuery Validate, the parallax, one-page-nav and price-range plugins and Modernizr are gone. Lucide SVG icons replace Font Awesome 5, Themify, Linearicons and Flaticon, with a small Font Awesome 7 Brands subset for the social logos (the Twitter bird is now the X logo). npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
Lighter pages: the home page went from 5.14 MB and 57 requests to 0.82 MB and 26 requests, and the contact page from 2.96 MB and 88 requests to 0.43 MB and 13 requests. Every photo has an AVIF version with a JPEG or PNG fallback, real dimensions and lazy loading below the first screen, photos stored as PNG are now JPEG, and the full-page preloader is gone. The download is 2.59 MB (it was 16.7 MB): images the pages never used are removed, and it includes the Sass sources, the build scripts and the PHP mailers.
No third-party requests: Barlow and Teko are self-hosted, the icons are local SVG, and a Google Analytics 4 snippet stays commented out until you add your own ID. The contact page’s map loads OpenStreetMap only after a visitor clicks “Show map”. Before, every page loaded Google Fonts and the contact page loaded Google Maps.
Working forms: the contact form, the quote request form, the quick quote box, the blog comment form and the newsletter form each send through their own handler in php/, built on a safe mailer with validation, a spam trap and an in-page message. Before, the contact script mailed every message to an outside address and put visitor input in the mail headers, the quote forms posted nowhere and their fields had no names, the quick quote box was not a form, and the comment and newsletter forms posted nowhere.
Working demos and distinct content: the hero’s Track & Trace box, a dead link before, is a clearly labelled demo that asks again for an empty or malformed ID and shows a sample shipment status for an ID such as LE-204518, ready to connect to your tracking system, and the blog search lists the matching posts. The six services have their own descriptions and icons (the earlier release showed three services twice, all with one paragraph), the three team members have different names and logistics roles (all three had the same name and the role “Health agent”), the blog has eight distinct posts, each with its own page, and a working second page, and the contact details are fictional.
Accessibility: a skip link, a main landmark and one h1 per page, a real menu button whose panel closes with Esc, named icon links, labelled form fields, visible focus rings on every link, button and field (including the blog search, newsletter and comment fields), keyboard and first-tap touch access to the Blog submenu, reduced-motion support and WCAG AA text contrast: a deeper orange behind white button labels and date badges, darker orange text and greys, and navy text on the bright orange of the hovered service card.
Fixed: the testimonial arrows were hidden below 600 px, leaving phones with no way to change slides (they now show at every width); off-topic filler is gone from the elements page; and the documentation page is rebuilt from the README, with sections on the build, the forms, the map and SEO, in place of the old jQuery page.