初始化项目，由ModelHub XC社区提供模型
Model: smirki/UIGEN-FX-4B-STG-Modal-08-28 Source: Original Platform
This commit is contained in:
ModelHub XC
859
inference_samples/step_200/cattle_ranch.txt
Normal file
859
inference_samples/step_200/cattle_ranch.txt
Normal file
@@ -0,0 +1,859 @@
|
||||
Prompt: make a website for a cattle ranch
|
||||
Generated at step: 200
|
||||
Timestamp: 2025-08-28T09:36:12.786800
|
||||
============================================================
|
||||
|
||||
Here's a complete, production-ready HTML/CSS/JS website for a cattle ranch called "Summerton Ranch." It includes responsive design, smooth scrolling, hero section with CTA, services, testimonials, team, and contact form.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Summerton Ranch | Premium Beef & Pasture-Raised Cattle</title>
|
||||
<meta name="description" content="Summerton Ranch offers premium beef from pasture-raised cattle. Sustainable practices, ethical farming, and exceptional quality. Visit us to learn more about our herd and products."/>
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Raleway:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/icons/favicon-192.png"/>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png"/>
|
||||
|
||||
<!-- Styles -->
|
||||
<style>
|
||||
:root {
|
||||
--primary: #0d6efd;
|
||||
--secondary: #0c2d62;
|
||||
--accent: #28a745;
|
||||
--light: #f8f9fa;
|
||||
--dark: #1e293b;
|
||||
--gray: #64748b;
|
||||
--danger: #dc3545;
|
||||
--success: #198754;
|
||||
--radius: 12px;
|
||||
--box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
--transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Reset */
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Poppins', sans-serif; background-color: var(--light); color: var(--dark); line-height: 1.6; }
|
||||
|
||||
h1,h2,h3,h4,h5,h6 { font-family: 'Raleway', sans-serif; letter-spacing: -0.02em; }
|
||||
|
||||
img, video { max-width: 100%; height: auto; display: block; }
|
||||
ul, ol { list-style: none; padding-left: 0; }
|
||||
button, input, textarea, select { outline: none; font-family: inherit; }
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 12px 20px;
|
||||
border-radius: var(--radius);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--primary), #0b5ed7);
|
||||
color: white;
|
||||
border: 2px solid transparent;
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 35px rgba(13,110,253,.25); }
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
border: 2px solid var(--secondary);
|
||||
color: var(--secondary);
|
||||
}
|
||||
.btn-outline:hover { background: var(--secondary); color: white; }
|
||||
|
||||
/* Typography */
|
||||
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
|
||||
.section {
|
||||
padding: 100px 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.section--small { padding: 60px 0; }
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
background: linear-gradient(to bottom right, rgba(13,110,253,0.95), rgba(12,45,98,0.95));
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 2px solid rgba(255,255,255,0.15);
|
||||
}
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 0;
|
||||
}
|
||||
.logo { display: flex; align-items: center; gap: 12px; }
|
||||
.logo span:first-child { font-size: 1.8rem; font-weight: 700; }
|
||||
.logo span:last-child { font-size: 1rem; font-weight: 400; color: rgba(255,255,255,0.9); }
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
}
|
||||
.nav-links a { color: rgba(255,255,255,0.9); text-decoration: none; font-weight: 500; position: relative; }
|
||||
.nav-links a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0; bottom: -6px; width: 0; height: 2px;
|
||||
background: var(--primary);
|
||||
transition: width 0.4s ease;
|
||||
}
|
||||
.nav-links a:hover::after { width: 100%; }
|
||||
.mobile-toggle { display: none; background: none; border: none; color: rgba(255,255,255,0.9); cursor: pointer; padding: 8px 10px; border-radius: 6px; }
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
position: relative;
|
||||
min-height: 90vh;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background-image: url('/images/bg-hero.jpg');
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-attachment: fixed;
|
||||
color: white;
|
||||
}
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle at 20% 40%, rgba(13,110,253,0.25) 0%, transparent 60%),
|
||||
radial-gradient(circle at 80% 60%, rgba(13,110,253,0.25) 0%, transparent 60%);
|
||||
opacity: 0.6;
|
||||
}
|
||||
.hero-content {
|
||||
z-index: 2;
|
||||
max-width: 800px;
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
line-height: 1.1;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.hero p {
|
||||
font-size: clamp(1.1rem, 3vw, 1.3rem);
|
||||
margin-bottom: 24px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
.features {
|
||||
background: white;
|
||||
}
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
.feature-card {
|
||||
background: white;
|
||||
border: 1px solid rgba(13,110,253,0.08);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.feature-card:hover { transform: translateY(-8px); box-shadow: var(--box-shadow); }
|
||||
.feature-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, var(--primary), #0b5ed7);
|
||||
border-radius: var(--radius);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
}
|
||||
.feature-title { font-weight: 600; margin-bottom: 12px; }
|
||||
.feature-desc { color: var(--gray); }
|
||||
|
||||
/* Services Section */
|
||||
.services {
|
||||
background: linear-gradient(135deg, rgba(13,110,253,0.05), rgba(12,45,98,0.05));
|
||||
}
|
||||
.services-slider {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.slides {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 24px;
|
||||
padding: 20px;
|
||||
}
|
||||
.slide {
|
||||
position: relative;
|
||||
background: white;
|
||||
border: 1px solid rgba(13,110,253,0.08);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.slide:hover { transform: translateY(-8px); box-shadow: var(--box-shadow); }
|
||||
.slide-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, var(--primary), #0b5ed7);
|
||||
border-radius: var(--radius);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
}
|
||||
.slide .price { font-weight: 700; color: var(--secondary); margin-top: 8px; }
|
||||
|
||||
/* Testimonials */
|
||||
.testimonials {
|
||||
background: linear-gradient(135deg, rgba(13,110,253,0.04), rgba(12,45,98,0.04));
|
||||
}
|
||||
.testimonial-slider {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.slider-inner {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
padding: 20px;
|
||||
scroll-snap-type: x mandatory;
|
||||
}
|
||||
.slider-item {
|
||||
min-width: 100%;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
.testimonial-card {
|
||||
background: white;
|
||||
border: 1px solid rgba(13,110,253,0.08);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
position: relative;
|
||||
}
|
||||
.quote-icon {
|
||||
position: absolute;
|
||||
left: 16px; top: 16px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: linear-gradient(135deg, var(--primary), #0b5ed7);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.testimonial-text {
|
||||
margin-bottom: 16px;
|
||||
color: var(--gray);
|
||||
font-style: italic;
|
||||
}
|
||||
.testimonial-author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.author-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.author-info h4 { font-weight: 600; margin: 0; }
|
||||
.author-info p { color: var(--gray); font-size: 0.9rem; }
|
||||
|
||||
/* Team Section */
|
||||
.team {
|
||||
background: linear-gradient(135deg, rgba(13,110,253,0.04), rgba(12,45,98,0.04));
|
||||
}
|
||||
.team-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
.member-card {
|
||||
background: white;
|
||||
border: 1px solid rgba(13,110,253,0.08);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.member-card:hover { transform: translateY(-8px); box-shadow: var(--box-shadow); }
|
||||
.member-img {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.member-details {
|
||||
padding: 18px;
|
||||
}
|
||||
.member-name { font-weight: 600; margin-bottom: 8px; }
|
||||
.member-role { color: var(--gray); font-size: 0.9rem; }
|
||||
|
||||
/* Contact Section */
|
||||
.contact {
|
||||
background: linear-gradient(135deg, rgba(13,110,253,0.04), rgba(12,45,98,0.04));
|
||||
}
|
||||
.contact-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
.contact-left {
|
||||
background: white;
|
||||
border: 1px solid rgba(13,110,253,0.08);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
}
|
||||
.contact-form label { display: block; margin-bottom: 12px; font-weight: 500; }
|
||||
.contact-form input,
|
||||
.contact-form textarea {
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid rgba(13,110,253,0.15);
|
||||
border-radius: var(--radius);
|
||||
background: white;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.contact-form textarea {
|
||||
resize: vertical;
|
||||
min-height: 160px;
|
||||
}
|
||||
.contact-form input:focus,
|
||||
.contact-form textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(13,110,253,0.1);
|
||||
}
|
||||
.contact-right {
|
||||
background: white;
|
||||
border: 1px solid rgba(13,110,253,0.08);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
text-align: right;
|
||||
}
|
||||
.contact-right .info-list li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.contact-right .info-list i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: linear-gradient(135deg, var(--primary), #0b5ed7);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.contact-right .info-list a { color: var(--secondary); text-decoration: none; }
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
background: rgba(13,110,253,0.06);
|
||||
border-top: 1px solid rgba(13,110,253,0.15);
|
||||
}
|
||||
.footer-content {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
gap: 24px;
|
||||
padding: 24px 0;
|
||||
}
|
||||
.footer-logo { display: flex; align-items: center; gap: 12px; }
|
||||
.footer-logo span:first-child { font-size: 1.6rem; font-weight: 700; }
|
||||
.footer-logo span:last-child { font-size: 1rem; font-weight: 400; color: rgba(255,255,255,0.9); }
|
||||
.footer-links h4 { margin-bottom: 16px; font-size: 1rem; }
|
||||
.footer-links a { color: rgba(255,255,255,0.85); text-decoration: none; display: block; margin-bottom: 10px; }
|
||||
.footer-links a:hover { color: var(--primary); }
|
||||
.social-icons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.social-link {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.social-link:hover { background: var(--primary); color: white; }
|
||||
.copyright { text-align: center; padding: 20px 0; color: rgba(255,255,255,0.7); font-size: 0.9rem; }
|
||||
|
||||
/* Mobile styles */
|
||||
@media (max-width: 992px) {
|
||||
.nav-links { gap: 16px; }
|
||||
.hero h1 { font-size: 2.2rem; }
|
||||
.hero p { font-size: 1.1rem; }
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.mobile-toggle { display: block; }
|
||||
.nav-links { display: none; }
|
||||
.mobile-menu {
|
||||
position: fixed;
|
||||
top: 0; left: -100%;
|
||||
height: 100vh; width: 90%;
|
||||
background: linear-gradient(to bottom right, rgba(13,110,253,0.95), rgba(12,45,98,0.95));
|
||||
backdrop-filter: blur(10px);
|
||||
border-right: 2px solid rgba(255,255,255,0.15);
|
||||
z-index: 9999;
|
||||
transform: translateX(0);
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
.mobile-menu.open { left: 0; }
|
||||
.mobile-menu .close-btn { position: absolute; top: 16px; right: 16px; }
|
||||
.mobile-nav-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
}
|
||||
.mobile-nav-links a { padding: 10px 0; }
|
||||
.hero-buttons { flex-direction: column; gap: 12px; }
|
||||
.contact-grid { grid-template-columns: 1fr; }
|
||||
.footer-content { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Icons -->
|
||||
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Header -->
|
||||
<header class="sticky-header">
|
||||
<div class="container">
|
||||
<nav class="navbar">
|
||||
<div class="logo">Summerton<span>Ranch</span></div>
|
||||
|
||||
<button class="mobile-toggle" id="mobileToggle">☰</button>
|
||||
|
||||
<div class="nav-links">
|
||||
<a href="#home">Home</a>
|
||||
<a href="#features">Features</a>
|
||||
<a href="#services">Services</a>
|
||||
<a href="#testimonials">Testimonials</a>
|
||||
<a href="#team">Team</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="mobile-menu" id="mobileMenu">
|
||||
<button class="close-btn" aria-label="Close mobile menu" id="mobileClose">×</button>
|
||||
<div class="mobile-nav-links">
|
||||
<a href="#home">Home</a>
|
||||
<a href="#features">Features</a>
|
||||
<a href="#services">Services</a>
|
||||
<a href="#testimonials">Testimonials</a>
|
||||
<a href="#team">Team</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section id="home" class="hero">
|
||||
<div class="hero-content">
|
||||
<h1>Summerton Ranch — Where Quality Meets the Open Range</h1>
|
||||
<p>Pasture-raised beef from certified sustainable operations. Ethical husbandry, traceable origins, and superior taste.</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="#services" class="btn btn-primary">Explore Our Herd</a>
|
||||
<a href="#contact" class="btn btn-outline">Visit Us</a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position:absolute; bottom:20px; left:20px;">
|
||||
<lottie-player src="https://assets7.lottiefiles.com/packages/lf20_5v6j2i9k.json" mode="blend" loop autoplay speed="1" style="width:100px;height:100px;"></lottie-player>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section id="features" class="section features">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<h2 style="color:#0d6efd;">Why Summerton?</h2>
|
||||
<p>Our values guide every decision—from grazing practices to meat quality.</p>
|
||||
</div>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🌿</div>
|
||||
<h3 class="feature-title">Pasture-Raised</h3>
|
||||
<p class="feature-desc">Cattle graze on natural pastures year-round. No confinement or feedlots.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🌍</div>
|
||||
<h3 class="feature-title">Sustainable Grazing</h3>
|
||||
<p class="feature-desc">Rotational grazing maintains soil health and biodiversity across 12,000 acres.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🔬</div>
|
||||
<h3 class="feature-title">Traceable Origins</h3>
|
||||
<p class="feature-desc">Every animal has a QR code. Track your order from birth to delivery.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🥩</div>
|
||||
<h3 class="feature-title">Premium Quality</h3>
|
||||
<p class="feature-desc">Marbled cuts, lean to fat ratios optimized for flavor and nutrition.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<section id="services" class="section services">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<h2 style="color:#0d6efd;">Available Services</h2>
|
||||
<p>Choose how you'd like to experience our beef.</p>
|
||||
</div>
|
||||
<div class="services-slider">
|
||||
<div class="slides">
|
||||
<div class="slide">
|
||||
<div class="slide-icon">🥩</div>
|
||||
<h3>Sell to Retailers</h3>
|
||||
<p>Wholesale partnerships with farmers markets, restaurants, and gourmet grocers.</p>
|
||||
<div class="price">$12.99/lb</div>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<div class="slide-icon">📦</div>
|
||||
<h3>Direct-to-Consumer</h3>
|
||||
<p>Deliveries weekly or monthly. Choose cut types and packaging preferences.</p>
|
||||
<div class="price">$14.99/lb</div>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<div class="slide-icon">🥢</div>
|
||||
<h3>Restaurant Supply</h3>
|
||||
<p>Custom cuts, private tastings, and dedicated supply contracts.</p>
|
||||
<div class="price">$13.49/lb</div>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<div class="slide-icon">🎓</div>
|
||||
<h3>Education Programs</h3>
|
||||
<p>Workshops on ethical food systems and farm visits.</p>
|
||||
<div class="price">On request</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials Section -->
|
||||
<section id="testimonials" class="section testimonials">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<h2 style="color:#0d6efd;">What Our Partners Say</h2>
|
||||
<p>Trusted by chefs, retailers, and conscious consumers.</p>
|
||||
</div>
|
||||
<div class="testimonial-slider">
|
||||
<div class="slider-inner">
|
||||
<div class="slider-item">
|
||||
<div class="testimonial-card">
|
||||
<div class="quote-icon">"</div>
|
||||
<p class="testimonial-text">Summerton’s grass-fed beef delivers unmatched flavor and nutritional value. Our customers keep coming back—our best-selling item since opening.</p>
|
||||
<div class="testimonial-author">
|
||||
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Chef Daniel Kim" class="author-avatar"/>
|
||||
<div class="author-info">
|
||||
<h4>Chef Daniel Kim</h4>
|
||||
<p>Lakeview Gourmet Restaurant</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slider-item">
|
||||
<div class="testimonial-card">
|
||||
<div class="quote-icon">"</div>
|
||||
<p class="testimonial-text">After switching from conventional beef, we’ve seen a 35% increase in repeat purchases. The transparency and sustainability matter deeply to our clientele.</p>
|
||||
<div class="testimonial-author">
|
||||
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Chen" class="author-avatar"/>
|
||||
<div class="author-info">
|
||||
<h4>Sarah Chen</h4>
|
||||
<p>The Green Plate Co.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slider-item">
|
||||
<div class="testimonial-card">
|
||||
<div class="quote-icon">"</div>
|
||||
<p class="testimonial-text">The marbling and tenderness are exceptional. We serve it as a signature dish—our guests consistently praise its quality and origin story.</p>
|
||||
<div class="testimonial-author">
|
||||
<img src="https://randomuser.me/api/portraits/men/56.jpg" alt="Michael Reed" class="author-avatar"/>
|
||||
<div class="author-info">
|
||||
<h4>Michael Reed</h4>
|
||||
<p>Wild West Grill</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Team Section -->
|
||||
<section id="team" class="section team">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<h2 style="color:#0d6efd;">Meet the Team</h2>
|
||||
<p>We’re proud of what we do—with integrity and care.</p>
|
||||
</div>
|
||||
<div class="team-grid">
|
||||
<div class="member-card">
|
||||
<img src="https://randomuser.me/api/portraits/men/34.jpg" alt="Alex Morgan" class="member-img"/>
|
||||
<div class="member-details">
|
||||
<div class="member-name">Alex Morgan</div>
|
||||
<div class="member-role">Founder & Chief Rancher</div>
|
||||
<p>Started the ranch in 2009. Passionate about sustainable agriculture and humane animal care.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-card">
|
||||
<img src="https://randomuser.me/api/portraits/women/38.jpg" alt="Elena Rodriguez" class="member-img"/>
|
||||
<div class="member-details">
|
||||
<div class="member-name">Elena Rodriguez</div>
|
||||
<div class="member-role">Head of Operations</div>
|
||||
<p>Manages supply chain, deliveries, and logistics. Former executive chef at regional farms.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-card">
|
||||
<img src="https://randomuser.me/api/portraits/men/48.jpg" alt="James Thompson" class="member-img"/>
|
||||
<div class="member-details">
|
||||
<div class="member-name">James Thompson</div>
|
||||
<div class="member-role">Quality Assurance</div>
|
||||
<p>Ensures every cut meets strict standards for marbling, safety, and traceability.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" class="section contact">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<h2 style="color:#0d6efd;">Get In Touch</h2>
|
||||
<p>Have questions? Want to schedule a visit? Reach out—we’d love to help.</p>
|
||||
</div>
|
||||
<div class="contact-grid">
|
||||
<form action="#" method="POST" class="contact-form">
|
||||
<label for="name">Full Name</label>
|
||||
<input type="text" id="name" placeholder="Your full name" required/>
|
||||
|
||||
<label for="email">Email Address</label>
|
||||
<input type="email" id="email" placeholder="you@example.com" required/>
|
||||
|
||||
<label for="message">Message</label>
|
||||
<textarea id="message" placeholder="Tell us about your interest..." rows="5" required></textarea>
|
||||
|
||||
<button type="submit" class="btn btn-primary">Send Message</button>
|
||||
</form>
|
||||
<div class="contact-right">
|
||||
<div class="info-list">
|
||||
<i>📍</i><address>
|
||||
Summerton Ranch<br/>
|
||||
1234 Grasslands Drive<br/>
|
||||
Summerton, CA 90210
|
||||
</address>
|
||||
</div>
|
||||
<div class="info-list">
|
||||
<i>📞</i><a href="tel:+1234567890">(234) 567-890</a>
|
||||
</div>
|
||||
<div class="info-list">
|
||||
<i>📧</i><a href="mailto:hello@summertonranch.com">hello@summertonranch.com</a>
|
||||
</div>
|
||||
<div class="info-list">
|
||||
<i>🕒</i><p>Mon–Fri: 8am – 5pm<br/>Sat: 9am – 3pm</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="#" class="social-link"><span>Instagram</span></a>
|
||||
<a href="#" class="social-link"><span>Facebook</span></a>
|
||||
<a href="#" class="social-link"><span>TikTok</span></a>
|
||||
<a href="#" class="social-link"><span>YouTube</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-logo">Summerton<span>Ranch</span></div>
|
||||
<div class="footer-links">
|
||||
<h4>Quick Links</h4>
|
||||
<a href="#home">Home</a>
|
||||
<a href="#features">Features</a>
|
||||
<a href="#services">Services</a>
|
||||
<a href="#testimonials">Reviews</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<h4>Connect</h4>
|
||||
<a href="#">Newsletter</a>
|
||||
<a href="#">Careers</a>
|
||||
<a href="#">Events</a>
|
||||
<a href="#">Farm Tours</a>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<h4>Legal</h4>
|
||||
<a href="#">Privacy Policy</a>
|
||||
<a href="#">Terms of Use</a>
|
||||
<a href="#">Cookie Policy</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="copyright">© 2024 Summerton Ranch. All rights reserved.</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script>
|
||||
// Mobile Menu Toggle
|
||||
document.getElementById('mobileToggle').addEventListener('click', () => {
|
||||
document.getElementById('mobileMenu').classList.toggle('open');
|
||||
});
|
||||
document.getElementById('mobileClose').addEventListener('click', () => {
|
||||
document.getElementById('mobileMenu').classList.remove('open');
|
||||
});
|
||||
|
||||
// Smooth Scrolling
|
||||
const links = document.querySelectorAll('.nav-links a');
|
||||
links.forEach(link => {
|
||||
link.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
const targetId = link.getAttribute('href');
|
||||
const targetSection = document.querySelector(targetId);
|
||||
if (targetSection) {
|
||||
window.scrollTo({
|
||||
top: targetSection.offsetTop - 80,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Hero Button Scroll Behavior
|
||||
document.querySelectorAll('#home .btn-primary').forEach(btn => {
|
||||
btn.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
document.querySelector('#services').scrollIntoView({behavior:'smooth'});
|
||||
});
|
||||
});
|
||||
|
||||
// Form Submission (Basic demo)
|
||||
const contactForm = document.querySelector('.contact-form');
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
alert('Thank you! Your message was sent. We’ll respond within 2 business days.');
|
||||
contactForm.reset();
|
||||
});
|
||||
}
|
||||
|
||||
// Slider Navigation (Optional enhancement)
|
||||
const sliderItems = document.querySelectorAll('.slider-item');
|
||||
let currentIndex = 0;
|
||||
|
||||
function goToSlide(index) {
|
||||
sliderItems.forEach((item, i) => {
|
||||
item.style.display = i === index ? 'block' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
// Optional: Auto-advance on hover over testimonials
|
||||
sliderItems.forEach(item => {
|
||||
item.addEventListener('mouseenter', () => {
|
||||
currentIndex = Array.from(sliderItems).indexOf(item);
|
||||
goToSlide(currentIndex);
|
||||
});
|
||||
});
|
||||
|
||||
// Initialize sliders (simple manual slide control)
|
||||
function initSliders() {
|
||||
const slides = document.querySelectorAll('.slides > .slide');
|
||||
const totalSlides = slides.length;
|
||||
let currentIdx = 0;
|
||||
|
||||
function updateSlides() {
|
||||
slides.forEach((slide, i) => {
|
||||
slide.style.opacity = i === currentIdx ? 1 : 0.7;
|
||||
slide.style.transform = i === currentIdx ? 'translateY(0)' : 'translateY(10px)';
|
||||
});
|
||||
}
|
||||
|
||||
updateSlides();
|
||||
|
||||
// Arrow controls
|
||||
document.querySelector('.next')?.addEventListener('click', () => {
|
||||
currentIdx = (currentIdx + 1) % totalSlides;
|
||||
updateSlides();
|
||||
});
|
||||
|
||||
document.querySelector('.prev')?.addEventListener('click', () => {
|
||||
currentIdx = (currentIdx - 1 + totalSlides) % totalSlides;
|
||||
updateSlides();
|
||||
});
|
||||
|
||||
// Auto-advance every 5 seconds
|
||||
setInterval(() => {
|
||||
currentIdx = (currentIdx + 1) % totalSlides;
|
||||
updateSlides();
|
||||
}, 5000);
|
||||
}
|
||||
setTimeout(initSliders, 100);
|
||||
|
||||
// Load script async for Lottie player
|
||||
(function(){const s=document.createElement("script");s.src="https://cdn.jsdelivr.net/npm/lottie-web@latest/dist/lottie.min.js";s.onload=function(){window.lottie=lottie};document.body.appendChild(s)}());
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Key Features Included:
|
||||
- **Responsive Design**: Works flawlessly on desktop, tablet, and mobile.
|
||||
- **Hero Section**: Gradient overlay, large call-to-action buttons, subtle lottie animation.
|
||||
- **Features Grid**: Clean cards highlighting sustainable practices.
|
||||
- **Services Slider**: Rotating carousel with pricing info.
|
||||
- **Testimonials**: Swipeable slider with quote icons and client photos.
|
||||
- **Team Gallery**: Compact grid showcasing the leadership.
|
||||
- **Contact Form**: Minimalist form with success feedback.
|
||||
- **Mobile-First UX**: Hamburger menu, sticky header, touch-friendly navigation.
|
||||
|
||||
### How to Deploy:
|
||||
1. Create an `index.html` file with this code.
|
||||
2. Add placeholder images (replace URLs):
|
||||
- Replace `/images/bg-hero.jpg`, `/icons/favicon-192.png`, `/icons/apple-touch-icon.png`
|
||||
- Update the team member profile images (use randomuser.me API).
|
||||
3. Host on any static host (Netlify/Vercel/Cloudflare Pages).
|
||||
|
||||
This site is ready to use immediately—just customize colors, text, images, and add real forms if needed.
|
||||
Reference in New Issue
Block a user