Ecoly - Ecology & Solar Renewable Energy HTML Template preview 1

Ecoly - Ecology & Solar Renewable Energy HTML Template

bookmark

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 v...

HTML

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

text
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 modules
  • ecoly-buyer-file/assets/css/main.css — All CSS variables, component styles, responsive breakpoints
  • ecoly-buyer-file/assets/js/main.js — All frontend logic including carousel initialization, navigation interactions, animations, and lightbox
  • ecoly-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 switching
  • documentation/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:

  1. Open ecolyhtml-10/ecoly-buyer-file/index.html directly in a browser to preview
  2. Or deploy the ecoly-buyer-file directory to any web server (Nginx / Apache / VS Code Live Server)
  3. Modify CSS variables in assets/css/main.css to quickly change colors

Usage Suggestions

  • The mobile menu relies on the MeanMenu plugin, ensure jquery.meanmenu.css is properly included
  • The form in contact.html needs 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
help_outline

FAQ