JIT
QUEST Fuel Company Website
Log in
@thalentebekwa914
with html,css, and js make a website fitting all devices about a fuel filling company called QUEST. make it intriguing with offroad racecars for background images and oil refineries etc.
Gemini 2.5 Pro

Okay, let's create a responsive website for "QUEST" fuel company with the requested theme.

<jitProject id="quest-fuel-website" title="QUEST Fuel Company Website"> <jitFile type="file" filePath="index.html"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>QUEST Fuel - Powering Your Journey</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <nav class="navbar"> <div class="container"> <a href="#" class="logo">QUEST</a> <ul class="nav-links"> <li><a href="#hero">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> <button class="menu-toggle" aria-label="Toggle navigation"> <span></span> <span></span> <span></span> </button> </div> </nav> </header> 
    <main>
      <section id="hero" class="hero-section">
        <div class="container">
          <h1>Fueling the Extreme</h1>
          <p>QUEST: High-performance fuel for every adventure.</p>
          <a href="#services" class="cta-button">Our Fuels</a>
        </div>
      </section>

      <section id="about" class="content-section">
        <div class="container">
          <h2>About QUEST</h2>
          <p>
            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.
          </p>
          <!-- Placeholder for an image -->
          <div class="image-placeholder about-image">Refinery Image Placeholder</div>
        </div>
      </section>

      <section id="services" class="content-section alt-bg">
        <div class="container">
          <h2>Our Services</h2>
          <div class="service-grid">
            <div class="service-item">
              <h3>Performance Fuels</h3>
              <p>
                Engineered for maximum power output and engine protection,
                ideal for racing and high-demand applications.
              </p>
            </div>
            <div class="service-item">
              <h3>Industrial Supply</h3>
              <p>
                Reliable bulk fuel delivery for commercial and industrial
                needs, ensuring your operations never stop.
              </p>
            </div>
            <div class="service-item">
              <h3>Custom Blends</h3>
              <p>
                Tailored fuel solutions developed to meet specific
                performance requirements and environmental standards.
              </p>
            </div>
          </div>
           <!-- Placeholder for an image -->
           <div class="image-placeholder services-image">Racecar Image Placeholder</div>
        </div>
      </section>

      <section id="contact" class="content-section">
        <div class="container">
          <h2>Contact Us</h2>
          <p>Ready to fuel your next challenge? Get in touch!</p>
          <form class="contact-form">
            <input type="text" name="name" placeholder="Your Name" required />
            <input type="email" name="email" placeholder="Your Email" required />
            <textarea name="message" placeholder="Your Message" rows="4" required></textarea>
            <button type="submit" class="cta-button">Send Message</button>
          </form>
        </div>
      </section>
    </main>

    <footer>
      <div class="container">
        <p>&copy; 2023 QUEST Fuel Company. All rights reserved.</p>
      </div>
    </footer>

    <script src="script.js"></script>
  </body>
</html>
</jitFile> <jitFile type="file" filePath="style.css"> /* 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;
}

.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;
  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;
}

/* Hero Section */
.hero-section {
  height: 100vh;
  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;
  /* Replace with your actual racecar image URL */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  padding-top: 60px; /* Adjust for fixed navbar height */
}

.hero-section h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}

.hero-section p {
  font-size: 1.4rem;
  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: 80px 0;
}

.content-section h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2.5rem;
  color: #333;
}

.content-section p {
  max-width: 800px;
  margin: 0 auto 20px auto;
  text-align: center;
  color: #555;
}

.alt-bg {
  background-color: #f4f4f4;
}

/* Image Placeholders */
.image-placeholder {
    background-color: #ddd;
    color: #888;

*

Updated files
v1
@thalentebekwa914
add the appropriate css as well please
Gemini 2.5 Pro

Okay, I'll add the remaining CSS styles to make the website functional and responsive.

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.

Updated files
v2