Here is the Prompt, dont forget you owe me a subscribe!
OIL & GAS WEBSITE
PROMPT: Build VIZOIL Website (Yellow Theme)
Build me a complete, multi-page corporate website for VIZOIL – a global petroleum, oil & gas company.
Project Overview
Company Name: VIZOIL
Industry: Petroleum, Oil & Gas / Energy
Website Goal: Professional, modern, trustworthy corporate website for a global energy company
Color Scheme (Yellow Theme – replace all blue with yellow)
Primary color: Deep navy/black (#1a1a1a or #000000) for backgrounds
Secondary color: Bright yellow (#ffd700 or #ffcc00) for accents, buttons, highlights
Tertiary: White (#ffffff) and off-white (#f8f9fa) for backgrounds
Text: Dark gray (#333333) and black for readability
Success green: Keep as is (#28a745)
Error red: Keep as is (#dc3545)
Replace all instances of blue (#0066cc, #001f3f, #1e90ff, etc.) with yellow (#ffd700 or #ffcc00). Headers, buttons, icons, borders, and accent elements should use yellow.
Website Structure (7 pages with smooth SPA navigation)
Create a single HTML file with all 7 pages that switch via JavaScript (SPA style):
Home – Hero section, stats counters, operations preview, image gallery
About – Company timeline, stats, testimonials section
Operations – Exploration & Production, Refining & Processing, Storage & Distribution details
Technology – AI, automation, digital twin, safety tech, carbon capture
Sustainability – ESG metrics, net-zero roadmap, environmental stewardship
Global Presence – Interactive map with nodes, regional stats
Contact – Contact form, office info, phone numbers with WhatsApp/call icons, regional offices
Design & UX Requirements
Full responsive (mobile, tablet, desktop)
Fixed header with logo and navigation (collapses to hamburger on mobile)
Smooth page transitions (fade/translate)
Animated counting numbers (counters) on all stats
Glassmorphism/neumorphism effects on cards
Hover animations on all interactive elements
Realistic oil & gas images from Unsplash (keep existing image URLs)
Custom favicon and logo (use placeholder URLs that can be replaced later)
Content & Specific Details for VIZOIL
Company Identity:
Company name: VIZOIL
Tagline: “Powering Energy. Engineering the Future.” (keep same)
Years of experience: 87 years (founded 1936)
Operating countries: 157
Daily barrels: 3.8 million
Employees: 28,400
Offshore platforms: 152
Pipeline km: 18,300 km
Global refineries: 42
Annual revenue: $4.2 billion
Patents: 4,320
R&D investment: $2.3 billion annually
Safety rate: 99.7%
Contact Information (specific for VIZOIL):
Email addresses:
Inquiries & Support: [email protected]
Sales & Partnerships: [email protected]
Phone numbers (with WhatsApp and call icons):
Office: +1 (470) 581-1591
Operations: +1 (604) 352-2020
Office address: 3612 W Ohio Ave, Midland, Texas 79703, United States
Business Hours: Mon–Fri, 8:00 AM–6:00 PM (CT) and Operational Monitoring: 24/7
Logo & Favicon:
Logo URL: http://vizoil.com/asset/logovizoil.png (placeholder)
Favicon URL: http://vizoil.com/asset/logovizoil.jpeg (placeholder)
Testimonials (on About page) – keep exactly as written:
Dominic Veyron: “As a petroleum retailer, we’ve worked with VIZOIL for years, and they’ve consistently delivered without disappointment. Their reliability and professionalism set them apart, and we fully intend to continue partnering with them. We wouldn’t hesitate to recommend VIZOIL to others in the industry.”
Caleb Rothwell: “For a company that started with just one barrel, VIZOIL has built something genuinely impressive. Their journey and growth reflect commitment, resilience, and vision. It’s a story worth telling, and a company I’m confident recommending.”
Sebastian Kovares: “I’ve been sourcing fuel from VIZOIL for over 10 years, and that consistency speaks for itself. They’ve proven to be dependable, professional, and easy to work with. Without question, they’re an outstanding company. If there were a 100-star rating, they’d deserve it.”
Regional Offices Section (on Contact page):
Americas Headquarters: 3612 W Ohio Ave, Midland, Texas 79703, United States of America – Email: [email protected]
Global Operations (EMEA Coverage): Our operations team manages projects and provides coordinated support across Europe, the Middle East, and Africa through a centralized operations hub. – Email: [email protected]
Sales & Partnerships (Asia Pacific): For commercial inquiries, strategic partnerships, and new business opportunities across the Asia Pacific region, our sales team is available worldwide. – Email: [email protected]
Operations Content (keep same as Texroc but rename to VIZOIL):
Exploration & Production: 27 active oil fields, 152 offshore platforms
Refining & Processing: 15 global refineries, 94% utilization rate
Storage & Distribution: 42 storage terminals, 18,300 km pipeline
Add all the detailed sub-sections (seismic imaging, drilling, catalytic cracking, etc.)
Technology Content (keep same):
AI & Automation (89% automation)
Digital Twin Technology (94% accuracy)
Advanced Drilling Systems (81% less land use)
Safety Technology (99.7% safety rate)
Carbon Capture & Storage (2.4 million tons CO2 captured annually)
Smart Grid Integration (45% renewable integration)
Sustainability Content (keep same):
48% reduction in carbon intensity (2015-2023)
99.7% safety compliance rate
$920 million annual clean tech investment
Net zero target: 2050
Net Zero Roadmap: 2025 (45%), 2030 (65%), 2040 (85%), 2050 (100%)
Functional Requirements
Contact Form (AJAX with PHP backend):
Fields: name, email, phone (optional), company (optional), inquiry type (dropdown), message, privacy checkbox
Real-time validation with error messages
AJAX submission without page reload
Loading spinner on submit
Success/error messages displayed inline
Honeypot spam protection
Form submits to send-email.php (provide full PHP code with SMTP configuration)
SMTP Configuration for PHP (use exact details):
Email: [email protected]
SMTP Host: mail.vizoil.com
Port: 465
Encryption: SSL (SMTPS)
Password: Hosting124# (placeholder – user can change)
Counting Animation:
All numeric stats (countries, barrels, years, employees, etc.) should count up from 0 to target when scrolled into view.
Use Intersection Observer for triggering.
Interactive Map:
On Global Presence page, add a world map SVG with glowing nodes representing regional operations (Americas, Europe/Africa, Middle East, Asia-Pacific).
Nodes pulse and show label on hover.
Image Gallery:
Keep the 6 Unsplash images used in Texroc (oil refinery, oil rig at sunset, pipeline, drilling operation, gas plant, offshore platform).
Technical Specifications
Output:
Single index.html file with all CSS, HTML, and JavaScript included.
Separate send-email.php file with complete PHPMailer code using the SMTP settings above.
Include instructions to install PHPMailer via Composer or manual download.
Responsiveness:
Mobile-first approach with breakpoints at 768px and 992px.
Hamburger menu on mobile.
All cards, grids, and images stack properly on small screens.
Browser Support:
Modern browsers (Chrome, Firefox, Safari, Edge) – last 2 versions.
Performance:
Use lazy loading for images where appropriate.
Minify CSS/JS (inline is fine for this build).
Optimize animations for smooth 60fps.
Accessibility:
Semantic HTML5 tags.
ARIA labels on interactive elements.
Sufficient color contrast (yellow on dark backgrounds must be readable).
Additional Notes
Replace all occurrences of “Texroc” with “VIZOIL” throughout the content (headlines, paragraphs, meta tags, footer, etc.).
Keep all image URLs exactly as in the original Texroc site (Unsplash links).
The overall layout, structure, and interactivity should be identical to the Texroc website we built, only with yellow accents instead of blue.
Do not change any functionality or remove any sections – just rebrand to VIZOIL and update colors to yellow/white/black.
Deliverables
Complete index.html with all 7 pages working.
Complete send-email.php with SMTP configuration.
Brief setup instructions (how to install PHPMailer, upload files to server, test form).
