freshfoods

<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Freash Food for Pets</title>
  <style>
    /* Header */
/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
  }
  body {
    line-height: 1.6;
}

/* Responsive Typography */
body {
  font-size: 1rem;

}

@media (max-width: 768px) {
  body {
      font-size: 0.9rem;
  }
}

/* Adjust Spacing */
section, .banner, .option-container, .testimonial-container {
  padding: 20px 10px;
  margin-bottom: 20px;
}


/* Make text size responsive */
h2 {
    font-size: 1.8rem;
}
 
  /* Header Styles */
  .custom-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: #f8f9fa;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
  }
 
  /* Logo Section */
  .header-logo img {
    width: 50px;
  }
 
  /* Navigation Links */
  .header-nav {
    display: flex;
    align-items: center; /* Aligns all items in the center */
    gap: 20px;
    flex-wrap: wrap;
  }
 
  .nav-link {
    text-decoration: none;
    color: #333;
    padding: 8px 12px;
    transition: background-color 0.3s ease;
  }
 
  .nav-link:hover {
    background-color: #007bff;
    color: #fff;
    border-radius: 4px;
  }
 
  /* Dropdown */
  .dropdown {
    position: relative;
    display: flex; /* Ensures alignment with other nav items */
  }
 
  .dropdown-content {
    display: none; /* Hide dropdown by default */
    position: absolute;
    top: 100%; /* Positions below the dropdown link */
    left: 0;
    background-color: #f8f9fa;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    padding: 10px;
    display: none;
    flex-direction: column; /* Organizes dropdown columns side by side */
  }
 
  /* Dropdown Open Class */
.dropdown-content.open {
  display: flex;
}


  .dropdown-column {
    display: flex;
    flex-direction: column;
    margin-right: 20px;
  }
 
  .dropdown-content a {
    color: #333;
    padding: 5px 0;
    text-decoration: none;
  }
 
  .dropdown-content a:hover {
    color: #007bff;
  }

  /* Responsive Dropdown */
@media (max-width: 768px) {
  .dropdown-content {
      position: static;
  }
}
 
  /* Search Bar */
  .header-search input {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 100%;
    max-width: 200px;
  }

/* Banner */
.banner-container {
  position: relative;
  width: 100%; /* Adjust width as needed */
  height: 500px; /* Adjust height as needed */
  overflow: hidden;
}

.banner-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.banner-image.active {
  opacity: 1;
}

/* Banner Controls Styling */
/* Positioning and Styling for Banner Arrows */
.banner-arrow {
  position: absolute;
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Adjust for perfect centering */
  background-color: rgba(0, 0, 0, 0); /* Initial transparency */
  color: #ffffff; /* Color of the arrow */
  font-size: 2em; /* Adjust arrow size as needed */
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease, opacity 0.3s ease;
  opacity: 0; /* Initially hidden */
}

/* Show arrows on hover */
.banner-container:hover .banner-arrow {
  opacity: 1; /* Visible on hover */
  background-color: rgba(0, 0, 0, 0.5); /* Dark semi-transparent background on hover */
  border-radius: 50%;
}

/* Left arrow positioning */
.banner-arrow-left {
  left: 10px; /* Position slightly from the left */
}

/* Right arrow positioning */
.banner-arrow-right {
  right: 10px; /* Position slightly from the right */
}



/* Options */
/* Container styling */
.option-container {
  display: flex;
  gap: 20px;
  flex-direction: column;
  align-items: center; /* Center-aligns items horizontally */
  justify-content: center; /* Center-aligns items vertically */
  margin: 0 auto; /* Centers the container itself */
  max-width: 90%;
  padding: 20px;
}

/* Flex row layout for larger screens */
@media (min-width: 768px) {
  .option-container {
      flex-direction: row; /* Aligns options horizontally on larger screens */
  }
}


/* Option box styling */
.option-box {
  width: 500px;
  padding: 20px;
  border: 2px solid #ddd;
  border-radius: 8px;
  text-align: center;
  transition: transform 0.3s, border-color 0.3s;
  cursor: pointer;
  background-color: #f9f9f9;
}

.option-box:hover {
  transform: scale(1.05);
  border-color: #00aaff;
  background-color: #e6f7ff;
}

.option-image {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 15px;
}

/* Option text styling */
h3 {
  margin: 10px 0 5px;
  color: #333;
}

p {
  color: #666;
  font-size: 0.9em;
}


/* Bestseller Section */
.bestseller {
  text-align: center;
  padding: 2em;
  padding-top: 100px;
  padding-bottom: 100px;
}

.bestseller h2 {
  font-size: 2em;
  margin-bottom: 1em;
  color: #333;
}

/* Responsive Product Grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 90%;
  margin: 0 auto;
}

/* Product Card Styling */
.product-card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1em;
  width: 200px;
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.product-card:hover {
  transform: translateY(-5px);
  border-color: #333;
}

/* Product Image */
.product-card img {
  width: 100%;
  border-radius: 5px;
  margin-bottom: 0.5em;
}

/* Product Name */
.product-card h3 {
  font-size: 1.1em;
  margin: 0.5em 0;
  color: #333;
}

/* Price */
.product-card .price {
  font-size: 1em;
  color: #888;
  margin-bottom: 1em;
}

/* Buy Button */
.buy-button {
  background-color: #ff6600;
  color: #fff;
  padding: 0.5em 1em;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.buy-button:hover {
  background-color: #e65a00;
}

/* Banner 2,3 */
.banner {
  width: 100%;
  height: 300px; /* Adjust height as needed */
  overflow: hidden;
  position: relative;
  text-align: center;
}

.banner h2 {
  font-size: 2em;
  margin-bottom: 1em;
  color: #333;
 
}

.banner img {
  width: 100%;
  height: 100%;
  /* object-fit: cover;  Ensures the image covers the whole banner area */
}

/* Testimonials */
.testimonials {
  text-align: center;
  padding: 40px 0;
}

.testimonials h2 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 30px;
}

.testimonial-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 0 20px;
}

.testimonial-box {
  background-color: #ffebcd; /* Light beige background for the box */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.testimonial-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.image-container {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid black;
}

.customer-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rating {
  font-size: 1.2rem;
  color: #ffcc00;
  margin: 10px 0;
}

.review {
  font-size: 1rem;
  color: #555;
}

@media (max-width: 768px) {
  .testimonial-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .testimonial-container {
    grid-template-columns: 1fr;
  }
}
  </style>

  <script>
    // Header
document.addEventListener("DOMContentLoaded", () => {
  // Get elements
  const shopLink = document.getElementById("shopLink");
  const dropdownMenu = document.getElementById("dropdownMenu");

  if (shopLink && dropdownMenu) {
    // Toggle dropdown on click  
    shopLink.addEventListener("click", function(event) {
          event.preventDefault(); // Prevent default link behavior
          // Toggle display between 'none' and 'flex'
          dropdownMenu.classList.toggle("open");
      });

      // Close dropdown if clicked outside
      window.addEventListener("click", function(event) {
          if (!event.target.closest(".dropdown")) {
              dropdownMenu.classList.remove("open");
          }
      });
  }
});

// Banner 1
let currentIndex = 0;
const banners = document.querySelectorAll('.banner-image');
const bannerCount = banners.length;
const interval = 5000; // 5 seconds

function showNextBanner() {
    banners[currentIndex].classList.remove('active');
    currentIndex = (currentIndex + 1) % bannerCount;
    banners[currentIndex].classList.add('active');
}

setInterval(showNextBanner, interval);

// Arrows
document.addEventListener("DOMContentLoaded", () => {
  let currentIndex = 0;
  const banners = document.querySelectorAll('.banner-image');
  const bannerCount = banners.length;
  const interval = 5000;

  const showBanner = (index) => {
      banners.forEach((banner, i) => banner.classList.toggle('active', i === index));
  };

  document.getElementById("next-banner").addEventListener("click", () => {
      currentIndex = (currentIndex + 1) % bannerCount;
      showBanner(currentIndex);
  });

  document.getElementById("prev-banner").addEventListener("click", () => {
      currentIndex = (currentIndex - 1 + bannerCount) % bannerCount;
      showBanner(currentIndex);
  });

  setInterval(() => {
      currentIndex = (currentIndex + 1) % bannerCount;
      showBanner(currentIndex);
  }, interval);
});
  </script>

</head>
<body>
 
  <!-- Header Section -->
  <header class="custom-header">
    <div class="header-logo">
      <img src="logo-placeholder.png" alt="PetCartel">
    </div>
    <nav class="header-nav">
      <a href="index.html" class="nav-link">Home</a>
      <a href="about.html" class="nav-link">About Us</a>
     
      <!-- Shop with Dropdown -->
      <div class="dropdown">
        <a href="#" class="nav-link" id="shopLink">Shop</a>
        <div class="dropdown-content" id="dropdownMenu">
          <div class="dropdown-column">
            <a href="#">Adult Dog Meal 1</a>
            <a href="#">Adult Dog Meal 2</a>
            <a href="#">Adult Dog Meal 3</a>
            <a href="#">Adult Dog Meal 4</a>
          </div>
          <div class="dropdown-column">
            <a href="#">Adult Dog Meal 5</a>
            <a href="#">Adult Dog Meal 6</a>
            <a href="#">Adult Dog Meal 7</a>
            <a href="#">Adult Dog Meal 8</a>
          </div>
        </div>
      </div>

      <a href="meal-planner.html" class="nav-link">Meal Planner</a>
      <a href="contact.html" class="nav-link">Reach Out</a>
    </nav>
    <div class="header-search">
      <input type="text" placeholder="Search...">
    </div>
  </header>

  <!-- Banner Section 1 -->
  <div class="banner-container">
    <img src="Images/Banner 1.png" srcset="Images/Banner-1-small.png 500w, Images/Banner-1.png 1200w" alt="Banner 1" class="banner-image active">
    <img src="Images/Banner 2.png" srcset="Images/Banner-1-small.png 500w, Images/Banner-1.png 1200w" alt="Banner 2" class="banner-image">
    <img src="Images/Banner 3.png" srcset="Images/Banner-1-small.png 500w, Images/Banner-1.png 1200w" alt="Banner 3" class="banner-image">
    <div class="banner-controls">
      <!-- Left arrow -->
      <div class="banner-arrow banner-arrow-left">&larr;</div>
      <!-- Right arrow -->
      <div class="banner-arrow banner-arrow-right">&rarr;</div>
    </div>
  </div>

  <!-- Options Section -->
  <div class="option-container">
    <div class="option-box" onclick="window.location.href='single-pack-link.html'">
        <img src="Images/single-pack-image.png" srcset="Images/Banner-1-small.png 500w, Images/Banner-1.png 1200w" alt="Single Pack" class="option-image">
        <h3>Buy Single Pack</h3>
        <p>Purchase a one-time pack for your pet.</p>
    </div>
    <div class="option-box" onclick="window.location.href='monthly-plan-link.html'">
        <img src="Images/onthly-plan-image.png" srcset="Images/Banner-1-small.png 500w, Images/Banner-1.png 1200w" alt="Monthly Plan" class="option-image">
        <h3>Plan for a Month</h3>
        <p>Get a monthly subscription for fresh food.</p>
    </div>
  </div>

  <!-- BestSeller Section -->
  <section class="bestseller">
    <h2>Bestsellers</h2>
    <div class="product-grid">
      <div class="product-card">
        <img src="product1.jpg" srcset="Images/Banner-1-small.png 500w, Images/Banner-1.png 1200w" alt="Product 1">
        <h3>Product Name 1</h3>
        <p class="price">$29.99</p>
        <button class="buy-button">Buy Now</button>
      </div>
      <div class="product-card">
        <img src="product2.jpg" srcset="Images/Banner-1-small.png 500w, Images/Banner-1.png 1200w" alt="Product 2">
        <h3>Product Name 2</h3>
        <p class="price">$34.99</p>
        <button class="buy-button">Buy Now</button>
      </div>
      <div class="product-card">
        <img src="product3.jpg" srcset="Images/Banner-1-small.png 500w, Images/Banner-1.png 1200w" alt="Product 3">
        <h3>Product Name 3</h3>
        <p class="price">$39.99</p>
        <button class="buy-button">Buy Now</button>
      </div>
      <div class="product-card">
        <img src="product4.jpg" srcset="Images/Banner-1-small.png 500w, Images/Banner-1.png 1200w" alt="Product 4">
        <h3>Product Name 4</h3>
        <p class="price">$44.99</p>
        <button class="buy-button">Buy Now</button>
      </div>
      <div class="product-card">
        <img src="product5.jpg" srcset="Images/Banner-1-small.png 500w, Images/Banner-1.png 1200w" alt="Product 5">
        <h3>Product Name 5</h3>
        <p class="price">$49.99</p>
        <button class="buy-button">Buy Now</button>
      </div>
    </div>
  </section>

  <!-- Banner Section 2 -->
  <div class="banner">
    <h2>What's in the bowl?</h2>
    <img src="Images/what-in-bowl.png" srcset="Images/Banner-1-small.png 500w, Images/Banner-1.png 1200w" alt="Banner Placeholder">
  </div>


  <!-- New Arrival Section -->
  <section class="bestseller">
    <h2>New Arrival</h2>
    <div class="product-grid">
      <div class="product-card">
        <img src="product1.jpg" srcset="Images/Banner-1-small.png 500w, Images/Banner-1.png 1200w" alt="Product 1">
        <h3>Product Name 1</h3>
        <p class="price">$29.99</p>
        <button class="buy-button">Buy Now</button>
      </div>
      <div class="product-card">
        <img src="product2.jpg" srcset="Images/Banner-1-small.png 500w, Images/Banner-1.png 1200w" alt="Product 2">
        <h3>Product Name 2</h3>
        <p class="price">$34.99</p>
        <button class="buy-button">Buy Now</button>
      </div>
      <div class="product-card">
        <img src="product3.jpg" srcset="Images/Banner-1-small.png 500w, Images/Banner-1.png 1200w" alt="Product 3">
        <h3>Product Name 3</h3>
        <p class="price">$39.99</p>
        <button class="buy-button">Buy Now</button>
      </div>
      <div class="product-card">
        <img src="product4.jpg" srcset="Images/Banner-1-small.png 500w, Images/Banner-1.png 1200w" alt="Product 4">
        <h3>Product Name 4</h3>
        <p class="price">$44.99</p>
        <button class="buy-button">Buy Now</button>
      </div>
      <div class="product-card">
        <img src="product5.jpg" srcset="Images/Banner-1-small.png 500w, Images/Banner-1.png 1200w" alt="Product 5">
        <h3>Product Name 5</h3>
        <p class="price">$49.99</p>
        <button class="buy-button">Buy Now</button>
      </div>
    </div>
  </section>

  <!-- Banner Section 3 -->
  <div class="banner">
    <img src="path/to/your/image-placeholder.jpg" srcset="Images/Banner-1-small.png 500w, Images/Banner-1.png 1200w" alt="Banner Placeholder">
  </div>

  <!-- Testimonial Section -->
  <section id="testimonials" class="testimonials">
    <h2>Testimonials</h2>
    <div class="testimonial-container">
      <div class="testimonial-box">
        <div class="image-container">
          <img src="path_to_image1.jpg"  srcset="Images/Banner-1-small.png 500w, Images/Banner-1.png 1200w"  alt="Customer 1" class="customer-img">
        </div>
        <div class="rating">⭐⭐⭐⭐⭐</div>
        <p class="review">"The fresh food for pets is amazing! My dog loves every bite!"</p>
      </div>
     
      <div class="testimonial-box">
        <div class="image-container">
          <img src="path_to_image2.jpg" srcset="Images/Banner-1-small.png 500w, Images/Banner-1.png 1200w" alt="Customer 2" class="customer-img">
        </div>
        <div class="rating">⭐⭐⭐⭐⭐</div>
        <p class="review">"My cats are so much healthier since switching to your fresh meals!"</p>
      </div>
 
      <div class="testimonial-box">
        <div class="image-container">
          <img src="path_to_image3.jpg" srcset="Images/Banner-1-small.png 500w, Images/Banner-1.png 1200w" alt="Customer 3" class="customer-img">
        </div>
        <div class="rating">⭐⭐⭐⭐⭐</div>
        <p class="review">"Great quality, my pet enjoys the meals every time. Highly recommended!"</p>
      </div>
 
      <div class="testimonial-box">
        <div class="image-container">
          <img src="path_to_image4.jpg" srcset="Images/Banner-1-small.png 500w, Images/Banner-1.png 1200w" alt="Customer 4" class="customer-img">
        </div>
        <div class="rating">⭐⭐⭐⭐⭐</div>
        <p class="review">"The convenience and quality of these meals is top-notch!"</p>
      </div>
 
      <div class="testimonial-box">
        <div class="image-container">
          <img src="path_to_image5.jpg" srcset="Images/Banner-1-small.png 500w, Images/Banner-1.png 1200w" alt="Customer 5" class="customer-img">
        </div>
        <div class="rating">⭐⭐⭐⭐⭐</div>
        <p class="review">"My dog has never been so excited at mealtime. Thank you!"</p>
      </div>
 
      <div class="testimonial-box">
        <div class="image-container">
          <img src="path_to_image6.jpg" srcset="Images/Banner-1-small.png 500w, Images/Banner-1.png 1200w" alt="Customer 6" class="customer-img">
        </div>
        <div class="rating">⭐⭐⭐⭐⭐</div>
        <p class="review">"The best decision I made for my pet's health. Excellent meals!"</p>
      </div>
    </div>
  </section>

</body>