319 lines
15 KiB
Plaintext
319 lines
15 KiB
Plaintext
Prompt: make a website for kpmg
|
||
Generated at step: 200
|
||
Timestamp: 2025-08-28T09:36:12.788856
|
||
============================================================
|
||
|
||
Sure! Below is a complete, ready-to-use **KPMG-themed landing page** designed to be clean, professional, and brand-aligned. It includes:
|
||
|
||
- Responsive design (mobile-first)
|
||
- Modern styling with subtle gradients and card-based layouts
|
||
- Sections: Hero, Services, Industries, Why KPMG, Careers, Contact
|
||
- Tailwind CSS utility classes (easy to integrate)
|
||
|
||
---
|
||
|
||
### ✅ How to Use This Code
|
||
|
||
1. Create an `index.html` file in your project folder.
|
||
2. Paste the code below into it.
|
||
3. Add a `<script src="https://cdn.tailwindcss.com"></script>` tag in the head section if you want Tailwind CSS inline (optional).
|
||
4. Optionally add Google Fonts or host your own fonts.
|
||
|
||
Alternatively, use a hosted solution like Vercel, Netlify, or GitHub Pages by uploading this index.html and adding a `tailwind.config.js` file (if needed). I’ll include that too.
|
||
|
||
---
|
||
|
||
## 📄 index.html — KPMG Landing Page (Tailwind + Google Fonts)
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>KPMG | Global Professional Services</title>
|
||
|
||
<!-- Google Fonts -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
|
||
|
||
<!-- Tailwind CSS CDN -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
||
<!-- Custom Styles -->
|
||
<style>
|
||
:root {
|
||
--primary: #0f7a9c;
|
||
--primary-dark: #0b5e7a;
|
||
--accent: #d82b5f;
|
||
--text: #111827;
|
||
--bg: #ffffff;
|
||
--gray: #e5e7eb;
|
||
}
|
||
|
||
body { font-family: 'Poppins', sans-serif; color: var(--text); background: var(--bg); }
|
||
.gradient-bg { background: linear-gradient(135deg, rgba(15,122,156,0.8), rgba(216,43,95,0.8)); }
|
||
.card { backdrop-filter: blur(10px); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 24px rgba(0,0,0,0.08);}
|
||
.btn-primary { @apply bg-[var(--primary)] hover:bg-[var(--primary-dark)] text-white px-6 py-3 rounded-lg transition duration-200 font-semibold shadow-md hover:shadow-lg;}
|
||
|
||
/* Hero Section */
|
||
.hero-gradient { background: radial-gradient(circle at 30% 20%, rgba(15,122,156,.15), transparent 50%), radial-gradient(circle at 70% 40%, rgba(216,43,95,.15), transparent 50%);}
|
||
|
||
/* Header Sticky */
|
||
header { position: sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-100; }
|
||
</style>
|
||
</head>
|
||
<body class="min-h-screen">
|
||
|
||
<!-- Navigation -->
|
||
<header class="sticky top-0 z-50 w-full bg-white/95 backdrop-blur-sm border-b border-gray-100">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<nav class="flex items-center justify-between h-16">
|
||
<div class="flex items-center gap-2">
|
||
<span class="font-bold text-xl">KPMG</span>
|
||
</div>
|
||
<div class="hidden md:flex items-center space-x-6">
|
||
<a href="#home" class="hover:text-[var(--primary)] transition">Home</a>
|
||
<a href="#services" class="hover:text-[var(--primary)] transition">Services</a>
|
||
<a href="#industries" class="hover:text-[var(--primary)] transition">Industries</a>
|
||
<a href="#why-kpmg" class="hover:text-[var(--primary)] transition">Why KPMG</a>
|
||
<a href="#careers" class="hover:text-[var(--primary)] transition">Careers</a>
|
||
<a href="#contact" class="hover:text-[var(--primary)] transition">Contact</a>
|
||
</div>
|
||
<button class="md:hidden ml-4 p-2 rounded-md text-gray-700 hover:bg-gray-100">
|
||
☰
|
||
</button>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
|
||
<!-- Hero Section -->
|
||
<section id="home" class="relative hero-gradient pt-16 pb-20 md:pt-24 md:pb-28 px-4 sm:px-6 lg:px-8">
|
||
<div class="max-w-7xl mx-auto grid md:grid-cols-12 gap-8 items-center">
|
||
<div class="md:col-span-7 order-last md:order-none">
|
||
<h1 class="text-3xl md:text-5xl xl:text-6xl font-extrabold leading-tight text-left mb-6">
|
||
Trusted Global Expertise for Your Future
|
||
</h1>
|
||
<p class="text-base md:text-lg text-gray-700 mb-8 max-w-2xl">
|
||
We help organizations navigate complex challenges—from strategy and risk management to tax, audit, and advisory—through innovative solutions built on integrity and insight.
|
||
</p>
|
||
<div class="flex flex-col sm:flex-row gap-4">
|
||
<a href="#services" class="btn-primary">Explore Services</a>
|
||
<a href="#careers" class="btn-primary bg-[var(--accent)] hover:bg-[#c51d4d]">Join Our Team</a>
|
||
</div>
|
||
</div>
|
||
<div class="md:col-span-5 relative">
|
||
<img src="https://images.unsplash.com/photo-1542658752-067468349293?ixlib=rb-4.0.3&auto=format&fit=crop&w=700&q=80"
|
||
alt="KPMG professionals collaborating"
|
||
class="w-full h-auto rounded-2xl object-cover"/>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Services -->
|
||
<section id="services" class="py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-gray-50">
|
||
<div class="max-w-7xl mx-auto">
|
||
<div class="text-center mb-12">
|
||
<h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 mb-4">Our Services</h2>
|
||
<p class="text-lg text-gray-600 max-w-2xl mx-auto">We offer a broad range of strategic and operational services across all business functions.</p>
|
||
</div>
|
||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
<ServiceCard icon="📊" title="Strategy & Advisory" desc="Transform your business through data-driven insights and actionable strategies." />
|
||
<ServiceCard icon="🛡️" title="Risk & Compliance" desc="Protect your organization from fraud, cybersecurity, and regulatory risks." />
|
||
<ServiceCard icon="💼" title="Tax & Legal" desc="Optimize your tax structure and ensure compliance with evolving regulations." />
|
||
<ServiceCard icon="💸" title="Financial Reporting" desc="Ensure accurate, timely, and transparent financial statements." />
|
||
<ServiceCard icon="📈" title="Performance Management" desc="Drive growth with robust performance planning and analysis tools." />
|
||
<ServiceCard icon="🔐" title="Cybersecurity" desc="Secure your digital infrastructure and defend against modern threats." />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Industries -->
|
||
<section id="industries" class="py-16 md:py-24 px-4 sm:px-6 lg:px-8 gradient-bg">
|
||
<div class="max-w-7xl mx-auto">
|
||
<div class="text-center mb-12">
|
||
<h2 class="text-3xl md:text-4xl font-extrabold text-white mb-4">Serving Key Industries</h2>
|
||
<p class="text-lg text-white/90 max-w-2xl mx-auto">From healthcare to technology, we provide tailored expertise for diverse sectors.</p>
|
||
</div>
|
||
<div class="grid md:grid-cols-3 gap-6">
|
||
<IndustryCard label="Healthcare" desc="Compliance, audit, and transformation services for hospitals and health systems." />
|
||
<IndustryCard label="Technology" desc="Financial due diligence, cybersecurity, and go-to-market strategies." />
|
||
<IndustryCard label="Finance" desc="Accounting, risk assessment, and regulatory guidance for banks and fintechs." />
|
||
<IndustryCard label="Retail" desc="Supply chain optimization, pricing intelligence, and ESG reporting." />
|
||
<IndustryCard label="Energy" desc="Regulatory compliance, energy efficiency, and sustainability advisory." />
|
||
<IndustryCard label="Life Sciences" desc="Audit, financial controls, and regulatory support for R&D operations." />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Why KPMG -->
|
||
<section id="why-kpmg" class="py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-white">
|
||
<div class="max-w-7xl mx-auto">
|
||
<div class="grid md:grid-cols-2 gap-10 items-center">
|
||
<div>
|
||
<h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 mb-6">Why Choose KPMG?</h2>
|
||
<ul class="space-y-4">
|
||
<li class="flex items-start gap-3">
|
||
<span class="inline-block w-6 h-6 rounded-full bg-[var(--primary)] text-white flex items-center justify-center text-xs font-bold mt-1">✓</span>
|
||
<span>Global reach with local insight across over 150 countries.</span>
|
||
</li>
|
||
<li class="flex items-start gap-3">
|
||
<span class="inline-block w-6 h-6 rounded-full bg-[var(--primary)] text-white flex items-center justify-center text-xs font-bold mt-1">✓</span>
|
||
<span>Integrity as our foundation—ethical standards guide every decision.</span>
|
||
</li>
|
||
<li class="flex items-start gap-3">
|
||
<span class="inline-block w-6 h-6 rounded-full bg-[var(--primary)] text-white flex items-center justify-center text-xs font-bold mt-1">✓</span>
|
||
<span>Innovative technologies integrated into traditional consulting models.</span>
|
||
</li>
|
||
<li class="flex items-start gap-3">
|
||
<span class="inline-block w-6 h-6 rounded-full bg-[var(--primary)] text-white flex items-center justify-center text-xs font-bold mt-1">✓</span>
|
||
<span>Dedicated teams delivering customized results for clients worldwide.</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="relative">
|
||
<img src="https://images.unsplash.com/photo-1615777878260-a17c29663a3b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
|
||
alt="Team meeting in office"
|
||
class="rounded-2xl shadow-2xl"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Careers -->
|
||
<section id="careers" class="py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-gray-50">
|
||
<div class="max-w-7xl mx-auto">
|
||
<div class="text-center mb-12">
|
||
<h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 mb-4">Join Our Team</h2>
|
||
<p class="text-lg text-gray-600 max-w-2xl mx-auto">We’re committed to diversity, equity, and inclusion. Apply today for roles that match your passion.</p>
|
||
</div>
|
||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
<CareerCard title="Auditor" location="Remote / On-site" type="Entry-level" />
|
||
<CareerCard title="Consultant" location="Hybrid" type="Mid-career" />
|
||
<CareerCard title="Senior Advisor" location="Global" type="Senior" />
|
||
<CareerCard title="Tech Specialist" location="Remote" type="Tech" />
|
||
<CareerCard title="Compliance Analyst" location="On-site" type="Junior" />
|
||
<CareerCard title="Strategy Lead" location="Global" type="Leadership" />
|
||
</div>
|
||
<div class="mt-10 text-center">
|
||
<a href="#" class="btn-primary">View All Openings →</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Contact -->
|
||
<section id="contact" class="py-16 md:py-24 px-4 sm:px-6 lg:px-8 gradient-bg">
|
||
<div class="max-w-7xl mx-auto">
|
||
<div class="grid md:grid-cols-2 gap-10">
|
||
<div>
|
||
<h2 class="text-3xl md:text-4xl font-extrabold text-white mb-6">Get In Touch</h2>
|
||
<p class="text-lg text-white/90 mb-8">
|
||
Have questions about our services or opportunities? Reach out to learn more.
|
||
</p>
|
||
<form class="space-y-4">
|
||
<input placeholder="Your Name" required class="w-full px-4 py-3 rounded-lg border border-white/30 bg-black/20 text-white focus:outline-none focus:border-white focus:ring-2 focus:ring-white/30"/>
|
||
<input placeholder="Email Address" required class="w-full px-4 py-3 rounded-lg border border-white/30 bg-black/20 text-white focus:outline-none focus:border-white focus:ring-2 focus:ring-white/30"/>
|
||
<textarea rows="4" placeholder="Message" required class="w-full px-4 py-3 rounded-lg border border-white/30 bg-black/20 text-white focus:outline-none focus:border-white focus:ring-2 focus:ring-white/30"></textarea>
|
||
<button type="submit" class="btn-primary">Send Message</button>
|
||
</form>
|
||
</div>
|
||
<div class="bg-white/20 backdrop-blur-md rounded-2xl p-6 border border-white/20">
|
||
<h3 class="text-xl font-semibold text-white mb-4">Connect With Us</h3>
|
||
<ul class="space-y-3">
|
||
<li><a href="#" class="text-white/90 hover:text-white transition">www.kpmg.com</a></li>
|
||
<li><a href="#" class="text-white/90 hover:text-white transition">+1 (800) 555-1234</a></li>
|
||
<li class="flex items-center gap-2"><span class="text-white/90">📍</span> <span class="text-white/90">1000 KPMG Way, New York, NY 10001</span></li>
|
||
</ul>
|
||
<div class="mt-6 text-white/80 text-sm">© 2025 KPMG. All rights reserved. KPMG is a global network of professional services firms offering Audit, Tax, and Advisory services.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<footer class="border-t border-gray-200 bg-white/85 backdrop-blur-sm">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
||
<div class="grid md:grid-cols-4 gap-8">
|
||
<div>
|
||
<span class="font-bold text-xl">KPMG</span>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<a href="#" class="block hover:text-[var(--primary)] transition">Home</a>
|
||
<a href="#" class="block hover:text-[var(--primary)] transition">About</a>
|
||
<a href="#" class="block hover:text-[var(--primary)] transition">Services</a>
|
||
<a href="#" class="block hover:text-[var(--primary)] transition">Careers</a>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<a href="#" class="block hover:text-[var(--primary)] transition">Newsroom</a>
|
||
<a href="#" class="block hover:text-[var(--primary)] transition">Investor Relations</a>
|
||
<a href="#" class="block hover:text-[var(--primary)] transition">Locations</a>
|
||
<a href="#" class="block hover:text-[var(--primary)] transition">Ethics</a>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-sm text-gray-600">Follow us:</p>
|
||
<div class="flex gap-4 mt-2">
|
||
<a href="#" class="text-gray-600 hover:text-[var(--primary)] transition">LinkedIn</a>
|
||
<a href="#" class="text-gray-600 hover:text-[var(--primary)] transition">Twitter</a>
|
||
<a href="#" class="text-gray-600 hover:text-[var(--primary)] transition">Instagram</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<hr class="my-8 border-gray-200"/>
|
||
<div class="text-center text-sm text-gray-500">
|
||
© 2025 KPMG. All rights reserved. KPMG is a global network of independent member firms associated with KPMG International Cooperative ("KPMG International"), a Swiss entity. Each firm is a separate legal entity and is not subject to the authority of KPMG International.
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
---
|
||
|
||
## 🔧 Optional: Add Tailwind Config (for custom builds)
|
||
|
||
Create a file called `tailwind.config.js`:
|
||
```js
|
||
/** @type {import('tailwindcss').Config} */
|
||
module.exports = {
|
||
darkMode: 'class',
|
||
content: [
|
||
"./index.html",
|
||
"./src/**/*.js",
|
||
"./src/**/*.ts"
|
||
],
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
primary: '#0f7a9c',
|
||
accent: '#d82b5f'
|
||
},
|
||
boxShadow: {
|
||
'custom': '0 12px 24px rgba(0,0,0,0.08)'
|
||
}
|
||
},
|
||
},
|
||
plugins: [],
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## ✅ Next Steps
|
||
|
||
1. Host the site using:
|
||
- GitHub Pages (Free, static)
|
||
- Netlify (Easy deploy via Git)
|
||
- Vercel (Fast deployment)
|
||
- AWS S3 + CloudFront
|
||
|
||
2. Replace the placeholder image URLs with actual KPMG-branded assets or stock photos under their Creative Commons license.
|
||
|
||
3. Add real links to services, careers pages, etc., depending on your needs.
|
||
|
||
4. For multilingual support, add i18n routing later.
|
||
|
||
Let me know if you'd like a React/Vue version, a dark mode toggle, SEO meta tags, or CMS integration! |