Modern Logistics Transport Template

Basic Structure Overview

This template has several main sections:

• Header with navigation
• Hero section
• About Us
• Services
• Fleet
• Tracking
• Industries
• Testimonials
• Quote form
• Contact
• Footer

How to Edit Different Parts

1. Text Content

Replace any text by finding the corresponding HTML elements:

html

<!-- Example: Changing company name -->

<a href="#home" class="text-2xl font-bold tracking-wide">Your <span class="text-orange-400">Company</span></a>

<!-- Example: Changing hero text -->

<h1 class="text-4xl md:text-6xl font-extrabold">Your Custom Headline Here</h1>

<p class="text-lg md:text-xl mb-8">Your custom subheadline here.</p>

2. Colors and Styling

The template uses Tailwind CSS classes. Key color schemes:

• Blue: bg-blue-900, text-blue-900
• Orange: bg-orange-500, text-orange-400
• Change colors by replacing these classes

3. Images

Replace placeholder images by updating the src attributes:

html

<!-- Before -->

<img src="images/hero-bg.jpg" alt="Hero background">

<!-- After -->

<img src="images/your-hero-image.jpg" alt="Your description">

4. Contact Information

Update contact details throughout the site:

html

<!-- In contact section -->

<p class="text-gray-700">your-email@company.com</p>

<p class="text-gray-700">+1 (555) 123-4567</p>

<!-- In footer -->

<li><i class="fas fa-envelope mr-2 text-orange-400"></i> your-email@company.com</li>

5. Services

Customize services by editing the services section:

html

<div class="text-5xl text-orange-500 mb-6"><i class="fas fa-truck"></i></div>

<h3 class="text-2xl font-semibold text-blue-800 mb-4">Your Service Name</h3>

<p class="text-gray-600 leading-relaxed">Your service description here.</p>

6. Forms

Update form fields as needed:

html

<!-- Add/remove form fields -->

<div>

    <label for="custom-field" class="block text-sm font-semibold mb-2">Custom Field</label>

    <input type="text" id="custom-field" name="custom" class="w-full p-3 border border-gray-300 rounded-lg">

</div>

Step-by-Step Editing Process

1. Start with Basic Information

• Company name
• Contact information
• Address

2. Update Hero Section

• Main headline
• Subheadline
• Call-to-action buttons
• Background image

3. Customize Services

• Service names and descriptions
• Icons (Font Awesome classes)
• Service offerings

4. Modify Content Sections

• About us text
• Testimonials
• Industries served
• Fleet descriptions

5. Update Visual Elements

• Images throughout the site
• Colors (if desired)
• Logo

6. Configure Forms

• Form fields
• Validation
• Submission endpoints

Important Files to Edit

1. HTML file - Main content and structure
2. CSS/JavaScript - Additional styling and functionality
3. Image files - Visual assets

Tools You'll Need

• Text Editor: VS Code, Sublime Text, or any code editor
• Image Editor: For resizing/cropping images
• Browser: For testing changes

Quick Customization Tips

1. Change primary color: Replace blue- classes with another color (e.g., green-, purple-)
2. Update fonts: Modify the font-sans class or add Google Fonts
3. Adjust spacing: Modify padding/margin classes (p-4, m-4, etc.)
4. Responsive design: The template is already mobile-responsive

Common Edits

To change the company logo:

html

<a href="#home" class="text-2xl font-bold tracking-wide">Your <span class="text-orange-400">Logo</span></a>

To update social media links:

html

<a href="your-facebook-url" class="hover:text-orange-400"><i class="fab fa-facebook-f"></i></a>

To modify the tracking system:
Update the JavaScript functionality in the script.js file for real tracking integration.