Modern Consulting Business Website Template

Method 1: The Easiest Way (Using a Code Editor's Find & Replace)

This is the best method if you are not comfortable with code. You'll use a free code editor like VS Code or even a good text editor like Notepad++.

1. Get the Tools: Download and install VS Code. It's free and user-friendly.
2. Create a Project:
   • Create a new folder on your computer for your website (e.g., "MyConsultingSite").
   • Copy the entire HTML code I provided.
   • In VS Code, open your new folder (File > Open Folder).
   • Create a new file called index.html and paste the code into it.
3. Use Find & Replace (Ctrl+H or Cmd+H on Mac):
   This is your most powerful tool. Here's what to search for and replace:

How to change images:

• Find a line like <img src="https://picsum.photos/600/400?random=2" alt="About Us Image">
• Replace the src URL with the path to your own image.
  • If your image is in the same folder as index.html, just use the filename: src="my-about-image.jpg"
  • If it's in a subfolder like images/, use src="images/my-about-image.jpg"

Method 2: Editing Specific Sections (A Guided Approach)

If you want to understand the structure and edit specific parts, here are the key sections to look for in the code.

1. Changing the Logo and Business Name

Find this section in the <header>:

html

<a href="#hero" class="flex items-center space-x-2">

  <svg class="w-8 h-8 text-blue-600" ... > ... </svg> <!-- This is the icon -->

  <span class="text-2xl font-bold text-gray-900">ConsultPro</span>

</a>

• To use your own logo, replace the entire <svg>...</svg> line with an <img> tag:

html

<img src="your-logo.png" alt="Your Company Logo" class="w-8 h-8">

• Change ConsultPro to your business name.

2. Updating the Hero Section

Find the section with id="hero". This is the large banner at the top.

html

<h1 class="...">Unlock Your Business's Full Potential</h1>

<p class="...">Strategic insights and innovative solutions...</p>

• Change the <h1> text to your main headline.
• Change the <p> text to your supporting message.

3. Modifying Services

Find the section with id="services". Each service is in a div with classes like bg-gray-50 p-8 ....

html

<!-- Service Card 1 -->

<div class="bg-gray-50 p-8 ...">

  <div class="icon-placeholder ..."> ... </div> <!-- Icon -->

  <h3 class="...">Strategic Consulting</h3> <!-- Service Title -->

  <p class="...">Develop robust business strategies...</p> <!-- Description -->

</div>

• To change an icon, replace the <svg>...</svg> code inside the icon-placeholder div. You can find free SVG icons on sites like Heroicons or FontAwesome.
• Update the <h3> and <p> tags for the service title and description.

4. Editing the Contact Form

The form is in the id="contact" section. The form itself has inputs for name, email, subject, and message.
For this form to actually work, you need a backend. For a simple solution, you can change the form tag to link to a Formspree or Netlify Forms service.

Example for Formspree:

1. Go to Formspree and create a free account to get your form endpoint.
2. Replace the <form id="contact-form" class="space-y-6"> line with:

html

<form action="https://formspree.io/f/your-form-id-here" method="POST" class="space-y-6">

Method 3: Changing Colors and Styling (For a Custom Look)

This template uses Tailwind CSS. Colors are set using utility classes. The primary color is blue.

• To change the main blue color across the entire site:
  Look for classes like bg-blue-600, text-blue-600, from-blue-700, to-blue-900. You can replace blue with another Tailwind color (e.g., green, purple, red).
  • Example: bg-blue-600 becomes bg-green-600
  • Be careful: The number (600, 700, etc.) indicates the shade. Try to keep the shade numbers consistent for a professional look (e.g., change all -600 to -600).

Summary of Steps to Go Live:

1. Edit Content: Use Find & Replace and the guided approach above to change all the text, images, and contact info.
2. Test Locally: Open your index.html file in a web browser to see your changes.
3. Get a Domain & Hosting: Purchase a domain name (e.g., from Namecheap, Google Domains) and web hosting (e.g., Netlify, Vercel, or a traditional host like SiteGround).
4. Upload Files: Upload your index.html file and the images/ folder (if you have one) to your web host.
5. Connect Domain: Point your domain name to your web hosting service.

Final Tip: Make a copy of the original code before you start editing, so you always have a backup if something goes wrong. Happy editing