EcoHosting

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Ecohosting is a website template for web hosting companies, domain registrars and cloud providers, built with Bootstrap 5.3.8 and plain JavaScript, with plum surfaces and a violet-to-pink accent. It has eleven pages: home, about, services, packages, help center, sign in, create an account, blog, blog post, contact and elements. The layout is responsive and mobile-ready.

The home page opens with a hero and a domain search, followed by six features, three hosting plans, the global server locations, a dedicated support block, an FAQ and a testimonial slider. The packages page has shared, dedicated and cloud hosting plans, the services page WordPress, VPS and email hosting plans, and the help center a page of questions and answers; a plan’s Get Started button opens the sign-up page with that plan shown above the form. The blog has a sidebar with search, categories, recent posts, tags and a newsletter form, the blog post has comments and a comment form, the contact page has a contact form and a map that loads on click, and the elements page shows typography, buttons, lists, tables, progress bars, form elements and a gallery that opens in a lightbox.

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 plain JavaScript with no jQuery. Swiper 14 runs the testimonial slider and PhotoSwipe 5 the elements gallery, and small built-in modules handle the phone menu, the forms and the map; Slick, Owl Carousel, SlickNav, Nice Select, Magnific Popup, WOW and the other plugins are gone, and the selects are native. Lucide SVG icons replace Themify and Font Awesome 5, with a Font Awesome 7 Brands subset for the social logos (X for Twitter). npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the home page went from 1.8 MB and 70 requests to 0.62 MB and 30 requests, and the sign-in page, which streamed a 50.8 MB background video, now loads 0.58 MB in 7 requests with a still photo under a dark overlay. The download went from 59.8 MB to 2.3 MB, now with the Sass sources and build tools. Images have AVIF versions with the JPEG or PNG as the fallback, real dimensions and lazy loading below the fold, and the preloader that hid every page until everything had loaded is gone.
• No third-party requests: Open Sans and Poppins are self-hosted (every page loaded them from Google Fonts before), the contact map is OpenStreetMap and loads only after a visitor clicks Show map (a Google Maps embed loaded with the page before), and a Google Analytics 4 snippet stays commented out until you add your own ID.
• Front-end demos that work in the browser and send nothing: the domain search checks the name and lists it under each ending of the price list (.com, .net, .org, .me) with a simulated availability, the price per year and a Register link; sign in and create an account check the email, an 8-character password and matching passwords, then say that no account system is connected. The plan cards’ Get Started buttons and the domain search’s Register links carry the chosen plan or domain to the sign-up page.
• Working forms: the contact form, the blog comment form and the newsletter form in every footer and the blog sidebar send through php/send-email.php, php/comment.php and php/subscribe.php, with validation, a spam trap, a recipient you set and an in-page message, and the mailer keeps visitor input out of the mail headers. Before, the contact form mailed a fixed address with visitor input in its headers and the newsletter posted to an outside mailing list. The blog search now searches the blog.
• Accessibility: a skip link and landmarks on every page, one h1 per page, labelled form fields and controls, a phone menu that works as a dialog (Esc closes it), a submenu that opens from the keyboard, visible focus outlines and 44 px slider arrows at every width (the testimonial slider had no controls on phones). Text and buttons meet WCAG AA contrast: buttons with white labels use a deeper violet-to-pink gradient with readable hover and focus states, pink and grey text on white is darker, and the plum surfaces stay.
• Fixed: the about and services pages rendered as an unstyled white page with missing images and a sideways scroll, and are rebuilt with the template’s own header, footer and sections (the footer now links to them); the contact page had no body tag and showed a map error; the hero button pointed to a page that did not exist and the feature, plan, footer and blog links went nowhere; the testimonial slider’s two slides were identical, the blog date badges went blank on hover and the elements page overflowed at 768 px. The six features, three plans (all at the same price with the same list) and four FAQ answers (all the same) are now distinct, the contact details are fictional and typos are corrected.