Project Introductionlink

The Outskirts is a responsive "Coming Soon" page template featuring a countdown timer, contact form, and email subscription functionality. It offers multiple background effects (video, image slideshow, Ken Burns) and weather atmospheres (rain, snow, clouds, particles), making it suitable for website maintenance or pre-launch placeholder pages.

Tech Stacklink

• Bootstrap 3.x (CSS framework)
• jQuery (DOM manipulation and interactions)
• Supersized 3.2.7 (background slideshow library)
• PHP (contact form and email subscription backend)
• MailChimp API (email list integration)

Project Structurelink

The-Outskirts-v1-1-Template/
├── index-*.html              # 30 homepage variants (background + theme + atmosphere combinations)
├── contact.php               # Contact form processing
├── subscribe.php             # MailChimp subscription processing
├── css/
│   ├── bootstrap.min.css     # Bootstrap core styles
│   ├── style-dark.css        # Dark theme
│   ├── style-light.css       # Light theme
│   └── font-awesome-4.4.0/   # Icon font
├── js/
│   ├── supersized.*.js       # Configuration scripts for each background effect
│   └── the-outskirts.js      # Main interaction logic (rotating text, etc.)
└── img/                      # Background images, cloud/rain/snow assets, etc.

The-Outskirts-v1-1-Documentation/
└── index.html                # Official documentation

Core File Descriptionlink

• index-*.html — 30 template variants, combined by background type (video/ken-burns/single-image/slideshow/youtube-video), theme color (dark/light), and atmosphere (clean/clouds/rain/snow/particles)
• css/style-dark.css / style-light.css — Dark/light theme stylesheets
• js/the-outskirts.js — Main script controlling welcome message carousel and other interactions
• js/supersized.*.js — Supersized background engine configuration, determines which background effect to use
• contact.php — Receives contact form POST data and sends email
• subscribe.php — Integrates with MailChimp API for email subscription

Quick Startlink

1. Select the appropriate index-*.html as your index.html based on your needs
2. Modify page text content (welcome message, countdown target date, etc.)
3. Replace background assets (videos, images) or update the YouTube video ID
4. Configure the contact form: set $myemail in contact.php
5. Configure the subscription feature: fill in MailChimp API Key and List ID in subscribe.php
6. Deploy the entire directory to a PHP-enabled web server

For local preview of some effects, you can open HTML files directly in a browser, but the contact form and subscription features require a server environment.

Usage Suggestionslink

• Consider page loading speed when choosing background types; HTML5 video backgrounds are recommended to be under 5MB
• Remember to replace placeholder email addresses/API keys in contact.php and subscribe.php with real values before deployment to avoid form functionality failure