Lumiere Photography Portfolio Template

1. Overview

Lumiere (branded as Lumière Photography in the demo) is a single-page photography portfolio template. It is ideal for wedding photographers, portrait studios, editorial photographers, and creative agencies looking for a modern, elegant online presence.

Key Features

• Full-screen image slider — powered by Nivo Slider with fade transitions
• Filterable portfolio gallery — Isotope masonry with category filters (Wedding, Couples, Portraits, Fashion, Editorial)
• Lightbox viewer — Swipebox integration for fullscreen image viewing
• Testimonials carousel — OWL Carousel for client reviews
• Pricing cards — Four session packages with call-to-action buttons
• Instagram feed section — Grid of recent photos
• Smooth scroll navigation — Single-page navigation with scroll spy
• Scroll animations — WOW.js entrance animations
• Sticky header — Fixed navigation on scroll
• Fully responsive — Mobile-first design with breakpoints at 1024px, 992px, 767px, 576px, and 420px
• Preloader — Animated loading spinner
• Scroll-to-top button — Appears after scrolling 100px

2. Getting Started

This template requires no build tools, no Node.js, and no package managers. Simply open index.html in a browser.

Quick Start

1. Download the template and unzip the archive.
2. Open the html/ folder — this is the project root.
3. Open index.html directly in your browser, or serve it via a local server:

# Using Python
python -m http.server 8000

# Using Node.js (npx)
npx serve .

# Using VS Code
# Install the "Live Server" extension, then right-click index.html → "Open with Live Server"

3. File Structure

The template follows a clean, flat directory layout:

4. Technologies & Dependencies

All dependencies are included locally — no CDN or internet connection required.

Icon Libraries

5. HTML Structure

The page is a single HTML5 document (index.html, 667 lines) organized into sequential <section> blocks. The body uses Bootstrap scroll-spy: data-spy="scroll" data-target="#navmenu" data-offset="70".

Document Outline

<body data-spy="scroll" data-target="#navmenu">

  <!-- Preloader -->
  <div class="site-preloader-wrap">...</div>

  <!-- Header / Navigation -->
  <header id="header">...</header>

  <!-- Hero Slider -->
  <section id="home" class="slider-section">...</section>

  <!-- About -->
  <section id="about" class="about-section">...</section>

  <!-- Portfolio -->
  <section id="portfolio" class="portfolio-section">...</section>

  <!-- Testimonials -->
  <section id="reviews" class="testimonial-section">...</section>

  <!-- Pricing -->
  <section id="pricing" class="pricing-section">...</section>

  <!-- Call to Action -->
  <section class="cta-section">...</section>

  <!-- Instagram Feed -->
  <section class="instafeed-section">...</section>

  <!-- Footer Widgets -->
  <section class="widget-section">...</section>

  <!-- Footer -->
  <footer class="footer-section">...</footer>

  <!-- Scroll-to-top -->
  <a id="scroll-to-top">...</a>

  <!-- Scripts (loaded at end of body) -->
</body>

Navigation Links

The navbar contains four anchor links that smoothly scroll to their corresponding sections:

6. CSS Architecture

Styles are split across 12 CSS files. Only two are custom; the rest are vendor/library files.

Custom Stylesheets

main.css Table of Contents

/*  1.0  Common Styles        — resets, helpers, preloader, buttons
    2.0  Header Section        — navbar, logo, sticky behavior
    3.0  Slider Section        — Nivo Slider, captions, animation
    4.0  About Section         — centered quote, signature
    5.0  Portfolio Section     — filter menu, masonry grid, overlays
    6.0  Testimonial Section   — carousel items, client thumbnails
    7.0  Pricing Section       — pricing cards, lists, price display
    8.0  CTA Section           — call-to-action banner
    9.0  Instafeed Section     — Instagram photo grid
    10.0 Widget Section        — footer widgets, social links
    11.0 Footer Section        — copyright bar
    12.0 Scroll To Top         — floating scroll button  */

Fonts

Google Fonts are loaded via a CSS @import at the top of main.css:

Color Palette

Key Utility Classes

7. JavaScript

All custom JS is in js/main.js (141 lines), wrapped in a jQuery IIFE with "use strict".

Script Loading Order

Scripts are loaded at the end of <body> in this specific order (dependencies first):

1. jquery-1.12.4.min.js — core library
2. bootstrap.min.js — Bootstrap components
3. tether.min.js — positioning engine
4. jquery.slicknav.min.js — mobile menu
5. owl.carousel.min.js — carousel
6. jquery.nivo.slider.pack.js — hero slider
7. imagesloaded.pkgd.min.js — image load detection
8. jquery.isotope.v3.0.2.js — masonry grid
9. smooth-scroll.min.js — smooth scrolling
10. jquery.swipebox.min.js — lightbox
11. wow.min.js — scroll animations
12. main.js — custom initialization

Feature Breakdown

8. Page Sections — Detailed Guide

8.1 Preloader

A full-screen white overlay with a pulsing circle spinner. It fades out when the window load event fires, by adding a .loaded class to the body.

8.2 Header / Navigation

A transparent navigation bar that becomes fixed and opaque (.navbar-fixed-top) after scrolling 80px. Contains:

• Light logo (for dark slider background) and dark logo (for scrolled white background)
• Four anchor-based nav links: Home, About, Portfolio, Pricing
• SlickNav hamburger menu generated automatically for mobile

8.3 Hero Slider

A full-width Nivo Slider with three slides. Each slide has an image and an HTML caption overlay containing:

• A subtitle <span> (e.g., "Destination Weddings")
• A headline <h1> (e.g., "Eternal Moments")
• A tagline <p> (e.g., "Your Love Story, Told Through Our Lens")

Each element uses WOW.js animations (fadeInLeft, fadeInUp, fadeInRight) with staggered delays.

Adding a New Slide

<!-- 1. Add image to the #main-slider div -->
<img src="img/slider-4.jpg" alt="" title="#slider-caption-4" />

<!-- 2. Add caption div after existing captions -->
<div id="slider-caption-4" class="nivo-html-caption slider-caption">
  <div class="display-table">
    <div class="table-cell">
      <div class="container">
        <div class="slider-text text-center">
          <span>Your Category</span>
          <h1>Your Headline</h1>
          <p>Your tagline here</p>
        </div>
      </div>
    </div>
  </div>
</div>

8.4 About Section

A centered text block with a large quote, followed by an animated signature image (sign.gif). Uses an 8-column centered layout (col-lg-8 offset-lg-2).

8.5 Portfolio Section

The largest section, featuring:

• Filter menu — six buttons: All Work, Wedding, Couples, Portraits, Fashion, Editorial
• Masonry grid — 16 portfolio items arranged in a 4-column grid (col-lg-3 col-sm-6)
• Hover overlay — each image shows a title, category, and action icons (zoom, heart, download) on hover
• Lightbox — clicking the zoom icon opens the image in Swipebox fullscreen viewer
• "View Full Gallery" link at the bottom

Portfolio Filter Categories

Adding a Portfolio Item

<div class="col-lg-3 col-sm-6 single-item padding-5 wedding portraits wow fadeInUp" data-wow-delay="0ms">
  <div class="portfolio-item">
    <img src="img/your-image.jpg" alt="Description">
    <div class="overlay">
      <div class="photo-content">
        <h3>Photo Title</h3>
        <span>Category Name</span>
      </div>
      <ul class="media-control">
        <li><a href="img/your-image.jpg" class="lightbox" rel="photo-gallery"><i class="ti-zoom-in"></i></a></li>
        <li><a href="#"><i class="ti-heart"></i></a></li>
        <li><a href="#"><i class="ti-download"></i></a></li>
      </ul>
    </div>
  </div>
</div>

8.6 Testimonials Section

A two-column layout: client thumbnail collage on the left (desktop only), OWL Carousel of reviews on the right. Each testimonial includes a quote, avatar image, name, and title.

Adding a Testimonial

<div class="testi-item">
  <p>Client quote text here.</p>
  <div class="testi-thumb">
    <img src="img/new-avatar.jpg" alt="Name">
    <h3>Client Name <span>Title / Role</span></h3>
  </div>
</div>

8.7 Pricing Section

Four pricing cards in a 4-column grid. Each card has:

• Header image
• Package name heading
• Feature list (.pricing-list)
• Price (.price)
• "Book Now" button (.default-btn)

Current Packages

8.8 Call to Action

A simple two-column row with a heading ("Ready to bring your vision to life?") and a "Get In Touch" button.

8.9 Instagram Feed

A grid of 8 portfolio images styled as an Instagram-like feed. The section title references the handle @lumiere.photography. Images link to their full-size versions.

8.10 Widget Section (Footer Area)

Three-column footer widget area:

• Column 1: Logo, description, social media icons (Facebook, Twitter, Instagram, Behance, YouTube)
• Column 2: Quick Links (About, Portfolio, Packages, Terms, Privacy)
• Column 3: Contact info (address, email, phone)

8.11 Footer

A copyright bar with auto-updating year via JavaScript: © 2026 Lumière Photography. All Rights Reserved.

9. Customization Guide

9.1 Change Brand Name & Logo

1. Replace img/logo-light.svg and img/logo-dark.svg with your own logo files
2. Update the <title> tag in index.html
3. Update <meta name="description"> and <meta name="author">
4. Change footer text and widget-section description

9.2 Change Colors

The main colors to update in css/main.css:

/* Accent color (button hover, links) — search for #e4002b */
.default-btn:hover {
  background-color: #e4002b;  /* ← change this */
}

/* Primary button color — search for background-color: #000 */
.default-btn {
  background-color: #000;  /* ← change this */
}

/* Body text color */
body {
  color: #555;
}

/* Heading color */
h1, h2, h3, h4 {
  color: #000;
}

9.3 Change Fonts

Update the Google Fonts import at the top of main.css:

/* Current import */
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500|Unna:400,700');

/* Then update the font-family declarations: */
body { font-family: 'Poppins', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Unna', sans-serif; }

9.4 Change Slider Settings

Edit the Nivo Slider configuration in js/main.js:

$('#main-slider').nivoSlider({
  effect: 'fade',        // Options: fade, sliceDown, sliceUp, etc.
  animSpeed: 300,        // Transition speed in ms
  pauseTime: 5000,       // Time between slides in ms
  directionNav: true,    // Show prev/next arrows
  controlNav: false,     // Show dot navigation
  pauseOnHover: true,    // Pause when mouse hovers
});

9.5 Change Social Media Links

Update the href attributes in the widget-section's social list:

<ul class="widget-social">
  <li><a href="https://facebook.com/your-page"><i class="fa fa-facebook"></i></a></li>
  <li><a href="https://twitter.com/your-handle"><i class="fa fa-twitter"></i></a></li>
  <li><a href="https://instagram.com/your-handle"><i class="fa fa-instagram"></i></a></li>
  ...
</ul>

9.6 Change Contact Information

Update the third widget column in the widget-section with your address, email, and phone number.

9.7 Add a New Navigation Link

<!-- In the #navmenu ul -->
<li><a data-scroll class="nav-link" href="#reviews">Reviews</a></li>

10. Image Assets

All images are stored in the img/ directory (41 files total).

11. Fonts & Icons

Web Fonts (Google Fonts)

Two Google Fonts are imported via CSS:

• Poppins (400, 500) — Used for body text, paragraphs, buttons, and labels
• Unna (400, 700) — Used for all headings (h1–h6)

Icon Font Files

The fonts/ directory contains 22 icon font files across 5 font families:

12. Responsive Design

The template uses Bootstrap 4's grid system combined with custom media queries in responsive.css.

Breakpoints

Grid Behavior

• Portfolio: 4 columns on desktop (col-lg-3), 2 columns on tablet (col-sm-6), 1 column on mobile
• Pricing: 4 columns on desktop (col-lg-3), 2 columns on tablet (col-sm-6), stacked on mobile
• Testimonials: 2 columns on desktop (col-lg-6), thumbnail collage hidden on mobile
• Footer widgets: 3 columns on desktop (col-lg-4), 2 on tablet (col-sm-6), stacked on mobile

13. Browser Support

The template includes IE conditional comments and Modernizr for broad browser compatibility.

Legacy Browser Features

• Modernizr 2.8.3 with Respond.js 1.4.2 — enables media queries and HTML5 elements in IE8
• Conditional HTML classes (lt-ie9, lt-ie8, lt-ie7) for targeted CSS fixes
• Browser upgrade prompt for IE < 8

14. Credits & License

Template

• Template Name: Lumiere Photography Portfolio Template
• Author: ThemeEaster

Third-Party Libraries