Petrol Pump Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FuelUp - Premium Petrol Pump Services</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    
    <header class="header">
        <div class="container">
            <a href="#" class="logo">Fuel<span>Up</span></a>
            <nav class="navbar">
                <a href="#home">Home</a>
                <a href="#services">Services</a>
                <a href="#products">Products</a>
                <a href="#pricing">Pricing</a>
                <a href="#about">About</a>
                <a href="#reviews">Reviews</a>
                <a href="#contact">Contact</a>
            </nav>
            <div class="icons">
                <div id="menu-btn" class="fas fa-bars"></div>
                <a href="#" class="btn">Loyalty Card</a>
            </div>
        </div>
    </header>

<section class="home" id="home">
        <div class="container">
            <div class="content">
                <h3 class="slide-left">Premium Fuel <span>Solutions</span></h3>
                <p class="slide-left">Experience the highest quality fuels and exceptional service at FuelUp stations nationwide.</p>
                <a href="#" class="btn slide-left">Find a Station</a>
            </div>
            <div class="image slide-right">
                <img src="https://images.unsplash.com/photo-1600891964599-f61ba0e24092?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Petrol Pump">
            </div>
        </div>
    </section>

<section class="brands">
        <div class="container">
            <h2 class="heading">Trusted By</h2>
            <div class="brands-container">
                <div class="brands-scroll">
                    <img src="https://logo.clearbit.com/shell.com" alt="Shell">
                    <img src="https://logo.clearbit.com/bp.com" alt="BP">
                    <img src="https://logo.clearbit.com/exxonmobil.com" alt="Exxon">
                    <img src="https://logo.clearbit.com/chevron.com" alt="Chevron">
                    <img src="https://logo.clearbit.com/totalenergies.com" alt="Total">
                    <img src="https://logo.clearbit.com/valero.com" alt="Valero">
                    <img src="https://logo.clearbit.com/phillips66.com" alt="Phillips 66">
                </div>
                <div class="brands-scroll">
                    <img src="https://logo.clearbit.com/shell.com" alt="Shell">
                    <img src="https://logo.clearbit.com/bp.com" alt="BP">
                    <img src="https://logo.clearbit.com/exxonmobil.com" alt="Exxon">
                    <img src="https://logo.clearbit.com/chevron.com" alt="Chevron">
                    <img src="https://logo.clearbit.com/totalenergies.com" alt="Total">
                    <img src="https://logo.clearbit.com/valero.com" alt="Valero">
                    <img src="https://logo.clearbit.com/phillips66.com" alt="Phillips 66">
                </div>
            </div>
        </div>
    </section>

<section class="services" id="services">
        <div class="container">
            <h2 class="heading">Our <span>Services</span></h2>
            <div class="box-container">
                <div class="box">
                    <div class="icon">
                        <i class="fas fa-gas-pump"></i>
                    </div>
                    <h3>Premium Fuels</h3>
                    <p>High-quality gasoline and diesel with advanced additives for better engine performance.</p>
                    <a href="#" class="btn">Learn More</a>
                </div>
                <div class="box">
                    <div class="icon">
                        <i class="fas fa-car-battery"></i>
                    </div>
                    <h3>Car Wash</h3>
                    <p>Express and premium car wash services to keep your vehicle looking its best.</p>
                    <a href="#" class="btn">Learn More</a>
                </div>
                <div class="box">
                    <div class="icon">
                        <i class="fas fa-store"></i>
                    </div>
                    <h3>Convenience Store</h3>
                    <p>Well-stocked store with snacks, drinks, and automotive essentials.</p>
                    <a href="#" class="btn">Learn More</a>
                </div>
                <div class="box">
                    <div class="icon">
                        <i class="fas fa-tools"></i>
                    </div>
                    <h3>Vehicle Checkup</h3>
                    <p>Free basic vehicle checkups including tire pressure, oil level, and more.</p>
                    <a href="#" class="btn">Learn More</a>
                </div>
            </div>
        </div>
    </section>

<section class="products" id="products">
        <div class="container">
            <h2 class="heading">Our <span>Fuel Products</span></h2>
            <div class="fuel-cards">
                <div class="fuel-card">
                    <div class="fuel-type regular">
                        <h3>Regular</h3>
                        <div class="price">$3.49<span>/gallon</span></div>
                    </div>
                    <ul>
                        <li><i class="fas fa-check"></i> 87 Octane Rating</li>
                        <li><i class="fas fa-check"></i> Standard Engine Protection</li>
                        <li><i class="fas fa-check"></i> Clean Burning Formula</li>
                    </ul>
                    <a href="#" class="btn">Learn More</a>
                </div>
                <div class="fuel-card premium">
                    <div class="fuel-type">
                        <h3>Premium</h3>
                        <div class="price">$3.99<span>/gallon</span></div>
                    </div>
                    <ul>
                        <li><i class="fas fa-check"></i> 93 Octane Rating</li>
                        <li><i class="fas fa-check"></i> Advanced Engine Protection</li>
                        <li><i class="fas fa-check"></i> Improved Performance</li>
                        <li><i class="fas fa-check"></i> Better Fuel Economy</li>
                    </ul>
                    <a href="#" class="btn">Learn More</a>
                    <div class="popular-tag">Most Popular</div>
                </div>
                <div class="fuel-card diesel">
                    <div class="fuel-type">
                        <h3>Diesel</h3>
                        <div class="price">$3.79<span>/gallon</span></div>
                    </div>
                    <ul>
                        <li><i class="fas fa-check"></i> Ultra-Low Sulfur Diesel</li>
                        <li><i class="fas fa-check"></i> Enhanced Lubricity</li>
                        <li><i class="fas fa-check"></i> Cetane Boost</li>
                        <li><i class="fas fa-check"></i> Cold Weather Performance</li>
                    </ul>
                    <a href="#" class="btn">Learn More</a>
                </div>
            </div>
        </div>
    </section>

<section class="about" id="about">
        <div class="container">
            <div class="image slide-left">
                <img src="https://images.unsplash.com/photo-1600172454522-134f0f234df8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="About FuelUp">
            </div>
            <div class="content slide-right">
                <h3>Why Choose <span>FuelUp</span></h3>
                <p>At FuelUp, we're committed to providing the highest quality fuels and exceptional customer service. Our stations are designed with your convenience in mind, offering clean facilities, quick service, and competitive prices.</p>
                <p>We source our fuels from trusted refineries and add proprietary additives to ensure optimal engine performance and fuel efficiency. Our staff undergoes rigorous training to provide you with the best experience possible.</p>
                <div class="about-stats">
                    <div class="stat">
                        <h4>250+</h4>
                        <p>Stations Nationwide</p>
                    </div>
                    <div class="stat">
                        <h4>1M+</h4>
                        <p>Happy Customers</p>
                    </div>
                    <div class="stat">
                        <h4>24/7</h4>
                        <p>Service Available</p>
                    </div>
                </div>
                <a href="#" class="btn">Our Story</a>
            </div>
        </div>
    </section>

<section class="reviews" id="reviews">
        <div class="container">
            <h2 class="heading">Customer <span>Reviews</span></h2>
            <div class="reviews-slider">
                <div class="slider-container">
                    <div class="slide active">
                        <div class="user">
                            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="John D.">
                            <div class="user-info">
                                <h3>John D.</h3>
                                <div class="stars">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                            </div>
                        </div>
                        <p>"I've been using FuelUp for years. Their premium gasoline gives my car better mileage and smoother performance compared to other brands. The stations are always clean and the staff is friendly."</p>
                    </div>
                    <div class="slide">
                        <div class="user">
                            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah M.">
                            <div class="user-info">
                                <h3>Sarah M.</h3>
                                <div class="stars">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half-alt"></i>
                                </div>
                            </div>
                        </div>
                        <p>"The convenience store at FuelUp has everything I need for road trips. Their coffee is surprisingly good and the car wash leaves my vehicle spotless every time. Highly recommend!"</p>
                    </div>
                    <div class="slide">
                        <div class="user">
                            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Robert T.">
                            <div class="user-info">
                                <h3>Robert T.</h3>
                                <div class="stars">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                            </div>
                        </div>
                        <p>"As a truck driver, I rely on quality diesel fuel. FuelUp's diesel keeps my engine running smoothly and I get better mileage. Their restrooms are always clean too, which is important for us on the road."</p>
                    </div>
                </div>
                <div class="slider-nav">
                    <button class="prev"><i class="fas fa-chevron-left"></i></button>
                    <button class="next"><i class="fas fa-chevron-right"></i></button>
                </div>
            </div>
        </div>
    </section>

<section class="pricing" id="pricing">
        <div class="container">
            <h2 class="heading">Fuel <span>Pricing</span></h2>
            <div class="price-table">
                <div class="price-header">
                    <div class="fuel-type">Fuel Type</div>
                    <div class="price-per-gallon">Price/Gallon</div>
                    <div class="trend">7-Day Trend</div>
                </div>
                <div class="price-row">
                    <div class="fuel-type">
                        <i class="fas fa-gas-pump"></i>
                        Regular (87)
                    </div>
                    <div class="price-per-gallon">$3.49</div>
                    <div class="trend down"><i class="fas fa-arrow-down"></i> $0.02</div>
                </div>
                <div class="price-row">
                    <div class="fuel-type">
                        <i class="fas fa-gas-pump"></i>
                        Midgrade (89)
                    </div>
                    <div class="price-per-gallon">$3.69</div>
                    <div class="trend stable"><i class="fas fa-equals"></i> $0.00</div>
                </div>
                <div class="price-row">
                    <div class="fuel-type">
                        <i class="fas fa-gas-pump"></i>
                        Premium (93)
                    </div>
                    <div class="price-per-gallon">$3.99</div>
                    <div class="trend up"><i class="fas fa-arrow-up"></i> $0.05</div>
                </div>
                <div class="price-row">
                    <div class="fuel-type">
                        <i class="fas fa-truck"></i>
                        Diesel
                    </div>
                    <div class="price-per-gallon">$3.79</div>
                    <div class="trend down"><i class="fas fa-arrow-down"></i> $0.08</div>
                </div>
            </div>
            <div class="price-update">
                <p><i class="fas fa-info-circle"></i> Prices updated: <span id="current-date"></span></p>
                <a href="#" class="btn">View Historical Prices</a>
            </div>
        </div>
    </section>

<section class="contact" id="contact">
        <div class="container">
            <h2 class="heading">Contact <span>Us</span></h2>
            <div class="contact-container">
                <div class="contact-info slide-left">
                    <h3>Get In Touch</h3>
                    <div class="info-box">
                        <div class="icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div class="detail">
                            <h4>Address</h4>
                            <p>123 Energy Plaza, Houston, TX 77002</p>
                        </div>
                    </div>
                    <div class="info-box">
                        <div class="icon">
                            <i class="fas fa-phone-alt"></i>
                        </div>
                        <div class="detail">
                            <h4>Phone</h4>
                            <p>+1 (800) 555-FUEL</p>
                        </div>
                    </div>
                    <div class="info-box">
                        <div class="icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div class="detail">
                            <h4>Email</h4>
                            <p>info@fuelup.com</p>
                        </div>
                    </div>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                <div class="contact-form slide-right">
                    <h3>Send Us a Message</h3>
                    <form>
                        <div class="input-box">
                            <input type="text" placeholder="Your Name">
                        </div>
                        <div class="input-box">
                            <input type="email" placeholder="Your Email">
                        </div>
                        <div class="input-box">
                            <input type="text" placeholder="Subject">
                        </div>
                        <div class="input-box">
                            <textarea placeholder="Your Message"></textarea>
                        </div>
                        <button type="submit" class="btn">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer class="footer">
        <div class="container">
            <div class="footer-box">
                <h3>Quick Links</h3>
                <a href="#home"><i class="fas fa-chevron-right"></i> Home</a>
                <a href="#services"><i class="fas fa-chevron-right"></i> Services</a>
                <a href="#products"><i class="fas fa-chevron-right"></i> Products</a>
                <a href="#pricing"><i class="fas fa-chevron-right"></i> Pricing</a>
                <a href="#about"><i class="fas fa-chevron-right"></i> About</a>
                <a href="#reviews"><i class="fas fa-chevron-right"></i> Reviews</a>
                <a href="#contact"><i class="fas fa-chevron-right"></i> Contact</a>
            </div>
            <div class="footer-box">
                <h3>Our Services</h3>
                <a href="#"><i class="fas fa-chevron-right"></i> Fuel Services</a>
                <a href="#"><i class="fas fa-chevron-right"></i> Car Wash</a>
                <a href="#"><i class="fas fa-chevron-right"></i> Convenience Store</a>
                <a href="#"><i class="fas fa-chevron-right"></i> Vehicle Checkup</a>
                <a href="#"><i class="fas fa-chevron-right"></i> Tire Services</a>
                <a href="#"><i class="fas fa-chevron-right"></i> Loyalty Program</a>
            </div>
            <div class="footer-box">
                <h3>Contact Info</h3>
                <a href="#"><i class="fas fa-phone"></i> +1 (800) 555-FUEL</a>
                <a href="#"><i class="fas fa-envelope"></i> info@fuelup.com</a>
                <a href="#"><i class="fas fa-map-marker-alt"></i> Houston, TX 77002</a>
            </div>
            <div class="footer-box">
                <h3>Newsletter</h3>
                <p>Subscribe for latest updates and offers</p>
                <form>
                    <input type="email" placeholder="Your Email">
                    <button type="submit" class="btn">Subscribe</button>
                </form>
            </div>
        </div>
        <div class="copyright">
            <p>&copy; 2023 FuelUp. All Rights Reserved.</p>
        </div>
    </footer>

CSS

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* Variables */
:root {
    --primary: #ff5e14;
    --secondary: #f9b233;
    --dark: #1e1e1e;
    --light: #f5f5f5;
    --gray: #777;
    --light-gray: #eaeaea;
    --white: #ffffff;
    --black: #000000;
    --green: #28a745;
    --red: #dc3545;
    --blue: #007bff;
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    list-style: none;
    outline: none;
    border: none;
    transition: all 0.2s linear;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background: var(--white);
    color: var(--dark);
    overflow-x: hidden;
}

section {
    padding: 8rem 9%;
}

.btn {
    display: inline-block;
    margin-top: 1rem;
    padding: 1rem 3rem;
    background: var(--primary);
    color: var(--white);
    font-size: 1.7rem;
    font-weight: 500;
    border-radius: 0.5rem;
    cursor: pointer;
    text-transform: capitalize;
}

.btn:hover {
    background: var(--secondary);
    transform: translateY(-0.3rem);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.heading {
    text-align: center;
    font-size: 4.5rem;
    margin-bottom: 5rem;
    position: relative;
}

.heading span {
    color: var(--primary);
}

.heading::after {
    content: '';
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 10rem;
    height: 0.3rem;
    background: var(--primary);
    border-radius: 0.5rem;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Header Styles */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--white);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    padding: 2rem 9%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header .logo {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--dark);
}

.header .logo span {
    color: var(--primary);
}

.header .navbar a {
    font-size: 1.7rem;
    margin-left: 2rem;
    color: var(--dark);
    position: relative;
}

.header .navbar a::before {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: 0;
    height: 0.2rem;
    background: var(--primary);
    transition: width 0.3s ease;
}

.header .navbar a:hover::before {
    width: 100%;
}

.header .icons {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header .icons #menu-btn {
    font-size: 2.5rem;
    color: var(--dark);
    cursor: pointer;
    display: none;
}

/* Hero Section */
.home {
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding-top: 12rem;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80') no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.home .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.home .content {
    flex: 1 1 45rem;
    padding-right: 2rem;
}

.home .content h3 {
    font-size: 5.5rem;
    color: var(--white);
    text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.3);
    line-height: 1.2;
    margin-bottom: 2rem;
}

.home .content h3 span {
    color: var(--primary);
}

.home .content p {
    font-size: 1.7rem;
    color: var(--light);
    padding: 1rem 0;
    line-height: 1.5;
    margin-bottom: 2rem;
}

.home .image {
    flex: 1 1 45rem;
}

.home .image img {
    width: 100%;
    border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
    animation: float 3s linear infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2rem);
    }
}

/* Brands Scroller */
.brands {
    background: var(--light-gray);
    padding: 5rem 0;
}

.brands .heading {
    margin-bottom: 3rem;
}

.brands-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.brands-scroll {
    display: flex;
    align-items: center;
    animation: scroll 30s linear infinite;
    width: calc(250px * 14);
}

.brands-scroll img {
    height: 80px;
    margin: 0 40px;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.brands-scroll img:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.1);
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-250px * 7));
    }
}

/* Services Section */
.services .box-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
    gap: 2rem;
}

.services .box {
    background: var(--white);
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    padding: 3rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.services .box:hover {
    transform: translateY(-1rem);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

.services .box .icon {
    height: 7rem;
    width: 7rem;
    line-height: 7rem;
    font-size: 2.5rem;
    color: var(--white);
    background: var(--primary);
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
}

.services .box:hover .icon {
    background: var(--secondary);
    transform: rotate(360deg);
}

.services .box h3 {
    font-size: 2.2rem;
    color: var(--dark);
    margin-bottom: 1rem;
}

.services .box p {
    font-size: 1.5rem;
    color: var(--gray);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

/* Products Section */
.products .fuel-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.products .fuel-card {
    background: var(--white);
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    padding: 3rem 2rem;
    text-align: center;
    width: 30rem;
    position: relative;
    transition: all 0.3s ease;
}

.products .fuel-card:hover {
    transform: translateY(-1rem);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

.products .fuel-card .fuel-type {
    margin-bottom: 2rem;
}

.products .fuel-card h3 {
    font-size: 2.5rem;
    color: var(--dark);
    margin-bottom: 0.5rem;
}

.products .fuel-card .price {
    font-size: 3rem;
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.products .fuel-card .price span {
    font-size: 1.5rem;
    color: var(--gray);
}

.products .fuel-card ul {
    margin: 2rem 0;
    text-align: left;
}

.products .fuel-card ul li {
    font-size: 1.5rem;
    color: var(--gray);
    padding: 1rem 0;
    border-bottom: 0.1rem solid var(--light-gray);
}

.products .fuel-card ul li i {
    color: var(--primary);
    margin-right: 1rem;
}

.products .fuel-card.premium {
    border: 0.2rem solid var(--primary);
}

.products .fuel-card.premium .popular-tag {
    position: absolute;
    top: -1rem;
    right: 2rem;
    background: var(--primary);
    color: var(--white);
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 1.4rem;
    font-weight: 600;
}

/* About Section */
.about .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4rem;
}

.about .image {
    flex: 1 1 45rem;
}

.about .image img {
    width: 100%;
    border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
}

.about .content {
    flex: 1 1 45rem;
}

.about .content h3 {
    font-size: 3.5rem;
    color: var(--dark);
    margin-bottom: 2rem;
}

.about .content h3 span {
    color: var(--primary);
}

.about .content p {
    font-size: 1.6rem;
    color: var(--gray);
    line-height: 1.8;
    padding: 1rem 0;
}

.about .about-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 2rem 0;
}

.about .stat {
    flex: 1 1 15rem;
    text-align: center;
    padding: 2rem;
    background: var(--light-gray);
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.about .stat:hover {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-0.5rem);
}

.about .stat h4 {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.about .stat:hover h4 {
    color: var(--white);
}

.about .stat p {
    font-size: 1.5rem;
}

.about .stat:hover p {
    color: var(--white);
}

/* Reviews Slider */
.reviews {
    background: var(--light-gray);
}

.reviews .reviews-slider {
    position: relative;
    padding: 2rem;
}

.reviews .slider-container {
    display: flex;
    overflow: hidden;
    position: relative;
    height: 40rem;
}

.reviews .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    background: var(--white);
    border-radius: 1rem;
    padding: 3rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.reviews .slide.active {
    opacity: 1;
}

.reviews .user {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.reviews .user img {
    height: 7rem;
    width: 7rem;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 1.5rem;
}

.reviews .user .user-info h3 {
    font-size: 2rem;
    color: var(--dark);
    margin-bottom: 0.5rem;
}

.reviews .user .user-info .stars i {
    font-size: 1.5rem;
    color: var(--primary);
}

.reviews .slide p {
    font-size: 1.6rem;
    color: var(--gray);
    line-height: 1.8;
    padding: 1rem 0;
}

.reviews .slider-nav {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    gap: 1rem;
}

.reviews .slider-nav button {
    height: 5rem;
    width: 5rem;
    line-height: 5rem;
    font-size: 2rem;
    color: var(--white);
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.reviews .slider-nav button:hover {
    background: var(--secondary);
    transform: scale(1.1);
}

/* Pricing Section */
.pricing .price-table {
    background: var(--white);
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.pricing .price-header {
    display: flex;
    background: var(--primary);
    color: var(--white);
    padding: 2rem;
    font-size: 1.8rem;
    font-weight: 600;
}

.pricing .price-header div {
    flex: 1;
    text-align: center;
}

.pricing .price-row {
    display: flex;
    align-items: center;
    padding: 2rem;
    border-bottom: 0.1rem solid var(--light-gray);
}

.pricing .price-row:last-child {
    border-bottom: none;
}

.pricing .price-row:hover {
    background: var(--light-gray);
}

.pricing .price-row div {
    flex: 1;
    text-align: center;
    font-size: 1.6rem;
}

.pricing .price-row .fuel-type {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-weight: 600;
}

.pricing .price-row .fuel-type i {
    font-size: 2rem;
    color: var(--primary);
}

.pricing .price-row .price-per-gallon {
    font-weight: 700;
    color: var(--primary);
}

.pricing .price-row .trend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.pricing .price-row .trend.up {
    color: var(--red);
}

.pricing .price-row .trend.down {
    color: var(--green);
}

.pricing .price-row .trend.stable {
    color: var(--gray);
}

.pricing .price-update {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
    padding: 1rem 2rem;
    background: var(--light-gray);
    border-radius: 0.5rem;
}

.pricing .price-update p {
    font-size: 1.5rem;
    color: var(--gray);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pricing .price-update p i {
    color: var(--primary);
}

.pricing .price-update p span {
    font-weight: 600;
}

/* Contact Section */
.contact .contact-container {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
}

.contact .contact-info {
    flex: 1 1 40rem;
    padding: 3rem;
    background: var(--light-gray);
    border-radius: 1rem;
}

.contact .contact-info h3 {
    font-size: 2.5rem;
    color: var(--dark);
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 0.2rem solid var(--primary);
}

.contact .info-box {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.contact .info-box .icon {
    height: 5rem;
    width: 5rem;
    line-height: 5rem;
    font-size: 2rem;
    color: var(--white);
    background: var(--primary);
    border-radius: 50%;
    text-align: center;
    margin-right: 1.5rem;
}

.contact .info-box .detail h4 {
    font-size: 1.8rem;
    color: var(--dark);
    margin-bottom: 0.5rem;
}

.contact .info-box .detail p {
    font-size: 1.5rem;
    color: var(--gray);
}

.contact .social-links {
    display: flex;
    gap: 1.5rem;
    margin-top: 3rem;
}

.contact .social-links a {
    height: 4.5rem;
    width: 4.5rem;
    line-height: 4.5rem;
    font-size: 1.8rem;
    color: var(--white);
    background: var(--primary);
    border-radius: 50%;
    text-align: center;
    transition: all 0.3s ease;
}

.contact .social-links a:hover {
    background: var(--secondary);
    transform: translateY(-0.5rem);
}

.contact .contact-form {
    flex: 1 1 40rem;
    padding: 3rem;
    background: var(--light-gray);
    border-radius: 1rem;
}

.contact .contact-form h3 {
    font-size: 2.5rem;
    color: var(--dark);
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 0.2rem solid var(--primary);
}

.contact .contact-form .input-box {
    margin-bottom: 1.5rem;
}

.contact .contact-form .input-box input,
.contact .contact-form .input-box textarea {
    width: 100%;
    padding: 1.5rem;
    font-size: 1.6rem;
    color: var(--dark);
    background: var(--white);
    border-radius: 0.5rem;
    resize: none;
}

.contact .contact-form .input-box textarea {
    height: 15rem;
}

/* Footer */
.footer {
    background: var(--dark);
    padding-top: 7rem;
}

.footer .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 3rem;
}

.footer .footer-box h3 {
    font-size: 2.2rem;
    color: var(--white);
    margin-bottom: 2rem;
    position: relative;
}

.footer .footer-box h3::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 0;
    width: 5rem;
    height: 0.2rem;
    background: var(--primary);
}

.footer .footer-box a {
    display: block;
    font-size: 1.5rem;
    color: var(--light-gray);
    padding: 1rem 0;
    transition: all 0.3s ease;
}

.footer .footer-box a:hover {
    color: var(--primary);
    transform: translateX(1rem);
}

.footer .footer-box a i {
    margin-right: 0.5rem;
    color: var(--primary);
}

.footer .footer-box p {
    font-size: 1.5rem;
    color: var(--light-gray);
    margin-bottom: 2rem;
}

.footer .footer-box form input {
    width: 100%;
    padding: 1.5rem;
    font-size: 1.6rem;
    color: var(--dark);
    background: var(--white);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.footer .copyright {
    text-align: center;
    padding: 2rem 0;
    margin-top: 3rem;
    border-top: 0.1rem solid rgba(255, 255, 255, 0.2);
}

.footer .copyright p {
    font-size: 1.6rem;
    color: var(--light-gray);
}

.footer .copyright p a {
    color: var(--primary);
}

/* Animation Classes */
.slide-left {
    transform: translateX(-10rem);
    opacity: 0;
    transition: all 1s ease;
}

.slide-right {
    transform: translateX(10rem);
    opacity: 0;
    transition: all 1s ease;
}

.slide-up {
    transform: translateY(10rem);
    opacity: 0;
    transition: all 1s ease;
}

.active-animation {
    transform: translateX(0) translateY(0);
    opacity: 1;
}

/* Media Queries */
@media (max-width: 991px) {
    html {
        font-size: 55%;
    }

section {
        padding: 8rem 2rem;
    }

.header {
        padding: 2rem;
    }
}

@media (max-width: 768px) {
    .header .navbar {
        position: absolute;
        top: 99%;
        left: 0;
        right: 0;
        background: var(--white);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }

.header .navbar.active {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

.header .navbar a {
        display: block;
        margin: 2rem;
        font-size: 2rem;
    }

.header .icons #menu-btn {
        display: inline-block;
    }

.home .content h3 {
        font-size: 4.5rem;
    }

.about .container {
        flex-direction: column;
    }

.about .image {
        flex: 1 1 100%;
    }

.about .content {
        flex: 1 1 100%;
    }

.contact .contact-container {
        flex-direction: column;
    }

.contact .contact-info,
    .contact .contact-form {
        flex: 1 1 100%;
    }
}

@media (max-width: 450px) {
    html {
        font-size: 50%;
    }

.heading {
        font-size: 3.5rem;
    }

.products .fuel-card {
        width: 100%;
    }
}

JavaScript

// Mobile Menu Toggle
    const menuBtn = document.querySelector('#menu-btn');
    const navbar = document.querySelector('.navbar');

menuBtn.addEventListener('click', function() {
        navbar.classList.toggle('active');
        menuBtn.classList.toggle('fa-times');
    });

// Close Menu on Scroll
    window.addEventListener('scroll', function() {
        navbar.classList.remove('active');
        menuBtn.classList.remove('fa-times');
    });

// Scroll Animation
    function animateOnScroll() {
        const elements = document.querySelectorAll('.slide-left, .slide-right, .slide-up');
        
        elements.forEach(element => {
            const elementPosition = element.getBoundingClientRect().top;
            const screenPosition = window.innerHeight / 1.3;
            
            if (elementPosition < screenPosition) {
                element.classList.add('active-animation');
            }
        });
    }

window.addEventListener('scroll', animateOnScroll);
    animateOnScroll(); // Run once on page load

// Testimonial Slider
    const slides = document.querySelectorAll('.slide');
    const prevBtn = document.querySelector('.prev');
    const nextBtn = document.querySelector('.next');
    let currentSlide = 0;

function showSlide(n) {
        slides.forEach(slide => {
            slide.classList.remove('active');
        });
        
        currentSlide = (n + slides.length) % slides.length;
        slides[currentSlide].classList.add('active');
    }

prevBtn.addEventListener('click', function() {
        showSlide(currentSlide - 1);
    });

nextBtn.addEventListener('click', function() {
        showSlide(currentSlide + 1);
    });

// Auto Slide
    let slideInterval = setInterval(function() {
        showSlide(currentSlide + 1);
    }, 5000);

// Pause on hover
    const sliderContainer = document.querySelector('.slider-container');
    sliderContainer.addEventListener('mouseenter', function() {
        clearInterval(slideInterval);
    });

sliderContainer.addEventListener('mouseleave', function() {
        slideInterval = setInterval(function() {
            showSlide(currentSlide + 1);
        }, 5000);
    });

// Current Date for Pricing Section
    const currentDateElement = document.getElementById('current-date');
    const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
    currentDateElement.textContent = new Date().toLocaleDateString('en-US', options);

// Smooth Scrolling for Anchor Links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;
            
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 80,
                    behavior: 'smooth'
                });
            }
        });
    });

// Form Submission Handling (prevent default)
    document.querySelectorAll('form').forEach(form => {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            // Here you would typically add AJAX form submission
            alert('Form submitted! In a real application, this would send the data to your server.');
            this.reset();
        });
    });

// Fuel Cards Hover Effect
    const fuelCards = document.querySelectorAll('.fuel-card');
    fuelCards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-1rem)';
            this.style.boxShadow = '0 1rem 2rem rgba(0, 0, 0, 0.2)';
        });
        
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
            this.style.boxShadow = '0 0.5rem 1rem rgba(0, 0, 0, 0.1)';
        });
    });

// Service Cards Animation
    const serviceBoxes = document.querySelectorAll('.services .box');
    serviceBoxes.forEach(box => {
        box.addEventListener('mouseenter', function() {
            const icon = this.querySelector('.icon');
            icon.style.transform = 'rotate(360deg)';
        });
        
        box.addEventListener('mouseleave', function() {
            const icon = this.querySelector('.icon');
            icon.style.transform = 'rotate(0)';
        });
    });
});

Petrol Pump Template Preview

Download Options