Free Catering Services HTML Website Template

Faraz

By Faraz -

Download this free catering services HTML website template built with Tailwind CSS and GSAP animations. Perfect for food businesses. Get the code now!

Join us on Telegram
free-catering-services-html-website-template.webp
Read AlsoCreate Responsive Carousels Slider with Owl Carousel.webpCreate Responsive Carousels with Owl Carousel | HTML, CSS, JavaScript Tutorial

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

Are you planning to build a website for a catering business? You are in the right place. In the food industry, presentation is everything. Your website needs to look as appetizing as the food you serve.

Today, I’m sharing a Free Catering Services HTML Website Template. This template is modern, fast, and fully responsive. It is built using HTML, Tailwind CSS for styling, and JavaScript with GSAP for smooth animations.

Prerequisites: Before we start, make sure you have:

  • A code editor (like VS Code).
  • Basic knowledge of HTML and CSS.
  • An internet connection (to load Tailwind and GSAP libraries).

Note: This free version contains the Homepage. If you need the complete 12-page kit (including Menu, Gallery, About, and Contact pages), you can get the full version at codewithfaraz.com/shop.

Source Code

Step 1 (HTML Code):

First, we create the skeleton of the website. We will use a standard HTML5 boilerplate. Inside the <head>, we will include the Tailwind CSS CDN, Phosphor Icons, and a Google Font to make the text look elegant.

In the body, we will create:

  • Navbar: Links to navigate the site.
  • Hero Section: A big, welcoming banner.
  • Services Section: Cards showing what you offer (Weddings, Corporate, etc.).
  • About Section: A brief story about the business.
  • Footer: Contact info and links.
Read Alsocreate a responsive full-screen hamburger menu with html and css only.jpgHow to Create a Responsive Full-Screen Hamburger Menu with HTML and CSS Only

Step 2 (CSS Code):

Since we are using Tailwind CSS, most of our styling is done directly in the HTML classes (like text-center, p-10, bg-orange-500). This saves a lot of time!

However, we will add a small custom CSS block to handle the font family and ensure the GSAP animations run smoothly without any visual glitches.

/* Custom Styles & Utilities */
body {
  background-color: #050505;
  color: #f3f3f3;
  overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #050505;
}
::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #d4af37;
}

/* Outlined Text Utility */
.text-stroke {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
  color: transparent;
}
.text-stroke-gold {
  -webkit-text-stroke: 1px #d4af37;
  color: transparent;
}

/* Hamburger Animation */
.hamburger .line {
  transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.hamburger.active .line-1 {
  transform: rotate(45deg) translate(5px, 5px);
  background-color: #d4af37;
}
.hamburger.active .line-2 {
  opacity: 0;
  transform: translateX(-20px);
}
.hamburger.active .line-3 {
  transform: rotate(-45deg) translate(5px, -6px);
  background-color: #d4af37;
}

/* Mobile Menu z-index */
#mobile-menu {
  z-index: 100; /* Highest priority */
}

/* Dropdown Styles */
.dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
}
.group:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

/* Modern Loader Styles */
#loader {
  position: fixed;
  inset: 0;
  background: #050505;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: transform 0.8s ease-in-out;
}
#loader-bar {
  transition: width 0.1s linear;
}

/* Grid Background for Hero */
.bg-grid {
  background-size: 40px 40px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    10%,
    black,
    90%,
    transparent
  );
}

/* Glitch Effect on Hover for Hero Text */
.glitch-hover:hover {
  animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
  color: #d4af37;
}
@keyframes glitch {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}

Step 3 (JavaScript Code):

To make the website feel premium, we use jQuery and GSAP (GreenSock) with the ScrollTrigger plugin.

  • GSAP: Handles the movement (fading in, sliding up).
  • ScrollTrigger: Tells the animation when to start (as you scroll down the page).
// ----------------------------------------------------
// Testimonials Data & Logic
// ----------------------------------------------------
const testimonials = [
  {
    quote:
      '"Avant Garde didn\'t just cater our gala; they curated an edible art exhibition. The nitrogen-frozen mousse station was the highlight of the year."',
    name: 'Alexandra V.',
    role: 'Director, Met Gala Afterparty',
  },
  {
    quote:
      '"Precision is an understatement. Every plate was identical in geometry and flavor. They operate like a high-performance sports team."',
    name: 'James H.',
    role: 'CEO, TechFlow Systems',
  },
  {
    quote:
      '"I\'ve never seen a catering team blend molecular gastronomy with such soulful flavors. Absolutely transformative experience for our guests."',
    name: 'Elena R.',
    role: 'Editor, Culinary Arts Weekly',
  },
];

let currentTestimonialIndex = 0;

function updateTestimonialUI() {
  const quoteEl = document.getElementById('testimonial-quote');
  const nameEl = document.getElementById('testimonial-name');
  const roleEl = document.getElementById('testimonial-role');

  // Fade out
  quoteEl.style.opacity = '0';
  document.getElementById('testimonial-author').style.opacity = '0';

  setTimeout(() => {
    // Update text
    quoteEl.textContent = testimonials[currentTestimonialIndex].quote;
    nameEl.textContent = testimonials[currentTestimonialIndex].name;
    roleEl.textContent = testimonials[currentTestimonialIndex].role;

    // Fade in
    quoteEl.style.opacity = '1';
    document.getElementById('testimonial-author').style.opacity = '1';
  }, 300);
}

function nextTestimonial() {
  currentTestimonialIndex = (currentTestimonialIndex + 1) % testimonials.length;
  updateTestimonialUI();
}

function prevTestimonial() {
  currentTestimonialIndex =
    (currentTestimonialIndex - 1 + testimonials.length) % testimonials.length;
  updateTestimonialUI();
}

// ----------------------------------------------------
// Real-Time Timer Logic
// ----------------------------------------------------
function startTimer() {
  const timerEl = document.getElementById('hero-timer');
  // Set a target time 4 hours from now
  let totalSeconds = 4 * 60 * 60 + 23 * 60 + 15;

  setInterval(() => {
    if (totalSeconds <= 0) totalSeconds = 4 * 60 * 60; // Reset loop

    totalSeconds--;

    const h = Math.floor(totalSeconds / 3600);
    const m = Math.floor((totalSeconds % 3600) / 60);
    const s = totalSeconds % 60;

    timerEl.textContent = `${h.toString().padStart(2, '0')}:${m
      .toString()
      .padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
  }, 1000);
}

$(document).ready(function () {
  // Start Timer
  startTimer();

  // 1. Modern Loader Animation
  let loadProgress = 0;
  const loaderInterval = setInterval(() => {
    loadProgress += Math.floor(Math.random() * 5) + 2;
    if (loadProgress > 100) loadProgress = 100;

    $('#loader-percent').text(loadProgress + '%');
    $('#loader-bar').css('width', loadProgress + '%');

    if (loadProgress === 100) {
      clearInterval(loaderInterval);

      // Reveal Animation
      gsap.to('#loader', {
        yPercent: -100,
        duration: 1.2,
        ease: 'power4.inOut',
        delay: 0.5,
        onComplete: () => {
          // Trigger Hero Animations after loader clears
          gsap.to('.gsap-hero-reveal', {
            y: 0,
            opacity: 1,
            duration: 1.2,
            stagger: 0.15,
            ease: 'power4.out',
          });
        },
      });
    }
  }, 50);

  // 2. Navbar Scroll Effect 
  $(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
      $('#nav-container')
        .addClass('py-2 bg-obsidian/90')
        .removeClass('py-3 bg-obsidian/80');
    } else {
      $('#nav-container')
        .addClass('py-3 bg-obsidian/80')
        .removeClass('py-2 bg-obsidian/90');
    }
  });

  // 3. Hamburger Menu Logic
  const toggleMenu = () => {
    const menu = $('#mobile-menu');
    const btn = $('.hamburger');

    if (menu.hasClass('translate-x-full')) {
      menu.removeClass('translate-x-full');
      btn.addClass('active');
      $('body').addClass('overflow-hidden');

      gsap.to('.mobile-link', {
        y: 0,
        duration: 0.6,
        stagger: 0.1,
        ease: 'power3.out',
        delay: 0.3,
      });
    } else {
      menu.addClass('translate-x-full');
      btn.removeClass('active');
      $('body').removeClass('overflow-hidden');
      gsap.to('.mobile-link', { y: '100%', duration: 0 });
    }
  };

  $('.hamburger').click(function () {
    toggleMenu();
  });
  $('#close-menu-btn').click(function () {
    toggleMenu();
  });

  $('.mobile-link').click(function () {
    if (!$(this).closest('#mobile-menu-dropdown-content').length) {
      toggleMenu();
    }
    if ($(this).closest('#mobile-menu-dropdown-content').length) {
      toggleMenu();
    }
  });

  // Mobile Dropdown
  $('#mobile-menu-dropdown-btn').click(function () {
    const content = $('#mobile-menu-dropdown-content');
    const icon = $(this).find('i');
    if (content.hasClass('hidden')) {
      content.removeClass('hidden').addClass('flex');
      icon.addClass('rotate-180');
      gsap.fromTo(
        content.children(),
        { opacity: 0, y: -10 },
        { opacity: 1, y: 0, duration: 0.3, stagger: 0.1 }
      );
    } else {
      content.addClass('hidden').removeClass('flex');
      icon.removeClass('rotate-180');
    }
  });

  // 4. GSAP ScrollTrigger Animations
  gsap.registerPlugin(ScrollTrigger);

  // Timeline Animation (Blueprint)
  gsap.utils.toArray('.blueprint-step').forEach((step, i) => {
    gsap.from(step, {
      scrollTrigger: {
        trigger: step,
        start: 'top 85%',
      },
      y: 50,
      opacity: 0,
      duration: 1,
      ease: 'power3.out',
    });
  });

  gsap.from('.trigger-section > *', {
    scrollTrigger: { trigger: '.trigger-section', start: 'top 80%' },
    y: 50,
    opacity: 0,
    duration: 0.8,
    stagger: 0.2,
    ease: 'power3.out',
  });

  gsap.from('.trigger-image', {
    scrollTrigger: { trigger: '.trigger-image', start: 'top 70%' },
    x: 100,
    opacity: 0,
    duration: 1,
    ease: 'power3.out',
  });

  gsap.from('.menu-card', {
    scrollTrigger: { trigger: '#services', start: 'top 75%' },
    y: 100,
    opacity: 0,
    duration: 0.8,
    stagger: 0.2,
    ease: 'back.out(1.7)',
  });

  // 5. Number Counters
  const counters = document.querySelectorAll('.counter');
  counters.forEach((counter) => {
    const target = +counter.getAttribute('data-target');
    ScrollTrigger.create({
      trigger: counter,
      start: 'top 85%',
      once: true,
      onEnter: () => {
        let count = 0;
        const inc = target / 100;
        const updateCount = () => {
          count += inc;
          if (count < target) {
            counter.innerText = Math.ceil(count);
            setTimeout(updateCount, 20);
          } else {
            counter.innerText = target + '+';
          }
        };
        updateCount();
      },
    });
  });

  // 6. Magnetic Button
  $('.btn-magnetic').mousemove(function (e) {
    const x = e.pageX - $(this).offset().left;
    const y = e.pageY - $(this).offset().top;
    const centerX = $(this).width() / 2;
    const centerY = $(this).height() / 2;
    const deltaX = x - centerX;
    const deltaY = y - centerY;
    $(this).css('transform', `translate(${deltaX * 0.2}px, ${deltaY * 0.2}px)`);
  });
  $('.btn-magnetic').mouseleave(function () {
    $(this).css('transform', 'translate(0px, 0px)');
  });
});

Final Output:

free-catering-services-html-website-template.gif
Read AlsoCreate a Facebook Clone HTML & Tailwind CSS Tutorial.webpCreate a Facebook Clone using HTML & Tailwind CSS (Source Code)

Conclusion:

There you have it! A professional, sleek Catering Services Website Template built with HTML, Tailwind CSS, and powered by GSAP animations. This homepage is perfect for showcasing food, services, and building trust with clients.

Next Steps:

  • Customize the images with your own food photography.
  • Update the text to tell your unique brand story.

Need More Pages? If you want to save even more time and get a fully complete website with Menu pages, Photo Gallery, detailed About Us, and a Contact form, check out the full version. 👉 Download the Full 12-Page Version Here

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: catering html template, food website code, tailwind catering theme, free catering services website template html css, responsive food business website source code, gsap animation website template free, download catering website html tailwind
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Components

Please allow ads on our site🥺