Cardex - One Page Portfolio Template preview 1

Cardex - One Page Portfolio Template

bookmark

Cardex is a single-page portfolio HTML template that supports fullscreen slideshows, parallax backgrounds, video backgrounds (YouTube/Vimeo), and various homepage effects. It is suitable for personal photographers, designers, or creative...

HTML

Project Overview

Cardex is a single-page portfolio HTML template that supports fullscreen slideshows, parallax backgrounds, video backgrounds (YouTube/Vimeo), and various homepage effects. It is suitable for personal photographers, designers, or creative professionals to showcase their work. The template offers 6 homepage variants and can be used by directly modifying the content—no programming knowledge required.

Tech Stack

  • HTML5 + CSS3
  • jQuery
  • Slick Carousel (slideshow/carousel)
  • jQuery ScrollTo (smooth scroll navigation)
  • PHP (contact form backend processing, only contact.php)

Project Structure

text
cardexhtml-10/
├── Cardex-v1-0-Documentation/    # Online documentation
│   ├── index.html
│   └── assets/
├── Cardex-v1-0-Template/         # Template main files
│   ├── index-*.html              # 6 homepage variants
│   ├── contact.php               # Contact form processing
│   ├── css/
│   │   ├── style.css             # Main stylesheet
│   │   └── plugins.css           # Third-party plugin styles
│   ├── fonts/                    # ionicons icon font
│   ├── img/                      # Image assets
│   └── js/
│       ├── cardex.js             # Core template interactions
│       └── plugins.js            # Third-party plugins
└── THEMELOCK.COM.txt             # Source attribution

Key File Descriptions

  • index-*.html — Homepage variants (Hero slideshow, Ken Burns, single image, video background, etc.)
  • css/style.css — Main stylesheet containing all section styles (About, Works, News, Contact, etc.)
  • js/cardex.js — Core interaction logic for navigation, slideshow, parallax scrolling, etc.
  • contact.php — Contact form email sending backend; requires configuring the $myemail variable
  • img/ — Assets for background images, portfolio images, news images, navigation images, etc.
  • css/plugins.css — Style overrides for plugins like Slick, Magnific Popup, etc.

Quick Start

  1. Unzip the package and navigate to the Cardex-v1-0-Template folder
  2. Open any index-*.html file directly in a browser to preview
  3. When uploading to a server, upload the entire folder contents to public_html
  4. For the contact form, ensure the server supports PHP and modify the recipient email address in contact.php

Usage Recommendations

Choose the homepage variant that best matches your needs (e.g., index-KENBURNS-SLIDESHOW.html) as a starting point, then replace the images in the img/ directory and update the background paths in style.css. For video backgrounds, replace the video ID as needed.

help_outline

FAQ