Documentation

LaunchPad - Documentation

Thank you for purchasing LaunchPad - Modern SaaS & Startup Landing Page Template. This documentation will guide you through everything you need to know about customizing and deploying this template. If you have any questions beyond this guide, feel free to reach out through our ThemeForest profile.

Template Version: 1.0.0 | Author: LaunchPad Team | Category: Site Templates / Landing Pages

Quick Info

Item	Details
Template Name	LaunchPad - Modern SaaS & Startup Landing Page
Version	1.0.0
Author	LaunchPad Team
License	Regular License / Extended License (via ThemeForest)
Files Included	HTML, CSS, JS, Documentation, Images
Responsive	Yes - All devices supported
Browser Support	Chrome, Firefox, Safari, Edge, Opera

Features Overview

LaunchPad comes packed with modern features designed for SaaS and startup landing pages:

3 Complete HTML Pages - index.html, about.html, contact.html
Fully Responsive Design - Looks great on desktop, tablet, and mobile
Modern CSS Architecture - CSS Custom Properties for easy customization
Scroll Animations - Intersection Observer-based fade-in animations
Sticky Header - Transparent header that becomes solid on scroll
Mobile Navigation - Hamburger menu with smooth slide-in animation
Pricing Toggle - Monthly/Yearly pricing switch with animation
FAQ Accordion - Interactive expand/collapse with smooth animation
Counter Animation - Numbers count up when section enters viewport
Back to Top Button - Appears on scroll with smooth scroll behavior
Contact Form - Form validation with submit simulation
Preloader - Elegant loading screen that fades on page load
Google Fonts - Plus Jakarta Sans & Inter for modern typography
Font Awesome 6 - 2,000+ icons for all your needs
Well-Documented Code - Every section is clearly commented
Clean Folder Structure - Organized for easy maintenance
Accessibility Support - ARIA labels, semantic HTML, reduced motion
Cross-Browser Compatible - Tested on all modern browsers

File Structure

Here is the complete folder structure of the LaunchPad template package:

LaunchPad/ ├── index.html Main landing page ├── about.html About us page ├── contact.html Contact page ├── README.md Quick start guide ├── LICENSE License file │ ├── css/ │ ├── style.css Main stylesheet (all styles) │ ├── responsive.css Media queries & responsive │ └── animations.css Scroll animations & effects │ ├── js/ │ └── main.js All JavaScript functionality │ ├── images/ │ └── favicon.png Favicon image │ ├── fonts/ Custom fonts (if needed) │ ├── scss/ SCSS source files (if used) │ └── Documentation/ ├── index.html This documentation file └── assets/ Documentation assets

Installation

Setting up LaunchPad is quick and easy. Follow these steps:

1. Extract the Download

After downloading from ThemeForest, extract the ZIP file. You will find two folders:

LaunchPad/ - The main template files (this is what you edit and upload)
Documentation/ - This documentation (not needed for deployment)

2. Open in Code Editor

Open the LaunchPad/ folder in your preferred code editor (VS Code, Sublime Text, etc.). You can use Live Server extension in VS Code to preview the template locally.

3. Preview in Browser

Open index.html in your web browser to preview the template. Make sure all CSS, JS, and image paths are relative and working correctly.

4. Deploy to Server

Upload all files to your web server via FTP (FileZilla) or your hosting control panel's file manager. The index.html file should be in the root directory.

Important: Do not rename the CSS and JS folders unless you also update all file paths in every HTML file. The template uses relative paths.

HTML Structure

LaunchPad uses semantic HTML5 with clearly commented sections. Each section is wrapped with a comment block for easy identification:

<!-- ============================================
     HERO SECTION
     ============================================ -->
<section id="hero" class="hero-section">
    <div class="container">
        <div class="hero-content">
            <!-- Section content goes here -->
        </div>
    </div>
</section>

Page Sections Order (index.html)

#	Section	ID	Description
1	Preloader	#preloader	Loading animation
2	Header	#header	Navigation bar
3	Hero	#hero	Main hero with CTA
4	Features	#features	6 feature cards
5	How It Works	#how-it-works	3-step process
6	About/Stats	#about	Company info + stats
7	Pricing	#pricing	3 pricing plans
8	Testimonials	#testimonials	3 customer reviews
9	FAQ	#faq	6 FAQ items
10	CTA	#cta	Call-to-action banner
11	Contact	#contact	Contact form + info
12	Footer	#footer	Links + copyright

CSS Customization

All theme customization can be done through CSS Custom Properties (variables) defined at the top of css/style.css:

Changing Primary Color

To change the primary color, simply update the CSS variables in :root:

:root {
    /* Change these values to customize the theme */
    --primary: #6C5CE7;       /* Main brand color */
    --primary-light: #A29BFE; /* Lighter variant */
    --primary-dark: #5A4BD1;  /* Darker variant */
    
    --secondary: #00B894;     /* Accent/secondary */
    --accent: #FD79A8;        /* Highlight color */
}

CSS Files Overview

File	Purpose	Lines
style.css	Main stylesheet with all component styles, layout, typography, and theme variables	~1400
responsive.css	Media queries for 4 breakpoints (1200px, 992px, 768px, 576px) + print styles	~350
animations.css	Scroll animations, hover effects, keyframe animations, reduced motion support	~250

Tip: If you want to add custom styles without modifying the original files, create a custom.css file and link it after the other stylesheets in the HTML <head>.

JavaScript

All JavaScript functionality is contained in a single file: js/main.js. It uses vanilla JavaScript with no dependencies.

Features

Feature	Function	Description
Preloader	initPreloader()	Hides loading screen after page load
Sticky Header	initStickyHeader()	Adds .scrolled class on scroll
Mobile Nav		Hamburger menu toggle + overlay
Smooth Scroll	initSmoothScroll()	Smooth scroll to anchor links
Active Nav	initActiveNavOnScroll()	Highlights active section in nav
Scroll Animations	initScrollAnimations()	Intersection Observer fade-in effects
Counter	initCounterAnimation()	Animated number counting
Pricing Toggle	initPricingToggle()	Monthly/Yearly price switch
FAQ Accordion	initFaqAccordion()	Expand/collapse FAQ items
Contact Form	initContactForm()	Form validation + submit simulation
Back to Top	initBackToTop()	Scroll-to-top button visibility

Note: The contact form uses a simulated submission. To make it functional, you need to integrate a backend service (e.g., Formspree, EmailJS, or your own server-side script).

Fonts & Icons

Google Fonts

LaunchPad uses two Google Fonts loaded via CDN:

Font	Usage	Weights
Plus Jakarta Sans	Headings, buttons, brand text	400, 500, 600, 700, 800
Inter	Body text, descriptions, labels	300, 400, 500, 600, 700, 800

Changing Fonts

To use different fonts:

Visit Google Fonts and select your fonts
Replace the Google Fonts link in the <head> of each HTML file
Update the CSS variables in style.css:

:root {
    --font-primary: 'Your Heading Font', sans-serif;
    --font-secondary: 'Your Body Font', sans-serif;
}

Icons

This template uses Font Awesome 6 Free loaded via CDN. Visit fontawesome.com/icons to browse available icons.

To use an icon:

<i class="fas fa-rocket"></i>       <!-- Solid icon -->
<i class="fab fa-twitter"></i>      <!-- Brand icon -->
<i class="far fa-star"></i>        <!-- Regular icon -->

Color Scheme

The color scheme is defined through CSS variables. Here's the complete palette:

Variable	Color	Usage
--primary	■ #6C5CE7	Buttons, links, accents
--primary-light	■ #A29BFE	Hover states, badges
--primary-dark	■ #5A4BD1	Active states
--secondary	■ #00B894	Success, checkmarks
--accent	■ #FD79A8	Highlights, badges
--gray-900	■ #111827	Headings, dark text
--gray-600	■ #4B5563	Body text
--gray-400	■ #9CA3B5	Muted text, labels
--gray-100	■ #F1F3F8	Backgrounds

Header & Navigation

The header is a fixed navigation bar that becomes solid on scroll. It contains the logo, navigation links, and a CTA button.

Changing Logo Text

<a href="index.html" class="navbar-brand">
    <span class="brand-icon"><i class="fas fa-rocket"></i></span>
    <span class="brand-text">Your Brand</span>  <!-- Change this -->
</a>

Changing Logo Icon

Replace the Font Awesome icon class with your desired icon, or use an image instead:

<!-- Using Font Awesome icon -->
<span class="brand-icon"><i class="fas fa-your-icon"></i></span>

<!-- Using image -->
<span class="brand-icon"><img src="images/logo.svg" alt="Logo"></span>

Adding/Removing Nav Links

<li class="nav-item"><a href="#section-id" class="nav-link">Link Text</a></li>

Hero Section

The hero section features a badge, title with gradient text, description, CTA buttons, stats, and a browser mockup. All text content can be edited directly in the HTML.

Gradient Text

To apply gradient text effect, add the gradient-text class to any text element:

<span class="gradient-text">Your Gradient Text</span>

Stats Numbers

The counter animation uses data-target attribute for the target number:

<span class="stat-value counter" data-target="10000">0</span>

Features Section

Features are displayed in a 3-column grid. Each card has an icon, title, description, and link. To customize:

<div class="feature-card animate-fadeInUp">
    <div class="feature-icon" style="--icon-color: #6C5CE7;">
        <i class="fas fa-bolt"></i>  <!-- Change icon -->
    </div>
    <h3 class="feature-title">Feature Title</h3>
    <p class="feature-description">Feature description text...</p>
    <a href="#" class="feature-link">Learn More <i class="fas fa-arrow-right"></i></a>
</div>

Change --icon-color to any hex color to customize the icon background tint.

Pricing Section

The pricing section includes a monthly/yearly toggle and three plan cards. To modify pricing:

<span class="amount" data-monthly="29" data-yearly="23">29</span>

Set data-monthly and data-yearly values. The toggle JavaScript automatically switches between them.

Popular Plan Badge

Add popular class to the pricing card to highlight it:

<div class="pricing-card popular">
    <div class="popular-badge">Most Popular</div>
    <!-- Card content -->
</div>

Contact Section

The contact section includes contact information and a form. The form currently simulates submission. To make it functional:

Option 1: Formspree (Easiest)

<form id="contactForm" action="https://formspree.io/f/YOUR_ID" method="POST">

Option 2: EmailJS

Include the EmailJS SDK and configure your service. Visit emailjs.com for setup instructions.

Option 3: Custom Backend

Build your own backend API endpoint and update the form's action attribute.

ThemeForest Upload Guide

Follow these steps to upload your customized template to ThemeForest:

1. Prepare Your Files

Remove the Documentation/ folder from the main template ZIP
Ensure all image placeholders are replaced with real content or proper placeholder images
Test all pages across multiple browsers and devices
Validate HTML at validator.w3.org
Minify CSS and JS for production (optional but recommended)

2. Create the ZIP File

Create two ZIP files:

Main File: Contains all template files (HTML, CSS, JS, images) - this is what buyers download
Documentation: Contains this documentation file separately

3. ThemeForest Submission

Log in to your ThemeForest author account
Go to Upload > New Item
Select "Site Templates" category
Upload the main ZIP file and documentation ZIP
Add screenshots and preview images (1280x800 minimum)
Write a detailed item description
Set your price and submit for review

Review Process: ThemeForest reviews typically take 3-7 business days. Common rejection reasons include: inconsistent design, poor mobile responsiveness, lack of documentation, and missing license files.

Credits & Sources

All third-party resources used in this template:

Resource	Type	URL	License
Plus Jakarta Sans	Font	Google Fonts	Open Font License
Inter	Font	Google Fonts	Open Font License
Font Awesome 6	Icons	fontawesome.com	Font Awesome Free License

Important: All images used in the preview are for demonstration purposes only and are NOT included in the download package. Replace all placeholder images with your own content before selling or deploying.

Changelog

Version	Date	Changes
1.0.0	June 1, 2025	Initial release - 3 HTML pages, responsive design, all features included

Support

If you encounter any issues or have questions about customizing LaunchPad, you can reach out through:

ThemeForest Comments: Post on the item's comment section
Email Support: Send a detailed email with your purchase code
Documentation: Re-read this guide thoroughly before asking for help

Support Policy: Support covers installation, bug fixes, and clarification on documentation. It does NOT include customization services, adding new features, or third-party integration help.

Thank you for choosing LaunchPad! We appreciate your trust and are committed to helping you succeed.