Apex Digital Agency Template

Basic Structure Overview

This template has several main sections:

• Header/Navigation
• Hero section
• Services
• Portfolio
• About Us
• Blog
• Contact
• Footer

How to Edit Different Parts

1. Text Content

Replace any text by finding the corresponding HTML elements:

html

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

<a href="#" class="text-2xl font-bold text-indigo-700">Your New Company Name</a>

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

<h1 class="text-4xl md:text-6xl font-extrabold leading-tight mb-4 animate-fade-in-up">

    Your New Hero Heading

</h1>

2. Colors and Styling

The template uses Tailwind CSS classes. Change colors by modifying classes:

html

<!-- Change primary color from indigo to blue -->

class="text-indigo-700" → class="text-blue-700"

class="bg-indigo-600" → class="bg-blue-600"

3. Images

Replace image sources:

html

<!-- Hero background -->

style="background-image: url('images/your-new-hero-image.jpg');"

<!-- Portfolio images -->

<img src="images/your-portfolio-image.jpg" alt="Your Project">

4. Contact Information

Update contact details:

html

<p class="mb-2">Your New Address</p>

<p class="mb-2">Phone: <a href="tel:+1234567890">+1 (234) 567-890</a></p>

<p>Email: <a href="mailto:your@email.com">your@email.com</a></p>

Step-by-Step Editing Guide

Step 1: Basic Information

1. Change company name in header and footer
2. Update contact information
3. Modify social media links

Step 2: Services

Edit the services section to match your offerings:

html

<!-- Service Card Template -->

<div class="bg-white rounded-lg shadow-xl p-8 transform hover:scale-105 transition duration-300 text-left">

    <div class="flex items-center justify-center w-16 h-16 rounded-full bg-indigo-100 text-indigo-600 mb-6">

        <!-- Icon here -->

    </div>

    <h3 class="text-xl font-bold text-gray-900 mb-3">Your Service Name</h3>

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

</div>

Step 3: Portfolio/Projects

Add your own projects:

html

<div class="bg-white rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition duration-300">

    <img src="images/your-project.jpg" alt="Project Name" class="w-full h-56 object-cover">

    <div class="p-6 text-left">

        <h3 class="text-xl font-bold text-gray-900 mb-2">Project Title</h3>

        <p class="text-gray-600 mb-4">Project description and results.</p>

        <a href="#" class="text-indigo-600 hover:text-indigo-800 font-semibold">View Case Study &rarr;</a>

    </div>

</div>

Step 4: Team Members

Update team information:

html

<div class="bg-white rounded-lg shadow-xl p-6 text-center transform hover:scale-105 transition duration-300">

    <img src="images/team-member.jpg" alt="Team Member" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover">

    <h4 class="text-xl font-bold text-gray-900 mb-1">Team Member Name</h4>

    <p class="text-indigo-600 text-sm mb-3">Position</p>

    <p class="text-gray-600 text-sm">Brief bio or description.</p>

</div>

Important Notes

Image Requirements

• Hero image: Large landscape (recommended: 1920x1080px)
• Portfolio images: Square/rectangle (recommended: 600x400px)
• Team photos: Square (recommended: 300x300px)
• Blog images: Rectangle (recommended: 600x400px)

File Structure

Keep this folder structure:

text

your-website/

├── index.html

├── images/

│   ├── hero-bg.jpg

│   ├── portfolio-1.jpg

│   ├── team-john.jpg

│   └── ...

└── script.js

Customization Tips

1. Brand Colors: Replace all indigo classes with your brand colors
2. Fonts: To change fonts, you'll need to add Google Fonts and update Tailwind config
3. Animations: Remove animate- classes if you don't want animations
4. Sections: Remove any sections you don't need

Quick Color Scheme Change

Replace all instances of these color classes:

• indigo- → blue-, purple-, green-, etc.
• Update both text and background colors

Mobile Responsiveness

The template is already responsive, but test your changes on different screen sizes.

Advanced Customizations

If you need to:

• Add new sections
• Change layout structure
• Add custom functionality
• Integrate with a CMS

You'll need basic HTML/CSS knowledge or developer assistance.