<?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">←</div>
<!-- Right arrow -->
<div class="banner-arrow banner-arrow-right">→</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>