Connect with us

Project Library

Complete technology stack and design system overview

Branding & Color Scheme

Brand Palette

Dominant Blue
#0A4A79
Secondary Blue
#0070C0
Yellow
#F6C538
Red
#D22E26
Salmon
#EA554E
Gold
#FBB040
Accent Light
#F1F2F2
White
#FFFFFF

Typography

Font Families

Primary Font

Poppins - Clean and modern sans-serif font

font-family: 'Poppins', sans-serif;

Secondary Font

Open Sans - Highly readable web font

font-family: 'Open Sans', sans-serif;

Font Sizes & Weights

Heading 1 - 48px, Bold

Heading 2 - 36px, Bold

Heading 3 - 30px, Bold

Heading 4 - 24px, Bold

Heading 5 - 20px, Bold
Heading 6 - 16px, Bold

Lead Paragraph - 18px, Normal

Body Text - 16px, Normal

Small Text - 14px, Normal

Design Styles

Homepage Design Variations

Three different homepage design styles available for the project

INDEX STYLE

Index Style

Classic homepage design with traditional navigation and layout

  • Traditional navigation
  • Standard layout
  • Default font styling
View Index
INDEX TWO STYLE

Index Two Style

Modern homepage design with enhanced visual elements

  • Enhanced animations
  • Modern layout
  • Improved typography
View Index Two
INDEX THREE STYLE

Index Three Style

Premium homepage design with Kanit Light font and custom navigation

  • Kanit Light font
  • Custom navigation layout
  • Premium styling
View Index Three

Design Features

Color Schemes

Consistent color palette across all design variations with primary brand colors and supporting hues.

  • Base Color: #f6c538
  • Dark Gray: #232323
  • Custom Blue: #007bff
Typography

Multiple font options including Poppins, Open Sans, and Kanit Light for different design approaches.

  • Primary: Poppins
  • Secondary: Open Sans
  • Premium: Kanit Light

Icon Libraries

Line Icons (Icomoon)

Custom icon font with 2000+ icons

View All Icons

Font Awesome

Professional icon toolkit with 2000+ icons

View All Icons

Bootstrap Icons

Free, high quality icon library

View All Icons

Google Fonts Icons Integration

Google Material Icons Available

We can integrate Google Material Icons for additional energy-related icons. Here are some examples:

solar_power

solar_power

electric_bolt

electric_bolt

battery_charging_full

battery_charging_full

power

power

Browse Google Material Icons

Energy-Related Icons (Current Library)

Solar

Power

Battery

Power Station

Lamp

Wind Turbine

UI Components

Buttons

Cards

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Centered Card

This card has supporting text below as a natural lead-in to additional content.

Go somewhere

Forms

We are committed to protecting your privacy. We will never collect information about you without your explicit consent.

Technology Stack

Frontend Technologies

HTML5

Semantic markup and modern web standards

CSS3

Advanced styling with Flexbox and Grid

JavaScript

ES6+ features and modern JS libraries

Bootstrap 5

Responsive framework and components

Libraries & Plugins

Revolution Slider

Advanced slider plugin for dynamic content presentation

  • • Multiple transition effects
  • • Responsive design
  • • Touch/swipe support
Icon Libraries

Multiple icon font libraries for comprehensive iconography

  • • Line Icons (Icomoon)
  • • Font Awesome 6
  • • Bootstrap Icons
Responsive Design

Mobile-first approach with breakpoint optimization

  • • Mobile responsive
  • • Tablet optimized
  • • Desktop enhanced

Backend Technologies

PHP

Server-side scripting language

MySQL

Relational database management

Apache

Web server and hosting environment

PHPMailer

Email functionality and contact forms

Scroll