Custom Site Footer Design

<?php
// Add this to your theme's functions.php file

// Custom footer with DLOS images and Red2Black Profits branding
function red2black_custom_footer() {
    ?>
    <footer class="red2black-footer">
        <div class="footer-container">
            <!-- Left: DLOS Leadership Images -->
            <div class="footer-left">
                <div class="dlos-images">
                    <img src="<?php echo site_url('/wp-content/uploads/dlos-leaders-exhausted.jpg'); ?>" 
                         alt="DLOS Leadership Assessment" class="dlos-img">
                    <img src="<?php echo site_url('/wp-content/uploads/dlos-leadership-level.jpg'); ?>" 
                         alt="DLOS Leadership Levels" class="dlos-img">
                </div>
            </div>
            
            <!-- Center: Navigation and Contact -->
            <div class="footer-center">
                <!-- Core Navigation -->
                <nav class="footer-nav">
                    <a href="<?php echo home_url(); ?>">Home</a>
                    <a href="<?php echo home_url('/about'); ?>">About</a>
                    <a href="<?php echo home_url('/services'); ?>">Services</a>
                    <a href="<?php echo home_url('/contact'); ?>">Contact</a>
                </nav>
                
                <!-- Contact Info -->
                <div class="footer-contact">
                    <a href="tel:3039556763">303 955 6763</a> / 
                    <a href="mailto:red2blackbiz@gmail.com">red2blackbiz@gmail.com</a>
                </div>
                
                <!-- Copyright -->
                <div class="footer-copyright">
                    2015 - <?php echo date('Y'); ?> Copyright © All Rights Reserved
                </div>
            </div>
            
            <!-- Right: Red2Black Profits Branding -->
            <div class="footer-right">
                <div class="brand-text">
                    <h3>Red2Black Profits</h3>
                    <p>Providing today's businesses and leaders<br>with the skills for tomorrow.</p>
                </div>
            </div>
        </div>
    </footer>
    
    <style>
    .red2black-footer {
        background: #0f172a;
        color: #ffffff;
        padding: 40px 20px 20px;
        margin-top: 60px;
        border-top: 3px solid #E55B10;
    }
    
    .footer-container {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        gap: 40px;
        align-items: center;
    }
    
    /* Left: DLOS Images */
    .footer-left .dlos-images {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .dlos-img {
        width: 100%;
        max-width: 200px;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        transition: transform 0.3s ease;
    }
    
    .dlos-img:hover {
        transform: scale(1.05);
    }
    
    /* Center: Navigation and Contact */
    .footer-center {
        text-align: center;
    }
    
    .footer-nav {
        margin-bottom: 20px;
    }
    
    .footer-nav a {
        color: #ffffff;
        text-decoration: none;
        margin: 0 15px;
        font-weight: 600;
        font-size: 16px;
        transition: color 0.3s ease;
    }
    
    .footer-nav a:hover {
        color: #E55B10;
    }
    
    .footer-contact {
        margin-bottom: 15px;
        font-size: 16px;
    }
    
    .footer-contact a {
        color: #E55B10;
        text-decoration: none;
        font-weight: 600;
    }
    
    .footer-contact a:hover {
        text-decoration: underline;
    }
    
    .footer-copyright {
        font-size: 14px;
        opacity: 0.8;
    }
    
    /* Right: Red2Black Profits Branding */
    .footer-right {
        text-align: right;
    }
    
    .footer-right h3 {
        color: #E55B10;
        font-size: 24px;
        font-weight: 800;
        margin: 0 0 10px 0;
        letter-spacing: -0.02em;
    }
    
    .footer-right p {
        font-size: 14px;
        line-height: 1.5;
        opacity: 0.9;
        margin: 0;
    }
    
    /* Responsive Design */
    @media (max-width: 768px) {
        .footer-container {
            grid-template-columns: 1fr;
            text-align: center;
            gap: 30px;
        }
        
        .footer-right {
            text-align: center;
        }
        
        .footer-nav a {
            display: block;
            margin: 8px 0;
        }
        
        .dlos-images {
            flex-direction: row;
            justify-content: center;
        }
        
        .dlos-img {
            max-width: 150px;
        }
    }
    </style>
    <?php
}

// Hook the footer to appear on all pages
add_action('wp_footer', 'red2black_custom_footer');

// Alternative: Add to theme template files
// You can also add <?php red2black_custom_footer(); ?> directly to your theme's footer.php file
?>