Project Overview
Ecoly is an HTML template focused on the wind and solar ecological energy industry, suitable for energy companies, renewable energy service providers, and environmental organizations' official websites. The template includes 7 homepage variations, covering business pages such as About, Services, Cases, Blog, Pricing, and more. The entire site uses responsive design, compatible with both PC and mobile devices.
Tech Stack
- HTML5 + CSS3 (Static Pages)
- Bootstrap 5 (Grid & Basic Components)
- jQuery (DOM Manipulation & Interactions)
- Swiper.js (Carousel & Sliding Components)
- MeanMenu (Mobile Navigation)
- Magnific Popup (Image/Video Lightbox)
- Wow.js + Animate.css (Entrance Animations)
- Nice Select (Custom Dropdown Selection)
Project Structure
ecolyhtml-10/
├── documentation/ # Official Documentation
│ ├── index.html
│ ├── css/
│ └── images/
└── ecoly-buyer-file/ # Template Main Files
├── index.html # Homepage (Version 1)
├── index-2~7.html # Homepage Variations (7 Versions Total)
├── about.html # About Us
├── service.html # Services List
├── service-details.html # Service Details
├── project.html # Project Cases
├── project-details.html # Case Details
├── news.html # Blog List
├── news-details.html # Blog Details
├── pricing.html # Pricing Page
├── faq.html # Frequently Asked Questions
├── contact.html # Contact Page (With Form)
├── checkout.html # Checkout Page
├── shop-cart.html # Shopping Cart
└── assets/ # Static Resources
├── css/main.css # All Styles
└── js/main.js # All Scripts
Core File Description
ecoly-buyer-file/index.html— Homepage entry, integrating Banner, Services, Projects, Team and other modulesecoly-buyer-file/assets/css/main.css— All CSS variables, component styles, responsive breakpointsecoly-buyer-file/assets/js/main.js— All frontend logic including carousel initialization, navigation interactions, animations, and lightboxecoly-buyer-file/contact.html— Contact form page (requires backend for data processing)ecoly-buyer-file/index-2~7.html— Alternative homepage layouts, suitable for different business style switchingdocumentation/index.html— Template usage manual, including HTML structure, CSS architecture, and common configuration instructions
Quick Start
This template is a pure static project with no build steps required:
- Open
ecolyhtml-10/ecoly-buyer-file/index.htmldirectly in a browser to preview - Or deploy the
ecoly-buyer-filedirectory to any web server (Nginx / Apache / VS Code Live Server) - Modify CSS variables in
assets/css/main.cssto quickly change colors
Usage Suggestions
- The mobile menu relies on the
MeanMenuplugin, ensurejquery.meanmenu.cssis properly included - The form in
contact.htmlneeds to be connected to a backend or use services like Formspree to handle submissions - Homepage variations (index-2~7) share the same assets, it's recommended to keep only one homepage as needed to reduce redundancy
