📋 Table of Contents
1. Introduction
Thank you for purchasing FlowLaunch! This is a modern, lightweight HTML5 template built specifically for SaaS products, startups, and digital businesses.
Key Features:
- ✅ Clean, modern design
- ✅ 100% responsive (mobile-first)
- ✅ Pure HTML5, CSS3, and Vanilla JavaScript
- ✅ No frameworks or dependencies
- ✅ SEO optimized structure
- ✅ Easy to customize
- ✅ Well-documented code
2. File Structure
Understanding the file structure will help you navigate and customize the template efficiently.
flowlaunch/
│
├── index.html # Homepage
├── about.html # About page
├── pricing.html # Pricing page
├── contact.html # Contact page
│
├── assets/
│ ├── css/
│ │ ├── style.css # Main stylesheet
│ │ └── responsive.css # Responsive styles
│ │
│ ├── js/
│ │ └── main.js # All JavaScript functionality
│ │
│ ├── images/ # Your images go here
│ └── fonts/ # Custom fonts (optional)
│
├── documentation/
│ └── index.html # This file
│
└── README.txt # Quick start guide
3. Getting Started
Step 1: Extract Files
Extract all files to your desired location. Make sure to maintain the folder structure.
Step 2: Open in Browser
Simply open index.html in your web browser to view the template locally.
💡 Tip: Use a code editor like VS Code, Sublime Text, or Atom for easy editing.
Step 3: Start Customizing
Begin by editing the content in the HTML files and adjusting colors in the CSS files.
4. Customization Guide
Changing Colors
The template uses a consistent color scheme throughout. To change colors:
Primary Colors:
Open assets/css/style.css and find these colors:
| Color |
Current Value |
Usage |
| Primary |
#6366f1 |
Buttons, links, accents |
| Secondary |
#8b5cf6 |
Gradients, highlights |
| Dark |
#111827 |
Headings, dark text |
| Gray |
#6b7280 |
Body text, descriptions |
Use Find & Replace to change all instances of a color throughout the CSS file.
Changing Text Content
To edit text, simply open any HTML file and modify the content between tags:
<h1 class="hero-title">Your New Title Here</h1>
<p class="hero-subtitle">Your new description here</p>
Adding Images
- Place your images in the
assets/images/ folder
- Replace placeholder divs with image tags:
<!-- Replace this: -->
<div class="image-placeholder"></div>
<!-- With this: -->
<img src="assets/images/your-image.jpg" alt="Description">
Changing Logo
The logo is text-based by default. To use an image logo:
<div class="logo">
<a href="index.html">
<img src="assets/images/logo.png" alt="FlowLaunch" height="32">
</a>
</div>
Customizing Pricing
Edit pricing in pricing.html or index.html:
<span class="amount" data-monthly="29" data-yearly="23">29</span>
The data-monthly and data-yearly attributes control the pricing toggle.
Customizing Forms
The contact form is UI-only. To make it functional:
⚠️ Important: You'll need to integrate a backend service or use a form handling service like Formspree, Netlify Forms, or custom PHP script.
5. Pages Overview
Homepage (index.html)
The main landing page includes:
- Hero section with CTA buttons
- Features grid (6 features)
- How it works (3 steps)
- Testimonials (3 cards)
- Pricing tables (3 tiers)
- FAQ accordion
- Call-to-action section
About Page (about.html)
Company information page with:
- Company story section
- Mission & vision cards
- Statistics grid
- Team member grid
- Company values
Pricing Page (pricing.html)
Detailed pricing with:
- Monthly/yearly toggle
- 3 pricing tiers
- Feature comparison table
- FAQ section
Contact Page (contact.html)
Contact information and form with:
- Contact details (email, phone, address)
- Contact form with validation
- Map placeholder
6. Deployment
Option 1: Traditional Web Hosting
- Get hosting from providers like Hostinger, Bluehost, or SiteGround
- Upload all files via FTP/SFTP to your hosting's public_html folder
- Access your site via your domain name
Option 2: Netlify (Recommended for Static Sites)
- Create a free account at netlify.com
- Drag and drop your entire project folder
- Get instant deployment with free SSL
Option 3: GitHub Pages
- Create a GitHub repository
- Upload your files
- Enable GitHub Pages in repository settings
- Access at username.github.io/repository-name
✅ Pro Tip: For best performance, optimize images before deployment using tools like TinyPNG or ImageOptim.
7. Support & Credits
Browser Support
This template works on all modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Opera (latest)
Technologies Used
- HTML5
- CSS3
- Vanilla JavaScript (ES6+)
- Google Fonts (Inter)
Credits
- Font: Inter by Rasmus Andersson
- Icons: SVG (inline, customizable)
📧 Need Help?
If you have questions or need assistance, please don't hesitate to reach out to our support team.
← Back to Homepage