NovaLaunch Documentation - Complete Guide

Getting Started

Thank you for purchasing NovaLaunch! This documentation will guide you through setting up and customizing your new landing page template.

Quick Start

Extract the downloaded ZIP file to your computer
Open the index.html file in your web browser to preview the template
Edit the HTML, CSS, and JS files using your preferred code editor (VS Code, Sublime Text, etc.)
Upload the files to your web server when ready

Note: This template uses external CDN links for libraries like Bootstrap, so an internet connection is required for full functionality.

Requirements

Modern web browser (Chrome, Firefox, Safari, Edge)
Text/Code editor for customization
Web hosting for deployment
Basic knowledge of HTML/CSS (helpful but not required)

File Structure

Understanding the file structure will help you navigate and customize the template efficiently.

NovaLaunch/ ├── index.html # Main HTML file ├── assets/ │ ├── css/ │ │ └── styles.css # Custom styles │ ├── js/ │ │ └── main.js # JavaScript functionality │ ├── img/ # Image assets │ │ ├── hero-illustration.svg │ │ ├── about-image.svg │ │ ├── favicon.png │ │ ├── portfolio/ # Portfolio images │ │ └── testimonials/ # Testimonial avatars │ └── vendor/ # Third-party libraries (if needed) └── documentation/ └── index.html # This documentation file

Key Files

index.html - Main landing page with all sections
assets/css/styles.css - All custom styles and theme variables
assets/js/main.js - Interactive features and animations

Features Overview

NovaLaunch comes packed with modern features and components:

Fully Responsive Design
Bootstrap 5 Framework
Light & Dark Mode Toggle
Smooth Scroll Navigation
Animated Hero Section
Features Grid
About Section
Services Cards

Pricing Tables (Monthly/Yearly)
Filterable Portfolio
Lightbox Gallery
Testimonials Slider
FAQ Accordion
Contact Form with Validation
Google Maps Integration
Scroll to Top Button

Customization Guide

NovaLaunch is designed to be easily customizable. Here's how to make it your own.

Using a Code Editor

We recommend using a modern code editor for customization:

Visual Studio Code (Free, Recommended) - Download
Sublime Text - Download
Atom - Download

Changing Colors

All colors are defined as CSS variables for easy customization.

Steps to Change Colors

Open assets/css/styles.css in your code editor
Find the :root section at the top of the file (around line 10)
Modify the color values

:root {
    /* Primary Colors */
    --primary-color: #6366F1;     /* Change main brand color */
    --secondary-color: #10B981;   /* Change secondary color */
    --accent-color: #F59E0B;      /* Change accent color */
    
    /* Background Colors */
    --bg-color: #ffffff;
    --bg-secondary: #f8f9fa;
}
                        

Tip: Use a color picker tool like Coolors.co to find perfect color combinations.

Color Palette Reference

Variable	Default Value	Usage
`--primary-color`	#6366F1 (Indigo)	Buttons, links, highlights
`--secondary-color`	#10B981 (Green)	Success states, icons
`--accent-color`	#F59E0B (Amber)	Ratings, special elements

Replacing Images

Replace placeholder images with your own to personalize the template.

Image Locations

Section	File Path	Recommended Size
Hero Illustration	`assets/img/hero-illustration.svg`	800x600px
About Image	`assets/img/about-image.svg`	600x500px
Portfolio Items	`assets/img/portfolio/portfolio-[1-6].jpg`	800x600px
Testimonial Avatars	`assets/img/testimonials/avatar-[1-5].jpg`	200x200px
Favicon	`assets/img/favicon.png`	32x32px or 64x64px

How to Replace Images

Prepare your images in the recommended sizes
Name them appropriately or update the HTML references
Replace the existing files in the assets/img/ folder
If using different filenames, update the src attributes in index.html

<!-- Example: Replacing hero image -->
<img src="assets/img/your-hero-image.png" alt="Hero">
                        

Important: Optimize images before uploading to ensure fast page load times. Use tools like TinyPNG or Squoosh.

Editing Text Content

All text content is in the index.html file and can be easily edited.

Changing Hero Title

Find the hero section (around line 90 in index.html):

<h1 class="hero-title">
    <span class="typed-text">Launch Your Business</span>
</h1>
<p class="hero-subtitle">
    Build stunning landing pages...
</p>
                        

Changing Navigation Links

Find the navbar section (around line 40):

<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link" href="#hero">Home</a>
    </li>
    <!-- Add or remove menu items as needed -->
</ul>
                        

Changing Company Information

Update contact details in the Contact section:

<p>123 Business Street<br>New York, NY 10001</p>
<p>info@example.com<br>support@example.com</p>
<p>+1 (555) 123-4567</p>
                        

Customizing Sections

Adding a New Feature Card

Copy an existing feature card and modify it:

<div class="col-lg-4 col-md-6">
    <div class="feature-card">
        <div class="feature-icon">
            <i class="bi bi-your-icon"></i>
        </div>
        <h3 class="feature-title">Your Feature Title</h3>
        <p class="feature-description">
            Your feature description here...
        </p>
    </div>
</div>
                        

Modifying Pricing Plans

Update prices and features in the pricing section:

<div class="pricing-price">
    <span class="currency">$</span>
    <span class="amount monthly-price">29</span>
    <span class="period">/month</span>
</div>
                        

Removing a Section

To remove a section you don't need:

Find the section in index.html (e.g., <section id="portfolio">)
Delete the entire section from opening to closing tag
Remove the corresponding navigation link

Tip: Instead of deleting, you can comment out sections using  to preserve them for later use.

Dark Mode Setup

NovaLaunch includes a built-in dark mode feature that users can toggle.

How It Works

The dark mode is controlled by CSS variables and JavaScript:

Users click the moon/sun icon in the navigation
JavaScript toggles the data-theme attribute
CSS variables automatically update colors
Preference is saved in browser's localStorage

Customizing Dark Mode Colors

Edit dark theme colors in styles.css:

[data-theme="dark"] {
    --bg-color: #0f172a;          /* Dark background */
    --bg-secondary: #1e293b;      /* Secondary dark bg */
    --text-color: #f1f5f9;        /* Light text */
    --text-secondary: #94a3b8;    /* Secondary light text */
}
                        

Disabling Dark Mode

To disable the dark mode feature:

Remove the theme toggle button from the navigation in index.html
Comment out or remove the themeToggle() function call in main.js

Contact Form Setup

The template includes a contact form with client-side validation. To make it functional, you need to add backend processing.

Options for Form Processing

1. Using FormSubmit.co (Easiest - No Code Required)

FormSubmit is a free service that processes forms and sends emails:

Go to FormSubmit.co
Replace the form action in index.html:

<form action="https://formsubmit.co/your@example.com" method="POST">
    <!-- form fields -->
</form>
                        

2. Using PHP (Requires PHP Hosting)

Create a contact.php file:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $subject = $_POST['subject'];
    $message = $_POST['message'];
    
    $to = "your@example.com";
    $headers = "From: " . $email;
    
    mail($to, $subject, $message, $headers);
    echo json_encode(['status' => 'success']);
}
?>
                        

3. Using Third-Party Services

Netlify Forms - Free with Netlify hosting
Google Forms - Free form processing
Formspree - Easy form backend service

Note: The current form includes JavaScript validation and displays success/error messages, but doesn't actually send emails without backend setup.

Deployment

Once you've customized your template, it's time to deploy it online.

Deployment Options

1. Traditional Web Hosting

Upload files via FTP/SFTP to your hosting provider:

Connect to your server using an FTP client (FileZilla, Cyberduck)
Upload all files to your public_html or www folder
Ensure index.html is in the root directory
Test your website in a browser

2. Free Static Hosting

Great for testing and personal projects:

Netlify - Drag and drop deployment, free SSL
Vercel - Fast deployment with Git integration
GitHub Pages - Free hosting for GitHub repositories
Cloudflare Pages - Fast global CDN included

3. Netlify Deployment (Recommended for Beginners)

Sign up at netlify.com
Drag your project folder into the Netlify dashboard
Your site will be live in seconds with a free URL
Optional: Connect a custom domain

Pre-Deployment Checklist

Replace all placeholder text and images
Update contact information (email, phone, address)
Test contact form functionality
Optimize images for web
Update meta tags and page title
Test on multiple devices and browsers
Check all links work correctly
Add Google Analytics (if needed)

Adding Google Analytics

Add tracking code before the closing </head> tag:

<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR-GA-ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'YOUR-GA-ID');
</script>
                        

Credits & Licenses

NovaLaunch uses the following open-source libraries and resources:

Frameworks & Libraries

Resource	Version	License	Website
Bootstrap	5.3.2	MIT	getbootstrap.com
Bootstrap Icons	1.11.1	MIT	icons.getbootstrap.com
AOS (Animate On Scroll)	2.3.1	MIT	michalsnik.github.io/aos/
Swiper	11.0	MIT	swiperjs.com
GLightbox	Latest	MIT	glightbox

Fonts

Inter - Google Fonts (SIL Open Font License)

Images & Graphics

Placeholder images should be replaced with your own. For free stock images and illustrations, check out:

Unsplash - Free high-quality photos
Pexels - Free stock photos
unDraw - Free SVG illustrations
ManyPixels - Free illustrations

License: With your purchase, you receive a license to use NovaLaunch for personal or commercial projects. You may not resell or redistribute the template files themselves.

Support

We're here to help! If you have questions or need assistance:

Before Contacting Support

Check this documentation thoroughly
Review the code comments in HTML, CSS, and JS files
Clear your browser cache and test in incognito mode
Check browser console for JavaScript errors (F12)

What We Support

Questions about template features
Bug fixes and template issues
Guidance on basic customization
Clarification on documentation

What We Don't Support

Third-party plugins or scripts not included in the template
Server configuration or hosting issues
Custom feature development beyond the template scope
Website content creation

Contact Information

Email Support: support@example.com

Response Time: Typically within 24-48 hours (business days)

Useful Resources

Thank You!

Thank you for choosing NovaLaunch! We hope this template helps you create an amazing online presence. If you're happy with your purchase, please consider leaving a rating and review. Happy building! 🚀