Modern Law Firm Web Template

Editing the Law Firm Website Template

I'll help you understand how to edit this law firm website template. Let me break down the key areas you can customize:

1. Content and Text Changes

To edit any text content, simply locate the HTML elements and modify the text between the tags:

html

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

<a href="#home" class="text-2xl font-serif font-bold text-secondary-gold">YourFirmName.</a>

<!-- Example: Changing practice area descriptions -->

<p class="text-dark-gray">Your custom description for corporate law services.</p>

2. Color Scheme

The template uses a predefined color palette in the Tailwind config. You can change these colors:

javascript

// In the <script> section of the head

tailwind.config = {

    theme: {

        extend: {

            colors: {

                'primary-navy': '#YourColor',    // Main dark color

                'secondary-gold': '#YourColor',  // Accent color

                'light-gray': '#YourColor',      // Background color

                'dark-gray': '#YourColor',       // Text color

                'accent-blue': '#YourColor'      // Secondary accent

            }

        }

    }

}

3. Images

Replace placeholder images with your own:

html

<!-- Replace hero background -->

style="background-image: url('your-image-url-here');"

<!-- Replace team member photos -->

<img src="images/your-team-photo.jpg" alt="Attorney Name">

4. Contact Information

Update contact details throughout the site:

html

<!-- In the contact section -->

<p class="flex items-center text-dark-gray">

    <i class="fas fa-map-marker-alt text-secondary-gold mr-3"></i>

    Your Actual Address

</p>

<p class="flex items-center text-dark-gray">

    <i class="fas fa-phone-alt text-secondary-gold mr-3"></i>

    Your Phone Number

</p>

<p class="flex items-center text-dark-gray">

    <i class="fas fa-envelope text-secondary-gold mr-3"></i>

    your-email@domain.com

</p>

5. Practice Areas

Customize the services you offer:

html

<div class="bg-light-gray p-8 rounded-lg shadow-md hover:shadow-xl transition duration-300 border-t-4 border-secondary-gold">

    <div class="text-secondary-gold text-5xl mb-4">

        <i class="fas fa-your-icon"></i> <!-- Change Font Awesome icon -->

    </div>

    <h3 class="text-xl font-bold text-primary-navy mb-3">Your Practice Area</h3>

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

</div>

6. Team Members

Add or modify attorney profiles:

html

<div class="bg-white text-dark-gray p-6 rounded-lg shadow-lg">

    <img src="images/team-member.jpg" alt="Attorney Name" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover border-4 border-secondary-gold">

    <h3 class="text-xl font-bold text-primary-navy mb-1">Attorney Name</h3>

    <p class="text-secondary-gold mb-3">Position Title</p>

    <p class="text-sm">Specialization and experience description.</p>

</div>

7. Form Processing

To make the contact form functional, you'll need to:

1. Add a backend script to process form submissions
2. Add the action attribute to the form:

html

<form class="space-y-4" action="your-form-processor.php" method="POST">

8. Social Media Links

Update social media profiles:

html

<div class="flex space-x-4">

    <a href="your-facebook-url" class="text-gray-300 hover:text-secondary-gold text-xl">

        <i class="fab fa-facebook-f"></i>

    </a>

    <!-- Add other social media links -->

</div>

9. FAQ Content

Modify questions and answers:

html

<button class="faq-toggle w-full flex justify-between items-center p-6 text-lg font-semibold text-primary-navy hover:bg-gray-50 focus:outline-none transition duration-300">

    <span>Your Question Here?</span>

    <i class="fas fa-chevron-down text-secondary-gold"></i>

</button>

<div class="faq-content hidden p-6 pt-0 text-dark-gray border-t border-gray-200">

    <p>Your detailed answer here.</p>

</div>

10. Adding JavaScript Functionality

The template references a script.js file. You'll need to create this file to handle:

• Mobile menu toggle
• FAQ accordion functionality
• Form validation
• Smooth scrolling for navigation links