Free Dairy Farm Website Template

Faraz

By Faraz -

Download a free responsive dairy farm website template. Built with HTML, Tailwind CSS, and Swiper. Get the source code for a modern agriculture landing page.

Join us on Telegram
free-dairy-farm-website-template.webp
Read AlsoResponsive Gym Website Design Fitness Center Template.jpgResponsive Gym Website Design | Fitness Center Template

Table of Contents

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

Creating a professional website for a dairy business, milk farm, or agriculture startup doesn't have to be hard. In this guide, I will share a free, fully responsive Dairy Farm Website Template that you can copy and paste.

We will use HTML, Tailwind CSS for styling, and JavaScript for interactivity. To make the design look modern and sophisticated, we are also using Swiper.js for image sliders and Lucide for crisp icons.

Note: This guide provides the Free Homepage. If you need a complete professional solution (14 Pages, PHP Contact Form, About, Gallery, Shop), check out the Full Version at codewithfaraz.com/shop.

Prerequisites

Before we start, make sure you have:

  1. A code editor (like VS Code).
  2. Basic knowledge of HTML and CSS.
  3. An internet connection (to load the Tailwind and Icon libraries).

Source Code

Step 1 (HTML Code):

This is the backbone of your website. We are using the Tailwind CSS CDN for quick styling without complex setups. Copy this code into an index.html file.

Read Alsofree-modern-christmas-html-email-template.webpFree Modern Christmas HTML Email Template (Responsive Code)

Step 2 (CSS Code):

While Tailwind handles 95% of the styling, we need a little CSS to fix the Swiper pagination dots and ensure smooth behaviors. Add this inside a <style> tag in your <head> or a separate CSS file.

/* Base */
html {
    font-family: 'Inter', sans-serif;
}

section {
    padding-top: 5rem;
    /* 80px */
    padding-bottom: 5rem;
    /* 80px */
    overflow: hidden;
}

@media (min-width: 640px) {
    section {
        padding-top: 7rem;
        /* 112px */
        padding-bottom: 7rem;
        /* 112px */
    }
}

/* Custom Nav Link */
.nav-link {
    position: relative;
    color: #374151;
    /* text-gray-700 */
    transition: color 0.3s;
}

.nav-link:hover {
    color: #2563EB;
    /* hover:text-blue-600 */
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background-color: #2563EB;
    /* bg-blue-600 */
    transition: width 0.3s;
}

.nav-link:hover::after {
    width: 100%;
}

/* Active Nav Link Style */
.nav-link.active {
    color: #2563EB;
    /* text-blue-600 */
    font-weight: 600;
    /* semibold */
}

.nav-link.active::after {
    width: 100%;
    background-color: #2563EB;
}

/* Custom Mobile Nav Link */
.nav-link-mobile {
    display: block;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1.5rem;
    /* 2xl */
    line-height: 2rem;
    font-weight: 500;
    /* medium */
    color: #1F2937;
    /* text-gray-800 */
    transition: color 0.3s;
}

.nav-link-mobile:hover {
    color: #2563EB;
    /* hover:text-blue-600 */
}

/* Custom Button Primary */
.btn-primary {
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    background-color: #2563EB;
    /* bg-blue-600 */
    color: #ffffff;
    font-weight: 600;
    /* semibold */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* shadow-lg */
    transition: all 0.3s;
}

.btn-primary:hover {
    background-color: #1D4ED8;
    /* hover:bg-blue-700 */
    transform: translateY(-2px);
}

/* Custom Button Secondary */
.btn-secondary {
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    background-color: #ffffff;
    color: #2563EB;
    /* text-blue-600 */
    font-weight: 600;
    /* semibold */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* shadow-lg */
    transition: all 0.3s;
}

.btn-secondary:hover {
    background-color: #F9FAFB;
    /* hover:bg-gray-50 */
    transform: translateY(-2px);
}

/* Order Now Button */
.btn-order-now {
    padding: 0.6rem 1.25rem;
    /* py-2 px-5 */
    border-radius: 9999px;
    background-color: #D5E8D4;
    /* soft-green */
    color: #004A2F;
    /* dark-green */
    font-weight: 600;
    /* semibold */
    transition: all 0.3s;
}

.btn-order-now:hover {
    background-color: #004A2F;
    /* dark-green */
    color: #ffffff;
    /* text-white */
    transform: translateY(-2px);
}

/* Custom Section Heading */
.section-heading {
    font-size: 1.875rem;
    /* 3xl */
    line-height: 2.25rem;
    font-weight: 700;
    /* bold */
    color: #111827;
    /* text-gray-900 */
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .section-heading {
        font-size: 2.25rem;
        /* sm:text-4xl */
        line-height: 2.5rem;
    }
}

/* Custom Section Heading */
.section-heading-lg {
    font-size: 2.25rem;
    /* 4xl */
    line-height: 2.5rem;
    font-weight: 700;
    /* bold */
    letter-spacing: -0.025em;
    /* tracking-tight */
    color: #111827;
    /* text-gray-900 */
}

@media (min-width: 640px) {
    .section-heading-lg {
        font-size: 3rem;
        /* sm:text-5xl */
        line-height: 1;
    }
}

@media (min-width: 1024px) {
    .section-heading-lg {
        font-size: 3.75rem;
        /* lg:text-6xl */
    }
}

/* Custom Section Subheading */
.section-subheading {
    font-size: 1.125rem;
    /* text-lg */
    line-height: 1.75rem;
    color: #4B5563;
    /* text-gray-600 */
    max-width: 42rem;
    /* max-w-2xl */
    margin-left: auto;
    margin-right: auto;
}

/* Custom Hamburger Animation */
.hamburger {
    cursor: pointer;
    z-index: 50;
}

.hamburger .line {
    display: block;
    width: 1.5rem;
    /* w-6 */
    height: 2px;
    /* h-0.5 */
    background-color: #111827;
    /* bg-gray-900 */
    transition: all 0.3s ease-in-out;
    margin-top: 0.375rem;
    /* space-y-1.5 */
    margin-bottom: 0.375rem;
}

.hamburger.active .line-1 {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.active .line-2 {
    opacity: 0;
}

.hamburger.active .line-3 {
    transform: translateY(-8px) rotate(-45deg);
}

/* Scroll-reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(2rem);
    transition: all 1s ease-out;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* New Hero Section Styles */
#hero-top {
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

#hero-container:hover #hero-divider {
    opacity: 1;
}

#home {
    padding-top: 0;
    padding-bottom: 0;
}

@media (min-width: 640px) {
    #home {
        padding-top: 0;
        padding-bottom: 0;
    }
}

Step 3 (JavaScript Code):

Finally, we need to initialize the icons, set up the slider, and make the mobile menu work. Add this right before the closing </body> tag.

document.addEventListener('DOMContentLoaded', function () {
  lucide.createIcons(); // Initialize Lucide Icons

  const navbar = document.getElementById('navbar');
  const hamburgerBtn = document.getElementById('hamburger-btn');
  const mobileMenu = document.getElementById('mobile-menu');
  const backToTopBtn = document.getElementById('back-to-top');
  const progressCircle = document.getElementById('progress-circle-bar');

  // New Hero Elements
  const heroContainer = document.getElementById('hero-container');
  const heroTop = document.getElementById('hero-top');
  const heroDivider = document.getElementById('hero-divider');

  let circumference = 0;
  if (progressCircle) {
    const radius = progressCircle.r.baseVal.value;
    circumference = 2 * Math.PI * radius;
    progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
    progressCircle.style.strokeDashoffset = circumference;
  }

  // 1. Navbar Scroll Effect & Scroll Progress
  window.addEventListener('scroll', () => {
    const scrollTop = document.documentElement.scrollTop;
    const docHeight =
      document.documentElement.scrollHeight -
      document.documentElement.clientHeight;
    const scrollPercent = scrollTop / docHeight;

    // Navbar animation
    if (window.scrollY > 50) {
      navbar.classList.add('shadow-lg', 'border-white/20');
    } else {
      navbar.classList.remove('shadow-lg', 'border-white/20');
    }

    // Back to Top Button visibility
    if (window.scrollY > 300) {
      backToTopBtn.classList.remove('opacity-0', 'invisible');
    } else {
      backToTopBtn.classList.add('opacity-0', 'invisible');
    }

    // Scroll Progress animation
    if (docHeight > 0 && progressCircle) {
      const scrollPercent = scrollTop / docHeight;
      const offset = circumference - scrollPercent * circumference;
      progressCircle.style.strokeDashoffset = offset;
    } else if (progressCircle) {
      progressCircle.style.strokeDashoffset = circumference; // Reset if not scrollable
    }
  });

  // 2. Hamburger Menu Toggle
  hamburgerBtn.addEventListener('click', () => {
    hamburgerBtn.classList.toggle('active');
    mobileMenu.classList.toggle('translate-x-full');
    document.body.classList.toggle('overflow-hidden'); // Prevent scrolling when menu is open
  });

  // Close mobile menu when a link is clicked
  document.querySelectorAll('#mobile-menu a').forEach((link) => {
    link.addEventListener('click', () => {
      hamburgerBtn.classList.remove('active');
      mobileMenu.classList.add('translate-x-full');
      document.body.classList.remove('overflow-hidden');
    });
  });

  // 3. Back to Top Button Click
  backToTopBtn.addEventListener('click', () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  });

  // 4. Initialize Swiper Carousels
  const productSwiper = new Swiper('.product-swiper', {
    loop: true,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    slidesPerView: 1,
    spaceBetween: 20,
    breakpoints: {
      640: {
        slidesPerView: 2,
        spaceBetween: 20,
      },
      1024: {
        slidesPerView: 3,
        spaceBetween: 30,
      },
    },
  });

  const testimonialSwiper = new Swiper('.testimonial-swiper', {
    loop: true,
    autoplay: {
      delay: 4000,
      disableOnInteraction: false,
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    slidesPerView: 1,
    spaceBetween: 30,
  });

  // 5. Scroll-reveal Animation
  const revealElements = document.querySelectorAll('.reveal');
  const revealObserver = new IntersectionObserver(
    (entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
          observer.unobserve(entry.target);
        }
      });
    },
    { threshold: 0.1 }
  ); // Trigger when 10% of the element is visible

  revealElements.forEach((el) => {
    revealObserver.observe(el);
  });

  // 6. Smooth scroll for anchor links
  document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
    anchor.addEventListener('click', function (e) {
      if (this.getAttribute('href').length > 1) {
        e.preventDefault();
        const targetId = this.getAttribute('href');
        const targetElement = document.querySelector(targetId);
        if (targetElement) {
          targetElement.scrollIntoView({
            behavior: 'smooth',
          });
        }
      }
    });
  });

  // 7. Interactive Hero Clip-Path Effect
  if (heroContainer && heroTop && heroDivider) {
    // Function to update position
    const updateClipPath = (x) => {
      const rect = heroContainer.getBoundingClientRect();
      // Get x position from 0 to 1
      let xPercent = (x - rect.left) / rect.width;

      // Clamp value between 0 and 1 (for safety)
      xPercent = Math.max(0, Math.min(1, xPercent)) * 100;

      // Update the clip-path of the top layer
      heroTop.style.clipPath = `polygon(0 0, ${xPercent}% 0, ${xPercent}% 100%, 0 100%)`;

      // Update the position of the divider line
      heroDivider.style.left = `${xPercent}%`;
    };

    // Mousemove for desktop
    heroContainer.addEventListener('mousemove', (e) => {
      updateClipPath(e.clientX);
    });

    // Touchmove for mobile
    heroContainer.addEventListener(
      'touchmove',
      (e) => {
        if (e.touches.length > 0) {
          updateClipPath(e.touches[0].clientX);
        }
      },
      { passive: true }
    ); // Add passive for scroll performance

    // Set initial state
    heroTop.style.clipPath = 'polygon(0 0, 70% 0, 70% 100%, 0 100%)';
    heroDivider.style.left = '70%';
  }
});

Final Output:

free-dairy-farm-website-template.gif
Read Alsofree-comic-book-publishing-website-template.webpFree Comic Book Publishing Website Template

Conclusion:

You now have a clean, green, and fast-loading dairy farm website homepage. It features a beautiful hero section, a services grid, an interactive gallery, and many more sections.

Next Steps: This code creates the Homepage. Real businesses need more pages (About Us, Product Catalog, Contact Form, Blog).

If you want to save time and get a production-ready site, download the Full Premium Version. It includes 14 unique pages and a working PHP contact form.

👉 Download Full Version at CodeWithFaraz.com/shop

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: dairy website template, farm html theme, milk products website template, tailwind css farm template, milk and dairy products supplier website template, dairy shop website template, agriculture website design, milk center website template, free dairy farm website template html code, responsive dairy farm landing page source code, how to build a milk farm website using tailwind css, dairy business website template free download
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🥺