AgencyPro Documentation

v1.0.0

by HardikKanajariya

AgencyPro HTML Theme Documentation

Welcome to AgencyPro, a premium HTML theme collection designed for digital agencies, creative studios, and professional service providers. This theme package includes 5 unique layout variations, each crafted with modern design principles and optimized for performance.

What's Included

  • 5 Complete Layout Variations
  • Fully Responsive Design
  • Mobile-First Approach
  • Clean, Semantic HTML5
  • Tailwind CSS Framework
  • Modern JavaScript (ES6+)
  • Cross-browser Compatibility
  • Performance Optimized

Theme Features

Mobile Responsive

Fully responsive design that works perfectly on all devices and screen sizes.

Performance Optimized

Lightweight and fast-loading with optimized assets and clean code.

Easy Customization

Well-organized code structure makes customization simple and straightforward.

Clean Code

Semantic HTML5, modern CSS, and vanilla JavaScript following best practices.

Installation & Setup

Quick Start

AgencyPro is a static HTML theme that doesn't require any build process. Simply download and start customizing! 

# Download the theme
# Extract the ZIP file
# Open any index file in your browser

# For development with live reload (optional)
npx live-server .

Requirements

  • • Modern web browser
  • • Basic HTML/CSS knowledge for customization
  • • Code editor (VS Code, Sublime Text, etc.)

File Structure

digital-agency/
├── index.html              # Default layout
├── index-creative.html     # Creative layout variation
├── index-minimal.html      # Minimal layout variation  
├── index-bold.html         # Bold layout variation
├── index-corporate.html    # Corporate layout variation
├── docs.html               # This documentation file
├── about.html              # About page
├── blog.html               # Blog page
├── contact.html            # Contact page
├── portfolio.html          # Portfolio page
├── services.html           # Services page
├── privacy.html            # Privacy policy page
└── assets/
    ├── css/
    │   └── style.css      # Custom styles (additional to Tailwind)
    ├── js/
    │   └── script.js      # Custom JavaScript
    └── images/            # Image assets (user-provided)

Main Files

  • index.html - The default elegant layout
  • index-*.html - Alternative layout variations
  • documentation.html - Complete theme documentation

Assets

  • assets/css/style.css - Custom CSS styles and overrides
  • assets/js/script.js - Custom JavaScript functionality
  • assets/images/ - Placeholder for your images

Layout Variations

1. Default Layout (index.html)

The default layout features a classic, elegant design perfect for most digital agencies and professional services.

  • Classic navigation with smooth transitions
  • Hero section with call-to-action
  • Services showcase grid
  • Portfolio with hover effects
  • Contact form with validation
  • Professional footer

Default Layout Preview

2. Creative Layout (index-creative.html)

Bold and energetic design with dark theme, perfect for creative studios and modern agencies.

  • Dark theme with vibrant accents
  • Animated background elements
  • Creative typography combinations
  • Interactive hover animations
  • Gradient color schemes
  • Modern glass-morphism effects

Creative Layout Preview

3. Minimal Layout (index-minimal.html)

Clean, minimalist design focusing on typography and whitespace for premium feel.

  • Clean typography hierarchy
  • Generous whitespace usage
  • Subtle animations and transitions
  • Monochromatic color scheme
  • Focus on content readability
  • GSAP powered animations

Minimal Layout Preview

4. Bold Layout (index-bold.html)

Dynamic, high-energy design with bold colors and modern animations for cutting-edge agencies.

  • Bold typography and colors
  • Animated gradient backgrounds
  • 3D transform effects
  • Interactive floating elements
  • Neon accent colors
  • Advanced CSS animations

Bold Layout Preview

5. Corporate Layout (index-corporate.html)

Professional, trustworthy design perfect for enterprise clients and B2B services.

  • Professional color palette
  • Data visualization charts
  • Trust indicators and certifications
  • Case study showcases
  • Enterprise-focused content
  • Chart.js integration

Corporate Layout Preview

Customization Guide

Color Customization

Each layout uses Tailwind CSS with custom color configurations. You can easily modify colors by updating the Tailwind config. 

// Tailwind Config Example (in each HTML file)
tailwind.config = {
    theme: {
        extend: {
            colors: {
                primary: '#3B82F6',    // Change this to your brand color
                secondary: '#10B981',  // Secondary brand color
                accent: '#F59E0B',     // Accent color for highlights
                dark: '#1F2937'        // Dark theme color
            }
        }
    }
}
Primary
#3B82F6
Secondary
#10B981
Accent
#F59E0B
Dark
#1F2937

Typography

Each layout uses carefully selected Google Fonts. You can change fonts by updating the Google Fonts link and Tailwind config.

Font Pairings by Layout:

Default: Inter + Space Grotesk
Creative: Poppins + Playfair Display
Minimal: Inter + JetBrains Mono
Bold: Outfit + DM Sans
Corporate: Roboto + Merriweather

Reusable Components

The theme includes several reusable components that you can copy and modify for your needs.

Navigation Bar

Responsive navigation with mobile menu, smooth scrolling, and active states.

Hero Sections

Multiple hero section variations with different layouts and call-to-action styles.

Service Cards

Flexible service cards with icons, descriptions, and hover effects.

Portfolio Grid

Responsive portfolio grid with overlay effects and project details.

Animation Libraries

Different layouts use various animation libraries for enhanced user experience.

AOS (Animate On Scroll)

Used in Creative and Default layouts for scroll-triggered animations.

GSAP

Advanced animations in Minimal layout for professional effects.

CSS Animations

Custom CSS animations in Bold and Corporate layouts.

Browser Support

Supported Browsers

Chrome
Latest 2 versions
Firefox
Latest 2 versions
Safari
Latest 2 versions
Edge
Latest 2 versions

Mobile Support

Android Browser
Android 8.0+
iOS Safari
iOS 13+

Note on IE Support

Internet Explorer is not supported. The theme uses modern CSS features and ES6+ JavaScript.

Changelog

v1.0.0 January 2025

Initial Release

  • • 5 complete layout variations
  • • Fully responsive design
  • • Mobile-first approach
  • • Modern animation libraries integration
  • • Cross-browser compatibility
  • • Comprehensive documentation

Support & Resources

Getting Help

Documentation
Complete guide covering all features and customization options.
Email Support
Get help via email for technical questions and customization guidance.
GitHub Repository
Access to updates, bug reports, and community discussions.

Resources

Tailwind CSS Documentation Google Fonts Font Awesome Icons

Support Policy

Free support is provided for 6 months from purchase date. Support includes bug fixes, compatibility issues, and basic customization guidance.

Credits & Attribution

Third-Party Libraries

Tailwind CSS - Utility-first CSS framework
Font Awesome - Icon library
Google Fonts - Web fonts
AOS - Animate On Scroll library
GSAP - Animation library
Chart.js - Chart library (Corporate layout)
Lottie - Animation library (Bold layout)
Prism.js - Syntax highlighting (Documentation)

Created by HardikKanajariya

Thank you for choosing AgencyPro. If you're happy with the theme, please consider leaving a review!

Follow on Twitter GitHub Profile