Poultry Farms Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Golden Feather Farms | Premium Poultry Products</title> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head> <body> <!-- Header/Navigation --> <header class="header"> <div class="container"> <div class="logo"> <i class="fas fa-egg"></i> <span>Golden Feather</span> </div> <nav class="navbar"> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#products">Products</a></li> <li><a href="#breeds">Breeds</a></li> <li><a href="#facilities">Facilities</a></li> <li><a href="#gallery">Gallery</a></li> <li><a href="#testimonials">Testimonials</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#order" class="btn">Order Now</a></li> </ul> </nav> <div class="mobile-menu-btn"> <i class="fas fa-bars"></i> </div> </div> </header> <!-- Hero Section --> <section id="home" class="hero"> <div class="container"> <div class="hero-content"> <h1>Premium Poultry Farming</h1> <p>Raising healthy, happy chickens for superior quality eggs and meat</p> <div class="hero-buttons"> <a href="#products" class="btn btn-primary">Our Products</a> <a href="#about" class="btn btn-secondary">Learn More</a> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="about"> <div class="container"> <div class="about-content"> <h2 class="section-title">About Our Farm</h2> <p>Founded in 1995, Golden Feather Farms has grown from a small family operation to one of the region's most trusted poultry producers. We combine traditional farming values with modern techniques to deliver the highest quality products.</p> <div class="about-features"> <div class="feature"> <i class="fas fa-heart"></i> <div class="feature-content"> <h3>Animal Welfare</h3> <p>Humane treatment and free-range practices</p> </div> </div> <div class="feature"> <i class="fas fa-leaf"></i> <div class="feature-content"> <h3>Sustainable</h3> <p>Eco-friendly farming methods</p> </div> </div> <div class="feature"> <i class="fas fa-award"></i> <div class="feature-content"> <h3>Quality Certified</h3> <p>Meeting highest industry standards</p> </div> </div> </div> </div> <div class="about-image"> <img src="https://images.unsplash.com/photo-1589927986089-35812388d1f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Chicken farmer"> </div> </div> </section> <!-- Products Section --> <section id="products" class="products"> <div class="container"> <h2 class="section-title">Our Products</h2> <p class="section-subtitle">Premium quality poultry products</p> <div class="products-grid"> <div class="product-card"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1587486913049-53fc88980cfc?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Fresh Eggs"> </div> <h3>Fresh Eggs</h3> <ul class="product-details"> <li><i class="fas fa-check"></i> Free-range</li> <li><i class="fas fa-check"></i> Rich in omega-3</li> <li><i class="fas fa-check"></i> Daily collection</li> </ul> <div class="product-options"> <span>6-pack</span> <span>12-pack</span> <span>30-pack</span> </div> <a href="#order" class="btn">Order Now</a> </div> <div class="product-card popular"> <div class="popular-badge">Best Seller</div> <div class="product-image"> <img src="https://images.unsplash.com/photo-1607619056574-7b8d3ee536b2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Whole Chicken"> </div> <h3>Whole Chicken</h3> <ul class="product-details"> <li><i class="fas fa-check"></i> Antibiotic-free</li> <li><i class="fas fa-check"></i> Grain-fed</li> <li><i class="fas fa-check"></i> Humanely processed</li> </ul> <div class="product-options"> <span>1-1.5kg</span> <span>1.5-2kg</span> <span>2kg+</span> </div> <a href="#order" class="btn btn-primary">Order Now</a> </div> <div class="product-card"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1601050690597-df0568f70950?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Chicken Parts"> </div> <h3>Chicken Parts</h3> <ul class="product-details"> <li><i class="fas fa-check"></i> Breasts</li> <li><i class="fas fa-check"></i> Thighs</li> <li><i class="fas fa-check"></i> Drumsticks</li> <li><i class="fas fa-check"></i> Wings</li> </ul> <div class="product-options"> <span>500g pack</span> <span>1kg pack</span> <span>Bulk orders</span> </div> <a href="#order" class="btn">Order Now</a> </div> </div> </div> </section> <!-- Breeds Section --> <section id="breeds" class="breeds"> <div class="container"> <h2 class="section-title">Our Chicken Breeds</h2> <p class="section-subtitle">Specialized breeds for optimal quality</p> <div class="breeds-tabs"> <div class="tab-buttons"> <button class="tab-btn active" data-tab="layer">Layers</button> <button class="tab-btn" data-tab="broiler">Broilers</button> <button class="tab-btn" data-tab="heritage">Heritage</button> </div> <div class="tab-content active" id="layer"> <div class="breed-content"> <h3>Egg-Laying Breeds</h3> <p>Our laying hens are selected for their excellent egg production and hardiness. We raise:</p> <ul> <li><strong>Hy-Line Browns:</strong> 300+ eggs per year</li> <li><strong>Leghorns:</strong> Superior white egg layers</li> <li><strong>Rhode Island Reds:</strong> Dual-purpose reliability</li> <li><strong>Australorps:</strong> Record-setting egg production</li> </ul> <p>All our layers enjoy free-range conditions with supplemental organic feed.</p> </div> <div class="breed-image"> <img src="https://images.unsplash.com/photo-1587486913049-53fc88980cfc?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Laying hens"> </div> </div> <div class="tab-content" id="broiler"> <div class="breed-content"> <h3>Meat Breeds</h3> <p>Our broilers are bred for optimal growth and meat quality. We raise:</p> <ul> <li><strong>Cobb 500:</strong> Excellent feed conversion</li> <li><strong>Ross 308:</strong> Uniform growth rate</li> <li><strong>Hubbard JA57:</strong> Superior breast meat yield</li> </ul> <p>Our broilers are raised in spacious barns with natural light and ventilation.</p> </div> <div class="breed-image"> <img src="https://images.unsplash.com/photo-1607619056574-7b8d3ee536b2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Broiler chickens"> </div> </div> <div class="tab-content" id="heritage"> <div class="breed-content"> <h3>Heritage Breeds</h3> <p>We preserve traditional breeds for their unique qualities:</p> <ul> <li><strong>Plymouth Rock:</strong> Excellent dual-purpose</li> <li><strong>Orpington:</strong> Gentle temperament</li> <li><strong>Sussex:</strong> Superior foraging ability</li> <li><strong>Wyandotte:</strong> Beautiful plumage</li> </ul> <p>Our heritage birds are raised in free-range conditions with access to pasture.</p> </div> <div class="breed-image"> <img src="https://images.unsplash.com/photo-1583511655826-05700442b31b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Heritage chickens"> </div> </div> </div> </div> </section> <!-- Facilities Section --> <section id="facilities" class="facilities"> <div class="container"> <h2 class="section-title">Our Facilities</h2> <p class="section-subtitle">Modern farming with traditional values</p> <div class="facilities-grid"> <div class="facility-card"> <div class="facility-icon"> <i class="fas fa-home"></i> </div> <h3>Spacious Coops</h3> <p>Well-ventilated housing with ample space per bird</p> </div> <div class="facility-card"> <div class="facility-icon"> <i class="fas fa-sun"></i> </div> <h3>Free-Range Areas</h3> <p>Access to outdoor pasture for natural behaviors</p> </div> <div class="facility-card"> <div class="facility-icon"> <i class="fas fa-fan"></i> </div> <h3>Climate Control</h3> <p>Temperature-regulated environments for bird comfort</p> </div> <div class="facility-card"> <div class="facility-icon"> <i class="fas fa-shield-alt"></i> </div> <h3>Biosecurity</h3> <p>Strict protocols to maintain flock health</p> </div> </div> <div class="facility-stats"> <div class="stat"> <div class="stat-number">25,000</div> <div class="stat-label">Happy Chickens</div> </div> <div class="stat"> <div class="stat-number">98%</div> <div class="stat-label">Health Rate</div> </div> <div class="stat"> <div class="stat-number">50+</div> <div class="stat-label">Acres of Pasture</div> </div> </div> </div> </section> <!-- Gallery Section --> <section id="gallery" class="gallery"> <div class="container"> <h2 class="section-title">Farm Gallery</h2> <p class="section-subtitle">See our operations and happy chickens</p> <div class="gallery-grid"> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1583511655826-05700442b31b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Free range chickens"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1589927986089-35812388d1f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Farm workers"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1607619056574-7b8d3ee536b2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Chicken coop"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1587486913049-53fc88980cfc?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Egg collection"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1601050690597-df0568f70950?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Processing"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1607619056574-7b8d3ee536b2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Packaging"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> </div> </div> </section> <!-- Testimonials Section --> <section id="testimonials" class="testimonials"> <div class="container"> <h2 class="section-title">What Our Customers Say</h2> <p class="section-subtitle">Don't just take our word for it</p> <div class="testimonials-slider"> <div class="testimonial active"> <div class="quote">"The eggs from Golden Feather are the best I've ever tasted. The yolks are so rich and flavorful!"</div> <div class="author"> <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson"> <div class="author-info"> <div class="name">Sarah Johnson</div> <div class="title">Local Restaurant Owner</div> </div> </div> </div> <div class="testimonial"> <div class="quote">"As a chef, I appreciate the consistent quality of Golden Feather's chicken. The meat is always tender and flavorful."</div> <div class="author"> <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael Chen"> <div class="author-info"> <div class="name">Michael Chen</div> <div class="title">Executive Chef</div> </div> </div> </div> <div class="testimonial"> <div class="quote">"We've been getting our weekly egg delivery from Golden Feather for 3 years now and have never been disappointed."</div> <div class="author"> <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily Rodriguez"> <div class="author-info"> <div class="name">Emily Rodriguez</div> <div class="title">Loyal Customer</div> </div> </div> </div> <div class="slider-controls"> <button class="prev"><i class="fas fa-chevron-left"></i></button> <div class="dots"> <span class="dot active"></span> <span class="dot"></span> <span class="dot"></span> </div> <button class="next"><i class="fas fa-chevron-right"></i></button> </div> </div> </div> </section> <!-- Order Section --> <section id="order" class="order"> <div class="container"> <div class="order-image"> <img src="https://images.unsplash.com/photo-1601050690597-df0568f70950?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Chicken products"> </div> <div class="order-form"> <h2 class="section-title">Place Your Order</h2> <p class="section-subtitle">Fill out the form to order our products</p> <form id="orderForm"> <div class="form-group"> <input type="text" id="name" placeholder="Your Name" required> </div> <div class="form-group"> <input type="email" id="email" placeholder="Your Email" required> </div> <div class="form-group"> <input type="tel" id="phone" placeholder="Your Phone" required> </div> <div class="form-group"> <select id="product" required> <option value="">Select Product</option> <option value="eggs">Fresh Eggs</option> <option value="whole">Whole Chicken</option> <option value="parts">Chicken Parts</option> <option value="mixed">Mixed Order</option> </select> </div> <div class="form-group"> <select id="quantity" required> <option value="">Select Quantity</option> <option value="small">Small (1-5 items)</option> <option value="medium">Medium (6-20 items)</option> <option value="large">Large (21+ items)</option> </select> </div> <div class="form-group"> <textarea id="notes" placeholder="Special Instructions" rows="3"></textarea> </div> <button type="submit" class="btn btn-primary">Submit Order</button> </form> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact"> <div class="container"> <h2 class="section-title">Contact Us</h2> <p class="section-subtitle">Get in touch with our farm</p> <div class="contact-content"> <div class="contact-info"> <div class="info-item"> <i class="fas fa-map-marker-alt"></i> <div class="info-content"> <h3>Location</h3> <p>123 Farm Road, Poultryville, PV 12345</p> </div> </div> <div class="info-item"> <i class="fas fa-phone-alt"></i> <div class="info-content"> <h3>Phone</h3> <p>(555) 123-4567</p> </div> </div> <div class="info-item"> <i class="fas fa-envelope"></i> <div class="info-content"> <h3>Email</h3> <p>info@goldenfeatherfarms.com</p> </div> </div> <div class="info-item"> <i class="fas fa-clock"></i> <div class="info-content"> <h3>Hours</h3> <p>Mon-Fri: 8AM - 5PM<br>Sat: 9AM - 2PM</p> </div> </div> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> </div> </div> <div class="contact-map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215573291234!2d-73.9878449241646!3d40.74844097138985!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1629990000000!5m2!1sen!2sus" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe> </div> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-about"> <div class="logo"> <i class="fas fa-egg"></i> <span>Golden Feather</span> </div> <p>Sustainable poultry farming for quality eggs and meat.</p> <div class="newsletter"> <h3>Subscribe to Newsletter</h3> <form id="footerNewsletter"> <input type="email" placeholder="Your Email" required> <button type="submit"><i class="fas fa-paper-plane"></i></button> </form> </div> </div> <div class="footer-links"> <h3>Quick Links</h3> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#products">Products</a></li> <li><a href="#breeds">Breeds</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <div class="footer-links"> <h3>Products</h3> <ul> <li><a href="#products">Fresh Eggs</a></li> <li><a href="#products">Whole Chicken</a></li> <li><a href="#products">Chicken Parts</a></li> <li><a href="#products">Bulk Orders</a></li> <li><a href="#products">Specialty Items</a></li> </ul> </div> <div class="footer-certifications"> <h3>Certifications</h3> <div class="certs"> <img src="https://via.placeholder.com/80x50?text=Organic" alt="Organic Certified"> <img src="https://via.placeholder.com/80x50?text=Free+Range" alt="Free Range Certified"> <img src="https://via.placeholder.com/80x50?text=Non-GMO" alt="Non-GMO Certified"> </div> </div> </div> <div class="footer-bottom"> <p>© 2023 Golden Feather Farms. All Rights Reserved.</p> <div class="footer-legal"> <a href="#">Privacy Policy</a> <a href="#">Terms of Service</a> </div> </div> </div> </footer> <script src="script.js"></script> </body> </html>
CSS
/* Base Styles */ :root { --primary-color: #f39c12; --secondary-color: #2ecc71; --dark-color: #2c3e50; --light-color: #ecf0f1; --egg-color: #f1c40f; --chicken-color: #e74c3c; --success-color: #27ae60; --warning-color: #f39c12; --gray-color: #95a5a6; --white-color: #ffffff; --black-color: #000000; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--dark-color); background-color: var(--white-color); } a { text-decoration: none; color: inherit; } ul { list-style: none; } img { max-width: 100%; height: auto; } .container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 15px; } .btn { display: inline-block; padding: 10px 20px; background-color: var(--primary-color); color: var(--white-color); border-radius: 5px; font-weight: 600; transition: all 0.3s ease; border: none; cursor: pointer; } .btn:hover { background-color: #e67e22; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .btn-primary { background-color: var(--primary-color); } .btn-secondary { background-color: var(--secondary-color); } .btn-secondary:hover { background-color: #27ae60; } .section-title { font-size: 2.5rem; margin-bottom: 1rem; text-align: center; color: var(--dark-color); } .section-subtitle { font-size: 1.1rem; color: var(--gray-color); text-align: center; margin-bottom: 3rem; } /* Header Styles */ .header { background-color: var(--white-color); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); position: fixed; width: 100%; top: 0; left: 0; z-index: 1000; transition: all 0.3s ease; } .header.scrolled { background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); } .header .container { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; } .logo { display: flex; align-items: center; font-size: 1.5rem; font-weight: 700; color: var(--dark-color); } .logo i { margin-right: 10px; color: var(--primary-color); } .navbar ul { display: flex; } .navbar ul li { margin-left: 30px; } .navbar ul li a { font-weight: 600; transition: color 0.3s ease; } .navbar ul li a:hover { color: var(--primary-color); } .mobile-menu-btn { display: none; font-size: 1.5rem; cursor: pointer; } /* Hero Section */ .hero { height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1583511655826-05700442b31b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover; color: var(--white-color); display: flex; align-items: center; text-align: center; padding-top: 80px; } .hero-content { max-width: 800px; margin: 0 auto; } .hero h1 { font-size: 3.5rem; margin-bottom: 1.5rem; line-height: 1.2; } .hero p { font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.9; } .hero-buttons { display: flex; justify-content: center; gap: 20px; } /* About Section */ .about { padding: 100px 0; } .about .container { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .about-image img { border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .about-features { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 30px 0; } .feature { display: flex; align-items: flex-start; gap: 20px; } .feature i { font-size: 1.5rem; color: var(--primary-color); margin-top: 5px; } .feature-content h3 { font-size: 1.2rem; margin-bottom: 5px; color: var(--dark-color); } .feature-content p { color: var(--gray-color); font-size: 0.9rem; } /* Products Section */ .products { padding: 100px 0; background-color: var(--light-color); } .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 50px; } .product-card { background-color: var(--white-color); border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); position: relative; transition: transform 0.3s ease; } .product-card:hover { transform: translateY(-10px); } .product-card.popular { border: 2px solid var(--primary-color); } .popular-badge { position: absolute; top: 15px; right: 15px; background-color: var(--chicken-color); color: var(--white-color); padding: 5px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; z-index: 1; } .product-image { height: 250px; overflow: hidden; } .product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .product-card:hover .product-image img { transform: scale(1.1); } .product-card h3 { padding: 20px 20px 10px; font-size: 1.5rem; color: var(--dark-color); } .product-details { padding: 0 20px 15px; } .product-details li { margin-bottom: 8px; display: flex; align-items: center; gap: 8px; font-size: 0.9rem; } .product-details i { color: var(--primary-color); } .product-options { padding: 0 20px 20px; display: flex; flex-wrap: wrap; gap: 10px; } .product-options span { background-color: var(--light-color); padding: 5px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; } .product-card .btn { display: block; margin: 0 20px 20px; text-align: center; } /* Breeds Section */ .breeds { padding: 100px 0; } .breeds-tabs { margin-top: 50px; } .tab-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; } .tab-btn { padding: 10px 20px; background-color: var(--light-color); border: none; border-radius: 5px; cursor: pointer; font-weight: 600; transition: all 0.3s ease; } .tab-btn:hover { background-color: #ddd; } .tab-btn.active { background-color: var(--primary-color); color: var(--white-color); } .tab-content { display: none; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .tab-content.active { display: grid; } .breed-content h3 { font-size: 1.8rem; margin-bottom: 20px; color: var(--dark-color); } .breed-content p { margin-bottom: 20px; color: var(--gray-color); } .breed-content ul { margin-bottom: 20px; } .breed-content ul li { margin-bottom: 10px; padding-left: 20px; position: relative; } .breed-content ul li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; background-color: var(--primary-color); border-radius: 50%; } .breed-image img { border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } /* Facilities Section */ .facilities { padding: 100px 0; background-color: var(--light-color); } .facilities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 50px; } .facility-card { background-color: var(--white-color); padding: 30px; border-radius: 10px; text-align: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease; } .facility-card:hover { transform: translateY(-10px); } .facility-icon { width: 80px; height: 80px; background-color: var(--primary-color); color: var(--white-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 2rem; } .facility-card h3 { font-size: 1.5rem; margin-bottom: 15px; color: var(--dark-color); } .facility-card p { color: var(--gray-color); } .facility-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin-top: 50px; } .stat { background-color: var(--white-color); padding: 30px; border-radius: 10px; text-align: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .stat-number { font-size: 2.5rem; font-weight: 700; color: var(--primary-color); margin-bottom: 5px; } .stat-label { font-size: 1rem; color: var(--gray-color); } /* Gallery Section */ .gallery { padding: 100px 0; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 50px; } .gallery-item { position: relative; border-radius: 10px; overflow: hidden; height: 250px; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .gallery-item:hover img { transform: scale(1.1); } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .gallery-item:hover .overlay { opacity: 1; } .overlay i { color: var(--white-color); font-size: 2rem; } /* Testimonials Section */ .testimonials { padding: 100px 0; background-color: var(--light-color); } .testimonials-slider { max-width: 800px; margin: 0 auto; position: relative; } .testimonial { text-align: center; padding: 40px; background-color: var(--white-color); border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); display: none; } .testimonial.active { display: block; } .quote { font-size: 1.2rem; font-style: italic; margin-bottom: 30px; color: var(--dark-color); position: relative; } .quote::before, .quote::after { content: '"'; font-size: 2rem; color: var(--primary-color); opacity: 0.3; position: absolute; } .quote::before { top: -20px; left: -10px; } .quote::after { bottom: -40px; right: -10px; } .author { display: flex; align-items: center; justify-content: center; } .author img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-right: 15px; } .author-info { text-align: left; } .name { font-weight: 700; color: var(--dark-color); } .title { font-size: 0.9rem; color: var(--gray-color); } .slider-controls { display: flex; justify-content: center; align-items: center; margin-top: 30px; gap: 20px; } .slider-controls button { background: none; border: none; font-size: 1.5rem; color: var(--primary-color); cursor: pointer; transition: color 0.3s ease; } .slider-controls button:hover { color: var(--dark-color); } .dots { display: flex; gap: 10px; } .dot { width: 12px; height: 12px; border-radius: 50%; background-color: #ddd; cursor: pointer; transition: background-color 0.3s ease; } .dot.active { background-color: var(--primary-color); } /* Order Section */ .order { padding: 100px 0; } .order .container { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .order-image img { border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .order-form { background-color: var(--light-color); padding: 40px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .form-group { margin-bottom: 20px; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; transition: border-color 0.3s ease; } .form-group textarea { resize: vertical; min-height: 100px; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); } /* Contact Section */ .contact { padding: 100px 0; background-color: var(--white-color); } .contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 50px; } .contact-info { display: grid; grid-template-columns: 1fr; gap: 30px; } .info-item { display: flex; align-items: flex-start; gap: 20px; } .info-item i { font-size: 1.5rem; color: var(--primary-color); margin-top: 5px; } .info-content h3 { font-size: 1.2rem; margin-bottom: 5px; color: var(--dark-color); } .info-content p { color: var(--gray-color); } .social-links { display: flex; gap: 15px; } .social-links a { width: 40px; height: 40px; border-radius: 50%; background-color: var(--light-color); display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; } .social-links a:hover { background-color: var(--primary-color); color: var(--white-color); } .contact-map { height: 100%; min-height: 400px; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } /* Footer */ .footer { background-color: var(--dark-color); color: var(--white-color); padding: 80px 0 0; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 60px; } .footer-about .logo { color: var(--white-color); margin-bottom: 20px; } .footer-about p { opacity: 0.8; margin-bottom: 20px; } .newsletter h3 { font-size: 1.2rem; margin-bottom: 15px; position: relative; padding-bottom: 10px; } .newsletter h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 50px; height: 2px; background-color: var(--primary-color); } .newsletter form { display: flex; } .newsletter input { flex: 1; padding: 12px 15px; border: none; border-radius: 5px 0 0 5px; font-size: 1rem; } .newsletter button { background-color: var(--primary-color); color: var(--white-color); border: none; border-radius: 0 5px 5px 0; padding: 0 15px; cursor: pointer; transition: background-color 0.3s ease; } .newsletter button:hover { background-color: #e67e22; } .footer-links h3 { font-size: 1.2rem; margin-bottom: 20px; position: relative; padding-bottom: 10px; } .footer-links h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 50px; height: 2px; background-color: var(--primary-color); } .footer-links ul li { margin-bottom: 10px; } .footer-links ul li a { opacity: 0.8; transition: opacity 0.3s ease; } .footer-links ul li a:hover { opacity: 1; color: var(--primary-color); } .footer-certifications h3 { font-size: 1.2rem; margin-bottom: 15px; position: relative; padding-bottom: 10px; } .footer-certifications h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 50px; height: 2px; background-color: var(--primary-color); } .certs { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 30px; } .certs img { border-radius: 5px; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 20px 0; display: flex; justify-content: space-between; align-items: center; } .footer-legal { display: flex; gap: 20px; } .footer-legal a { opacity: 0.8; transition: opacity 0.3s ease; } .footer-legal a:hover { opacity: 1; color: var(--primary-color); } /* Responsive Styles */ @media (max-width: 992px) { .about .container, .tab-content, .contact-content, .order .container { grid-template-columns: 1fr; } .about-image, .breed-image, .order-image { order: -1; } .section-title { font-size: 2rem; } .hero h1 { font-size: 2.5rem; } } @media (max-width: 768px) { .navbar { position: fixed; top: 80px; left: -100%; width: 80%; height: calc(100vh - 80px); background-color: var(--white-color); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: left 0.3s ease; padding: 30px; } .navbar.active { left: 0; } .navbar ul { flex-direction: column; } .navbar ul li { margin: 15px 0; } .mobile-menu-btn { display: block; } .hero h1 { font-size: 2rem; } .hero-buttons { flex-direction: column; gap: 15px; } .footer-content { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; text-align: center; gap: 15px; } .footer-legal { justify-content: center; } } @media (max-width: 576px) { .hero h1 { font-size: 1.8rem; } .hero p { font-size: 1rem; } .section-title { font-size: 1.8rem; } .section-subtitle { font-size: 1rem; } .tab-buttons { flex-direction: column; } .tab-btn { width: 100%; } .products-grid { grid-template-columns: 1fr; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { // Mobile Menu Toggle const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); const navbar = document.querySelector('.navbar'); mobileMenuBtn.addEventListener('click', function() { navbar.classList.toggle('active'); this.querySelector('i').classList.toggle('fa-times'); this.querySelector('i').classList.toggle('fa-bars'); }); // Close mobile menu when clicking on a link const navLinks = document.querySelectorAll('.navbar ul li a'); navLinks.forEach(link => { link.addEventListener('click', function() { navbar.classList.remove('active'); mobileMenuBtn.querySelector('i').classList.remove('fa-times'); mobileMenuBtn.querySelector('i').classList.add('fa-bars'); }); }); // Header Scroll Effect const header = document.querySelector('.header'); window.addEventListener('scroll', function() { if (window.scrollY > 100) { header.classList.add('scrolled'); } else { header.classList.remove('scrolled'); } }); // 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' }); } }); }); // Breeds Tab System const tabBtns = document.querySelectorAll('.tab-btn'); const tabContents = document.querySelectorAll('.tab-content'); tabBtns.forEach(btn => { btn.addEventListener('click', function() { const tabId = this.getAttribute('data-tab'); // Remove active class from all buttons and contents tabBtns.forEach(btn => btn.classList.remove('active')); tabContents.forEach(content => content.classList.remove('active')); // Add active class to clicked button and corresponding content this.classList.add('active'); document.getElementById(tabId).classList.add('active'); }); }); // Testimonial Slider const testimonials = document.querySelectorAll('.testimonial'); const dots = document.querySelectorAll('.dot'); const prevBtn = document.querySelector('.prev'); const nextBtn = document.querySelector('.next'); let currentIndex = 0; function showTestimonial(index) { testimonials.forEach(testimonial => testimonial.classList.remove('active')); dots.forEach(dot => dot.classList.remove('active')); testimonials[index].classList.add('active'); dots[index].classList.add('active'); currentIndex = index; } dots.forEach((dot, index) => { dot.addEventListener('click', () => showTestimonial(index)); }); prevBtn.addEventListener('click', () => { currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length; showTestimonial(currentIndex); }); nextBtn.addEventListener('click', () => { currentIndex = (currentIndex + 1) % testimonials.length; showTestimonial(currentIndex); }); // Auto-rotate testimonials let testimonialInterval = setInterval(() => { currentIndex = (currentIndex + 1) % testimonials.length; showTestimonial(currentIndex); }, 5000); // Pause auto-rotation on hover const slider = document.querySelector('.testimonials-slider'); slider.addEventListener('mouseenter', () => { clearInterval(testimonialInterval); }); slider.addEventListener('mouseleave', () => { testimonialInterval = setInterval(() => { currentIndex = (currentIndex + 1) % testimonials.length; showTestimonial(currentIndex); }, 5000); }); // Form Submissions const orderForm = document.getElementById('orderForm'); const newsletterForm = document.getElementById('footerNewsletter'); if (orderForm) { orderForm.addEventListener('submit', function(e) { e.preventDefault(); // Here you would typically send the form data to a server alert('Thank you for your order! We will contact you shortly to confirm.'); this.reset(); }); } if (newsletterForm) { newsletterForm.addEventListener('submit', function(e) { e.preventDefault(); // Here you would typically send the form data to a server alert('Thank you for subscribing to our newsletter!'); this.reset(); }); } // Gallery Lightbox (simplified) const galleryItems = document.querySelectorAll('.gallery-item'); galleryItems.forEach(item => { item.addEventListener('click', function() { // In a real implementation, you would open a lightbox/modal here alert('Image clicked! This would open a larger view in a real implementation.'); }); }); // Current Year for Footer const yearSpan = document.querySelector('.footer-bottom p'); if (yearSpan) { const currentYear = new Date().getFullYear(); yearSpan.textContent = yearSpan.textContent.replace('2023', currentYear); } });
Output Preview
Desktop
Mobile
Fullscreen