Okay, I'll add the remaining CSS styles to make the website functional and responsive. QUEST Fuel - Powering Your Journey

Fueling the Extreme

QUEST: High-performance fuel for every adventure.

Our Fuels

About QUEST

Born from the demands of the offroad track and refined through cutting-edge refinery technology, QUEST delivers unparalleled fuel quality. We understand power, performance, and reliability because we live it. From the race circuit to the industrial heartland, QUEST keeps you moving.

Our Services

Performance Fuels

Engineered for maximum power output and engine protection, ideal for racing and high-demand applications.

Industrial Supply

Reliable bulk fuel delivery for commercial and industrial needs, ensuring your operations never stop.

Custom Blends

Tailored fuel solutions developed to meet specific performance requirements and environmental standards.

Contact Us

Ready to fuel your next challenge? Get in touch!

/* Basic Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #333; background-color: #fff; /* Ensure body background */ } .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; } /* Header & Navbar */ .navbar { background-color: rgba(0, 0, 0, 0.8); color: #fff; padding: 1rem 0; position: fixed; width: 100%; top: 0; z-index: 1000; transition: background-color 0.3s ease; } .navbar .container { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.8rem; font-weight: bold; color: #ff6600; /* Quest accent color */ text-decoration: none; } .nav-links { list-style: none; display: flex; } .nav-links li { margin-left: 20px; } .nav-links a { color: #fff; text-decoration: none; padding: 5px 10px; transition: color 0.3s ease; } .nav-links a:hover { color: #ff6600; } /* Mobile Menu Toggle */ .menu-toggle { display: none; /* Hidden by default */ background: none; border: none; cursor: pointer; padding: 5px; } .menu-toggle span { display: block; width: 25px; height: 3px; background-color: #fff; margin: 5px 0; transition: all 0.3s ease-in-out; } /* Active state for mobile menu toggle */ .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); } /* Hero Section */ .hero-section { min-height: 100vh; /* Use min-height for flexibility */ background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1551501419-cb31cdd588d7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8b2Zmcm9hZHxyYWNlY2FyfHx8fHx8MTcwMjU4NzYzOA&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080') no-repeat center center/cover; display: flex; justify-content: center; align-items: center; text-align: center; color: #fff; padding: 80px 20px 20px 20px; /* Add padding top for navbar, left/right/bottom */ } .hero-section h1 { font-size: 3rem; /* Adjusted for responsiveness */ margin-bottom: 1rem; } .hero-section p { font-size: 1.2rem; /* Adjusted for responsiveness */ margin-bottom: 2rem; } .cta-button { display: inline-block; background-color: #ff6600; color: #fff; padding: 12px 25px; text-decoration: none; border-radius: 5px; font-size: 1.1rem; transition: background-color 0.3s ease; border: none; cursor: pointer; } .cta-button:hover { background-color: #e65c00; } /* Content Sections */ .content-section { padding: 60px 0; /* Reduced padding */ } .content-section h2 { text-align: center; margin-bottom: 30px; /* Reduced margin */ font-size: 2rem; /* Adjusted for responsiveness */ color: #333; } .content-section p { max-width: 800px; margin: 0 auto 20px auto; text-align: center; color: #555; padding: 0 15px; /* Add padding for smaller screens */ } .alt-bg { background-color: #f4f4f4; } /* Image Placeholders & Images */ .image-placeholder { background-color: #eee; /* Lighter placeholder */ color: #aaa; text-align: center; padding: 20px; /* Add some padding */ margin: 30px auto; /* Center and add margin */ max-width: 700px; /* Limit width */ border-radius: 5px; overflow: hidden; /* Ensure image fits */ } .image-placeholder img { max-width: 100%; height: auto; display: block; /* Remove extra space below image */ border-radius: 5px; /* Match container */ } /* Service Grid */ .service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */ gap: 30px; margin-top: 30px; margin-bottom: 30px; /* Add margin below grid */ } .service-item { background-color: #fff; padding: 25px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); text-align: center; } .service-item h3 { color: #ff6600; margin-bottom: 10px; } /* Contact Form */ .contact-form { max-width: 600px; margin: 30px auto 0 auto; display: flex; flex-direction: column; gap: 15px; } .contact-form input, .contact-form textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 5px; font-size: 1rem; } .contact-form textarea { resize: vertical; /* Allow vertical resize */ } .contact-form button { align-self: center; /* Center button */ } /* Footer */ footer { background-color: #333; color: #fff; text-align: center; padding: 20px 0; margin-top: 40px; /* Add space above footer */ } /* Responsive Design */ @media (max-width: 768px) { .navbar .container { flex-wrap: wrap; /* Allow wrapping */ position: relative; /* Needed for absolute positioning of nav-links */ } .menu-toggle { display: block; /* Show toggle on small screens */ position: absolute; /* Position relative to container */ right: 20px; top: 50%; transform: translateY(-50%); } .nav-links { display: none; /* Hide links by default */ flex-direction: column; width: 100%; background-color: rgba(0, 0, 0, 0.9); position: absolute; top: 100%; /* Position below the navbar */ left: 0; padding: 15px 0; /* Add padding */ text-align: center; } .nav-links.active { display: flex; /* Show links when active */ } .nav-links li { margin: 10px 0; /* Space out links vertically */ margin-left: 0; /* Reset margin */ } .hero-section { padding-top: 100px; /* Increase padding for taller mobile navbar */ } .hero-section h1 { font-size: 2.5rem; } .hero-section p { font-size: 1.1rem; } .content-section h2 { font-size: 1.8rem; } .service-grid { grid-template-columns: 1fr; /* Stack items on smaller screens */ } } const menuToggle = document.querySelector('.menu-toggle'); const navLinks = document.querySelector('.nav-links'); const navbar = document.querySelector('.navbar'); // Toggle mobile menu menuToggle.addEventListener('click', () => { navLinks.classList.toggle('active'); menuToggle.classList.toggle('active'); // For animating the burger icon }); // Close mobile menu when a link is clicked navLinks.querySelectorAll('a').forEach(link => { link.addEventListener('click', () => { if (navLinks.classList.contains('active')) { navLinks.classList.remove('active'); menuToggle.classList.remove('active'); } }); }); // Optional: Change navbar background on scroll window.addEventListener('scroll', () => { if (window.scrollY > 50) { navbar.style.backgroundColor = 'rgba(0, 0, 0, 0.95)'; } else { navbar.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; } }); // Basic form submission handling (prevents default page reload) const contactForm = document.querySelector('.contact-form'); if (contactForm) { contactForm.addEventListener('submit', (e) => { e.preventDefault(); // Prevent actual submission for this example alert('Thank you for your message! (Form submission is disabled in this demo)'); contactForm.reset(); // Clear the form }); } I've added the complete CSS, including styles for the service grid, contact form, footer, image placeholders (and replaced them with actual `img` tags using placeholder URLs from Unsplash), and responsive adjustments for smaller screens. I also included basic JavaScript for the mobile menu toggle and to prevent the contact form from actually submitting.