Prism HTML Template Documentation

Premium HTML Template by BroadThemes.com

Introduction

Welcome to the Prism HTML Template documentation. This guide will help you understand the structure and customization options for the Prism HTML template.

Prism is a modern, responsive HTML template designed for digital agencies, service providers, and creative businesses. It features a clean, professional design with a focus on showcasing your services, portfolio, and expertise.

The template includes 10 HTML pages, a responsive design that works on all devices, FontAwesome integration, and easy customization options.

Support: For any questions or assistance with this theme, please contact our support team at support@broadthemes.com.

File Structure

The Prism HTML Template has the following file structure:

html/
├── index.html                  # Homepage
├── about.html                  # About page
├── services.html               # Services page
├── service-single.html         # Single service page
├── portfolio.html              # Portfolio/Projects page
├── portfolio-single.html       # Single portfolio item
├── blog.html                   # Blog listing page
├── blog-single.html            # Single blog post
├── contact.html                # Contact page
├── page.html                   # Generic page template
├── assets/
│   ├── css/
│   │   ├── style.css           # Main stylesheet
│   │   └── responsive.css      # Responsive styles
│   ├── js/
│   │   └── main.js             # Main JavaScript file
│   ├── fonts/                  # Font files if needed
│   └── images/                 # Static images

All HTML files are in the root directory, while assets (CSS, JavaScript, images) are in the assets directory.

HTML Structure

All HTML pages in the Prism template follow a consistent structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title - Prism Digital Agency</title>
    <!-- FontAwesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- Responsive Stylesheet -->
    <link rel="stylesheet" href="assets/css/responsive.css">
</head>
<body>
    <!-- Header -->
    <header class="site-header" id="header">
        <!-- Header content -->
    </header>

    <!-- Page Banner or Hero Section -->
    <section class="page-banner" or "hero-section">
        <!-- Banner content -->
    </section>

    <!-- Main Content Sections -->
    <section class="content-section">
        <!-- Section content -->
    </section>

    <!-- CTA Section -->
    <section class="cta-section">
        <!-- CTA content -->
    </section>

    <!-- Footer -->
    <footer class="site-footer">
        <!-- Footer content -->
    </footer>

    <!-- Back to Top Button -->
    <a href="#" class="back-to-top">
        <i class="fas fa-arrow-up"></i>
    </a>

    <!-- Main JavaScript -->
    <script src="assets/js/main.js"></script>
</body>
</html>

Page Banner

All pages except the homepage use a consistent page banner with breadcrumbs:

<section class="page-banner">
    <div class="page-banner-shape"></div>
    <div class="container">
        <div class="page-banner-content">
            <h1 class="page-banner-title">Page Title</h1>
            <div class="breadcrumbs">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li>Page Title</li>
                </ul>
            </div>
        </div>
    </div>
</section>

Update the page title and breadcrumbs for each page.

CSS Files

The Prism HTML template uses two main CSS files:

Main CSS (style.css)

This file contains all the main styling for the theme, organized as follows:

  • CSS variables (colors, fonts, sizes, etc.)
  • Base/reset styles
  • Typography
  • Layout and grid
  • Buttons and form elements
  • Header styles
  • Footer styles
  • Page banner styles
  • Section-specific styles (services, features, testimonials, etc.)
  • Component styles (cards, pricing tables, etc.)
  • Utility classes
  • Page-specific styles (services, about, portfolio, etc.)

The CSS uses CSS variables for easy customization of colors, fonts, spacing, etc. These variables are defined at the top of the stylesheet:

:root {
    --primary-color: #7c3aed;
    --primary-light: #a78bfa;
    --primary-dark: #5b21b6;
    --accent-color: #10b981;
    --accent-light: #34d399;
    --accent-dark: #059669;
    --text-color: #1f2937;
    --text-light: #6b7280;
    --bg-color: #ffffff;
    --bg-light: #f9fafb;
    --bg-dark: #f3f4f6;
    --card-bg: #ffffff;
    --border-color: #e5e7eb;
    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --border-radius-sm: 0.375rem;
    --border-radius: 0.5rem;
    --border-radius-lg: 1rem;
    --transition: all 0.3s ease;
    --container-width: 1280px;
}

To customize the appearance, you can simply modify these variables.

Responsive CSS (responsive.css)

This file contains media queries for making the template responsive on different screen sizes:

/* Large devices (laptops/desktops, up to 1200px) */
@media (max-width: 1200px) {
    /* Styles */
}

/* Medium devices (tablets, up to 992px) */
@media (max-width: 992px) {
    /* Styles */
}

/* Small devices (landscape phones, up to 900px) */
@media (max-width: 900px) {
    /* Mobile menu styles */
    /* Other styles */
}

/* Extra small devices (portrait phones, up to 576px) */
@media (max-width: 576px) {
    .container {
        width: 100%;
        padding: 0 1.5rem;
    }
    /* Other styles */
}

JavaScript

The template uses a single JavaScript file (main.js) to handle various functionalities:

  • Sticky header on scroll
  • Mobile menu toggle
  • Pricing toggle (monthly/yearly)
  • Back to top button
  • Portfolio filters
  • Counter animation for statistics
  • FAQ accordion
  • Alert messages close button
  • Testimonial slider

Key JavaScript features:

// Sticky Header
window.addEventListener('scroll', function() {
    const header = document.getElementById('header');
    if (window.scrollY > 50) {
        header.classList.add('scrolled');
    } else {
        header.classList.remove('scrolled');
    }
});

// Mobile Menu Toggle
const navToggle = document.querySelector('.nav-toggle');
const mainNav = document.querySelector('.main-navigation');
const headerButtons = document.querySelector('.header-buttons');

navToggle.addEventListener('click', function(event) {
    event.stopPropagation();
    mainNav.classList.toggle('show');
    
    // Toggle header buttons
    if (mainNav.classList.contains('show')) {
        headerButtons.classList.add('show');
    } else {
        headerButtons.classList.remove('show');
    }
});

// Portfolio filters (if present on page)
const portfolioFilters = document.querySelectorAll('.portfolio-filter');
const portfolioItems = document.querySelectorAll('.portfolio-item');

if (portfolioFilters.length > 0 && portfolioItems.length > 0) {
    portfolioFilters.forEach(filter => {
        filter.addEventListener('click', function() {
            // Remove active class from all filters
            portfolioFilters.forEach(f => f.classList.remove('active'));
            
            // Add active class to current filter
            this.classList.add('active');
            
            const filterValue = this.getAttribute('data-filter');
            
            // Show/hide portfolio items based on filter
            portfolioItems.forEach(item => {
                if (filterValue === 'all' || item.classList.contains(filterValue)) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });
        });
    });
}

Pages

The Prism HTML template includes the following pages:

Home Page (index.html)

The homepage features a hero section with an SVG illustration, followed by sections for services, features, testimonials, pricing, and blog posts.

Key sections:

  • Hero Section: With heading, description, buttons, and an SVG illustration
  • Services Grid: Displaying 6 main services
  • Features Section: Highlighting key benefits
  • Testimonials: Client testimonials with ratings
  • Pricing Tables: Service pricing with monthly/yearly toggle
  • Blog Section: Recent blog posts
  • CTA Section: Call-to-action with buttons

About Page (about.html)

The about page includes sections for company history, statistics, mission and values, and team members.

Key sections:

  • Page Banner: With title and breadcrumbs
  • About Section: Company history and background
  • Stats Section: Numerical statistics with animations
  • Mission Section: Company mission and values
  • Team Section: Team member cards with social links
  • CTA Section: Call-to-action with buttons

Services Page (services.html)

The services page showcases all services offered with an introduction, grid layout, process steps, and testimonials.

Key sections:

  • Page Banner: With title and breadcrumbs
  • Services Introduction: Overview of services offered
  • Services Grid: Detailed service cards
  • Process Section: How the company works with clients
  • Testimonials: Service-specific testimonials
  • CTA Section: Call-to-action with buttons

Service Single Page (service-single.html)

The service single page provides detailed information about a specific service (web development in the example).

Key sections:

  • Page Banner: With service title and breadcrumbs
  • Service Details: Detailed description of the service
  • Service Features: Key features and benefits
  • Technologies Used: Technologies related to the service
  • Process Steps: Service delivery process
  • Pricing Tables: Service-specific pricing options
  • FAQ Section: Frequently asked questions
  • Related Services: Other related services
  • CTA Section: Call-to-action with buttons

Portfolio Page (portfolio.html)

The portfolio page showcases projects with filtering options.

Key sections:

  • Page Banner: With title and breadcrumbs
  • Portfolio Filters: Category filters (All, Web Design, Mobile App, etc.)
  • Portfolio Grid: Project cards with overlay information
  • Pagination: Page navigation
  • CTA Section: Call-to-action with buttons

Portfolio Single Page (portfolio-single.html)

The portfolio single page provides detailed information about a specific project.

Key sections:

  • Page Banner: With project title and breadcrumbs
  • Project Header: Project title and meta information
  • Project Content: Detailed project description, challenges, solutions, results
  • Project Sidebar: Quick project details and CTA
  • Project Gallery: Additional project images
  • CTA Section: Call-to-action with buttons

Blog Page (blog.html)

The blog page displays blog posts with a sidebar.

Key sections:

  • Page Banner: With title and breadcrumbs
  • Blog Grid: Blog post cards with featured images
  • Blog Sidebar: Search, categories, recent posts, tags
  • Pagination: Page navigation

Blog Single Page (blog-single.html)

The blog single page displays a full blog post with sidebar.

Key sections:

  • Page Banner: With title and breadcrumbs
  • Blog Header: Post title and meta information
  • Blog Content: Full post content with formatting
  • Author Box: Author information
  • Post Navigation: Links to previous/next posts
  • Related Posts: Other similar posts
  • Comments Section: Comment list and form
  • Blog Sidebar: Search, categories, recent posts, tags

Contact Page (contact.html)

The contact page includes contact information, a form, and a map.

Key sections:

  • Page Banner: With title and breadcrumbs
  • Contact Information: Address, phone, email
  • Contact Form: Form with message alerts
  • Google Map: Embedded map

Generic Page (page.html)

The generic page provides a template for additional pages.

Key sections:

  • Page Banner: With title and breadcrumbs
  • Page Content: Content area with various formatting examples
  • CTA Section: Call-to-action with buttons

Customization

The Prism HTML template is designed for easy customization:

Colors

To change the color scheme, modify the CSS variables in the :root section of style.css: 

:root {
    --primary-color: #7c3aed;  /* Main purple color */
    --primary-light: #a78bfa;  /* Lighter purple */
    --primary-dark: #5b21b6;   /* Darker purple */
    --accent-color: #10b981;   /* Green accent */
    --accent-light: #34d399;   /* Lighter green */
    --accent-dark: #059669;    /* Darker green */
    /* Other color variables */
}

This will automatically update all color instances throughout the template.

Fonts

The template uses Google Fonts (Montserrat for headings, Outfit for body text). To change fonts:

  1. Update the Google Fonts link in the <head> section of each HTML file: 
<link href="https://fonts.googleapis.com/css2?family=YourHeadingFont:wght@300;400;500;600;700&family=YourBodyFont:wght@400;500;600;700&display=swap" rel="stylesheet">
  1. Update the font-family in the CSS:
body {
    font-family: 'YourBodyFont', sans-serif;
    /* Other styles */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'YourHeadingFont', sans-serif;
    /* Other styles */
}

Images

Replace the placeholder images in the assets/images/ directory with your own images. Ensure new images maintain similar aspect ratios for best results.

Image locations:

  • Hero section SVG: Inline SVG in index.html
  • Feature images: assets/images/ (referenced in HTML)
  • Team photos: assets/images/team-1.jpg through team-4.jpg
  • Portfolio images: assets/images/portfolio-1.jpg through portfolio-9.jpg
  • Blog images: assets/images/blog-1.jpg through blog-6.jpg
  • Testimonial author images: assets/images/testimonial-1.jpg through testimonial-8.jpg

Content

To customize the content:

  1. Update text content in the HTML files
  2. Modify links to point to your pages
  3. Replace demo contact information with your real information
  4. Update form action URLs to point to your form handler
  5. Replace the Google Maps iframe with your location

Components

The Prism template includes several reusable components:

Buttons

Available button styles:

  • .btn.btn-primary - Primary purple button
  • .btn.btn-secondary - Secondary green button
  • .btn.btn-outline - Outline button
  • .btn-link - Text link with arrow
  • .btn.btn-white - White button (for dark backgrounds)
  • .btn.btn-ghost - Ghost button (transparent with white border)

Example:

<a href="#" class="btn btn-primary"><i class="fas fa-rocket"></i> Get Started</a>
<a href="#" class="btn btn-outline">Learn More</a>

Forms

Form elements are styled with the following classes:

  • .contact-form-group - Form group container
  • .contact-form-label - Form label
  • .contact-form-control - Form input/textarea
  • .validate-form - Add to form element for JavaScript validation

Example:

<form class="validate-form" id="contactForm">
    <div class="contact-form-group">
        <label for="name" class="contact-form-label">Full Name</label>
        <input type="text" id="name" class="contact-form-control" placeholder="Your name" required>
    </div>
    
    <div class="contact-form-group">
        <label for="email" class="contact-form-label">Email Address</label>
        <input type="email" id="email" class="contact-form-control" placeholder="Your email" required>
    </div>
    
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Cards

The template includes various card components:

  • .service-card - Service cards with icon, title, description
  • .feature-card - Feature cards with similar structure
  • .blog-card - Blog post cards with image, meta, title, excerpt
  • .testimonial-card - Testimonial cards with quote, author
  • .team-card - Team member cards with image, name, position
  • .portfolio-item - Portfolio cards with image, overlay info

Pricing Tables

Pricing tables use the following structure:

<div class="pricing-card">
    <div class="pricing-icon">
        <i class="fas fa-seedling"></i>
    </div>
    <h3 class="pricing-title">Starter</h3>
    <div class="pricing-price">
        $49<span class="pricing-period">/month</span>
    </div>
    <ul class="pricing-features">
        <li><i class="fas fa-check"></i> Feature 1</li>
        <li><i class="fas fa-check"></i> Feature 2</li>
        <!-- More features -->
    </ul>
    <a href="#" class="btn btn-outline">Get Started</a>
</div>

Add the popular class to highlight a pricing card:

<div class="pricing-card popular">
    <div class="pricing-badge">Popular</div>
    <!-- Rest of the pricing card -->
</div>

FontAwesome Icons

The template uses FontAwesome 6 for icons. To use an icon, add the appropriate class:

<i class="fas fa-rocket"></i> 
<i class="far fa-envelope"></i> 
<i class="fab fa-facebook-f"></i>

Icon classes follow this pattern:

  • fas - FontAwesome Solid icons
  • far - FontAwesome Regular icons
  • fab - FontAwesome Brand icons

For a complete list of available icons, visit FontAwesome Icons.

Browser Support

The Prism HTML template is compatible with all modern browsers:

  • Google Chrome (latest)
  • Mozilla Firefox (latest)
  • Safari (latest)
  • Microsoft Edge (latest)
  • Opera (latest)

Note: The template may not work properly in older browsers like Internet Explorer due to its use of modern CSS features like CSS variables and grid layout.

Web Hosting

The Prism HTML template is compatible with virtually all web hosting providers. It uses standard HTML, CSS, and JavaScript, making it highly versatile and easy to deploy.

Recommended Hosting: For those seeking an affordable and reliable hosting solution, WeWebHost.com offers budget-friendly hosting plans that are well-suited for static websites like this template. Their basic plans provide excellent performance and ease of use for small to medium-sized websites.

Credits

The Prism HTML template uses the following resources:

  • Google Fonts - Montserrat and Outfit fonts
  • FontAwesome - Icon font
  • Placehold.co - Placeholder Images (for demo only)
  • All images used in the demo are placeholders and should be replaced with your own images for production use.