BuildCore — Industrial & Construction HTML Template
Complete reference guide for the BuildCore Industrial & Construction HTML template. Everything you need to understand, customize, and deploy the project.
File Structure
The project follows a clean, organized directory structure with all assets grouped under the assets/ folder.
Setup & Installation
BuildCore is a static HTML template. No build tools or compilers are required. Follow these steps to get started.
- Download & Extract — Unzip the project archive to any directory on your local machine.
- Open in Browser — Open
index.htmlin any modern browser. All pages work via file:// protocol. - PHP Forms (Optional) — To enable the contact and quote forms, deploy on a PHP-enabled web server (Apache, Nginx, etc.).
- Customize — Edit HTML files directly. All custom styles are in
assets/css/main.cssand custom JS inassets/js/main.js. - Deploy — Upload the entire
html/folder to your web server or hosting provider.
assets/ folder.Homepage Variants
BuildCore ships with 4 unique homepage designs, each offering a different visual approach.
Default Homepage
Full-featured layout with hero section, services, projects, counter stats, testimonials, blog feed, and sponsor carousel.
index.html
Modern Homepage
Streamlined design with a modern aesthetic, project showcase, team section, and skills progress bars.
index-2.html
Classic Homepage
Traditional corporate layout with about section, service highlights, and client testimonials.
index-3.html
Industrial Homepage
Bold industrial theme with full-width backgrounds, feature sections, and strong visual hierarchy.
index-4.html
Company Pages
Pages that establish brand identity, credibility, and company information.
| File | Page | Description |
|---|---|---|
about.html |
About Us | Company history, mission, team members section with anchor #team-section |
company.html |
Company Services | Detailed overview of company capabilities and service areas |
award.html |
Awards & Recognition | Award highlights (stats), timeline milestones (2021–2025), certifications gallery, and CTA |
leadership.html |
Leadership | Leadership team profiles (navigation links redirect to about.html#team-section) |
clients.html |
Clients Review | Client testimonials and reviews showcase |
pricing.html |
Plans & Pricing | Pricing tables for different service tiers |
faq.html |
Help & FAQ | Frequently asked questions with accordion layout |
Services & Projects
| File | Page | Description |
|---|---|---|
service.html |
Our Services | Full list of services with descriptions and SVG icons |
industry.html |
Industrial Services | Industry-specific service offerings |
project-3-col.html |
Case Studies (3-Col) | Project portfolio in a 3-column grid with Isotope filtering |
project-4-col.html |
Case Studies (4-Col) | Project portfolio in a 4-column grid with Isotope filtering |
project-details.html |
Single Case Study | Detailed individual project page with gallery and specs |
Blog Pages
Blog Classic
Traditional blog layout with sidebar, pagination, and full post excerpts.
blog-classic.html
Blog Grid
Card-based grid layout for blog posts with featured images.
blog-grid.html
Single Post
Individual blog post with comments section, author bio, and related posts.
blog-single.html
Other Pages
Contact Us
Contact form (submits to contact.php), Google Maps embed, company info, and social links.
contact.html
Request a Quote
Quote request form (submits to quote.php) via AJAX with service selection dropdown.
Embedded in header CTA
CSS Files
All stylesheets are located in assets/css/. Only main.css and slider.css are custom — all others are third-party libraries.
| File | Purpose | Type |
|---|---|---|
main.css |
Primary custom stylesheet — all component styles, sections, responsive rules, and custom design | Custom |
slider.css |
Hero slider / carousel styles | Custom |
bootstrap.min.css |
Bootstrap 4 grid system and utility classes | Vendor |
fontawesome.min.css |
Font Awesome 5 icon library (brands, regular, solid) | Vendor |
animate.min.css |
CSS animation library used by WOW.js for scroll-triggered animations | Vendor |
slick.min.css |
Slick carousel/slider component styles | Vendor |
odometer.min.css |
Animated number counter display styles | Vendor |
venobox.min.css |
VenoBox lightbox/modal popup styles | Vendor |
main.css and slider.css. Do not modify vendor (minified) CSS files.JavaScript Files
Custom scripts are in assets/js/main.js. Vendor libraries are loaded from assets/js/vendor/.
| File | Purpose |
|---|---|
main.js |
Custom — Header/sticky nav, mobile menu, sliders, isotope filters, counters, form validation, scroll behaviors |
jquery-1.12.4.min.js |
jQuery core library — foundation for all interactive components |
bootstrap.min.js |
Bootstrap JS components (dropdowns, modals, tabs, collapse) |
popper.min.js |
Popper.js — tooltip/popover positioning engine (Bootstrap dependency) |
slick.min.js |
Slick slider/carousel for testimonials, sponsors, and hero sections |
wow.min.js |
WOW.js — triggers animate.css animations on scroll |
waypoints.min.js |
Trigger functions on scroll position (powers counters, animations) |
odometer.min.js |
Animated number counter with smooth transitions |
jquery.isotope.v3.0.2.js |
Isotope layout & filtering for project/portfolio grids |
imagesloaded.pkgd.min.js |
Detects when images have loaded (Isotope dependency) |
venobox.min.js |
Lightbox popup for images and videos |
headroom.min.js |
Show/hide sticky header based on scroll direction |
jquery.smoothscroll.min.js |
Smooth scrolling for anchor links |
jquery.ajaxchimp.min.js |
AJAX-based Mailchimp newsletter form handler |
jquery.mb.YTPlayer.min.js |
YouTube video background player |
modernizr-2.8.3-respond-1.4.2.min.js |
Feature detection and IE8 media query polyfill |
Script Load Order
Scripts are loaded at the end of <body> in this order:
<!-- jQuery (must be first) -->
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
<!-- Vendor libraries -->
<script src="assets/js/vendor/popper.min.js"></script>
<script src="assets/js/vendor/bootstrap.min.js"></script>
<script src="assets/js/vendor/slick.min.js"></script>
<script src="assets/js/vendor/waypoints.min.js"></script>
<script src="assets/js/vendor/odometer.min.js"></script>
<script src="assets/js/vendor/wow.min.js"></script>
... (other vendors)
<!-- Custom JS (must be last) -->
<script src="assets/js/main.js"></script>Fonts
Poppins (Primary Font)
Loaded via Google Fonts CDN. Weights used: 400 (Regular), 500 (Medium), 600 (Semi-Bold), 700 (Bold).
<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@400;500;600;700
&display=swap" rel="stylesheet">Font Awesome 5
Icon font with 15 local font files in assets/fonts/. Three icon styles available:
Images
All images are in assets/images/. There are 74 image files organized by purpose.
| Category | Files | Naming Pattern |
|---|---|---|
| Logo & Branding | logo-dark.svg, favicon.svg |
SVG format for crisp rendering |
| Hero / Slider | hero-bg.jpg, hero-main.jpg, dl-slider-1/2/3.jpg |
Full-width hero backgrounds |
| Section Backgrounds | counter-bg.jpg, cta-bg.jpg, feature-bg.jpg, video-bg.jpg, etc. |
[section]-bg.jpg |
| Projects | project-1.jpg – project-8.jpg + 5 thumbnail variants |
project-N.jpg / project-N-360x490.jpg |
| Blog Posts | post-1.jpg – post-6.jpg |
post-N.jpg |
| Team | team-1.jpg – team-4.jpg, Worker-1/2/3/4-768x768.jpg |
Square portraits |
| Testimonials | testimonial-1.jpg – testimonial-4.jpg, testi-1.jpg |
Client photos |
| Certificates | certificate-1.jpg – certificate-6.jpg |
Award page certification images |
| Sponsors | sponsor-1.svg – sponsor-7.svg |
SVG client/partner logos |
| About / Services | about-1.jpg, about-2.jpg, services-1/2/3.jpg |
Section imagery |
| Miscellaneous | signature.png, cross.png, comment-1/2/3/4.png, satellite-map.png |
UI elements and decorations |
Animations
Scroll-triggered animations are powered by WOW.js + Animate.css. Elements animate into view as the user scrolls down the page.
Usage
Add the wow class plus an animation class to any element. Use data-wow-delay to stagger animations.
<!-- Basic fade-in animation -->
<div class="wow fadeInUp">Content</div>
<!-- With staggered delay -->
<div class="wow fadeInUp" data-wow-delay="200ms">First</div>
<div class="wow fadeInUp" data-wow-delay="400ms">Second</div>
<div class="wow fadeInUp" data-wow-delay="600ms">Third</div>Animation Classes Used
assets/js/main.js. All four homepage variants and the award page include scroll animations.Icons
The project uses two icon systems:
Inline SVG Icons (Primary)
Custom inline SVG icons are used for all service, feature, and section icons. These provide crisp rendering at any size, easy color customization via CSS (stroke and fill), and zero HTTP requests.
<svg width="36" height="36"
viewBox="0 0 24 24" fill="none"
stroke="currentColor"
stroke-width="1.5">
<path d="M12 2L15.09 8.26..."/>
</svg>Font Awesome (Secondary)
Font Awesome 5 is used for smaller UI icons like social media links, navigation elements, and utility indicators (arrows, checkmarks, clocks, etc.).
<!-- Solid icon -->
<i class="fas fa-search"></i>
<!-- Brand icon -->
<i class="fab fa-facebook-f"></i>
<!-- Regular icon -->
<i class="far fa-clock"></i>Responsive Design
The template is fully responsive using Bootstrap 4’s grid system and custom media queries in main.css.
| Breakpoint | Target | Key Behaviors |
|---|---|---|
≥1200px |
Desktop (XL) | Full layout, all columns visible, hover effects active |
992–1199px |
Laptop (LG) | Slight column reduction, grids shift to 2-column |
768–991px |
Tablet (MD) | Navigation collapses to burger menu, 2-column grids |
576–767px |
Large Phone (SM) | Single-column layout, stacked sections |
≤575px |
Mobile (XS) | Full mobile layout, hero height 600px, simplified navigation |
Contact Forms
Two server-side PHP scripts handle form submissions via AJAX.
Contact Form PHP
File: contact.php
Fields: First Name, Last Name, Phone, Email, Message
Recipient: [email protected]
Update the $recipient variable to change the destination email address.
Quote Request Form PHP
File: quote.php
Fields: Name, Phone, Services, Email, Message
Recipient: [email protected]
Requires a PHP-enabled web server for mail() function.
file:// protocol. Deploy to a web server with PHP support.Color Palette
Brand Orange
#fe5a0e
Dark
#1a1a1a
Body Text
#777777
Light Background
#f8f8f8
CSS Usage
/* Primary brand color - buttons, links, accents, hover states */
color: #fe5a0e;
background: #fe5a0e;
border-color: #fe5a0e;
/* Brand with transparency - badge/tag backgrounds, icon containers */
background: rgba(254, 90, 14, 0.08);
/* Dark overlay for CTA/hero backgrounds */
background: rgba(0, 0, 0, 0.65);Typography
Font Family
font-family: 'Poppins', sans-serif;
Applied globally via the body selector. All headings and body text use Poppins.
| Element | Size | Weight | Color |
|---|---|---|---|
| Section Headings (h2) | 36–42px | 700 | #1a1a1a |
| Sub-headings (h4) | 14–16px | 600 | #fe5a0e |
| Card Titles (h3) | 18–22px | 600–700 | #1a1a1a |
| Body Text | 14–16px | 400 | #777777 |
| Small / Labels | 12–13px | 500–600 | #888888 |
Credits & Dependencies
| Library | Version | License | Website |
|---|---|---|---|
| jQuery | 1.12.4 | MIT | jquery.com |
| Bootstrap | 4.x | MIT | getbootstrap.com |
| Font Awesome | 5.x | SIL OFL / MIT | fontawesome.com |
| Slick Carousel | 1.8 | MIT | kenwheeler.github.io/slick |
| WOW.js | 1.1.3 | MIT | wowjs.uk |
| Animate.css | 3.x | MIT | animate.style |
| Isotope | 3.0.2 | GPL v3 | isotope.metafizzy.co |
| Odometer | 0.4.8 | MIT | github.hubspot.com/odometer |
| VenoBox | 1.9 | MIT | veno.es/venobox |
| Headroom.js | 0.12 | MIT | wicky.nillia.ms/headroom.js |
| Waypoints | 4.0 | MIT | imakewebthings.com/waypoints |
| ImagesLoaded | 4.x | MIT | imagesloaded.desandro.com |
| YTPlayer | 3.x | MIT | pupunzi.open-lab.com |
| Modernizr | 2.8.3 | MIT | modernizr.com |
| Google Fonts (Poppins) | — | OFL | fonts.google.com |
BuildCore Project Documentation — Last Updated: March 2026