| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>QatarEnergy - Energy for Growth</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); |
| body { |
| font-family: 'Montserrat', sans-serif; |
| } |
| .hero-gradient { |
| background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%); |
| } |
| .nav-link:hover { |
| color: #8B9862; |
| } |
| .dropdown:hover .dropdown-menu { |
| display: block; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 text-gray-800"> |
| |
| <div class="bg-gray-900 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-amber-400">العربية</a> |
| <span>|</span> |
| <a href="#" class="hover:text-amber-400">Contact</a> |
| <span>|</span> |
| <a href="#" class="hover:text-amber-400">Careers</a> |
| </div> |
| <div class="flex space-x-4"> |
| <a href="#"><i data-feather="facebook" class="w-4 h-4 hover:text-amber-400"></i></a> |
| <a href="#"><i data-feather="twitter" class="w-4 h-4 hover:text-amber-400"></i></a> |
| <a href="#"><i data-feather="linkedin" class="w-4 h-4 hover:text-amber-400"></i></a> |
| <a href="#"><i data-feather="instagram" class="w-4 h-4 hover:text-amber-400"></i></a> |
| <a href="#"><i data-feather="youtube" class="w-4 h-4 hover:text-amber-400"></i></a> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <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-20"> |
| <a href="#" class="flex items-center"> |
| <img src="http://static.photos/industry/200x200/5" alt="QatarEnergy Logo" class="h-12"> |
| </a> |
| <div class="hidden md:flex space-x-8"> |
| <div class="dropdown relative"> |
| <a href="#" class="nav-link font-medium hover:text-amber-600 transition">About Us <i data-feather="chevron-down" class="w-4 h-4 inline"></i></a> |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded mt-2 py-2 w-48"> |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Overview</a> |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Leadership</a> |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Sustainability</a> |
| </div> |
| </div> |
| <div class="dropdown relative"> |
| <a href="#" class="nav-link font-medium hover:text-amber-600 transition">Our Business <i data-feather="chevron-down" class="w-4 h-4 inline"></i></a> |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded mt-2 py-2 w-48"> |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Upstream</a> |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Downstream</a> |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Renewables</a> |
| </div> |
| </div> |
| <a href="#" class="nav-link font-medium hover:text-amber-600 transition">Projects</a> |
| <a href="#" class="nav-link font-medium hover:text-amber-600 transition">Media Center</a> |
| <a href="#" class="nav-link font-medium hover:text-amber-600 transition">Sustainability</a> |
| </div> |
| <button class="md:hidden focus:outline-none"> |
| <i data-feather="menu" class="w-6 h-6"></i> |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="relative h-screen bg-gray-900 overflow-hidden"> |
| <img src="http://static.photos/industry/1200x630/10" alt="Energy Plant" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 hero-gradient flex items-center"> |
| <div class="container mx-auto px-4 text-white" data-aos="fade-up"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-4">Energy for Growth</h1> |
| <p class="text-xl md:text-2xl max-w-2xl mb-8">Powering Qatar's development through sustainable energy solutions</p> |
| <div class="flex space-x-4"> |
| <a href="#" class="bg-amber-500 hover:bg-amber-600 text-white px-6 py-3 rounded-md font-medium transition">Learn More</a> |
| <a href="#" class="bg-transparent border-2 border-white hover:bg-white hover:text-gray-900 text-white px-6 py-3 rounded-md font-medium transition">Our Projects</a> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gray-100 py-16"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12">QatarEnergy in Numbers</h2> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div class="text-center" data-aos="fade-up"> |
| <div class="text-4xl font-bold text-amber-600 mb-2">200+</div> |
| <p class="text-gray-600">Global operations</p> |
| </div> |
| <div class="text-center" data-aos="fade-up" data-aos-delay="100"> |
| <div class="text-4xl font-bold text-amber-600 mb-2">40+</div> |
| <p class="text-gray-600">Years of experience</p> |
| </div> |
| <div class="text-center" data-aos="fade-up" data-aos-delay="200"> |
| <div class="text-4xl font-bold text-amber-600 mb-2">25K+</div> |
| <p class="text-gray-600">Employees worldwide</p> |
| </div> |
| <div class="text-center" data-aos="fade-up" data-aos-delay="300"> |
| <div class="text-4xl font-bold text-amber-600 mb-2">1M+</div> |
| <p class="text-gray-600">Barrels per day</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="py-16 bg-white"> |
| <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" data-aos="fade-right"> |
| <h2 class="text-3xl font-bold mb-4">Who We Are</h2> |
| <p class="text-gray-600 mb-6">QatarEnergy is a national corporation responsible for the sustainable development of the State of Qatar's energy sector across the entire hydrocarbon value chain.</p> |
| <p class="text-gray-600 mb-6">Our activities encompass the exploration, production, processing, marketing and sales of oil and gas, liquefied natural gas (LNG), natural gas liquids (NGL), gas to liquids (GTL) products, refined products, petrochemicals, fertilizers, steel and aluminum.</p> |
| <a href="#" class="text-amber-600 font-medium hover:text-amber-700 transition">Read More <i data-feather="arrow-right" class="w-4 h-4 inline"></i></a> |
| </div> |
| <div class="md:w-1/2" data-aos="fade-left"> |
| <img src="http://static.photos/industry/640x360/15" alt="QatarEnergy Facility" class="rounded-lg shadow-lg w-full"> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="py-16 bg-gray-100"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12">Featured Projects</h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-white rounded-lg overflow-hidden shadow-md" data-aos="fade-up"> |
| <img src="http://static.photos/industry/640x360/20" alt="Project 1" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">North Field Expansion</h3> |
| <p class="text-gray-600 mb-4">The world's largest LNG project to increase Qatar's LNG production capacity to 126 million tons per annum.</p> |
| <a href="#" class="text-amber-600 font-medium hover:text-amber-700 transition">Learn More</a> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg overflow-hidden shadow-md" data-aos="fade-up" data-aos-delay="100"> |
| <img src="http://static.photos/industry/640x360/25" alt="Project 2" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">Solar Power Plant</h3> |
| <p class="text-gray-600 mb-4">Qatar's first industrial-scale solar power plant with a capacity of 800 megawatts.</p> |
| <a href="#" class="text-amber-600 font-medium hover:text-amber-700 transition">Learn More</a> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg overflow-hidden shadow-md" data-aos="fade-up" data-aos-delay="200"> |
| <img src="http://static.photos/industry/640x360/30" alt="Project 3" class="w-full h-48 object-cover"> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-2">Carbon Capture</h3> |
| <p class="text-gray-600 mb-4">World's largest carbon capture and storage project with a capacity of 5 million tons per annum.</p> |
| <a href="#" class="text-amber-600 font-medium hover:text-amber-700 transition">Learn More</a> |
| </div> |
| </div> |
| </div> |
| <div class="text-center mt-12"> |
| <a href="#" class="bg-amber-500 hover:bg-amber-600 text-white px-6 py-3 rounded-md font-medium transition inline-block">View All Projects</a> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="py-16 bg-white"> |
| <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" data-aos="fade-right"> |
| <img src="http://static.photos/industry/640x360/35" alt="Sustainability" class="rounded-lg shadow-lg w-full"> |
| </div> |
| <div class="md:w-1/2 md:pl-12" data-aos="fade-left"> |
| <h2 class="text-3xl font-bold mb-4">Sustainability Commitment</h2> |
| <p class="text-gray-600 mb-6">At QatarEnergy, sustainability is at the heart of everything we do. We are committed to minimizing our environmental footprint while meeting the world's growing energy needs.</p> |
| <p class="text-gray-600 mb-6">Our sustainability strategy focuses on climate change, environmental protection, social responsibility and economic value creation.</p> |
| <a href="#" class="text-amber-600 font-medium hover:text-amber-700 transition">Our Sustainability Report <i data-feather="arrow-right" class="w-4 h-4 inline"></i></a> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="py-16 bg-gray-100"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12">Latest News</h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-white rounded-lg overflow-hidden shadow-md" data-aos="fade-up"> |
| <div class="p-6"> |
| <div class="text-sm text-gray-500 mb-2">June 15, 2023</div> |
| <h3 class="text-xl font-bold mb-2">QatarEnergy Signs Agreement With International Partners</h3> |
| <p class="text-gray-600 mb-4">New strategic partnership to develop LNG projects in Southeast Asia.</p> |
| <a href="#" class="text-amber-600 font-medium hover:text-amber-700 transition">Read More</a> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg overflow-hidden shadow-md" data-aos="fade-up" data-aos-delay="100"> |
| <div class="p-6"> |
| <div class="text-sm text-gray-500 mb-2">May 28, 2023</div> |
| <h3 class="text-xl font-bold mb-2">QatarEnergy Recognized for Environmental Excellence</h3> |
| <p class="text-gray-600 mb-4">Received international award for carbon reduction initiatives.</p> |
| <a href="#" class="text-amber-600 font-medium hover:text-amber-700 transition">Read More</a> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg overflow-hidden shadow-md" data-aos="fade-up" data-aos-delay="200"> |
| <div class="p-6"> |
| <div class="text-sm text-gray-500 mb-2">April 10, 2023</div> |
| <h3 class="text-xl font-bold mb-2">New Training Center Opens in Doha</h3> |
| <p class="text-gray-600 mb-4">State-of-the-art facility to develop Qatari talent in energy sector.</p> |
| <a href="#" class="text-amber-600 font-medium hover:text-amber-700 transition">Read More</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-lg font-bold mb-4">QatarEnergy</h3> |
| <p class="text-gray-400 mb-4">Energy for Growth</p> |
| <div class="flex space-x-4"> |
| <a href="#"><i data-feather="facebook" class="w-5 h-5 hover:text-amber-400"></i></a> |
| <a href="#"><i data-feather="twitter" class="w-5 h-5 hover:text-amber-400"></i></a> |
| <a href="#"><i data-feather="linkedin" class="w-5 h-5 hover:text-amber-400"></i></a> |
| <a href="#"><i data-feather="instagram" class="w-5 h-5 hover:text-amber-400"></i></a> |
| <a href="#"><i data-feather="youtube" class="w-5 h-5 hover:text-amber-400"></i></a> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-lg font-bold mb-4">Quick Links</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Home</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">About Us</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Our Business</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Projects</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Media Center</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-bold mb-4">Resources</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Sustainability</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Reports</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Careers</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Suppliers</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-amber-400 transition">Contact Us</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-lg font-bold mb-4">Contact Us</h3> |
| <address class="text-gray-400 not-italic"> |
| <p class="mb-2">P.O. Box 3212, Doha, Qatar</p> |
| <p class="mb-2">Phone: +974 4011 2222</p> |
| <p class="mb-2">Email: info@qatarenergy.qa</p> |
| </address> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 mt-12 pt-6 text-center text-gray-400"> |
| <p>© 2023 QatarEnergy. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| AOS.init(); |
| feather.replace(); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const mobileMenuButton = document.querySelector('.md\\:hidden'); |
| |
| }); |
| </script> |
| </body> |
| </html> |
|
|
