my-test / index.html
AlexCPCP's picture
undefined - Initial Deployment
84ae760 verified
Raw
History Blame Contribute Delete
23.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Khoral & Plainlaiter - Professional Consulting</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1a365d',
secondary: '#2c5282',
accent: '#4299e1',
}
}
}
}
</script>
<style>
.hero-bg {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1450101499163-c8848c66ca85?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
background-size: cover;
background-position: center;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.nav-link:after {
content: '';
display: block;
width: 0;
height: 2px;
background: #4299e1;
transition: width .3s;
}
.nav-link:hover:after {
width: 100%;
}
</style>
</head>
<body class="font-sans antialiased">
<!-- Top Bar -->
<div class="bg-primary text-white text-sm py-2 px-4">
<div class="container mx-auto flex justify-between items-center">
<div class="flex space-x-4">
<a href="#" class="hover:text-accent transition"><i class="fas fa-phone-alt mr-1"></i> +1 (555) 123-4567</a>
<a href="#" class="hover:text-accent transition"><i class="fas fa-envelope mr-1"></i> contact@khoralplainlaiter.com</a>
</div>
<div class="flex space-x-4">
<a href="#" class="hover:text-accent transition"><i class="fab fa-linkedin"></i></a>
<a href="#" class="hover:text-accent transition"><i class="fab fa-twitter"></i></a>
<a href="#" class="hover:text-accent transition"><i class="fab fa-facebook"></i></a>
</div>
</div>
</div>
<!-- Navigation -->
<nav class="bg-white shadow-md sticky top-0 z-50">
<div class="container mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex items-center">
<a href="#" class="text-2xl font-bold text-primary">
<span class="text-primary">KHORAL</span> & <span class="text-accent">PLAINLAITER</span>
</a>
</div>
<!-- Mobile menu button -->
<div class="md:hidden">
<button id="menu-toggle" class="text-gray-700 focus:outline-none">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
<!-- Desktop Menu -->
<div class="hidden md:flex space-x-8">
<a href="#" class="nav-link text-primary font-medium">Home</a>
<a href="#" class="nav-link text-gray-700 hover:text-primary font-medium">About Us</a>
<a href="#" class="nav-link text-gray-700 hover:text-primary font-medium">Services</a>
<a href="#" class="nav-link text-gray-700 hover:text-primary font-medium">Industries</a>
<a href="#" class="nav-link text-gray-700 hover:text-primary font-medium">Insights</a>
<a href="#" class="nav-link text-gray-700 hover:text-primary font-medium">Careers</a>
<a href="#" class="nav-link text-gray-700 hover:text-primary font-medium">Contact</a>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden bg-white pb-4 px-4">
<a href="#" class="block py-2 text-primary font-medium">Home</a>
<a href="#" class="block py-2 text-gray-700 hover:text-primary">About Us</a>
<a href="#" class="block py-2 text-gray-700 hover:text-primary">Services</a>
<a href="#" class="block py-2 text-gray-700 hover:text-primary">Industries</a>
<a href="#" class="block py-2 text-gray-700 hover:text-primary">Insights</a>
<a href="#" class="block py-2 text-gray-700 hover:text-primary">Careers</a>
<a href="#" class="block py-2 text-gray-700 hover:text-primary">Contact</a>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-bg text-white py-20 md:py-32">
<div class="container mx-auto px-4 text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Strategic Solutions for Complex Challenges</h1>
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Khoral & Plainlaiter delivers innovative consulting services to help organizations navigate today's dynamic business landscape.</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#" class="bg-accent hover:bg-blue-600 text-white font-bold py-3 px-8 rounded transition duration-300">Our Services</a>
<a href="#" class="bg-transparent hover:bg-white hover:text-primary border-2 border-white text-white font-bold py-3 px-8 rounded transition duration-300">Contact Us</a>
</div>
</div>
</section>
<!-- About Section -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-12">
<h2 class="text-3xl font-bold text-primary mb-6">About Khoral & Plainlaiter</h2>
<p class="text-gray-700 mb-4">Founded in 2005, Khoral & Plainlaiter has grown to become a trusted partner for organizations across multiple industries. Our team of seasoned professionals brings decades of combined experience to every engagement.</p>
<p class="text-gray-700 mb-6">We pride ourselves on delivering measurable results through customized solutions that address our clients' most pressing challenges while positioning them for long-term success.</p>
<a href="#" class="inline-block bg-primary hover:bg-secondary text-white font-bold py-3 px-6 rounded transition duration-300">Learn More About Us</a>
</div>
<div class="md:w-1/2">
<img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Team meeting" class="rounded-lg shadow-xl w-full">
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section class="py-16">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-primary mb-4">Our Services</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">Comprehensive consulting services tailored to your organization's unique needs</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Service 1 -->
<div class="service-card bg-white rounded-lg shadow-md p-6 transition duration-300">
<div class="text-accent text-4xl mb-4">
<i class="fas fa-chart-line"></i>
</div>
<h3 class="text-xl font-bold text-primary mb-3">Strategic Advisory</h3>
<p class="text-gray-700 mb-4">Help organizations develop and execute winning strategies in complex and competitive markets.</p>
<a href="#" class="text-accent font-medium hover:underline">Learn More <i class="fas fa-arrow-right ml-1"></i></a>
</div>
<!-- Service 2 -->
<div class="service-card bg-white rounded-lg shadow-md p-6 transition duration-300">
<div class="text-accent text-4xl mb-4">
<i class="fas fa-cogs"></i>
</div>
<h3 class="text-xl font-bold text-primary mb-3">Operational Excellence</h3>
<p class="text-gray-700 mb-4">Optimize business processes to improve efficiency, reduce costs, and enhance customer satisfaction.</p>
<a href="#" class="text-accent font-medium hover:underline">Learn More <i class="fas fa-arrow-right ml-1"></i></a>
</div>
<!-- Service 3 -->
<div class="service-card bg-white rounded-lg shadow-md p-6 transition duration-300">
<div class="text-accent text-4xl mb-4">
<i class="fas fa-users"></i>
</div>
<h3 class="text-xl font-bold text-primary mb-3">Human Capital Solutions</h3>
<p class="text-gray-700 mb-4">Develop talent strategies that align with business objectives and drive organizational performance.</p>
<a href="#" class="text-accent font-medium hover:underline">Learn More <i class="fas fa-arrow-right ml-1"></i></a>
</div>
<!-- Service 4 -->
<div class="service-card bg-white rounded-lg shadow-md p-6 transition duration-300">
<div class="text-accent text-4xl mb-4">
<i class="fas fa-laptop-code"></i>
</div>
<h3 class="text-xl font-bold text-primary mb-3">Digital Transformation</h3>
<p class="text-gray-700 mb-4">Leverage technology to create competitive advantage and enable business model innovation.</p>
<a href="#" class="text-accent font-medium hover:underline">Learn More <i class="fas fa-arrow-right ml-1"></i></a>
</div>
<!-- Service 5 -->
<div class="service-card bg-white rounded-lg shadow-md p-6 transition duration-300">
<div class="text-accent text-4xl mb-4">
<i class="fas fa-balance-scale"></i>
</div>
<h3 class="text-xl font-bold text-primary mb-3">Risk & Compliance</h3>
<p class="text-gray-700 mb-4">Navigate regulatory complexity while maintaining operational resilience and business continuity.</p>
<a href="#" class="text-accent font-medium hover:underline">Learn More <i class="fas fa-arrow-right ml-1"></i></a>
</div>
<!-- Service 6 -->
<div class="service-card bg-white rounded-lg shadow-md p-6 transition duration-300">
<div class="text-accent text-4xl mb-4">
<i class="fas fa-handshake"></i>
</div>
<h3 class="text-xl font-bold text-primary mb-3">M&A Advisory</h3>
<p class="text-gray-700 mb-4">Support throughout the entire M&A lifecycle from strategy through integration and value realization.</p>
<a href="#" class="text-accent font-medium hover:underline">Learn More <i class="fas fa-arrow-right ml-1"></i></a>
</div>
</div>
</div>
</section>
<!-- Industries Section -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-primary mb-4">Industries We Serve</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">Deep expertise across key sectors of the economy</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white rounded-lg shadow-md p-6 text-center hover:shadow-lg transition">
<div class="text-accent text-4xl mb-4">
<i class="fas fa-university"></i>
</div>
<h3 class="text-xl font-bold text-primary mb-2">Financial Services</h3>
<p class="text-gray-700">Banks, insurance, asset management, and fintech</p>
</div>
<div class="bg-white rounded-lg shadow-md p-6 text-center hover:shadow-lg transition">
<div class="text-accent text-4xl mb-4">
<i class="fas fa-medkit"></i>
</div>
<h3 class="text-xl font-bold text-primary mb-2">Healthcare</h3>
<p class="text-gray-700">Providers, payers, pharma, and medical technology</p>
</div>
<div class="bg-white rounded-lg shadow-md p-6 text-center hover:shadow-lg transition">
<div class="text-accent text-4xl mb-4">
<i class="fas fa-industry"></i>
</div>
<h3 class="text-xl font-bold text-primary mb-2">Manufacturing</h3>
<p class="text-gray-700">Industrial, automotive, aerospace, and consumer goods</p>
</div>
<div class="bg-white rounded-lg shadow-md p-6 text-center hover:shadow-lg transition">
<div class="text-accent text-4xl mb-4">
<i class="fas fa-bolt"></i>
</div>
<h3 class="text-xl font-bold text-primary mb-2">Energy & Utilities</h3>
<p class="text-gray-700">Oil & gas, power, renewables, and water</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-16 bg-primary text-white">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold mb-4">What Our Clients Say</h2>
<p class="text-xl opacity-90 max-w-2xl mx-auto">Hear from organizations that have partnered with Khoral & Plainlaiter</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-secondary p-8 rounded-lg">
<div class="flex items-center mb-4">
<div class="text-yellow-400 text-xl mr-2">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<p class="mb-6 italic">"Khoral & Plainlaiter's strategic guidance was instrumental in our digital transformation journey. Their team brought both deep expertise and practical solutions."</p>
<div class="flex items-center">
<div class="bg-white text-primary rounded-full w-12 h-12 flex items-center justify-center font-bold mr-4">JD</div>
<div>
<h4 class="font-bold">Jane Doe</h4>
<p class="text-sm opacity-80">CEO, TechForward Inc.</p>
</div>
</div>
</div>
<div class="bg-secondary p-8 rounded-lg">
<div class="flex items-center mb-4">
<div class="text-yellow-400 text-xl mr-2">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<p class="mb-6 italic">"The operational excellence program delivered measurable cost savings while improving our service levels. Truly outstanding results."</p>
<div class="flex items-center">
<div class="bg-white text-primary rounded-full w-12 h-12 flex items-center justify-center font-bold mr-4">JS</div>
<div>
<h4 class="font-bold">John Smith</h4>
<p class="text-sm opacity-80">COO, Global Manufacturing Co.</p>
</div>
</div>
</div>
<div class="bg-secondary p-8 rounded-lg">
<div class="flex items-center mb-4">
<div class="text-yellow-400 text-xl mr-2">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
<p class="mb-6 italic">"Their M&A advisory team guided us through a complex acquisition with professionalism and attention to detail. Highly recommended."</p>
<div class="flex items-center">
<div class="bg-white text-primary rounded-full w-12 h-12 flex items-center justify-center font-bold mr-4">AB</div>
<div>
<h4 class="font-bold">Alex Brown</h4>
<p class="text-sm opacity-80">CFO, HealthSolutions Group</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 bg-accent text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-6">Ready to Transform Your Business?</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto">Contact us today to discuss how Khoral & Plainlaiter can help your organization achieve its strategic objectives.</p>
<a href="#" class="inline-block bg-white hover:bg-gray-100 text-accent font-bold py-3 px-8 rounded transition duration-300">Get in Touch</a>
</div>
</section>
<!-- Footer -->
<footer class="bg-primary text-white pt-12 pb-6">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div>
<h3 class="text-xl font-bold mb-4">KHORAL & PLAINLAITER</h3>
<p class="mb-4">Delivering strategic solutions that drive sustainable business success.</p>
<div class="flex space-x-4">
<a href="#" class="hover:text-accent transition"><i class="fab fa-linkedin text-xl"></i></a>
<a href="#" class="hover:text-accent transition"><i class="fab fa-twitter text-xl"></i></a>
<a href="#" class="hover:text-accent transition"><i class="fab fa-facebook text-xl"></i></a>
</div>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Services</h3>
<ul class="space-y-2">
<li><a href="#" class="hover:text-accent transition">Strategic Advisory</a></li>
<li><a href="#" class="hover:text-accent transition">Operational Excellence</a></li>
<li><a href="#" class="hover:text-accent transition">Human Capital</a></li>
<li><a href="#" class="hover:text-accent transition">Digital Transformation</a></li>
<li><a href="#" class="hover:text-accent transition">Risk & Compliance</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Company</h3>
<ul class="space-y-2">
<li><a href="#" class="hover:text-accent transition">About Us</a></li>
<li><a href="#" class="hover:text-accent transition">Leadership</a></li>
<li><a href="#" class="hover:text-accent transition">Careers</a></li>
<li><a href="#" class="hover:text-accent transition">News & Insights</a></li>
<li><a href="#" class="hover:text-accent transition">Contact</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Contact Us</h3>
<address class="not-italic">
<p class="mb-2">123 Business Avenue</p>
<p class="mb-2">Suite 500</p>
<p class="mb-2">Toronto, ON M5H 2Y2</p>
<p class="mb-2">Phone: (555) 123-4567</p>
<p class="mb-2">Email: info@khoralplainlaiter.com</p>
</address>
</div>
</div>
<div class="border-t border-gray-700 pt-6 flex flex-col md:flex-row justify-between items-center">
<p>&copy; 2023 Khoral & Plainlaiter. All rights reserved.</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="hover:text-accent transition">Privacy Policy</a>
<a href="#" class="hover:text-accent transition">Terms of Service</a>
<a href="#" class="hover:text-accent transition">Sitemap</a>
</div>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
document.getElementById('menu-toggle').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
}
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=AlexCPCP/my-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>