Add templates, tests, and miscellaneous project files
Includes new page templates (fitness-gym, nonprofit, online-course, photography-studio, real-estate, startup-company, travel-blog, wedding-invitation) with thumbnail SVGs, test specs, documentation files, and minor updates to index.html, router.php, and playwright config. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
187
templates/fitness-gym.html
Normal file
187
templates/fitness-gym.html
Normal file
@@ -0,0 +1,187 @@
|
||||
<!-- Navigation -->
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:18px 60px;background:#18181b;border-bottom:2px solid #ef4444;">
|
||||
<div style="font-size:26px;font-weight:800;color:#fafafa;font-family:Montserrat,sans-serif;letter-spacing:3px;">IRONFORGE</div>
|
||||
<div style="display:flex;gap:32px;align-items:center;">
|
||||
<a href="#classes" style="color:#a1a1aa;text-decoration:none;font-size:13px;font-weight:600;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Classes</a>
|
||||
<a href="#trainers" style="color:#a1a1aa;text-decoration:none;font-size:13px;font-weight:600;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Trainers</a>
|
||||
<a href="#pricing" style="color:#a1a1aa;text-decoration:none;font-size:13px;font-weight:600;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Pricing</a>
|
||||
<a href="#join" style="display:inline-block;padding:10px 28px;background:#ef4444;color:#fafafa;font-size:13px;font-weight:700;text-decoration:none;border-radius:4px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Join Now</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section style="min-height:100vh;display:flex;align-items:center;justify-content:center;background-image:url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1920');background-size:cover;background-position:center;position:relative;text-align:center;">
|
||||
<div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(24,24,27,0.85);"></div>
|
||||
<div style="position:relative;z-index:1;max-width:800px;padding:40px 20px;">
|
||||
<p style="color:#ef4444;font-size:14px;font-weight:700;margin-bottom:20px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:5px;">No Excuses. No Limits.</p>
|
||||
<h1 style="color:#fafafa;font-size:60px;font-weight:800;margin-bottom:24px;font-family:Montserrat,sans-serif;line-height:1.1;text-transform:uppercase;letter-spacing:2px;">Transform Your Body. Transform Your Life.</h1>
|
||||
<p style="color:#a1a1aa;font-size:18px;line-height:1.7;margin-bottom:40px;font-family:Inter,sans-serif;max-width:600px;margin-left:auto;margin-right:auto;">Join the strongest community in town. World-class equipment, expert trainers, and classes designed to push you beyond your limits.</p>
|
||||
<div style="display:flex;gap:16px;justify-content:center;flex-wrap:wrap;">
|
||||
<a href="#join" style="display:inline-block;padding:16px 44px;background:#ef4444;color:#fafafa;font-size:15px;font-weight:700;text-decoration:none;border-radius:4px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Start Free Trial</a>
|
||||
<a href="#classes" style="display:inline-block;padding:16px 44px;background:transparent;color:#fafafa;font-size:15px;font-weight:600;text-decoration:none;border-radius:4px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;border:2px solid rgba(250,250,250,0.3);">View Classes</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Classes -->
|
||||
<section id="classes" style="padding:100px 20px;background:#27272a;">
|
||||
<div style="max-width:1200px;margin:0 auto;">
|
||||
<div style="text-align:center;margin-bottom:60px;">
|
||||
<p style="color:#ef4444;font-size:13px;font-weight:700;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:4px;">Our Programs</p>
|
||||
<h2 style="font-size:42px;font-weight:800;color:#fafafa;font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:1px;">Classes That Deliver Results</h2>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:24px;justify-content:center;">
|
||||
<div style="flex:1;min-width:260px;max-width:280px;background:#18181b;border-radius:10px;overflow:hidden;">
|
||||
<img src="https://images.unsplash.com/photo-1534258936925-c58bed479fcb?w=400&h=240&fit=crop" style="width:100%;height:200px;object-fit:cover;display:block;" alt="HIIT class">
|
||||
<div style="padding:24px;">
|
||||
<h3 style="font-size:20px;font-weight:700;color:#fafafa;margin-bottom:8px;font-family:Montserrat,sans-serif;text-transform:uppercase;">HIIT</h3>
|
||||
<p style="color:#a1a1aa;font-size:14px;line-height:1.6;margin-bottom:16px;font-family:Inter,sans-serif;">High-intensity interval training to torch calories and build explosive power. All fitness levels welcome.</p>
|
||||
<span style="color:#ef4444;font-size:13px;font-weight:600;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Mon / Wed / Fri -- 6:00 AM</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:260px;max-width:280px;background:#18181b;border-radius:10px;overflow:hidden;">
|
||||
<img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=400&h=240&fit=crop" style="width:100%;height:200px;object-fit:cover;display:block;" alt="Yoga class">
|
||||
<div style="padding:24px;">
|
||||
<h3 style="font-size:20px;font-weight:700;color:#fafafa;margin-bottom:8px;font-family:Montserrat,sans-serif;text-transform:uppercase;">Yoga</h3>
|
||||
<p style="color:#a1a1aa;font-size:14px;line-height:1.6;margin-bottom:16px;font-family:Inter,sans-serif;">Build flexibility, balance, and mental clarity. From power flow to restorative sessions for total recovery.</p>
|
||||
<span style="color:#ef4444;font-size:13px;font-weight:600;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Tue / Thu / Sat -- 7:30 AM</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:260px;max-width:280px;background:#18181b;border-radius:10px;overflow:hidden;">
|
||||
<img src="https://images.unsplash.com/photo-1549719386-74dfcbf7dbed?w=400&h=240&fit=crop" style="width:100%;height:200px;object-fit:cover;display:block;" alt="Boxing class">
|
||||
<div style="padding:24px;">
|
||||
<h3 style="font-size:20px;font-weight:700;color:#fafafa;margin-bottom:8px;font-family:Montserrat,sans-serif;text-transform:uppercase;">Boxing</h3>
|
||||
<p style="color:#a1a1aa;font-size:14px;line-height:1.6;margin-bottom:16px;font-family:Inter,sans-serif;">Learn technique, build endurance, and relieve stress. Heavy bag work, mitt drills, and cardio boxing rounds.</p>
|
||||
<span style="color:#ef4444;font-size:13px;font-weight:600;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Mon / Wed / Fri -- 5:30 PM</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:260px;max-width:280px;background:#18181b;border-radius:10px;overflow:hidden;">
|
||||
<img src="https://images.unsplash.com/photo-1526506118085-60ce8714f8c5?w=400&h=240&fit=crop" style="width:100%;height:200px;object-fit:cover;display:block;" alt="CrossFit class">
|
||||
<div style="padding:24px;">
|
||||
<h3 style="font-size:20px;font-weight:700;color:#fafafa;margin-bottom:8px;font-family:Montserrat,sans-serif;text-transform:uppercase;">CrossFit</h3>
|
||||
<p style="color:#a1a1aa;font-size:14px;line-height:1.6;margin-bottom:16px;font-family:Inter,sans-serif;">Functional movements at high intensity. Olympic lifts, gymnastics, and metabolic conditioning in every WOD.</p>
|
||||
<span style="color:#ef4444;font-size:13px;font-weight:600;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Tue / Thu / Sat -- 6:00 PM</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Trainers -->
|
||||
<section id="trainers" style="padding:100px 20px;background:#18181b;">
|
||||
<div style="max-width:1100px;margin:0 auto;">
|
||||
<div style="text-align:center;margin-bottom:60px;">
|
||||
<p style="color:#ef4444;font-size:13px;font-weight:700;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:4px;">Meet The Team</p>
|
||||
<h2 style="font-size:42px;font-weight:800;color:#fafafa;font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:1px;">Elite Trainers</h2>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:30px;justify-content:center;">
|
||||
<div style="flex:1;min-width:280px;max-width:340px;text-align:center;">
|
||||
<img src="https://images.unsplash.com/photo-1567013127542-490d757e51fc?w=400&h=400&fit=crop" style="width:200px;height:200px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 24px;border:3px solid #ef4444;" alt="Trainer Marcus">
|
||||
<h3 style="font-size:22px;font-weight:700;color:#fafafa;margin-bottom:4px;font-family:Montserrat,sans-serif;text-transform:uppercase;">Marcus Rivera</h3>
|
||||
<p style="color:#ef4444;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Strength & Conditioning</p>
|
||||
<p style="color:#a1a1aa;font-size:14px;line-height:1.7;font-family:Inter,sans-serif;">NSCA-certified with 10+ years of experience. Former collegiate athlete specializing in powerlifting and functional training.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;max-width:340px;text-align:center;">
|
||||
<img src="https://images.unsplash.com/photo-1594381898411-846e7d193883?w=400&h=400&fit=crop" style="width:200px;height:200px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 24px;border:3px solid #ef4444;" alt="Trainer Sarah">
|
||||
<h3 style="font-size:22px;font-weight:700;color:#fafafa;margin-bottom:4px;font-family:Montserrat,sans-serif;text-transform:uppercase;">Sarah Chen</h3>
|
||||
<p style="color:#ef4444;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">HIIT & Boxing</p>
|
||||
<p style="color:#a1a1aa;font-size:14px;line-height:1.7;font-family:Inter,sans-serif;">ACE-certified group fitness instructor and amateur boxer. Known for her high-energy classes that push every member to their best.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;max-width:340px;text-align:center;">
|
||||
<img src="https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?w=400&h=400&fit=crop" style="width:200px;height:200px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 24px;border:3px solid #ef4444;" alt="Trainer James">
|
||||
<h3 style="font-size:22px;font-weight:700;color:#fafafa;margin-bottom:4px;font-family:Montserrat,sans-serif;text-transform:uppercase;">James Okonkwo</h3>
|
||||
<p style="color:#ef4444;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">CrossFit & Yoga</p>
|
||||
<p style="color:#a1a1aa;font-size:14px;line-height:1.7;font-family:Inter,sans-serif;">CrossFit Level 2 trainer and RYT-200 yoga instructor. Blends intensity with mindfulness for balanced, sustainable fitness.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pricing -->
|
||||
<section id="pricing" style="padding:100px 20px;background:#27272a;">
|
||||
<div style="max-width:1100px;margin:0 auto;">
|
||||
<div style="text-align:center;margin-bottom:60px;">
|
||||
<p style="color:#ef4444;font-size:13px;font-weight:700;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:4px;">Membership Plans</p>
|
||||
<h2 style="font-size:42px;font-weight:800;color:#fafafa;font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:1px;">Choose Your Plan</h2>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:24px;justify-content:center;align-items:stretch;">
|
||||
<div style="flex:1;min-width:280px;max-width:340px;background:#18181b;border-radius:12px;padding:40px 32px;text-align:center;border:1px solid #3f3f46;">
|
||||
<h3 style="font-size:18px;font-weight:700;color:#a1a1aa;margin-bottom:16px;font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:2px;">Basic</h3>
|
||||
<div style="margin-bottom:24px;">
|
||||
<span style="font-size:52px;font-weight:800;color:#fafafa;font-family:Montserrat,sans-serif;">$29</span>
|
||||
<span style="color:#a1a1aa;font-size:16px;font-family:Inter,sans-serif;">/mo</span>
|
||||
</div>
|
||||
<div style="text-align:left;margin-bottom:32px;">
|
||||
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;border-bottom:1px solid #3f3f46;font-family:Inter,sans-serif;">Gym floor access</p>
|
||||
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;border-bottom:1px solid #3f3f46;font-family:Inter,sans-serif;">Locker room & showers</p>
|
||||
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;border-bottom:1px solid #3f3f46;font-family:Inter,sans-serif;">2 classes per week</p>
|
||||
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;font-family:Inter,sans-serif;">Standard hours (6am - 9pm)</p>
|
||||
</div>
|
||||
<a href="#join" style="display:inline-block;width:100%;padding:14px 0;background:transparent;color:#fafafa;font-size:14px;font-weight:700;text-decoration:none;border-radius:6px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;border:2px solid #3f3f46;box-sizing:border-box;">Get Started</a>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;max-width:340px;background:#18181b;border-radius:12px;padding:40px 32px;text-align:center;border:2px solid #ef4444;position:relative;">
|
||||
<div style="position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:#ef4444;color:#fafafa;font-size:12px;font-weight:700;padding:4px 20px;border-radius:20px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Most Popular</div>
|
||||
<h3 style="font-size:18px;font-weight:700;color:#ef4444;margin-bottom:16px;font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:2px;">Pro</h3>
|
||||
<div style="margin-bottom:24px;">
|
||||
<span style="font-size:52px;font-weight:800;color:#fafafa;font-family:Montserrat,sans-serif;">$49</span>
|
||||
<span style="color:#a1a1aa;font-size:16px;font-family:Inter,sans-serif;">/mo</span>
|
||||
</div>
|
||||
<div style="text-align:left;margin-bottom:32px;">
|
||||
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;border-bottom:1px solid #3f3f46;font-family:Inter,sans-serif;">Full gym floor access</p>
|
||||
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;border-bottom:1px solid #3f3f46;font-family:Inter,sans-serif;">Unlimited classes</p>
|
||||
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;border-bottom:1px solid #3f3f46;font-family:Inter,sans-serif;">1 personal training session/mo</p>
|
||||
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;border-bottom:1px solid #3f3f46;font-family:Inter,sans-serif;">24/7 access</p>
|
||||
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;font-family:Inter,sans-serif;">Nutrition consultation</p>
|
||||
</div>
|
||||
<a href="#join" style="display:inline-block;width:100%;padding:14px 0;background:#ef4444;color:#fafafa;font-size:14px;font-weight:700;text-decoration:none;border-radius:6px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;box-sizing:border-box;">Get Started</a>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;max-width:340px;background:#18181b;border-radius:12px;padding:40px 32px;text-align:center;border:1px solid #3f3f46;">
|
||||
<h3 style="font-size:18px;font-weight:700;color:#a1a1aa;margin-bottom:16px;font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:2px;">Elite</h3>
|
||||
<div style="margin-bottom:24px;">
|
||||
<span style="font-size:52px;font-weight:800;color:#fafafa;font-family:Montserrat,sans-serif;">$79</span>
|
||||
<span style="color:#a1a1aa;font-size:16px;font-family:Inter,sans-serif;">/mo</span>
|
||||
</div>
|
||||
<div style="text-align:left;margin-bottom:32px;">
|
||||
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;border-bottom:1px solid #3f3f46;font-family:Inter,sans-serif;">Everything in Pro</p>
|
||||
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;border-bottom:1px solid #3f3f46;font-family:Inter,sans-serif;">4 personal training sessions/mo</p>
|
||||
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;border-bottom:1px solid #3f3f46;font-family:Inter,sans-serif;">Custom meal plans</p>
|
||||
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;border-bottom:1px solid #3f3f46;font-family:Inter,sans-serif;">Recovery room & sauna</p>
|
||||
<p style="color:#a1a1aa;font-size:14px;padding:10px 0;font-family:Inter,sans-serif;">Guest passes (2/mo)</p>
|
||||
</div>
|
||||
<a href="#join" style="display:inline-block;width:100%;padding:14px 0;background:transparent;color:#fafafa;font-size:14px;font-weight:700;text-decoration:none;border-radius:6px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;border:2px solid #3f3f46;box-sizing:border-box;">Get Started</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Banner -->
|
||||
<section id="join" style="padding:80px 20px;background:linear-gradient(135deg,#ef4444 0%,#b91c1c 100%);text-align:center;">
|
||||
<div style="max-width:700px;margin:0 auto;">
|
||||
<h2 style="font-size:44px;font-weight:800;color:#fafafa;margin-bottom:16px;font-family:Montserrat,sans-serif;text-transform:uppercase;letter-spacing:1px;">Ready to Start?</h2>
|
||||
<p style="color:rgba(250,250,250,0.85);font-size:18px;line-height:1.7;margin-bottom:36px;font-family:Inter,sans-serif;">Your first week is on us. No contracts, no hidden fees. Just results.</p>
|
||||
<a href="#" style="display:inline-block;padding:16px 48px;background:#18181b;color:#fafafa;font-size:15px;font-weight:700;text-decoration:none;border-radius:6px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Join IRONFORGE Today</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer style="padding:48px 20px;background:#18181b;border-top:2px solid #ef4444;">
|
||||
<div style="max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:flex-start;">
|
||||
<div style="min-width:200px;">
|
||||
<div style="font-size:22px;font-weight:800;color:#fafafa;margin-bottom:12px;font-family:Montserrat,sans-serif;letter-spacing:3px;">IRONFORGE</div>
|
||||
<p style="color:#71717a;font-size:14px;line-height:1.7;font-family:Inter,sans-serif;">Forged in sweat. Built on discipline.</p>
|
||||
</div>
|
||||
<div style="min-width:200px;">
|
||||
<h4 style="color:#fafafa;font-size:13px;font-weight:700;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Hours</h4>
|
||||
<p style="color:#71717a;font-size:14px;line-height:1.8;font-family:Inter,sans-serif;">Mon - Fri: 5:00 AM - 11:00 PM</p>
|
||||
<p style="color:#71717a;font-size:14px;line-height:1.8;font-family:Inter,sans-serif;">Sat - Sun: 7:00 AM - 9:00 PM</p>
|
||||
</div>
|
||||
<div style="min-width:200px;">
|
||||
<h4 style="color:#fafafa;font-size:13px;font-weight:700;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Location</h4>
|
||||
<p style="color:#71717a;font-size:14px;line-height:1.8;font-family:Inter,sans-serif;">850 Iron Street, Unit 4</p>
|
||||
<p style="color:#71717a;font-size:14px;line-height:1.8;font-family:Inter,sans-serif;">Denver, CO 80202</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="max-width:1100px;margin:32px auto 0;padding-top:24px;border-top:1px solid #27272a;text-align:center;">
|
||||
<p style="color:#52525b;font-size:13px;font-family:Inter,sans-serif;">© 2026 IRONFORGE Fitness. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -78,5 +78,105 @@
|
||||
"useCase": "Product launches, under construction, pre-launch",
|
||||
"file": "coming-soon.html",
|
||||
"colors": ["#8b5cf6", "#ec4899", "#1e1b4b"]
|
||||
},
|
||||
{
|
||||
"id": "wedding-invitation",
|
||||
"name": "Wedding Invitation",
|
||||
"description": "Elegant wedding page with couple info, venue details, RSVP section, and countdown.",
|
||||
"category": "Personal",
|
||||
"tags": ["elegant", "romantic", "wedding", "personal"],
|
||||
"useCase": "Weddings, engagements, anniversary celebrations",
|
||||
"file": "wedding-invitation.html",
|
||||
"colors": ["#d4a574", "#1a1a2e", "#fef3e2"]
|
||||
},
|
||||
{
|
||||
"id": "nonprofit-charity",
|
||||
"name": "Nonprofit & Charity",
|
||||
"description": "Charity site with mission statement, impact statistics, donate CTA, and volunteer section.",
|
||||
"category": "Business",
|
||||
"tags": ["warm", "impactful", "nonprofit", "charity"],
|
||||
"useCase": "Nonprofits, charities, foundations, social causes",
|
||||
"file": "nonprofit-charity.html",
|
||||
"colors": ["#16a34a", "#1e293b", "#f0fdf4"]
|
||||
},
|
||||
{
|
||||
"id": "fitness-gym",
|
||||
"name": "Fitness & Gym",
|
||||
"description": "Bold gym page with class schedules, trainer profiles, membership pricing, and motivational CTAs.",
|
||||
"category": "Business",
|
||||
"tags": ["bold", "energetic", "fitness", "gym"],
|
||||
"useCase": "Gyms, fitness studios, personal trainers, wellness centers",
|
||||
"file": "fitness-gym.html",
|
||||
"colors": ["#ef4444", "#18181b", "#fafafa"]
|
||||
},
|
||||
{
|
||||
"id": "online-course",
|
||||
"name": "Online Course",
|
||||
"description": "Course landing page with curriculum overview, instructor bio, testimonials, and enrollment CTA.",
|
||||
"category": "Business",
|
||||
"tags": ["modern", "educational", "course", "learning"],
|
||||
"useCase": "Online courses, workshops, coaching programs, e-learning",
|
||||
"file": "online-course.html",
|
||||
"colors": ["#8b5cf6", "#0f172a", "#f5f3ff"]
|
||||
},
|
||||
{
|
||||
"id": "photography-studio",
|
||||
"name": "Photography Studio",
|
||||
"description": "Professional photography portfolio with gallery, about page, and contact form across 4 pages.",
|
||||
"category": "Portfolio",
|
||||
"tags": ["elegant", "visual", "photography", "portfolio"],
|
||||
"useCase": "Photographers, visual artists, photo studios",
|
||||
"pages": [
|
||||
{ "name": "Home", "slug": "index", "file": "photography-studio/home.html" },
|
||||
{ "name": "Gallery", "slug": "gallery", "file": "photography-studio/gallery.html" },
|
||||
{ "name": "About", "slug": "about", "file": "photography-studio/about.html" },
|
||||
{ "name": "Contact", "slug": "contact", "file": "photography-studio/contact.html" }
|
||||
],
|
||||
"colors": ["#d4a574", "#1c1917", "#fafaf9"]
|
||||
},
|
||||
{
|
||||
"id": "real-estate",
|
||||
"name": "Real Estate Agency",
|
||||
"description": "Professional real estate website with property listings, agency info, and contact across 4 pages.",
|
||||
"category": "Business",
|
||||
"tags": ["professional", "modern", "real-estate", "corporate"],
|
||||
"useCase": "Real estate agencies, property managers, realtors",
|
||||
"pages": [
|
||||
{ "name": "Home", "slug": "index", "file": "real-estate/home.html" },
|
||||
{ "name": "Listings", "slug": "listings", "file": "real-estate/listings.html" },
|
||||
{ "name": "About Us", "slug": "about", "file": "real-estate/about.html" },
|
||||
{ "name": "Contact", "slug": "contact", "file": "real-estate/contact.html" }
|
||||
],
|
||||
"colors": ["#0ea5e9", "#0f172a", "#f8fafc"]
|
||||
},
|
||||
{
|
||||
"id": "startup-company",
|
||||
"name": "Startup Company",
|
||||
"description": "Modern startup website with product features, team profiles, and contact across 4 pages.",
|
||||
"category": "Business",
|
||||
"tags": ["modern", "startup", "tech", "professional"],
|
||||
"useCase": "Tech startups, SaaS companies, digital products",
|
||||
"pages": [
|
||||
{ "name": "Home", "slug": "index", "file": "startup-company/home.html" },
|
||||
{ "name": "Product", "slug": "product", "file": "startup-company/product.html" },
|
||||
{ "name": "Team", "slug": "team", "file": "startup-company/team.html" },
|
||||
{ "name": "Contact", "slug": "contact", "file": "startup-company/contact.html" }
|
||||
],
|
||||
"colors": ["#6366f1", "#0f172a", "#e0e7ff"]
|
||||
},
|
||||
{
|
||||
"id": "travel-blog",
|
||||
"name": "Travel Blog",
|
||||
"description": "Vibrant travel blog with destination highlights, about the blogger, and contact across 4 pages.",
|
||||
"category": "Personal",
|
||||
"tags": ["vibrant", "adventurous", "travel", "blog"],
|
||||
"useCase": "Travel bloggers, adventure writers, travel agencies",
|
||||
"pages": [
|
||||
{ "name": "Home", "slug": "index", "file": "travel-blog/home.html" },
|
||||
{ "name": "Destinations", "slug": "destinations", "file": "travel-blog/destinations.html" },
|
||||
{ "name": "About", "slug": "about", "file": "travel-blog/about.html" },
|
||||
{ "name": "Contact", "slug": "contact", "file": "travel-blog/contact.html" }
|
||||
],
|
||||
"colors": ["#f59e0b", "#1e293b", "#fffbeb"]
|
||||
}
|
||||
]
|
||||
|
||||
161
templates/nonprofit-charity.html
Normal file
161
templates/nonprofit-charity.html
Normal file
@@ -0,0 +1,161 @@
|
||||
<!-- Navigation -->
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:20px 60px;background:#1e293b;">
|
||||
<div style="font-size:24px;font-weight:700;color:#ffffff;font-family:'Playfair Display',serif;letter-spacing:0.5px;">GreenHope Foundation</div>
|
||||
<div style="display:flex;gap:32px;align-items:center;">
|
||||
<a href="#mission" style="color:#cbd5e1;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;font-weight:500;">Mission</a>
|
||||
<a href="#impact" style="color:#cbd5e1;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;font-weight:500;">Impact</a>
|
||||
<a href="#help" style="color:#cbd5e1;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;font-weight:500;">Get Involved</a>
|
||||
<a href="#help" style="display:inline-block;padding:10px 28px;background:#16a34a;color:#ffffff;font-size:14px;font-weight:600;text-decoration:none;border-radius:6px;font-family:Inter,sans-serif;">Donate</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section style="min-height:620px;display:flex;align-items:center;justify-content:center;background:#1e293b;position:relative;text-align:center;padding:80px 20px;">
|
||||
<div style="max-width:800px;">
|
||||
<div style="display:inline-block;padding:8px 20px;background:rgba(22,163,74,0.15);border-radius:50px;margin-bottom:28px;">
|
||||
<span style="color:#4ade80;font-size:14px;font-weight:600;font-family:Inter,sans-serif;letter-spacing:2px;text-transform:uppercase;">Making the world a better place</span>
|
||||
</div>
|
||||
<h1 style="color:#ffffff;font-size:60px;font-weight:700;margin-bottom:24px;font-family:'Playfair Display',serif;line-height:1.1;">Together, We Can Make a Difference</h1>
|
||||
<p style="color:#94a3b8;font-size:19px;line-height:1.7;margin-bottom:44px;font-family:Inter,sans-serif;max-width:640px;margin-left:auto;margin-right:auto;">We empower communities around the world through sustainable programs in clean water, education, and healthcare. Every action counts.</p>
|
||||
<div style="display:flex;gap:16px;justify-content:center;flex-wrap:wrap;">
|
||||
<a href="#help" style="display:inline-block;padding:16px 40px;background:#16a34a;color:#ffffff;font-size:16px;font-weight:600;text-decoration:none;border-radius:8px;font-family:Inter,sans-serif;">Donate Now</a>
|
||||
<a href="#mission" style="display:inline-block;padding:16px 40px;background:transparent;color:#ffffff;font-size:16px;font-weight:600;text-decoration:none;border-radius:8px;font-family:Inter,sans-serif;border:2px solid rgba(255,255,255,0.2);">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mission -->
|
||||
<section id="mission" style="padding:100px 20px;background:#ffffff;">
|
||||
<div style="max-width:1200px;margin:0 auto;">
|
||||
<div style="text-align:center;margin-bottom:60px;max-width:700px;margin-left:auto;margin-right:auto;">
|
||||
<p style="color:#16a34a;font-size:13px;font-weight:700;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Our Mission</p>
|
||||
<h2 style="font-size:42px;font-weight:700;color:#1e293b;margin-bottom:20px;font-family:'Playfair Display',serif;line-height:1.2;">Building a Sustainable Future for All</h2>
|
||||
<p style="color:#64748b;font-size:17px;line-height:1.8;font-family:Inter,sans-serif;">We believe that every person deserves access to life's essentials. Our programs address the root causes of poverty and create lasting change in communities worldwide.</p>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:30px;justify-content:center;">
|
||||
<div style="flex:1;min-width:280px;max-width:380px;background:#f0fdf4;padding:40px 32px;border-radius:12px;text-align:center;">
|
||||
<div style="width:56px;height:56px;background:#16a34a;border-radius:12px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;">
|
||||
<span style="color:#ffffff;font-size:24px;font-weight:700;font-family:Inter,sans-serif;">W</span>
|
||||
</div>
|
||||
<h3 style="font-size:22px;font-weight:700;color:#1e293b;margin-bottom:12px;font-family:Inter,sans-serif;">Clean Water</h3>
|
||||
<p style="color:#64748b;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">Providing safe, accessible drinking water to communities in need through well construction and filtration systems.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;max-width:380px;background:#f0fdf4;padding:40px 32px;border-radius:12px;text-align:center;">
|
||||
<div style="width:56px;height:56px;background:#16a34a;border-radius:12px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;">
|
||||
<span style="color:#ffffff;font-size:24px;font-weight:700;font-family:Inter,sans-serif;">E</span>
|
||||
</div>
|
||||
<h3 style="font-size:22px;font-weight:700;color:#1e293b;margin-bottom:12px;font-family:Inter,sans-serif;">Education</h3>
|
||||
<p style="color:#64748b;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">Building schools, training teachers, and providing scholarships so every child has the opportunity to learn and grow.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;max-width:380px;background:#f0fdf4;padding:40px 32px;border-radius:12px;text-align:center;">
|
||||
<div style="width:56px;height:56px;background:#16a34a;border-radius:12px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;">
|
||||
<span style="color:#ffffff;font-size:24px;font-weight:700;font-family:Inter,sans-serif;">H</span>
|
||||
</div>
|
||||
<h3 style="font-size:22px;font-weight:700;color:#1e293b;margin-bottom:12px;font-family:Inter,sans-serif;">Healthcare</h3>
|
||||
<p style="color:#64748b;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">Establishing clinics and mobile health units to deliver essential medical care and preventive health services.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Impact Statistics -->
|
||||
<section id="impact" style="padding:100px 20px;background:#1e293b;">
|
||||
<div style="max-width:1100px;margin:0 auto;">
|
||||
<div style="text-align:center;margin-bottom:60px;">
|
||||
<p style="color:#4ade80;font-size:13px;font-weight:700;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Our Impact</p>
|
||||
<h2 style="font-size:42px;font-weight:700;color:#ffffff;font-family:'Playfair Display',serif;">Numbers That Tell Our Story</h2>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:24px;justify-content:center;">
|
||||
<div style="flex:1;min-width:200px;max-width:260px;text-align:center;padding:40px 20px;">
|
||||
<p style="color:#4ade80;font-size:52px;font-weight:800;margin-bottom:8px;font-family:Inter,sans-serif;line-height:1;">50K+</p>
|
||||
<p style="color:#94a3b8;font-size:16px;font-weight:500;font-family:Inter,sans-serif;">Lives Changed</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:200px;max-width:260px;text-align:center;padding:40px 20px;">
|
||||
<p style="color:#4ade80;font-size:52px;font-weight:800;margin-bottom:8px;font-family:Inter,sans-serif;line-height:1;">120+</p>
|
||||
<p style="color:#94a3b8;font-size:16px;font-weight:500;font-family:Inter,sans-serif;">Communities</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:200px;max-width:260px;text-align:center;padding:40px 20px;">
|
||||
<p style="color:#4ade80;font-size:52px;font-weight:800;margin-bottom:8px;font-family:Inter,sans-serif;line-height:1;">$2M+</p>
|
||||
<p style="color:#94a3b8;font-size:16px;font-weight:500;font-family:Inter,sans-serif;">Raised</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:200px;max-width:260px;text-align:center;padding:40px 20px;">
|
||||
<p style="color:#4ade80;font-size:52px;font-weight:800;margin-bottom:8px;font-family:Inter,sans-serif;line-height:1;">500+</p>
|
||||
<p style="color:#94a3b8;font-size:16px;font-weight:500;font-family:Inter,sans-serif;">Volunteers</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- How to Help -->
|
||||
<section id="help" style="padding:100px 20px;background:#f0fdf4;">
|
||||
<div style="max-width:1200px;margin:0 auto;">
|
||||
<div style="text-align:center;margin-bottom:60px;">
|
||||
<p style="color:#16a34a;font-size:13px;font-weight:700;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:3px;">Get Involved</p>
|
||||
<h2 style="font-size:42px;font-weight:700;color:#1e293b;font-family:'Playfair Display',serif;">How You Can Help</h2>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:30px;justify-content:center;">
|
||||
<div style="flex:1;min-width:280px;max-width:380px;background:#ffffff;padding:44px 32px;border-radius:12px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
|
||||
<div style="width:64px;height:64px;background:#dcfce7;border-radius:50%;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;">
|
||||
<span style="color:#16a34a;font-size:28px;font-weight:700;font-family:Inter,sans-serif;">$</span>
|
||||
</div>
|
||||
<h3 style="font-size:22px;font-weight:700;color:#1e293b;margin-bottom:12px;font-family:Inter,sans-serif;">Donate</h3>
|
||||
<p style="color:#64748b;font-size:15px;line-height:1.7;margin-bottom:24px;font-family:Inter,sans-serif;">Your financial support funds clean water projects, builds schools, and provides essential medical supplies to those in need.</p>
|
||||
<a href="#" style="display:inline-block;padding:12px 32px;background:#16a34a;color:#ffffff;font-size:14px;font-weight:600;text-decoration:none;border-radius:6px;font-family:Inter,sans-serif;">Give Today</a>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;max-width:380px;background:#ffffff;padding:44px 32px;border-radius:12px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
|
||||
<div style="width:64px;height:64px;background:#dcfce7;border-radius:50%;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;">
|
||||
<span style="color:#16a34a;font-size:28px;font-weight:700;font-family:Inter,sans-serif;">V</span>
|
||||
</div>
|
||||
<h3 style="font-size:22px;font-weight:700;color:#1e293b;margin-bottom:12px;font-family:Inter,sans-serif;">Volunteer</h3>
|
||||
<p style="color:#64748b;font-size:15px;line-height:1.7;margin-bottom:24px;font-family:Inter,sans-serif;">Join our team on the ground or remotely. We need educators, healthcare workers, engineers, and passionate individuals of all backgrounds.</p>
|
||||
<a href="#" style="display:inline-block;padding:12px 32px;background:#16a34a;color:#ffffff;font-size:14px;font-weight:600;text-decoration:none;border-radius:6px;font-family:Inter,sans-serif;">Join Us</a>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;max-width:380px;background:#ffffff;padding:44px 32px;border-radius:12px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
|
||||
<div style="width:64px;height:64px;background:#dcfce7;border-radius:50%;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;">
|
||||
<span style="color:#16a34a;font-size:28px;font-weight:700;font-family:Inter,sans-serif;">S</span>
|
||||
</div>
|
||||
<h3 style="font-size:22px;font-weight:700;color:#1e293b;margin-bottom:12px;font-family:Inter,sans-serif;">Spread the Word</h3>
|
||||
<p style="color:#64748b;font-size:15px;line-height:1.7;margin-bottom:24px;font-family:Inter,sans-serif;">Share our mission with your network. Follow us on social media, tell your friends, and help raise awareness for the communities we serve.</p>
|
||||
<a href="#" style="display:inline-block;padding:12px 32px;background:#16a34a;color:#ffffff;font-size:14px;font-weight:600;text-decoration:none;border-radius:6px;font-family:Inter,sans-serif;">Share Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonial -->
|
||||
<section style="padding:100px 20px;background:#ffffff;">
|
||||
<div style="max-width:750px;margin:0 auto;text-align:center;">
|
||||
<div style="width:56px;height:4px;background:#16a34a;border-radius:2px;margin:0 auto 32px;"></div>
|
||||
<p style="color:#1e293b;font-size:24px;line-height:1.8;margin-bottom:32px;font-family:'Playfair Display',serif;font-style:italic;font-weight:400;">"Because of GreenHope, my village now has clean water for the first time. My children no longer get sick, and I can focus on building a future for my family. This organization changed our lives forever."</p>
|
||||
<p style="color:#1e293b;font-size:16px;font-weight:700;margin-bottom:4px;font-family:Inter,sans-serif;">Amara Osei</p>
|
||||
<p style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;">Community Member, Ghana</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer style="padding:60px 20px 32px;background:#1e293b;">
|
||||
<div style="max-width:1100px;margin:0 auto;">
|
||||
<div style="display:flex;flex-wrap:wrap;gap:48px;margin-bottom:48px;">
|
||||
<div style="flex:1;min-width:260px;">
|
||||
<p style="font-size:22px;font-weight:700;color:#ffffff;margin-bottom:16px;font-family:'Playfair Display',serif;">GreenHope Foundation</p>
|
||||
<p style="color:#94a3b8;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">Empowering communities through sustainable programs in clean water, education, and healthcare since 2015.</p>
|
||||
</div>
|
||||
<div style="flex:0 0 auto;min-width:180px;">
|
||||
<p style="color:#ffffff;font-size:14px;font-weight:700;margin-bottom:16px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Contact</p>
|
||||
<p style="color:#94a3b8;font-size:14px;line-height:2;font-family:Inter,sans-serif;">hello@greenhope.org</p>
|
||||
<p style="color:#94a3b8;font-size:14px;line-height:2;font-family:Inter,sans-serif;">+1 (555) 234-5678</p>
|
||||
<p style="color:#94a3b8;font-size:14px;line-height:2;font-family:Inter,sans-serif;">123 Hope Street, Portland, OR</p>
|
||||
</div>
|
||||
<div style="flex:0 0 auto;min-width:160px;">
|
||||
<p style="color:#ffffff;font-size:14px;font-weight:700;margin-bottom:16px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Follow Us</p>
|
||||
<p style="color:#94a3b8;font-size:14px;line-height:2;font-family:Inter,sans-serif;"><a href="#" style="color:#94a3b8;text-decoration:none;">Facebook</a></p>
|
||||
<p style="color:#94a3b8;font-size:14px;line-height:2;font-family:Inter,sans-serif;"><a href="#" style="color:#94a3b8;text-decoration:none;">Instagram</a></p>
|
||||
<p style="color:#94a3b8;font-size:14px;line-height:2;font-family:Inter,sans-serif;"><a href="#" style="color:#94a3b8;text-decoration:none;">Twitter / X</a></p>
|
||||
<p style="color:#94a3b8;font-size:14px;line-height:2;font-family:Inter,sans-serif;"><a href="#" style="color:#94a3b8;text-decoration:none;">LinkedIn</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border-top:1px solid #334155;padding-top:24px;text-align:center;">
|
||||
<p style="color:#64748b;font-size:13px;font-family:Inter,sans-serif;">2026 GreenHope Foundation. All rights reserved. A registered 501(c)(3) nonprofit organization.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
266
templates/online-course.html
Normal file
266
templates/online-course.html
Normal file
@@ -0,0 +1,266 @@
|
||||
<!-- Navigation -->
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:18px 60px;background:#0f172a;position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(139,92,246,0.15);">
|
||||
<div style="font-size:24px;font-weight:700;color:#fff;font-family:Montserrat,sans-serif;">Learn<span style="color:#8b5cf6;">Pro</span></div>
|
||||
<div style="display:flex;gap:32px;align-items:center;">
|
||||
<a href="#curriculum" style="color:#c4b5fd;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Curriculum</a>
|
||||
<a href="#instructor" style="color:#c4b5fd;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Instructor</a>
|
||||
<a href="#pricing" style="color:#c4b5fd;text-decoration:none;font-size:15px;font-family:Inter,sans-serif;">Pricing</a>
|
||||
<a href="#pricing" style="display:inline-block;padding:10px 24px;background:#8b5cf6;color:#fff;font-size:14px;font-weight:600;text-decoration:none;border-radius:8px;font-family:Inter,sans-serif;">Enroll Now</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section style="padding:100px 20px 80px;background:linear-gradient(160deg,#0f172a 0%,#1e1b4b 60%,#2e1065 100%);text-align:center;position:relative;overflow:hidden;">
|
||||
<div style="position:absolute;top:-150px;right:-150px;width:500px;height:500px;background:radial-gradient(circle,rgba(139,92,246,0.12) 0%,transparent 70%);border-radius:50%;"></div>
|
||||
<div style="position:absolute;bottom:-100px;left:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(139,92,246,0.08) 0%,transparent 70%);border-radius:50%;"></div>
|
||||
<div style="max-width:800px;margin:0 auto;position:relative;z-index:1;">
|
||||
<div style="display:inline-block;padding:8px 20px;background:rgba(139,92,246,0.15);border:1px solid rgba(139,92,246,0.3);border-radius:50px;margin-bottom:24px;">
|
||||
<span style="color:#c4b5fd;font-size:14px;font-weight:500;font-family:Inter,sans-serif;">New cohort starting soon — Limited spots</span>
|
||||
</div>
|
||||
<h1 style="color:#fff;font-size:52px;font-weight:800;margin-bottom:20px;font-family:Montserrat,sans-serif;line-height:1.15;letter-spacing:-1px;">Master Modern Web Development</h1>
|
||||
<p style="color:#c4b5fd;font-size:19px;line-height:1.7;margin-bottom:36px;font-family:Inter,sans-serif;max-width:620px;margin-left:auto;margin-right:auto;">Go from beginner to job-ready developer. Learn HTML, CSS, JavaScript, React, and Node.js through hands-on projects and real-world applications.</p>
|
||||
<div style="display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:48px;">
|
||||
<a href="#pricing" style="display:inline-block;padding:16px 40px;background:#8b5cf6;color:#fff;font-size:17px;font-weight:600;text-decoration:none;border-radius:10px;font-family:Inter,sans-serif;box-shadow:0 4px 20px rgba(139,92,246,0.4);">Enroll Now</a>
|
||||
<a href="#" style="display:inline-block;padding:16px 40px;background:rgba(255,255,255,0.08);color:#fff;font-size:17px;font-weight:600;text-decoration:none;border-radius:10px;font-family:Inter,sans-serif;border:1px solid rgba(255,255,255,0.15);">Watch Preview</a>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:center;gap:48px;flex-wrap:wrap;">
|
||||
<div style="text-align:center;">
|
||||
<div style="font-size:28px;font-weight:800;color:#fff;font-family:Montserrat,sans-serif;">2,500+</div>
|
||||
<div style="font-size:14px;color:#a78bfa;font-family:Inter,sans-serif;margin-top:4px;">Students Enrolled</div>
|
||||
</div>
|
||||
<div style="text-align:center;">
|
||||
<div style="font-size:28px;font-weight:800;color:#fff;font-family:Montserrat,sans-serif;">4.9 ★</div>
|
||||
<div style="font-size:14px;color:#a78bfa;font-family:Inter,sans-serif;margin-top:4px;">Average Rating</div>
|
||||
</div>
|
||||
<div style="text-align:center;">
|
||||
<div style="font-size:28px;font-weight:800;color:#fff;font-family:Montserrat,sans-serif;">12 Hours</div>
|
||||
<div style="font-size:14px;color:#a78bfa;font-family:Inter,sans-serif;margin-top:4px;">Video Content</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- What You'll Learn -->
|
||||
<section style="padding:90px 20px;background:#fff;">
|
||||
<div style="max-width:900px;margin:0 auto;">
|
||||
<div style="text-align:center;margin-bottom:56px;">
|
||||
<h2 style="font-size:38px;font-weight:800;color:#0f172a;margin-bottom:14px;font-family:Montserrat,sans-serif;">What You'll Learn</h2>
|
||||
<p style="font-size:17px;color:#64748b;font-family:Inter,sans-serif;">Practical skills that employers are looking for right now.</p>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:20px;">
|
||||
<div style="flex:1;min-width:280px;display:flex;gap:14px;padding:22px 24px;background:#f5f3ff;border-radius:12px;align-items:flex-start;">
|
||||
<span style="color:#8b5cf6;font-size:22px;font-weight:700;line-height:1;">✓</span>
|
||||
<div>
|
||||
<div style="font-weight:600;color:#0f172a;font-size:16px;font-family:Inter,sans-serif;margin-bottom:4px;">Responsive HTML & CSS</div>
|
||||
<div style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;line-height:1.5;">Build pixel-perfect layouts that work on every device using modern CSS techniques.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;display:flex;gap:14px;padding:22px 24px;background:#f5f3ff;border-radius:12px;align-items:flex-start;">
|
||||
<span style="color:#8b5cf6;font-size:22px;font-weight:700;line-height:1;">✓</span>
|
||||
<div>
|
||||
<div style="font-weight:600;color:#0f172a;font-size:16px;font-family:Inter,sans-serif;margin-bottom:4px;">JavaScript Fundamentals</div>
|
||||
<div style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;line-height:1.5;">Master variables, functions, async/await, DOM manipulation, and ES6+ features.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;display:flex;gap:14px;padding:22px 24px;background:#f5f3ff;border-radius:12px;align-items:flex-start;">
|
||||
<span style="color:#8b5cf6;font-size:22px;font-weight:700;line-height:1;">✓</span>
|
||||
<div>
|
||||
<div style="font-weight:600;color:#0f172a;font-size:16px;font-family:Inter,sans-serif;margin-bottom:4px;">React & Component Architecture</div>
|
||||
<div style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;line-height:1.5;">Build dynamic UIs with React, hooks, state management, and reusable components.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;display:flex;gap:14px;padding:22px 24px;background:#f5f3ff;border-radius:12px;align-items:flex-start;">
|
||||
<span style="color:#8b5cf6;font-size:22px;font-weight:700;line-height:1;">✓</span>
|
||||
<div>
|
||||
<div style="font-weight:600;color:#0f172a;font-size:16px;font-family:Inter,sans-serif;margin-bottom:4px;">Node.js & REST APIs</div>
|
||||
<div style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;line-height:1.5;">Create server-side applications, RESTful APIs, and handle authentication.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;display:flex;gap:14px;padding:22px 24px;background:#f5f3ff;border-radius:12px;align-items:flex-start;">
|
||||
<span style="color:#8b5cf6;font-size:22px;font-weight:700;line-height:1;">✓</span>
|
||||
<div>
|
||||
<div style="font-weight:600;color:#0f172a;font-size:16px;font-family:Inter,sans-serif;margin-bottom:4px;">Databases & Deployment</div>
|
||||
<div style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;line-height:1.5;">Work with MongoDB and PostgreSQL, then deploy your apps to the cloud.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;display:flex;gap:14px;padding:22px 24px;background:#f5f3ff;border-radius:12px;align-items:flex-start;">
|
||||
<span style="color:#8b5cf6;font-size:22px;font-weight:700;line-height:1;">✓</span>
|
||||
<div>
|
||||
<div style="font-weight:600;color:#0f172a;font-size:16px;font-family:Inter,sans-serif;margin-bottom:4px;">Git, Testing & Best Practices</div>
|
||||
<div style="color:#64748b;font-size:14px;font-family:Inter,sans-serif;line-height:1.5;">Version control, unit testing, code reviews, and professional development workflows.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Curriculum -->
|
||||
<section id="curriculum" style="padding:90px 20px;background:#f5f3ff;">
|
||||
<div style="max-width:760px;margin:0 auto;">
|
||||
<div style="text-align:center;margin-bottom:56px;">
|
||||
<h2 style="font-size:38px;font-weight:800;color:#0f172a;margin-bottom:14px;font-family:Montserrat,sans-serif;">Course Curriculum</h2>
|
||||
<p style="font-size:17px;color:#64748b;font-family:Inter,sans-serif;">5 comprehensive modules with hands-on projects in every section.</p>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:16px;">
|
||||
<div style="background:#fff;border-radius:12px;border:1px solid #e9e5f5;overflow:hidden;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;padding:22px 28px;">
|
||||
<div style="display:flex;align-items:center;gap:16px;">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:#8b5cf6;color:#fff;font-size:14px;font-weight:700;border-radius:8px;font-family:Inter,sans-serif;">01</span>
|
||||
<span style="font-size:17px;font-weight:600;color:#0f172a;font-family:Inter,sans-serif;">Foundations: HTML & CSS Mastery</span>
|
||||
</div>
|
||||
<span style="font-size:13px;color:#8b5cf6;font-weight:500;font-family:Inter,sans-serif;white-space:nowrap;">8 Lessons</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:#fff;border-radius:12px;border:1px solid #e9e5f5;overflow:hidden;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;padding:22px 28px;">
|
||||
<div style="display:flex;align-items:center;gap:16px;">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:#8b5cf6;color:#fff;font-size:14px;font-weight:700;border-radius:8px;font-family:Inter,sans-serif;">02</span>
|
||||
<span style="font-size:17px;font-weight:600;color:#0f172a;font-family:Inter,sans-serif;">JavaScript Deep Dive</span>
|
||||
</div>
|
||||
<span style="font-size:13px;color:#8b5cf6;font-weight:500;font-family:Inter,sans-serif;white-space:nowrap;">10 Lessons</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:#fff;border-radius:12px;border:1px solid #e9e5f5;overflow:hidden;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;padding:22px 28px;">
|
||||
<div style="display:flex;align-items:center;gap:16px;">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:#8b5cf6;color:#fff;font-size:14px;font-weight:700;border-radius:8px;font-family:Inter,sans-serif;">03</span>
|
||||
<span style="font-size:17px;font-weight:600;color:#0f172a;font-family:Inter,sans-serif;">React & Frontend Frameworks</span>
|
||||
</div>
|
||||
<span style="font-size:13px;color:#8b5cf6;font-weight:500;font-family:Inter,sans-serif;white-space:nowrap;">12 Lessons</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:#fff;border-radius:12px;border:1px solid #e9e5f5;overflow:hidden;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;padding:22px 28px;">
|
||||
<div style="display:flex;align-items:center;gap:16px;">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:#8b5cf6;color:#fff;font-size:14px;font-weight:700;border-radius:8px;font-family:Inter,sans-serif;">04</span>
|
||||
<span style="font-size:17px;font-weight:600;color:#0f172a;font-family:Inter,sans-serif;">Backend with Node.js & Databases</span>
|
||||
</div>
|
||||
<span style="font-size:13px;color:#8b5cf6;font-weight:500;font-family:Inter,sans-serif;white-space:nowrap;">10 Lessons</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:#fff;border-radius:12px;border:1px solid #e9e5f5;overflow:hidden;">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;padding:22px 28px;">
|
||||
<div style="display:flex;align-items:center;gap:16px;">
|
||||
<span style="display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:#8b5cf6;color:#fff;font-size:14px;font-weight:700;border-radius:8px;font-family:Inter,sans-serif;">05</span>
|
||||
<span style="font-size:17px;font-weight:600;color:#0f172a;font-family:Inter,sans-serif;">Capstone Project & Career Prep</span>
|
||||
</div>
|
||||
<span style="font-size:13px;color:#8b5cf6;font-weight:500;font-family:Inter,sans-serif;white-space:nowrap;">6 Lessons</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Instructor -->
|
||||
<section id="instructor" style="padding:90px 20px;background:#fff;">
|
||||
<div style="max-width:960px;margin:0 auto;">
|
||||
<div style="text-align:center;margin-bottom:56px;">
|
||||
<h2 style="font-size:38px;font-weight:800;color:#0f172a;margin-bottom:14px;font-family:Montserrat,sans-serif;">Meet Your Instructor</h2>
|
||||
</div>
|
||||
<div style="display:flex;gap:48px;align-items:center;flex-wrap:wrap;">
|
||||
<div style="flex:1;min-width:280px;text-align:center;">
|
||||
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=400&h=400&fit=crop&crop=face" alt="Alex Morgan" style="width:280px;height:280px;border-radius:20px;object-fit:cover;box-shadow:0 8px 30px rgba(0,0,0,0.12);" />
|
||||
</div>
|
||||
<div style="flex:1.2;min-width:300px;">
|
||||
<h3 style="font-size:28px;font-weight:700;color:#0f172a;margin-bottom:6px;font-family:Montserrat,sans-serif;">Alex Morgan</h3>
|
||||
<p style="font-size:16px;color:#8b5cf6;font-weight:600;margin-bottom:20px;font-family:Inter,sans-serif;">Senior Software Engineer & Educator</p>
|
||||
<p style="font-size:16px;color:#475569;line-height:1.8;margin-bottom:20px;font-family:Inter,sans-serif;">With 12 years of industry experience at companies like Google and Stripe, Alex has taught over 10,000 students worldwide. His teaching philosophy centers on building real projects from day one.</p>
|
||||
<div style="display:flex;flex-direction:column;gap:10px;">
|
||||
<div style="display:flex;align-items:center;gap:10px;">
|
||||
<span style="color:#8b5cf6;font-weight:700;">✓</span>
|
||||
<span style="color:#334155;font-size:15px;font-family:Inter,sans-serif;">Former Senior Engineer at Google & Stripe</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;">
|
||||
<span style="color:#8b5cf6;font-weight:700;">✓</span>
|
||||
<span style="color:#334155;font-size:15px;font-family:Inter,sans-serif;">10,000+ students across 85 countries</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;">
|
||||
<span style="color:#8b5cf6;font-weight:700;">✓</span>
|
||||
<span style="color:#334155;font-size:15px;font-family:Inter,sans-serif;">Published author and conference speaker</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;">
|
||||
<span style="color:#8b5cf6;font-weight:700;">✓</span>
|
||||
<span style="color:#334155;font-size:15px;font-family:Inter,sans-serif;">M.S. Computer Science, Stanford University</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials -->
|
||||
<section style="padding:90px 20px;background:#0f172a;">
|
||||
<div style="max-width:1100px;margin:0 auto;">
|
||||
<div style="text-align:center;margin-bottom:56px;">
|
||||
<h2 style="font-size:38px;font-weight:800;color:#fff;margin-bottom:14px;font-family:Montserrat,sans-serif;">What Students Are Saying</h2>
|
||||
<p style="font-size:17px;color:#a78bfa;font-family:Inter,sans-serif;">Join thousands of successful graduates.</p>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:24px;justify-content:center;">
|
||||
<div style="flex:1;min-width:300px;max-width:350px;padding:32px;background:rgba(139,92,246,0.06);border:1px solid rgba(139,92,246,0.15);border-radius:16px;">
|
||||
<div style="color:#fbbf24;font-size:16px;margin-bottom:14px;">★★★★★</div>
|
||||
<p style="color:#e2e8f0;line-height:1.7;font-size:15px;margin-bottom:24px;font-family:Inter,sans-serif;">"This course completely changed my career. I went from zero coding experience to landing a junior developer role in just 4 months. Alex explains everything so clearly."</p>
|
||||
<div>
|
||||
<div style="font-weight:600;color:#fff;font-family:Inter,sans-serif;font-size:15px;">Jessica Chen</div>
|
||||
<div style="font-size:13px;color:#a78bfa;font-family:Inter,sans-serif;margin-top:2px;">Completed: Full Course</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:300px;max-width:350px;padding:32px;background:rgba(139,92,246,0.06);border:1px solid rgba(139,92,246,0.15);border-radius:16px;">
|
||||
<div style="color:#fbbf24;font-size:16px;margin-bottom:14px;">★★★★★</div>
|
||||
<p style="color:#e2e8f0;line-height:1.7;font-size:15px;margin-bottom:24px;font-family:Inter,sans-serif;">"The project-based approach is what sets this apart. By the end, I had a portfolio of real apps to show employers. The capstone project alone was worth the price."</p>
|
||||
<div>
|
||||
<div style="font-weight:600;color:#fff;font-family:Inter,sans-serif;font-size:15px;">Marcus Rivera</div>
|
||||
<div style="font-size:13px;color:#a78bfa;font-family:Inter,sans-serif;margin-top:2px;">Completed: Full Course</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:300px;max-width:350px;padding:32px;background:rgba(139,92,246,0.06);border:1px solid rgba(139,92,246,0.15);border-radius:16px;">
|
||||
<div style="color:#fbbf24;font-size:16px;margin-bottom:14px;">★★★★★</div>
|
||||
<p style="color:#e2e8f0;line-height:1.7;font-size:15px;margin-bottom:24px;font-family:Inter,sans-serif;">"I've tried other coding courses before, but none came close. The curriculum is well-structured, the community is supportive, and Alex responds to every question."</p>
|
||||
<div>
|
||||
<div style="font-weight:600;color:#fff;font-family:Inter,sans-serif;font-size:15px;">Priya Sharma</div>
|
||||
<div style="font-size:13px;color:#a78bfa;font-family:Inter,sans-serif;margin-top:2px;">Completed: Modules 1-4</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pricing -->
|
||||
<section id="pricing" style="padding:90px 20px;background:#f5f3ff;">
|
||||
<div style="max-width:520px;margin:0 auto;text-align:center;">
|
||||
<h2 style="font-size:38px;font-weight:800;color:#0f172a;margin-bottom:14px;font-family:Montserrat,sans-serif;">Invest in Your Future</h2>
|
||||
<p style="font-size:17px;color:#64748b;margin-bottom:48px;font-family:Inter,sans-serif;">One-time payment, lifetime access.</p>
|
||||
<div style="background:#fff;border-radius:20px;padding:48px 40px;box-shadow:0 8px 40px rgba(139,92,246,0.12);border:2px solid #8b5cf6;">
|
||||
<div style="margin-bottom:28px;">
|
||||
<span style="font-size:20px;color:#94a3b8;text-decoration:line-through;font-family:Inter,sans-serif;">$197</span>
|
||||
<span style="font-size:56px;font-weight:800;color:#0f172a;font-family:Montserrat,sans-serif;margin-left:12px;">$97</span>
|
||||
</div>
|
||||
<ul style="list-style:none;padding:0;margin:0 0 32px 0;text-align:left;">
|
||||
<li style="padding:10px 0;color:#334155;font-family:Inter,sans-serif;font-size:15px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #f1f5f9;"><span style="color:#8b5cf6;font-weight:700;">✓</span> 12 hours of HD video content</li>
|
||||
<li style="padding:10px 0;color:#334155;font-family:Inter,sans-serif;font-size:15px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #f1f5f9;"><span style="color:#8b5cf6;font-weight:700;">✓</span> 46 hands-on lessons across 5 modules</li>
|
||||
<li style="padding:10px 0;color:#334155;font-family:Inter,sans-serif;font-size:15px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #f1f5f9;"><span style="color:#8b5cf6;font-weight:700;">✓</span> Downloadable source code & resources</li>
|
||||
<li style="padding:10px 0;color:#334155;font-family:Inter,sans-serif;font-size:15px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #f1f5f9;"><span style="color:#8b5cf6;font-weight:700;">✓</span> Private student community access</li>
|
||||
<li style="padding:10px 0;color:#334155;font-family:Inter,sans-serif;font-size:15px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #f1f5f9;"><span style="color:#8b5cf6;font-weight:700;">✓</span> Certificate of completion</li>
|
||||
<li style="padding:10px 0;color:#334155;font-family:Inter,sans-serif;font-size:15px;display:flex;align-items:center;gap:10px;"><span style="color:#8b5cf6;font-weight:700;">✓</span> Lifetime updates at no extra cost</li>
|
||||
</ul>
|
||||
<a href="#" style="display:block;padding:18px;background:#8b5cf6;color:#fff;font-size:18px;font-weight:700;text-decoration:none;border-radius:12px;font-family:Inter,sans-serif;box-shadow:0 4px 16px rgba(139,92,246,0.35);">Enroll Now</a>
|
||||
<p style="color:#64748b;font-size:13px;margin-top:16px;font-family:Inter,sans-serif;">30-day money-back guarantee. No questions asked.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer style="padding:48px 20px 28px;background:#0f172a;border-top:1px solid rgba(139,92,246,0.12);">
|
||||
<div style="max-width:900px;margin:0 auto;text-align:center;">
|
||||
<div style="font-size:22px;font-weight:700;color:#fff;margin-bottom:16px;font-family:Montserrat,sans-serif;">Learn<span style="color:#8b5cf6;">Pro</span></div>
|
||||
<div style="display:flex;justify-content:center;gap:28px;margin-bottom:24px;flex-wrap:wrap;">
|
||||
<a href="#curriculum" style="color:#94a3b8;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Curriculum</a>
|
||||
<a href="#instructor" style="color:#94a3b8;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Instructor</a>
|
||||
<a href="#pricing" style="color:#94a3b8;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Pricing</a>
|
||||
<a href="#" style="color:#94a3b8;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Privacy Policy</a>
|
||||
<a href="#" style="color:#94a3b8;text-decoration:none;font-size:14px;font-family:Inter,sans-serif;">Terms</a>
|
||||
</div>
|
||||
<div style="border-top:1px solid rgba(139,92,246,0.1);padding-top:20px;">
|
||||
<p style="color:#6b7280;font-size:13px;font-family:Inter,sans-serif;">© 2026 LearnPro. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
59
templates/photography-studio/about.html
Normal file
59
templates/photography-studio/about.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:20px 60px;background-color:#1c1917;position:sticky;top:0;z-index:100;">
|
||||
<a href="#" style="font-family:'Playfair Display',serif;font-size:24px;color:#d4a574;text-decoration:none;font-weight:700;letter-spacing:1px;">Lens & Light Studio</a>
|
||||
<div style="display:flex;gap:32px;align-items:center;">
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;color:#fafaf9;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;">Gallery</a>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;color:#fafaf9;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;">About</a>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;color:#fafaf9;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section style="padding:100px 60px;background-color:#fafaf9;">
|
||||
<div style="max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;">
|
||||
<div>
|
||||
<img src="https://images.unsplash.com/photo-1554151228-14d9def656e4?w=600" alt="Elena Morales, photographer" style="width:100%;height:600px;object-fit:cover;display:block;">
|
||||
</div>
|
||||
<div>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#d4a574;text-transform:uppercase;letter-spacing:3px;margin-bottom:12px;">About the Artist</p>
|
||||
<h1 style="font-family:'Playfair Display',serif;font-size:48px;color:#1c1917;margin:0 0 24px 0;font-weight:700;">Elena Morales</h1>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#57534e;line-height:1.8;margin:0 0 20px 0;">Photography found me before I found it. Growing up in a small coastal town, I was captivated by the way light danced on the ocean at golden hour. At sixteen, I picked up my first camera and never looked back.</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#57534e;line-height:1.8;margin:0 0 20px 0;">After studying fine art photography at Parsons, I spent years traveling and documenting stories around the world. Today, I bring that same sense of wonder and authentic storytelling to every session.</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#57534e;line-height:1.8;margin:0;">I believe that the most powerful photographs are the ones that feel true -- unscripted, unhurried, and deeply human. My goal is to make every client feel at ease so that what shines through is entirely, beautifully them.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="padding:80px 60px;background-color:#1c1917;">
|
||||
<div style="max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;text-align:center;">
|
||||
<div>
|
||||
<p style="font-family:'Playfair Display',serif;font-size:48px;color:#d4a574;margin:0 0 8px 0;font-weight:700;">12+</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#a8a29e;text-transform:uppercase;letter-spacing:2px;margin:0;">Years Experience</p>
|
||||
</div>
|
||||
<div>
|
||||
<p style="font-family:'Playfair Display',serif;font-size:48px;color:#d4a574;margin:0 0 8px 0;font-weight:700;">25K+</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#a8a29e;text-transform:uppercase;letter-spacing:2px;margin:0;">Photos Delivered</p>
|
||||
</div>
|
||||
<div>
|
||||
<p style="font-family:'Playfair Display',serif;font-size:48px;color:#d4a574;margin:0 0 8px 0;font-weight:700;">400+</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#a8a29e;text-transform:uppercase;letter-spacing:2px;margin:0;">Happy Clients</p>
|
||||
</div>
|
||||
<div>
|
||||
<p style="font-family:'Playfair Display',serif;font-size:48px;color:#d4a574;margin:0 0 8px 0;font-weight:700;">15</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#a8a29e;text-transform:uppercase;letter-spacing:2px;margin:0;">Awards Won</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="padding:100px 60px;background-color:#fafaf9;">
|
||||
<div style="max-width:800px;margin:0 auto;text-align:center;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#d4a574;text-transform:uppercase;letter-spacing:3px;margin-bottom:12px;">My Approach</p>
|
||||
<h2 style="font-family:'Playfair Display',serif;font-size:42px;color:#1c1917;margin:0 0 32px 0;">Style & Philosophy</h2>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:17px;color:#57534e;line-height:1.8;margin:0 0 24px 0;">My work lives at the intersection of documentary and fine art. I favor natural light, muted tones, and compositions that feel effortless. I shoot primarily with mirrorless cameras and a collection of prime lenses that let me work quietly and move freely.</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:17px;color:#57534e;line-height:1.8;margin:0;">Every session begins with a conversation -- not about poses or props, but about what matters most to you. I want to understand the feeling you're after so the images we create together carry meaning long after the moment has passed.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer style="padding:48px 60px;background-color:#0c0a09;text-align:center;">
|
||||
<p style="font-family:'Playfair Display',serif;font-size:20px;color:#d4a574;margin:0 0 8px 0;">Lens & Light Studio</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#78716c;margin:0 0 4px 0;">123 Artisan Way, Brooklyn, NY 11201</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#57534e;margin:16px 0 0 0;">© 2026 Lens & Light Studio. All rights reserved.</p>
|
||||
</footer>
|
||||
85
templates/photography-studio/contact.html
Normal file
85
templates/photography-studio/contact.html
Normal file
@@ -0,0 +1,85 @@
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:20px 60px;background-color:#1c1917;position:sticky;top:0;z-index:100;">
|
||||
<a href="#" style="font-family:'Playfair Display',serif;font-size:24px;color:#d4a574;text-decoration:none;font-weight:700;letter-spacing:1px;">Lens & Light Studio</a>
|
||||
<div style="display:flex;gap:32px;align-items:center;">
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;color:#fafaf9;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;">Gallery</a>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;color:#fafaf9;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;">About</a>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;color:#fafaf9;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section style="padding:80px 60px;background-color:#1c1917;text-align:center;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#d4a574;text-transform:uppercase;letter-spacing:4px;margin-bottom:16px;">Get in Touch</p>
|
||||
<h1 style="font-family:'Playfair Display',serif;font-size:56px;color:#fafaf9;margin:0 0 16px 0;font-weight:700;">Contact Us</h1>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:17px;color:#a8a29e;max-width:520px;margin:0 auto;line-height:1.7;">Ready to book a session or have questions? We'd love to hear from you.</p>
|
||||
</section>
|
||||
|
||||
<section style="padding:80px 60px;background-color:#fafaf9;">
|
||||
<div style="max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;">
|
||||
<div>
|
||||
<h2 style="font-family:'Playfair Display',serif;font-size:32px;color:#1c1917;margin:0 0 32px 0;">Studio Information</h2>
|
||||
<div style="margin-bottom:28px;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#d4a574;text-transform:uppercase;letter-spacing:2px;margin:0 0 6px 0;">Email</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#44403c;margin:0;">hello@lensandlight.studio</p>
|
||||
</div>
|
||||
<div style="margin-bottom:28px;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#d4a574;text-transform:uppercase;letter-spacing:2px;margin:0 0 6px 0;">Phone</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#44403c;margin:0;">(718) 555-0192</p>
|
||||
</div>
|
||||
<div style="margin-bottom:28px;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#d4a574;text-transform:uppercase;letter-spacing:2px;margin:0 0 6px 0;">Location</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#44403c;margin:0;">123 Artisan Way, Suite 4B<br>Brooklyn, NY 11201</p>
|
||||
</div>
|
||||
<div>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#d4a574;text-transform:uppercase;letter-spacing:2px;margin:0 0 6px 0;">Studio Hours</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#44403c;margin:0;">Mon - Fri: 9:00 AM - 6:00 PM<br>Sat: 10:00 AM - 4:00 PM<br>Sun: By appointment only</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 style="font-family:'Playfair Display',serif;font-size:32px;color:#1c1917;margin:0 0 32px 0;">Send a Message</h2>
|
||||
<form style="display:flex;flex-direction:column;gap:20px;">
|
||||
<div>
|
||||
<label style="font-family:'Inter',sans-serif;font-size:13px;color:#78716c;text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:6px;">Your Name</label>
|
||||
<input type="text" placeholder="Full name" style="width:100%;padding:14px 16px;font-family:'Inter',sans-serif;font-size:15px;border:1px solid #d6d3d1;background-color:#ffffff;color:#1c1917;box-sizing:border-box;outline:none;">
|
||||
</div>
|
||||
<div>
|
||||
<label style="font-family:'Inter',sans-serif;font-size:13px;color:#78716c;text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:6px;">Email Address</label>
|
||||
<input type="email" placeholder="your@email.com" style="width:100%;padding:14px 16px;font-family:'Inter',sans-serif;font-size:15px;border:1px solid #d6d3d1;background-color:#ffffff;color:#1c1917;box-sizing:border-box;outline:none;">
|
||||
</div>
|
||||
<div>
|
||||
<label style="font-family:'Inter',sans-serif;font-size:13px;color:#78716c;text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:6px;">Event Type</label>
|
||||
<select style="width:100%;padding:14px 16px;font-family:'Inter',sans-serif;font-size:15px;border:1px solid #d6d3d1;background-color:#ffffff;color:#1c1917;box-sizing:border-box;outline:none;appearance:auto;">
|
||||
<option value="">Select an option</option>
|
||||
<option value="wedding">Wedding</option>
|
||||
<option value="portrait">Portrait Session</option>
|
||||
<option value="family">Family Session</option>
|
||||
<option value="commercial">Commercial / Product</option>
|
||||
<option value="event">Event Coverage</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label style="font-family:'Inter',sans-serif;font-size:13px;color:#78716c;text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:6px;">Message</label>
|
||||
<textarea rows="5" placeholder="Tell us about your project, preferred dates, and any details..." style="width:100%;padding:14px 16px;font-family:'Inter',sans-serif;font-size:15px;border:1px solid #d6d3d1;background-color:#ffffff;color:#1c1917;box-sizing:border-box;outline:none;resize:vertical;"></textarea>
|
||||
</div>
|
||||
<button type="submit" style="padding:16px 32px;background-color:#d4a574;color:#1c1917;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:2px;border:none;cursor:pointer;align-self:flex-start;">Send Message</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="padding:0 60px 80px 60px;background-color:#fafaf9;">
|
||||
<div style="max-width:1100px;margin:0 auto;">
|
||||
<div style="background-color:#e7e5e4;height:360px;display:flex;align-items:center;justify-content:center;">
|
||||
<div style="text-align:center;">
|
||||
<p style="font-family:'Playfair Display',serif;font-size:28px;color:#78716c;margin:0 0 8px 0;">Studio Location</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#a8a29e;margin:0;">123 Artisan Way, Brooklyn, NY 11201</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer style="padding:48px 60px;background-color:#0c0a09;text-align:center;">
|
||||
<p style="font-family:'Playfair Display',serif;font-size:20px;color:#d4a574;margin:0 0 8px 0;">Lens & Light Studio</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#78716c;margin:0 0 4px 0;">123 Artisan Way, Brooklyn, NY 11201</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#57534e;margin:16px 0 0 0;">© 2026 Lens & Light Studio. All rights reserved.</p>
|
||||
</footer>
|
||||
60
templates/photography-studio/gallery.html
Normal file
60
templates/photography-studio/gallery.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:20px 60px;background-color:#1c1917;position:sticky;top:0;z-index:100;">
|
||||
<a href="#" style="font-family:'Playfair Display',serif;font-size:24px;color:#d4a574;text-decoration:none;font-weight:700;letter-spacing:1px;">Lens & Light Studio</a>
|
||||
<div style="display:flex;gap:32px;align-items:center;">
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;color:#fafaf9;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;">Gallery</a>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;color:#fafaf9;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;">About</a>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;color:#fafaf9;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section style="padding:80px 60px;background-color:#1c1917;text-align:center;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#d4a574;text-transform:uppercase;letter-spacing:4px;margin-bottom:16px;">Our Work</p>
|
||||
<h1 style="font-family:'Playfair Display',serif;font-size:56px;color:#fafaf9;margin:0 0 16px 0;font-weight:700;">Portfolio</h1>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:17px;color:#a8a29e;max-width:560px;margin:0 auto;line-height:1.7;">A curated selection of our favorite moments, captured across weddings, portraits, and editorial projects.</p>
|
||||
</section>
|
||||
|
||||
<section style="padding:60px;background-color:#fafaf9;">
|
||||
<div style="max-width:1200px;margin:0 auto;columns:3;column-gap:20px;">
|
||||
<div style="break-inside:avoid;margin-bottom:20px;">
|
||||
<img src="https://images.unsplash.com/photo-1519741497674-611481863552?w=600" alt="Wedding couple at sunset" style="width:100%;display:block;height:450px;object-fit:cover;">
|
||||
</div>
|
||||
<div style="break-inside:avoid;margin-bottom:20px;">
|
||||
<img src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=600" alt="Portrait in natural light" style="width:100%;display:block;height:300px;object-fit:cover;">
|
||||
</div>
|
||||
<div style="break-inside:avoid;margin-bottom:20px;">
|
||||
<img src="https://images.unsplash.com/photo-1505939374277-2b0ecd010614?w=600" alt="Mountain landscape" style="width:100%;display:block;height:380px;object-fit:cover;">
|
||||
</div>
|
||||
<div style="break-inside:avoid;margin-bottom:20px;">
|
||||
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600" alt="Professional headshot" style="width:100%;display:block;height:340px;object-fit:cover;">
|
||||
</div>
|
||||
<div style="break-inside:avoid;margin-bottom:20px;">
|
||||
<img src="https://images.unsplash.com/photo-1537633552985-df8429e8048b?w=600" alt="Wedding ceremony details" style="width:100%;display:block;height:420px;object-fit:cover;">
|
||||
</div>
|
||||
<div style="break-inside:avoid;margin-bottom:20px;">
|
||||
<img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=600" alt="Product photography" style="width:100%;display:block;height:280px;object-fit:cover;">
|
||||
</div>
|
||||
<div style="break-inside:avoid;margin-bottom:20px;">
|
||||
<img src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=600" alt="Wedding reception dance" style="width:100%;display:block;height:360px;object-fit:cover;">
|
||||
</div>
|
||||
<div style="break-inside:avoid;margin-bottom:20px;">
|
||||
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=600" alt="Studio portrait" style="width:100%;display:block;height:440px;object-fit:cover;">
|
||||
</div>
|
||||
<div style="break-inside:avoid;margin-bottom:20px;">
|
||||
<img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=600" alt="Golden hour landscape" style="width:100%;display:block;height:320px;object-fit:cover;">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="padding:100px 60px;background-color:#1c1917;text-align:center;">
|
||||
<div style="max-width:600px;margin:0 auto;">
|
||||
<h2 style="font-family:'Playfair Display',serif;font-size:38px;color:#fafaf9;margin:0 0 16px 0;">Like What You See?</h2>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:17px;color:#a8a29e;line-height:1.7;margin-bottom:36px;">We'd love to hear about your project. Let's discuss how we can create something extraordinary together.</p>
|
||||
<a href="#" style="display:inline-block;padding:16px 48px;background-color:#d4a574;color:#1c1917;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;text-decoration:none;text-transform:uppercase;letter-spacing:2px;">Contact Us</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer style="padding:48px 60px;background-color:#0c0a09;text-align:center;">
|
||||
<p style="font-family:'Playfair Display',serif;font-size:20px;color:#d4a574;margin:0 0 8px 0;">Lens & Light Studio</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#78716c;margin:0 0 4px 0;">123 Artisan Way, Brooklyn, NY 11201</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#57534e;margin:16px 0 0 0;">© 2026 Lens & Light Studio. All rights reserved.</p>
|
||||
</footer>
|
||||
80
templates/photography-studio/home.html
Normal file
80
templates/photography-studio/home.html
Normal file
@@ -0,0 +1,80 @@
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:20px 60px;background-color:#1c1917;position:sticky;top:0;z-index:100;">
|
||||
<a href="#" style="font-family:'Playfair Display',serif;font-size:24px;color:#d4a574;text-decoration:none;font-weight:700;letter-spacing:1px;">Lens & Light Studio</a>
|
||||
<div style="display:flex;gap:32px;align-items:center;">
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;color:#fafaf9;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;">Gallery</a>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;color:#fafaf9;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;">About</a>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;color:#fafaf9;text-decoration:none;letter-spacing:0.5px;text-transform:uppercase;">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section style="position:relative;min-height:90vh;display:flex;align-items:center;justify-content:center;background-image:url('https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?w=1600');background-size:cover;background-position:center;">
|
||||
<div style="position:absolute;inset:0;background:linear-gradient(to bottom,rgba(28,25,23,0.7),rgba(28,25,23,0.85));"></div>
|
||||
<div style="position:relative;text-align:center;max-width:800px;padding:40px 20px;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#d4a574;text-transform:uppercase;letter-spacing:4px;margin-bottom:24px;">Welcome to Our Studio</p>
|
||||
<h1 style="font-family:'Playfair Display',serif;font-size:64px;color:#fafaf9;line-height:1.15;margin:0 0 24px 0;font-weight:700;">Capturing Life's Beautiful Moments</h1>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:18px;color:#d6d3d1;line-height:1.7;margin-bottom:40px;">We specialize in turning fleeting moments into timeless works of art. Every frame tells a story worth remembering.</p>
|
||||
<a href="#" style="display:inline-block;padding:16px 48px;background-color:#d4a574;color:#1c1917;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;text-decoration:none;text-transform:uppercase;letter-spacing:2px;transition:background 0.3s;">View Portfolio</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="padding:100px 60px;background-color:#fafaf9;">
|
||||
<div style="max-width:1200px;margin:0 auto;text-align:center;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#d4a574;text-transform:uppercase;letter-spacing:3px;margin-bottom:12px;">What We Do</p>
|
||||
<h2 style="font-family:'Playfair Display',serif;font-size:42px;color:#1c1917;margin:0 0 60px 0;">Our Services</h2>
|
||||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:40px;">
|
||||
<div style="padding:48px 32px;background-color:#ffffff;border:1px solid #e7e5e4;text-align:center;">
|
||||
<h3 style="font-family:'Playfair Display',serif;font-size:24px;color:#1c1917;margin:0 0 16px 0;">Weddings</h3>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#78716c;line-height:1.7;margin:0;">From intimate elopements to grand celebrations, we capture every tender moment of your special day with an artistic eye.</p>
|
||||
</div>
|
||||
<div style="padding:48px 32px;background-color:#ffffff;border:1px solid #e7e5e4;text-align:center;">
|
||||
<h3 style="font-family:'Playfair Display',serif;font-size:24px;color:#1c1917;margin:0 0 16px 0;">Portraits</h3>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#78716c;line-height:1.7;margin:0;">Individual, family, or professional headshots crafted with natural light and genuine expression to reveal your true self.</p>
|
||||
</div>
|
||||
<div style="padding:48px 32px;background-color:#ffffff;border:1px solid #e7e5e4;text-align:center;">
|
||||
<h3 style="font-family:'Playfair Display',serif;font-size:24px;color:#1c1917;margin:0 0 16px 0;">Commercial</h3>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#78716c;line-height:1.7;margin:0;">Product, brand, and editorial photography that elevates your business and tells your brand story with visual impact.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="padding:100px 60px;background-color:#1c1917;">
|
||||
<div style="max-width:1200px;margin:0 auto;text-align:center;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#d4a574;text-transform:uppercase;letter-spacing:3px;margin-bottom:12px;">Portfolio</p>
|
||||
<h2 style="font-family:'Playfair Display',serif;font-size:42px;color:#fafaf9;margin:0 0 60px 0;">Featured Work</h2>
|
||||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;">
|
||||
<div style="overflow:hidden;">
|
||||
<img src="https://images.unsplash.com/photo-1519741497674-611481863552?w=600" alt="Wedding photo" style="width:100%;height:320px;object-fit:cover;display:block;">
|
||||
</div>
|
||||
<div style="overflow:hidden;">
|
||||
<img src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=600" alt="Portrait photo" style="width:100%;height:320px;object-fit:cover;display:block;">
|
||||
</div>
|
||||
<div style="overflow:hidden;">
|
||||
<img src="https://images.unsplash.com/photo-1505939374277-2b0ecd010614?w=600" alt="Landscape photo" style="width:100%;height:320px;object-fit:cover;display:block;">
|
||||
</div>
|
||||
<div style="overflow:hidden;">
|
||||
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600" alt="Portrait session" style="width:100%;height:320px;object-fit:cover;display:block;">
|
||||
</div>
|
||||
<div style="overflow:hidden;">
|
||||
<img src="https://images.unsplash.com/photo-1537633552985-df8429e8048b?w=600" alt="Wedding ceremony" style="width:100%;height:320px;object-fit:cover;display:block;">
|
||||
</div>
|
||||
<div style="overflow:hidden;">
|
||||
<img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=600" alt="Commercial shoot" style="width:100%;height:320px;object-fit:cover;display:block;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="padding:100px 60px;background:linear-gradient(135deg,#292524,#1c1917);text-align:center;">
|
||||
<div style="max-width:700px;margin:0 auto;">
|
||||
<h2 style="font-family:'Playfair Display',serif;font-size:42px;color:#fafaf9;margin:0 0 20px 0;">Let's Create Something Beautiful</h2>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:17px;color:#a8a29e;line-height:1.7;margin-bottom:40px;">Every great image begins with a conversation. Tell us about your vision and let's bring it to life together.</p>
|
||||
<a href="#" style="display:inline-block;padding:16px 48px;background-color:#d4a574;color:#1c1917;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;text-decoration:none;text-transform:uppercase;letter-spacing:2px;">Get in Touch</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer style="padding:48px 60px;background-color:#0c0a09;text-align:center;">
|
||||
<p style="font-family:'Playfair Display',serif;font-size:20px;color:#d4a574;margin:0 0 8px 0;">Lens & Light Studio</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#78716c;margin:0 0 4px 0;">123 Artisan Way, Brooklyn, NY 11201</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#57534e;margin:16px 0 0 0;">© 2026 Lens & Light Studio. All rights reserved.</p>
|
||||
</footer>
|
||||
87
templates/real-estate/about.html
Normal file
87
templates/real-estate/about.html
Normal file
@@ -0,0 +1,87 @@
|
||||
<!-- Navigation -->
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background-color:#0f172a;font-family:'Inter',sans-serif;">
|
||||
<a style="font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:#0ea5e9;text-decoration:none;">Prestige Realty</a>
|
||||
<div style="display:flex;align-items:center;gap:32px;">
|
||||
<a href="listings.html" style="color:#f8fafc;text-decoration:none;font-size:15px;font-weight:500;">Listings</a>
|
||||
<a href="about.html" style="color:#0ea5e9;text-decoration:none;font-size:15px;font-weight:600;">About Us</a>
|
||||
<a href="contact.html" style="color:#f8fafc;text-decoration:none;font-size:15px;font-weight:500;">Contact</a>
|
||||
<span style="color:#0ea5e9;font-size:15px;font-weight:600;">(555) 123-4567</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- About Section -->
|
||||
<section style="background-color:#ffffff;padding:80px 48px;font-family:'Inter',sans-serif;">
|
||||
<div style="display:flex;gap:48px;max-width:1050px;margin:0 auto;align-items:center;flex-wrap:wrap;">
|
||||
<div style="flex:1;min-width:300px;">
|
||||
<h1 style="font-family:'Montserrat',sans-serif;font-size:40px;font-weight:800;color:#0f172a;margin:0 0 20px;">About Prestige Realty</h1>
|
||||
<p style="font-size:16px;color:#475569;line-height:1.7;margin:0 0 16px;">Founded in 2011, Prestige Realty has grown from a small neighborhood office to one of Southern California's most trusted real estate agencies. Our journey began with a simple belief: every client deserves personalized, expert guidance through the biggest transaction of their life.</p>
|
||||
<p style="font-size:16px;color:#475569;line-height:1.7;margin:0 0 16px;">Our mission is to make the home buying and selling experience seamless, transparent, and rewarding. We combine cutting-edge market analytics with genuine care for our clients' goals.</p>
|
||||
<p style="font-size:16px;color:#475569;line-height:1.7;margin:0;">With over 500 properties sold and a 98% client satisfaction rate, our track record speaks for itself. We don't just close deals -- we build lasting relationships.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:300px;">
|
||||
<img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=600" style="width:100%;border-radius:12px;display:block;box-shadow:0 4px 20px rgba(0,0,0,0.1);" alt="Real estate office" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Team Section -->
|
||||
<section style="background-color:#f8fafc;padding:80px 48px;font-family:'Inter',sans-serif;">
|
||||
<h2 style="font-family:'Montserrat',sans-serif;font-size:36px;font-weight:700;color:#0f172a;text-align:center;margin:0 0 8px;">Meet Our Team</h2>
|
||||
<p style="text-align:center;color:#64748b;font-size:16px;margin:0 0 48px;">Dedicated professionals ready to help you</p>
|
||||
<div style="display:flex;gap:32px;max-width:1000px;margin:0 auto;flex-wrap:wrap;justify-content:center;">
|
||||
<div style="background-color:#ffffff;border-radius:12px;overflow:hidden;width:300px;text-align:center;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
|
||||
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=400" style="width:100%;height:280px;object-fit:cover;display:block;" alt="James Mitchell" />
|
||||
<div style="padding:24px;">
|
||||
<h3 style="font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:#0f172a;margin:0 0 4px;">James Mitchell</h3>
|
||||
<div style="font-size:14px;color:#0ea5e9;font-weight:600;margin-bottom:12px;">Lead Agent & Founder</div>
|
||||
<p style="font-size:13px;color:#64748b;line-height:1.6;margin:0;">Specializing in luxury residential properties with 15+ years of market experience in greater Los Angeles.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background-color:#ffffff;border-radius:12px;overflow:hidden;width:300px;text-align:center;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
|
||||
<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=400" style="width:100%;height:280px;object-fit:cover;display:block;" alt="Sarah Chen" />
|
||||
<div style="padding:24px;">
|
||||
<h3 style="font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:#0f172a;margin:0 0 4px;">Sarah Chen</h3>
|
||||
<div style="font-size:14px;color:#0ea5e9;font-weight:600;margin-bottom:12px;">Senior Sales Agent</div>
|
||||
<p style="font-size:13px;color:#64748b;line-height:1.6;margin:0;">Expert in first-time homebuyer programs and residential sales across Orange County and San Diego markets.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background-color:#ffffff;border-radius:12px;overflow:hidden;width:300px;text-align:center;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
|
||||
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400" style="width:100%;height:280px;object-fit:cover;display:block;" alt="David Rodriguez" />
|
||||
<div style="padding:24px;">
|
||||
<h3 style="font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:#0f172a;margin:0 0 4px;">David Rodriguez</h3>
|
||||
<div style="font-size:14px;color:#0ea5e9;font-weight:600;margin-bottom:12px;">Commercial Specialist</div>
|
||||
<p style="font-size:13px;color:#64748b;line-height:1.6;margin:0;">Focused on commercial real estate, office leasing, and investment properties with a strong analytics background.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Values Section -->
|
||||
<section style="background-color:#ffffff;padding:80px 48px;font-family:'Inter',sans-serif;">
|
||||
<h2 style="font-family:'Montserrat',sans-serif;font-size:36px;font-weight:700;color:#0f172a;text-align:center;margin:0 0 8px;">Our Values</h2>
|
||||
<p style="text-align:center;color:#64748b;font-size:16px;margin:0 0 48px;">The principles that guide everything we do</p>
|
||||
<div style="display:flex;gap:32px;max-width:1000px;margin:0 auto;flex-wrap:wrap;justify-content:center;">
|
||||
<div style="flex:1;min-width:280px;max-width:300px;text-align:center;padding:36px 28px;background-color:#f8fafc;border-radius:12px;">
|
||||
<div style="width:56px;height:56px;background-color:#0ea5e9;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:24px;color:#ffffff;">♥</div>
|
||||
<h3 style="font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:#0f172a;margin:0 0 12px;">Integrity</h3>
|
||||
<p style="font-size:14px;color:#64748b;line-height:1.6;margin:0;">We believe in honest communication and transparent dealings. Our clients always know exactly where they stand.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;max-width:300px;text-align:center;padding:36px 28px;background-color:#f8fafc;border-radius:12px;">
|
||||
<div style="width:56px;height:56px;background-color:#0ea5e9;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:24px;color:#ffffff;">★</div>
|
||||
<h3 style="font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:#0f172a;margin:0 0 12px;">Excellence</h3>
|
||||
<p style="font-size:14px;color:#64748b;line-height:1.6;margin:0;">We set high standards for ourselves and continuously improve our skills, tools, and processes to serve you better.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;max-width:300px;text-align:center;padding:36px 28px;background-color:#f8fafc;border-radius:12px;">
|
||||
<div style="width:56px;height:56px;background-color:#0ea5e9;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:24px;color:#ffffff;">♟</div>
|
||||
<h3 style="font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:#0f172a;margin:0 0 12px;">Client-First</h3>
|
||||
<p style="font-size:14px;color:#64748b;line-height:1.6;margin:0;">Your goals are our priority. We listen, adapt, and go the extra mile to ensure your real estate experience exceeds expectations.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer style="background-color:#0f172a;padding:40px 48px;text-align:center;font-family:'Inter',sans-serif;">
|
||||
<div style="font-family:'Montserrat',sans-serif;font-size:18px;font-weight:700;color:#0ea5e9;margin-bottom:8px;">Prestige Realty</div>
|
||||
<div style="font-size:14px;color:#94a3b8;margin-bottom:8px;">123 Real Estate Blvd, Suite 200, Los Angeles, CA 90001</div>
|
||||
<div style="font-size:13px;color:#64748b;">© 2026 Prestige Realty. All rights reserved.</div>
|
||||
</footer>
|
||||
98
templates/real-estate/contact.html
Normal file
98
templates/real-estate/contact.html
Normal file
@@ -0,0 +1,98 @@
|
||||
<!-- Navigation -->
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background-color:#0f172a;font-family:'Inter',sans-serif;">
|
||||
<a style="font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:#0ea5e9;text-decoration:none;">Prestige Realty</a>
|
||||
<div style="display:flex;align-items:center;gap:32px;">
|
||||
<a href="listings.html" style="color:#f8fafc;text-decoration:none;font-size:15px;font-weight:500;">Listings</a>
|
||||
<a href="about.html" style="color:#f8fafc;text-decoration:none;font-size:15px;font-weight:500;">About Us</a>
|
||||
<a href="contact.html" style="color:#0ea5e9;text-decoration:none;font-size:15px;font-weight:600;">Contact</a>
|
||||
<span style="color:#0ea5e9;font-size:15px;font-weight:600;">(555) 123-4567</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section style="background-color:#ffffff;padding:80px 48px;font-family:'Inter',sans-serif;">
|
||||
<h1 style="font-family:'Montserrat',sans-serif;font-size:40px;font-weight:800;color:#0f172a;text-align:center;margin:0 0 8px;">Get In Touch</h1>
|
||||
<p style="text-align:center;color:#64748b;font-size:17px;margin:0 0 56px;">We'd love to hear from you. Reach out and our team will respond within 24 hours.</p>
|
||||
<div style="display:flex;gap:48px;max-width:1050px;margin:0 auto;flex-wrap:wrap;">
|
||||
<!-- Contact Details -->
|
||||
<div style="flex:1;min-width:300px;">
|
||||
<h2 style="font-family:'Montserrat',sans-serif;font-size:24px;font-weight:700;color:#0f172a;margin:0 0 28px;">Contact Information</h2>
|
||||
<div style="margin-bottom:24px;">
|
||||
<div style="font-size:13px;font-weight:600;color:#0ea5e9;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;">Office Address</div>
|
||||
<div style="font-size:15px;color:#475569;line-height:1.6;">123 Real Estate Blvd, Suite 200<br />Los Angeles, CA 90001</div>
|
||||
</div>
|
||||
<div style="margin-bottom:24px;">
|
||||
<div style="font-size:13px;font-weight:600;color:#0ea5e9;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;">Phone</div>
|
||||
<div style="font-size:15px;color:#475569;">(555) 123-4567</div>
|
||||
</div>
|
||||
<div style="margin-bottom:24px;">
|
||||
<div style="font-size:13px;font-weight:600;color:#0ea5e9;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;">Email</div>
|
||||
<div style="font-size:15px;color:#475569;">info@prestigerealty.com</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:13px;font-weight:600;color:#0ea5e9;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;">Office Hours</div>
|
||||
<div style="font-size:15px;color:#475569;line-height:1.6;">Monday - Friday: 9:00 AM - 6:00 PM<br />Saturday: 10:00 AM - 4:00 PM<br />Sunday: By Appointment</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Contact Form -->
|
||||
<div style="flex:1;min-width:300px;">
|
||||
<form style="background-color:#f8fafc;padding:32px;border-radius:12px;">
|
||||
<div style="margin-bottom:16px;">
|
||||
<label style="display:block;font-size:13px;font-weight:600;color:#0f172a;margin-bottom:6px;">Full Name</label>
|
||||
<input type="text" placeholder="John Smith" style="width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;font-family:'Inter',sans-serif;box-sizing:border-box;" />
|
||||
</div>
|
||||
<div style="margin-bottom:16px;">
|
||||
<label style="display:block;font-size:13px;font-weight:600;color:#0f172a;margin-bottom:6px;">Email Address</label>
|
||||
<input type="email" placeholder="john@example.com" style="width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;font-family:'Inter',sans-serif;box-sizing:border-box;" />
|
||||
</div>
|
||||
<div style="margin-bottom:16px;">
|
||||
<label style="display:block;font-size:13px;font-weight:600;color:#0f172a;margin-bottom:6px;">Phone Number</label>
|
||||
<input type="tel" placeholder="(555) 000-0000" style="width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;font-family:'Inter',sans-serif;box-sizing:border-box;" />
|
||||
</div>
|
||||
<div style="margin-bottom:16px;">
|
||||
<label style="display:block;font-size:13px;font-weight:600;color:#0f172a;margin-bottom:6px;">Property Interest</label>
|
||||
<select style="width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;font-family:'Inter',sans-serif;background-color:#ffffff;box-sizing:border-box;">
|
||||
<option value="">Select an option...</option>
|
||||
<option value="buying">Buying a Home</option>
|
||||
<option value="selling">Selling a Home</option>
|
||||
<option value="renting">Renting</option>
|
||||
<option value="commercial">Commercial Property</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="margin-bottom:20px;">
|
||||
<label style="display:block;font-size:13px;font-weight:600;color:#0f172a;margin-bottom:6px;">Message</label>
|
||||
<textarea placeholder="Tell us about what you're looking for..." rows="4" style="width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;font-family:'Inter',sans-serif;resize:vertical;box-sizing:border-box;"></textarea>
|
||||
</div>
|
||||
<button type="submit" style="width:100%;padding:12px;background-color:#0ea5e9;color:#ffffff;border:none;border-radius:6px;font-size:15px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;">Send Message</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Office Locations -->
|
||||
<section style="background-color:#f8fafc;padding:72px 48px;font-family:'Inter',sans-serif;">
|
||||
<h2 style="font-family:'Montserrat',sans-serif;font-size:32px;font-weight:700;color:#0f172a;text-align:center;margin:0 0 8px;">Our Offices</h2>
|
||||
<p style="text-align:center;color:#64748b;font-size:16px;margin:0 0 40px;">Visit us at either of our convenient locations</p>
|
||||
<div style="display:flex;gap:32px;max-width:800px;margin:0 auto;flex-wrap:wrap;justify-content:center;">
|
||||
<div style="flex:1;min-width:320px;background-color:#ffffff;padding:32px;border-radius:12px;border:1px solid #e2e8f0;">
|
||||
<h3 style="font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:#0f172a;margin:0 0 4px;">Los Angeles Office</h3>
|
||||
<div style="font-size:14px;color:#0ea5e9;font-weight:600;margin-bottom:16px;">Main Headquarters</div>
|
||||
<p style="font-size:14px;color:#64748b;line-height:1.7;margin:0 0 8px;">123 Real Estate Blvd, Suite 200<br />Los Angeles, CA 90001</p>
|
||||
<p style="font-size:14px;color:#64748b;margin:0;">Phone: (555) 123-4567</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:320px;background-color:#ffffff;padding:32px;border-radius:12px;border:1px solid #e2e8f0;">
|
||||
<h3 style="font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:#0f172a;margin:0 0 4px;">San Diego Office</h3>
|
||||
<div style="font-size:14px;color:#0ea5e9;font-weight:600;margin-bottom:16px;">Branch Office</div>
|
||||
<p style="font-size:14px;color:#64748b;line-height:1.7;margin:0 0 8px;">456 Coastal Drive, Suite 100<br />San Diego, CA 92101</p>
|
||||
<p style="font-size:14px;color:#64748b;margin:0;">Phone: (555) 987-6543</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer style="background-color:#0f172a;padding:40px 48px;text-align:center;font-family:'Inter',sans-serif;">
|
||||
<div style="font-family:'Montserrat',sans-serif;font-size:18px;font-weight:700;color:#0ea5e9;margin-bottom:8px;">Prestige Realty</div>
|
||||
<div style="font-size:14px;color:#94a3b8;margin-bottom:8px;">123 Real Estate Blvd, Suite 200, Los Angeles, CA 90001</div>
|
||||
<div style="font-size:13px;color:#64748b;">© 2026 Prestige Realty. All rights reserved.</div>
|
||||
</footer>
|
||||
120
templates/real-estate/home.html
Normal file
120
templates/real-estate/home.html
Normal file
@@ -0,0 +1,120 @@
|
||||
<!-- Navigation -->
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background-color:#0f172a;font-family:'Inter',sans-serif;">
|
||||
<a style="font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:#0ea5e9;text-decoration:none;">Prestige Realty</a>
|
||||
<div style="display:flex;align-items:center;gap:32px;">
|
||||
<a href="listings.html" style="color:#f8fafc;text-decoration:none;font-size:15px;font-weight:500;">Listings</a>
|
||||
<a href="about.html" style="color:#f8fafc;text-decoration:none;font-size:15px;font-weight:500;">About Us</a>
|
||||
<a href="contact.html" style="color:#f8fafc;text-decoration:none;font-size:15px;font-weight:500;">Contact</a>
|
||||
<span style="color:#0ea5e9;font-size:15px;font-weight:600;">(555) 123-4567</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section style="background:linear-gradient(rgba(15,23,42,0.85),rgba(15,23,42,0.85)),url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=1400') center/cover no-repeat;padding:100px 48px;text-align:center;font-family:'Inter',sans-serif;">
|
||||
<h1 style="font-family:'Montserrat',sans-serif;font-size:52px;font-weight:800;color:#ffffff;margin:0 0 16px;">Find Your Dream Home</h1>
|
||||
<p style="font-size:20px;color:#cbd5e1;margin:0 0 40px;max-width:600px;margin-left:auto;margin-right:auto;">Discover exceptional properties in the most desirable neighborhoods. Your perfect home is just a search away.</p>
|
||||
<div style="display:inline-flex;align-items:center;gap:12px;background-color:rgba(255,255,255,0.1);padding:12px 16px;border-radius:8px;border:1px solid rgba(255,255,255,0.15);">
|
||||
<span style="color:#94a3b8;font-size:15px;">Search by city, neighborhood, or ZIP...</span>
|
||||
<a href="listings.html" style="background-color:#0ea5e9;color:#ffffff;padding:12px 28px;border-radius:6px;text-decoration:none;font-weight:600;font-size:15px;">Browse Listings</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stats -->
|
||||
<section style="background-color:#ffffff;padding:60px 48px;font-family:'Inter',sans-serif;">
|
||||
<div style="display:flex;justify-content:center;gap:64px;flex-wrap:wrap;max-width:960px;margin:0 auto;">
|
||||
<div style="text-align:center;">
|
||||
<div style="font-family:'Montserrat',sans-serif;font-size:40px;font-weight:800;color:#0ea5e9;">500+</div>
|
||||
<div style="font-size:14px;color:#64748b;margin-top:4px;font-weight:500;">Properties Sold</div>
|
||||
</div>
|
||||
<div style="text-align:center;">
|
||||
<div style="font-family:'Montserrat',sans-serif;font-size:40px;font-weight:800;color:#0ea5e9;">15</div>
|
||||
<div style="font-size:14px;color:#64748b;margin-top:4px;font-weight:500;">Years Experience</div>
|
||||
</div>
|
||||
<div style="text-align:center;">
|
||||
<div style="font-family:'Montserrat',sans-serif;font-size:40px;font-weight:800;color:#0ea5e9;">98%</div>
|
||||
<div style="font-size:14px;color:#64748b;margin-top:4px;font-weight:500;">Client Satisfaction</div>
|
||||
</div>
|
||||
<div style="text-align:center;">
|
||||
<div style="font-family:'Montserrat',sans-serif;font-size:40px;font-weight:800;color:#0ea5e9;">50+</div>
|
||||
<div style="font-size:14px;color:#64748b;margin-top:4px;font-weight:500;">Expert Agents</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Properties -->
|
||||
<section style="background-color:#f8fafc;padding:80px 48px;font-family:'Inter',sans-serif;">
|
||||
<h2 style="font-family:'Montserrat',sans-serif;font-size:36px;font-weight:700;color:#0f172a;text-align:center;margin:0 0 8px;">Featured Properties</h2>
|
||||
<p style="text-align:center;color:#64748b;font-size:16px;margin:0 0 48px;">Hand-picked listings from our top agents</p>
|
||||
<div style="display:flex;gap:24px;max-width:1100px;margin:0 auto;flex-wrap:wrap;justify-content:center;">
|
||||
<div style="background-color:#ffffff;border-radius:12px;overflow:hidden;width:340px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
|
||||
<img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=680" style="width:100%;height:220px;object-fit:cover;display:block;" alt="Modern family home" />
|
||||
<div style="padding:20px;">
|
||||
<div style="font-family:'Montserrat',sans-serif;font-size:24px;font-weight:700;color:#0ea5e9;margin-bottom:8px;">$750,000</div>
|
||||
<div style="font-size:16px;font-weight:600;color:#0f172a;margin-bottom:8px;">Modern Family Home</div>
|
||||
<div style="display:flex;gap:16px;font-size:13px;color:#64748b;margin-bottom:8px;">
|
||||
<span>4 Beds</span><span>3 Baths</span><span>2,800 sqft</span>
|
||||
</div>
|
||||
<div style="font-size:13px;color:#94a3b8;">Westwood, Los Angeles, CA</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background-color:#ffffff;border-radius:12px;overflow:hidden;width:340px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
|
||||
<img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=680" style="width:100%;height:220px;object-fit:cover;display:block;" alt="Luxury villa" />
|
||||
<div style="padding:20px;">
|
||||
<div style="font-family:'Montserrat',sans-serif;font-size:24px;font-weight:700;color:#0ea5e9;margin-bottom:8px;">$1,250,000</div>
|
||||
<div style="font-size:16px;font-weight:600;color:#0f172a;margin-bottom:8px;">Luxury Villa with Pool</div>
|
||||
<div style="display:flex;gap:16px;font-size:13px;color:#64748b;margin-bottom:8px;">
|
||||
<span>5 Beds</span><span>4 Baths</span><span>4,200 sqft</span>
|
||||
</div>
|
||||
<div style="font-size:13px;color:#94a3b8;">Beverly Hills, CA</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background-color:#ffffff;border-radius:12px;overflow:hidden;width:340px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
|
||||
<img src="https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?w=680" style="width:100%;height:220px;object-fit:cover;display:block;" alt="Downtown condo" />
|
||||
<div style="padding:20px;">
|
||||
<div style="font-family:'Montserrat',sans-serif;font-size:24px;font-weight:700;color:#0ea5e9;margin-bottom:8px;">$425,000</div>
|
||||
<div style="font-size:16px;font-weight:600;color:#0f172a;margin-bottom:8px;">Downtown Penthouse Condo</div>
|
||||
<div style="display:flex;gap:16px;font-size:13px;color:#64748b;margin-bottom:8px;">
|
||||
<span>2 Beds</span><span>2 Baths</span><span>1,400 sqft</span>
|
||||
</div>
|
||||
<div style="font-size:13px;color:#94a3b8;">Downtown, San Diego, CA</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Choose Us -->
|
||||
<section style="background-color:#ffffff;padding:80px 48px;font-family:'Inter',sans-serif;">
|
||||
<h2 style="font-family:'Montserrat',sans-serif;font-size:36px;font-weight:700;color:#0f172a;text-align:center;margin:0 0 8px;">Why Choose Us</h2>
|
||||
<p style="text-align:center;color:#64748b;font-size:16px;margin:0 0 48px;">What sets Prestige Realty apart</p>
|
||||
<div style="display:flex;gap:32px;max-width:1000px;margin:0 auto;flex-wrap:wrap;justify-content:center;">
|
||||
<div style="flex:1;min-width:280px;max-width:300px;text-align:center;padding:32px;border:1px solid #e2e8f0;border-radius:12px;">
|
||||
<div style="font-size:36px;margin-bottom:16px;">🏠</div>
|
||||
<h3 style="font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:#0f172a;margin:0 0 12px;">Expert Agents</h3>
|
||||
<p style="font-size:14px;color:#64748b;line-height:1.6;margin:0;">Our licensed professionals bring decades of combined experience and deep local market expertise to every transaction.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;max-width:300px;text-align:center;padding:32px;border:1px solid #e2e8f0;border-radius:12px;">
|
||||
<div style="font-size:36px;margin-bottom:16px;">📈</div>
|
||||
<h3 style="font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:#0f172a;margin:0 0 12px;">Market Knowledge</h3>
|
||||
<p style="font-size:14px;color:#64748b;line-height:1.6;margin:0;">Data-driven pricing strategies and neighborhood insights ensure you get the best value whether buying or selling.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;max-width:300px;text-align:center;padding:32px;border:1px solid #e2e8f0;border-radius:12px;">
|
||||
<div style="font-size:36px;margin-bottom:16px;">🔑</div>
|
||||
<h3 style="font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:#0f172a;margin:0 0 12px;">Full Service</h3>
|
||||
<p style="font-size:14px;color:#64748b;line-height:1.6;margin:0;">From your first viewing to closing day, we handle inspections, negotiations, paperwork, and everything in between.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section style="background:linear-gradient(135deg,#0ea5e9,#0369a1);padding:72px 48px;text-align:center;font-family:'Inter',sans-serif;">
|
||||
<h2 style="font-family:'Montserrat',sans-serif;font-size:36px;font-weight:700;color:#ffffff;margin:0 0 16px;">Ready to Find Your Home?</h2>
|
||||
<p style="font-size:18px;color:rgba(255,255,255,0.85);margin:0 0 32px;">Let our team guide you to the perfect property. Get in touch today.</p>
|
||||
<a href="contact.html" style="display:inline-block;background-color:#ffffff;color:#0ea5e9;padding:14px 36px;border-radius:8px;text-decoration:none;font-weight:700;font-size:16px;">Contact Us</a>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer style="background-color:#0f172a;padding:40px 48px;text-align:center;font-family:'Inter',sans-serif;">
|
||||
<div style="font-family:'Montserrat',sans-serif;font-size:18px;font-weight:700;color:#0ea5e9;margin-bottom:8px;">Prestige Realty</div>
|
||||
<div style="font-size:14px;color:#94a3b8;margin-bottom:8px;">123 Real Estate Blvd, Suite 200, Los Angeles, CA 90001</div>
|
||||
<div style="font-size:13px;color:#64748b;">© 2026 Prestige Realty. All rights reserved.</div>
|
||||
</footer>
|
||||
124
templates/real-estate/listings.html
Normal file
124
templates/real-estate/listings.html
Normal file
@@ -0,0 +1,124 @@
|
||||
<!-- Navigation -->
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background-color:#0f172a;font-family:'Inter',sans-serif;">
|
||||
<a style="font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:#0ea5e9;text-decoration:none;">Prestige Realty</a>
|
||||
<div style="display:flex;align-items:center;gap:32px;">
|
||||
<a href="listings.html" style="color:#0ea5e9;text-decoration:none;font-size:15px;font-weight:600;">Listings</a>
|
||||
<a href="about.html" style="color:#f8fafc;text-decoration:none;font-size:15px;font-weight:500;">About Us</a>
|
||||
<a href="contact.html" style="color:#f8fafc;text-decoration:none;font-size:15px;font-weight:500;">Contact</a>
|
||||
<span style="color:#0ea5e9;font-size:15px;font-weight:600;">(555) 123-4567</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Page Header -->
|
||||
<section style="background-color:#0f172a;padding:64px 48px;text-align:center;font-family:'Inter',sans-serif;">
|
||||
<h1 style="font-family:'Montserrat',sans-serif;font-size:44px;font-weight:800;color:#ffffff;margin:0 0 12px;">Our Properties</h1>
|
||||
<p style="font-size:18px;color:#94a3b8;margin:0;">Browse our curated selection of homes, apartments, and commercial spaces</p>
|
||||
</section>
|
||||
|
||||
<!-- Filter Bar -->
|
||||
<section style="background-color:#ffffff;padding:24px 48px;border-bottom:1px solid #e2e8f0;font-family:'Inter',sans-serif;">
|
||||
<div style="display:flex;justify-content:center;gap:12px;flex-wrap:wrap;">
|
||||
<span style="display:inline-block;padding:10px 24px;background-color:#0ea5e9;color:#ffffff;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;">All</span>
|
||||
<span style="display:inline-block;padding:10px 24px;background-color:#f1f5f9;color:#475569;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;">Houses</span>
|
||||
<span style="display:inline-block;padding:10px 24px;background-color:#f1f5f9;color:#475569;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;">Apartments</span>
|
||||
<span style="display:inline-block;padding:10px 24px;background-color:#f1f5f9;color:#475569;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;">Commercial</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Property Grid -->
|
||||
<section style="background-color:#f8fafc;padding:64px 48px;font-family:'Inter',sans-serif;">
|
||||
<div style="display:flex;flex-wrap:wrap;gap:24px;max-width:1100px;margin:0 auto;justify-content:center;">
|
||||
<!-- Property 1 -->
|
||||
<div style="background-color:#ffffff;border-radius:12px;overflow:hidden;width:340px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
|
||||
<img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=680" style="width:100%;height:220px;object-fit:cover;display:block;" alt="Modern family home" />
|
||||
<div style="padding:20px;">
|
||||
<div style="font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:#0ea5e9;margin-bottom:4px;">$750,000</div>
|
||||
<div style="font-size:16px;font-weight:600;color:#0f172a;margin-bottom:8px;">Modern Family Home</div>
|
||||
<div style="display:flex;gap:16px;font-size:13px;color:#64748b;margin-bottom:8px;">
|
||||
<span>4 Beds</span><span>3 Baths</span><span>2,800 sqft</span>
|
||||
</div>
|
||||
<div style="font-size:13px;color:#94a3b8;margin-bottom:16px;">Westwood, Los Angeles, CA</div>
|
||||
<a href="#" style="color:#0ea5e9;text-decoration:none;font-size:14px;font-weight:600;">View Details →</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Property 2 -->
|
||||
<div style="background-color:#ffffff;border-radius:12px;overflow:hidden;width:340px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
|
||||
<img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=680" style="width:100%;height:220px;object-fit:cover;display:block;" alt="Luxury villa" />
|
||||
<div style="padding:20px;">
|
||||
<div style="font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:#0ea5e9;margin-bottom:4px;">$1,250,000</div>
|
||||
<div style="font-size:16px;font-weight:600;color:#0f172a;margin-bottom:8px;">Luxury Villa with Pool</div>
|
||||
<div style="display:flex;gap:16px;font-size:13px;color:#64748b;margin-bottom:8px;">
|
||||
<span>5 Beds</span><span>4 Baths</span><span>4,200 sqft</span>
|
||||
</div>
|
||||
<div style="font-size:13px;color:#94a3b8;margin-bottom:16px;">Beverly Hills, CA</div>
|
||||
<a href="#" style="color:#0ea5e9;text-decoration:none;font-size:14px;font-weight:600;">View Details →</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Property 3 -->
|
||||
<div style="background-color:#ffffff;border-radius:12px;overflow:hidden;width:340px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
|
||||
<img src="https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?w=680" style="width:100%;height:220px;object-fit:cover;display:block;" alt="Downtown condo" />
|
||||
<div style="padding:20px;">
|
||||
<div style="font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:#0ea5e9;margin-bottom:4px;">$425,000</div>
|
||||
<div style="font-size:16px;font-weight:600;color:#0f172a;margin-bottom:8px;">Downtown Penthouse Condo</div>
|
||||
<div style="display:flex;gap:16px;font-size:13px;color:#64748b;margin-bottom:8px;">
|
||||
<span>2 Beds</span><span>2 Baths</span><span>1,400 sqft</span>
|
||||
</div>
|
||||
<div style="font-size:13px;color:#94a3b8;margin-bottom:16px;">Downtown, San Diego, CA</div>
|
||||
<a href="#" style="color:#0ea5e9;text-decoration:none;font-size:14px;font-weight:600;">View Details →</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Property 4 -->
|
||||
<div style="background-color:#ffffff;border-radius:12px;overflow:hidden;width:340px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
|
||||
<img src="https://images.unsplash.com/photo-1600047509807-ba8f99d2cdde?w=680" style="width:100%;height:220px;object-fit:cover;display:block;" alt="Suburban home" />
|
||||
<div style="padding:20px;">
|
||||
<div style="font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:#0ea5e9;margin-bottom:4px;">$580,000</div>
|
||||
<div style="font-size:16px;font-weight:600;color:#0f172a;margin-bottom:8px;">Suburban Family Retreat</div>
|
||||
<div style="display:flex;gap:16px;font-size:13px;color:#64748b;margin-bottom:8px;">
|
||||
<span>3 Beds</span><span>2 Baths</span><span>2,100 sqft</span>
|
||||
</div>
|
||||
<div style="font-size:13px;color:#94a3b8;margin-bottom:16px;">Pasadena, CA</div>
|
||||
<a href="#" style="color:#0ea5e9;text-decoration:none;font-size:14px;font-weight:600;">View Details →</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Property 5 -->
|
||||
<div style="background-color:#ffffff;border-radius:12px;overflow:hidden;width:340px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
|
||||
<img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=680" style="width:100%;height:220px;object-fit:cover;display:block;" alt="Contemporary house" />
|
||||
<div style="padding:20px;">
|
||||
<div style="font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:#0ea5e9;margin-bottom:4px;">$890,000</div>
|
||||
<div style="font-size:16px;font-weight:600;color:#0f172a;margin-bottom:8px;">Contemporary Hillside Home</div>
|
||||
<div style="display:flex;gap:16px;font-size:13px;color:#64748b;margin-bottom:8px;">
|
||||
<span>4 Beds</span><span>3 Baths</span><span>3,100 sqft</span>
|
||||
</div>
|
||||
<div style="font-size:13px;color:#94a3b8;margin-bottom:16px;">Hollywood Hills, CA</div>
|
||||
<a href="#" style="color:#0ea5e9;text-decoration:none;font-size:14px;font-weight:600;">View Details →</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Property 6 -->
|
||||
<div style="background-color:#ffffff;border-radius:12px;overflow:hidden;width:340px;box-shadow:0 2px 12px rgba(0,0,0,0.08);">
|
||||
<img src="https://images.unsplash.com/photo-1600573472550-8090b5e0745e?w=680" style="width:100%;height:220px;object-fit:cover;display:block;" alt="Commercial space" />
|
||||
<div style="padding:20px;">
|
||||
<div style="font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:#0ea5e9;margin-bottom:4px;">$1,800,000</div>
|
||||
<div style="font-size:16px;font-weight:600;color:#0f172a;margin-bottom:8px;">Prime Commercial Space</div>
|
||||
<div style="display:flex;gap:16px;font-size:13px;color:#64748b;margin-bottom:8px;">
|
||||
<span>--</span><span>2 Baths</span><span>5,500 sqft</span>
|
||||
</div>
|
||||
<div style="font-size:13px;color:#94a3b8;margin-bottom:16px;">Santa Monica Blvd, LA</div>
|
||||
<a href="#" style="color:#0ea5e9;text-decoration:none;font-size:14px;font-weight:600;">View Details →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section style="background:linear-gradient(135deg,#0ea5e9,#0369a1);padding:64px 48px;text-align:center;font-family:'Inter',sans-serif;">
|
||||
<h2 style="font-family:'Montserrat',sans-serif;font-size:32px;font-weight:700;color:#ffffff;margin:0 0 12px;">Can't Find What You're Looking For?</h2>
|
||||
<p style="font-size:17px;color:rgba(255,255,255,0.85);margin:0 0 28px;">Our agents have access to exclusive off-market listings. Reach out and we'll find the perfect match.</p>
|
||||
<a href="contact.html" style="display:inline-block;background-color:#ffffff;color:#0ea5e9;padding:14px 36px;border-radius:8px;text-decoration:none;font-weight:700;font-size:16px;">Contact Us</a>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer style="background-color:#0f172a;padding:40px 48px;text-align:center;font-family:'Inter',sans-serif;">
|
||||
<div style="font-family:'Montserrat',sans-serif;font-size:18px;font-weight:700;color:#0ea5e9;margin-bottom:8px;">Prestige Realty</div>
|
||||
<div style="font-size:14px;color:#94a3b8;margin-bottom:8px;">123 Real Estate Blvd, Suite 200, Los Angeles, CA 90001</div>
|
||||
<div style="font-size:13px;color:#64748b;">© 2026 Prestige Realty. All rights reserved.</div>
|
||||
</footer>
|
||||
113
templates/startup-company/contact.html
Normal file
113
templates/startup-company/contact.html
Normal file
@@ -0,0 +1,113 @@
|
||||
<!-- Navigation -->
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background-color:#0f172a;font-family:'Inter',sans-serif;">
|
||||
<a href="home.html" style="font-size:22px;font-weight:700;color:#ffffff;text-decoration:none;letter-spacing:-0.5px;">NovaTech</a>
|
||||
<div style="display:flex;align-items:center;gap:32px;">
|
||||
<a href="product.html" style="color:#cbd5e1;text-decoration:none;font-size:15px;font-weight:500;">Product</a>
|
||||
<a href="team.html" style="color:#cbd5e1;text-decoration:none;font-size:15px;font-weight:500;">Team</a>
|
||||
<a href="contact.html" style="color:#ffffff;text-decoration:none;font-size:15px;font-weight:600;">Contact</a>
|
||||
<a href="#" style="background-color:#6366f1;color:#ffffff;padding:10px 24px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:600;">Get Started</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section style="background-color:#ffffff;padding:96px 48px;font-family:'Inter',sans-serif;">
|
||||
<div style="max-width:1100px;margin:0 auto;display:flex;gap:64px;flex-wrap:wrap;">
|
||||
<!-- Left: Contact Info -->
|
||||
<div style="flex:1;min-width:320px;">
|
||||
<p style="font-size:14px;font-weight:600;color:#6366f1;text-transform:uppercase;letter-spacing:2px;margin:0 0 12px;">Contact Us</p>
|
||||
<h1 style="font-size:42px;font-weight:800;color:#0f172a;line-height:1.15;margin:0 0 20px;letter-spacing:-1px;">Let's Talk</h1>
|
||||
<p style="font-size:16px;color:#64748b;line-height:1.8;margin:0 0 40px;">Have a question about NovaTech? Want a personalized demo? We'd love to hear from you.</p>
|
||||
<div style="display:flex;flex-direction:column;gap:28px;">
|
||||
<div>
|
||||
<h4 style="font-size:14px;font-weight:700;color:#0f172a;margin:0 0 6px;">Email</h4>
|
||||
<a href="mailto:hello@novatech.io" style="font-size:15px;color:#6366f1;text-decoration:none;">hello@novatech.io</a>
|
||||
</div>
|
||||
<div>
|
||||
<h4 style="font-size:14px;font-weight:700;color:#0f172a;margin:0 0 6px;">Headquarters</h4>
|
||||
<p style="font-size:15px;color:#64748b;margin:0;line-height:1.6;">123 Innovation Drive, Suite 400<br />San Francisco, CA 94107</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 style="font-size:14px;font-weight:700;color:#0f172a;margin:0 0 6px;">Follow Us</h4>
|
||||
<div style="display:flex;gap:16px;">
|
||||
<a href="#" style="color:#6366f1;text-decoration:none;font-size:15px;font-weight:500;">Twitter</a>
|
||||
<a href="#" style="color:#6366f1;text-decoration:none;font-size:15px;font-weight:500;">LinkedIn</a>
|
||||
<a href="#" style="color:#6366f1;text-decoration:none;font-size:15px;font-weight:500;">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right: Contact Form -->
|
||||
<div style="flex:1;min-width:320px;background-color:#f8fafc;border-radius:16px;padding:40px;">
|
||||
<form style="display:flex;flex-direction:column;gap:20px;">
|
||||
<div style="display:flex;gap:16px;flex-wrap:wrap;">
|
||||
<div style="flex:1;min-width:140px;">
|
||||
<label style="display:block;font-size:13px;font-weight:600;color:#0f172a;margin-bottom:6px;">Name</label>
|
||||
<input type="text" placeholder="Your name" style="width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;font-family:'Inter',sans-serif;background-color:#ffffff;box-sizing:border-box;" />
|
||||
</div>
|
||||
<div style="flex:1;min-width:140px;">
|
||||
<label style="display:block;font-size:13px;font-weight:600;color:#0f172a;margin-bottom:6px;">Email</label>
|
||||
<input type="email" placeholder="you@company.com" style="width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;font-family:'Inter',sans-serif;background-color:#ffffff;box-sizing:border-box;" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label style="display:block;font-size:13px;font-weight:600;color:#0f172a;margin-bottom:6px;">Company</label>
|
||||
<input type="text" placeholder="Your company" style="width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;font-family:'Inter',sans-serif;background-color:#ffffff;box-sizing:border-box;" />
|
||||
</div>
|
||||
<div>
|
||||
<label style="display:block;font-size:13px;font-weight:600;color:#0f172a;margin-bottom:6px;">Subject</label>
|
||||
<select style="width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;font-family:'Inter',sans-serif;background-color:#ffffff;box-sizing:border-box;color:#64748b;">
|
||||
<option>General Inquiry</option>
|
||||
<option>Request a Demo</option>
|
||||
<option>Pricing Question</option>
|
||||
<option>Technical Support</option>
|
||||
<option>Partnership</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label style="display:block;font-size:13px;font-weight:600;color:#0f172a;margin-bottom:6px;">Message</label>
|
||||
<textarea placeholder="How can we help?" rows="5" style="width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;font-family:'Inter',sans-serif;background-color:#ffffff;resize:vertical;box-sizing:border-box;"></textarea>
|
||||
</div>
|
||||
<button type="submit" style="background-color:#6366f1;color:#ffffff;padding:12px 24px;border:none;border-radius:8px;font-size:15px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;">Send Message</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section style="background-color:#f8fafc;padding:96px 48px;font-family:'Inter',sans-serif;">
|
||||
<div style="max-width:800px;margin:0 auto;">
|
||||
<h2 style="font-size:34px;font-weight:800;color:#0f172a;margin:0 0 48px;text-align:center;letter-spacing:-0.5px;">Frequently Asked Questions</h2>
|
||||
<div style="display:flex;flex-direction:column;gap:24px;">
|
||||
<div style="background-color:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:28px 32px;">
|
||||
<h3 style="font-size:17px;font-weight:700;color:#0f172a;margin:0 0 10px;">What is NovaTech?</h3>
|
||||
<p style="font-size:15px;color:#64748b;line-height:1.7;margin:0;">NovaTech is an AI-powered analytics and automation platform that helps teams turn raw data into actionable insights. We combine real-time dashboards, workflow automation, and 200+ integrations in one unified workspace.</p>
|
||||
</div>
|
||||
<div style="background-color:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:28px 32px;">
|
||||
<h3 style="font-size:17px;font-weight:700;color:#0f172a;margin:0 0 10px;">Is there a free plan?</h3>
|
||||
<p style="font-size:15px;color:#64748b;line-height:1.7;margin:0;">Yes! Our Starter plan is completely free and includes up to 3 dashboards, 1,000 data points per day, and 5 integrations. No credit card required to get started.</p>
|
||||
</div>
|
||||
<div style="background-color:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:28px 32px;">
|
||||
<h3 style="font-size:17px;font-weight:700;color:#0f172a;margin:0 0 10px;">How long does setup take?</h3>
|
||||
<p style="font-size:15px;color:#64748b;line-height:1.7;margin:0;">Most teams are up and running within 15 minutes. Our one-click integrations connect to your existing tools instantly, and our onboarding wizard guides you through creating your first dashboard.</p>
|
||||
</div>
|
||||
<div style="background-color:#ffffff;border:1px solid #e2e8f0;border-radius:12px;padding:28px 32px;">
|
||||
<h3 style="font-size:17px;font-weight:700;color:#0f172a;margin:0 0 10px;">Can I cancel anytime?</h3>
|
||||
<p style="font-size:15px;color:#64748b;line-height:1.7;margin:0;">Absolutely. All paid plans are month-to-month with no long-term contracts. You can upgrade, downgrade, or cancel at any time from your account settings.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer style="background-color:#0f172a;padding:48px;font-family:'Inter',sans-serif;">
|
||||
<div style="max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;">
|
||||
<a href="home.html" style="font-size:18px;font-weight:700;color:#ffffff;letter-spacing:-0.5px;text-decoration:none;">NovaTech</a>
|
||||
<div style="display:flex;gap:28px;">
|
||||
<a href="product.html" style="color:#94a3b8;text-decoration:none;font-size:14px;">Product</a>
|
||||
<a href="team.html" style="color:#94a3b8;text-decoration:none;font-size:14px;">Team</a>
|
||||
<a href="contact.html" style="color:#94a3b8;text-decoration:none;font-size:14px;">Contact</a>
|
||||
<a href="#" style="color:#94a3b8;text-decoration:none;font-size:14px;">Privacy</a>
|
||||
</div>
|
||||
<p style="color:#475569;font-size:13px;margin:0;">© 2026 NovaTech. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
109
templates/startup-company/home.html
Normal file
109
templates/startup-company/home.html
Normal file
@@ -0,0 +1,109 @@
|
||||
<!-- Navigation -->
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background-color:#0f172a;font-family:'Inter',sans-serif;">
|
||||
<a href="#" style="font-size:22px;font-weight:700;color:#ffffff;text-decoration:none;letter-spacing:-0.5px;">NovaTech</a>
|
||||
<div style="display:flex;align-items:center;gap:32px;">
|
||||
<a href="product.html" style="color:#cbd5e1;text-decoration:none;font-size:15px;font-weight:500;">Product</a>
|
||||
<a href="team.html" style="color:#cbd5e1;text-decoration:none;font-size:15px;font-weight:500;">Team</a>
|
||||
<a href="contact.html" style="color:#cbd5e1;text-decoration:none;font-size:15px;font-weight:500;">Contact</a>
|
||||
<a href="#" style="background-color:#6366f1;color:#ffffff;padding:10px 24px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:600;">Get Started</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section style="position:relative;background-color:#0f172a;padding:100px 48px 120px;text-align:center;overflow:hidden;font-family:'Inter',sans-serif;">
|
||||
<div style="position:absolute;top:-80px;left:-80px;width:300px;height:300px;background:radial-gradient(circle,rgba(99,102,241,0.3),transparent 70%);border-radius:50%;"></div>
|
||||
<div style="position:absolute;bottom:-100px;right:-60px;width:400px;height:400px;background:radial-gradient(circle,rgba(99,102,241,0.2),transparent 70%);border-radius:50%;"></div>
|
||||
<div style="position:relative;max-width:800px;margin:0 auto;z-index:1;">
|
||||
<h1 style="font-size:56px;font-weight:800;color:#ffffff;line-height:1.1;margin:0 0 24px;letter-spacing:-1.5px;">Build the Future with AI‑Powered Analytics</h1>
|
||||
<p style="font-size:19px;color:#94a3b8;line-height:1.7;margin:0 0 40px;max-width:600px;margin-left:auto;margin-right:auto;">Transform raw data into actionable insights. NovaTech helps teams make smarter decisions faster with real-time dashboards and intelligent automation.</p>
|
||||
<div style="display:flex;gap:16px;justify-content:center;">
|
||||
<a href="#" style="background-color:#6366f1;color:#ffffff;padding:14px 32px;border-radius:8px;text-decoration:none;font-size:16px;font-weight:600;">Get Started</a>
|
||||
<a href="#" style="border:1px solid #475569;color:#e2e8f0;padding:14px 32px;border-radius:8px;text-decoration:none;font-size:16px;font-weight:600;">See Demo</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Trusted By -->
|
||||
<section style="background-color:#0f172a;border-top:1px solid #1e293b;padding:48px;font-family:'Inter',sans-serif;text-align:center;">
|
||||
<p style="font-size:13px;text-transform:uppercase;letter-spacing:2px;color:#64748b;margin:0 0 32px;font-weight:600;">Trusted by innovative teams worldwide</p>
|
||||
<div style="display:flex;align-items:center;justify-content:center;gap:56px;flex-wrap:wrap;">
|
||||
<span style="font-size:20px;font-weight:700;color:#334155;letter-spacing:-0.5px;">Acme Corp</span>
|
||||
<span style="font-size:20px;font-weight:700;color:#334155;letter-spacing:-0.5px;">Globex</span>
|
||||
<span style="font-size:20px;font-weight:700;color:#334155;letter-spacing:-0.5px;">Initech</span>
|
||||
<span style="font-size:20px;font-weight:700;color:#334155;letter-spacing:-0.5px;">Umbrella</span>
|
||||
<span style="font-size:20px;font-weight:700;color:#334155;letter-spacing:-0.5px;">Stark Ind.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features -->
|
||||
<section style="background-color:#ffffff;padding:96px 48px;font-family:'Inter',sans-serif;">
|
||||
<div style="max-width:1100px;margin:0 auto;text-align:center;">
|
||||
<h2 style="font-size:38px;font-weight:800;color:#0f172a;margin:0 0 16px;letter-spacing:-1px;">Everything you need to grow</h2>
|
||||
<p style="font-size:17px;color:#64748b;margin:0 0 56px;max-width:560px;margin-left:auto;margin-right:auto;">Powerful features designed to help your team move faster and make better decisions.</p>
|
||||
<div style="display:flex;gap:32px;flex-wrap:wrap;justify-content:center;">
|
||||
<div style="flex:1;min-width:280px;max-width:340px;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:40px 32px;text-align:left;">
|
||||
<div style="width:48px;height:48px;background-color:#e0e7ff;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:22px;color:#6366f1;font-weight:700;">●</div>
|
||||
<h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 12px;">Real-time Analytics</h3>
|
||||
<p style="font-size:15px;color:#64748b;line-height:1.7;margin:0;">Monitor your key metrics as they happen. Interactive dashboards update in real time so you never miss a trend.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;max-width:340px;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:40px 32px;text-align:left;">
|
||||
<div style="width:48px;height:48px;background-color:#e0e7ff;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:22px;color:#6366f1;font-weight:700;">⚙</div>
|
||||
<h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 12px;">Smart Automation</h3>
|
||||
<p style="font-size:15px;color:#64748b;line-height:1.7;margin:0;">Automate repetitive tasks with AI-driven workflows. Set triggers, define actions, and let NovaTech handle the rest.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;max-width:340px;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:40px 32px;text-align:left;">
|
||||
<div style="width:48px;height:48px;background-color:#e0e7ff;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:22px;color:#6366f1;font-weight:700;">★</div>
|
||||
<h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 12px;">Team Collaboration</h3>
|
||||
<p style="font-size:15px;color:#64748b;line-height:1.7;margin:0;">Share dashboards, leave comments, and collaborate in real time. Keep your entire team aligned and informed.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- How It Works -->
|
||||
<section style="background-color:#f8fafc;padding:96px 48px;font-family:'Inter',sans-serif;">
|
||||
<div style="max-width:1000px;margin:0 auto;text-align:center;">
|
||||
<h2 style="font-size:38px;font-weight:800;color:#0f172a;margin:0 0 16px;letter-spacing:-1px;">How it works</h2>
|
||||
<p style="font-size:17px;color:#64748b;margin:0 0 56px;">Get started in three simple steps.</p>
|
||||
<div style="display:flex;gap:40px;flex-wrap:wrap;justify-content:center;">
|
||||
<div style="flex:1;min-width:240px;max-width:280px;text-align:center;">
|
||||
<div style="width:56px;height:56px;background-color:#6366f1;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:22px;font-weight:700;color:#ffffff;">1</div>
|
||||
<h3 style="font-size:18px;font-weight:700;color:#0f172a;margin:0 0 8px;">Connect Your Data</h3>
|
||||
<p style="font-size:15px;color:#64748b;line-height:1.6;margin:0;">Integrate with your existing tools in minutes. We support 200+ data sources out of the box.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:240px;max-width:280px;text-align:center;">
|
||||
<div style="width:56px;height:56px;background-color:#6366f1;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:22px;font-weight:700;color:#ffffff;">2</div>
|
||||
<h3 style="font-size:18px;font-weight:700;color:#0f172a;margin:0 0 8px;">Build Dashboards</h3>
|
||||
<p style="font-size:15px;color:#64748b;line-height:1.6;margin:0;">Drag and drop widgets to create custom dashboards. No code required, just point and click.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:240px;max-width:280px;text-align:center;">
|
||||
<div style="width:56px;height:56px;background-color:#6366f1;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:22px;font-weight:700;color:#ffffff;">3</div>
|
||||
<h3 style="font-size:18px;font-weight:700;color:#0f172a;margin:0 0 8px;">Get Insights</h3>
|
||||
<p style="font-size:15px;color:#64748b;line-height:1.6;margin:0;">Our AI surfaces trends and anomalies automatically. Make data-driven decisions with confidence.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section style="padding:96px 48px;font-family:'Inter',sans-serif;background:linear-gradient(135deg,#6366f1,#4338ca);text-align:center;">
|
||||
<div style="max-width:600px;margin:0 auto;">
|
||||
<h2 style="font-size:38px;font-weight:800;color:#ffffff;margin:0 0 16px;letter-spacing:-1px;">Start Your Free Trial</h2>
|
||||
<p style="font-size:17px;color:#c7d2fe;line-height:1.7;margin:0 0 36px;">No credit card required. Get full access for 14 days and see how NovaTech can transform your workflow.</p>
|
||||
<a href="#" style="display:inline-block;background-color:#ffffff;color:#4338ca;padding:14px 36px;border-radius:8px;text-decoration:none;font-size:16px;font-weight:700;">Get Started Free</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer style="background-color:#0f172a;padding:48px;font-family:'Inter',sans-serif;">
|
||||
<div style="max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;">
|
||||
<span style="font-size:18px;font-weight:700;color:#ffffff;letter-spacing:-0.5px;">NovaTech</span>
|
||||
<div style="display:flex;gap:28px;">
|
||||
<a href="product.html" style="color:#94a3b8;text-decoration:none;font-size:14px;">Product</a>
|
||||
<a href="team.html" style="color:#94a3b8;text-decoration:none;font-size:14px;">Team</a>
|
||||
<a href="contact.html" style="color:#94a3b8;text-decoration:none;font-size:14px;">Contact</a>
|
||||
<a href="#" style="color:#94a3b8;text-decoration:none;font-size:14px;">Privacy</a>
|
||||
</div>
|
||||
<p style="color:#475569;font-size:13px;margin:0;">© 2026 NovaTech. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
141
templates/startup-company/product.html
Normal file
141
templates/startup-company/product.html
Normal file
@@ -0,0 +1,141 @@
|
||||
<!-- Navigation -->
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background-color:#0f172a;font-family:'Inter',sans-serif;">
|
||||
<a href="home.html" style="font-size:22px;font-weight:700;color:#ffffff;text-decoration:none;letter-spacing:-0.5px;">NovaTech</a>
|
||||
<div style="display:flex;align-items:center;gap:32px;">
|
||||
<a href="product.html" style="color:#ffffff;text-decoration:none;font-size:15px;font-weight:600;">Product</a>
|
||||
<a href="team.html" style="color:#cbd5e1;text-decoration:none;font-size:15px;font-weight:500;">Team</a>
|
||||
<a href="contact.html" style="color:#cbd5e1;text-decoration:none;font-size:15px;font-weight:500;">Contact</a>
|
||||
<a href="#" style="background-color:#6366f1;color:#ffffff;padding:10px 24px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:600;">Get Started</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Product Hero -->
|
||||
<section style="background-color:#0f172a;padding:96px 48px;text-align:center;font-family:'Inter',sans-serif;">
|
||||
<div style="max-width:720px;margin:0 auto;">
|
||||
<p style="font-size:14px;font-weight:600;color:#6366f1;text-transform:uppercase;letter-spacing:2px;margin:0 0 16px;">Product</p>
|
||||
<h1 style="font-size:52px;font-weight:800;color:#ffffff;line-height:1.1;margin:0 0 24px;letter-spacing:-1.5px;">One Platform. Endless Possibilities.</h1>
|
||||
<p style="font-size:18px;color:#94a3b8;line-height:1.7;margin:0;">From analytics to automation, NovaTech brings all your data tools together in one intuitive workspace.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Feature 1: Analytics Dashboard -->
|
||||
<section style="background-color:#ffffff;padding:96px 48px;font-family:'Inter',sans-serif;">
|
||||
<div style="max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:64px;flex-wrap:wrap;">
|
||||
<div style="flex:1;min-width:320px;">
|
||||
<p style="font-size:13px;font-weight:600;color:#6366f1;text-transform:uppercase;letter-spacing:2px;margin:0 0 12px;">Analytics</p>
|
||||
<h2 style="font-size:34px;font-weight:800;color:#0f172a;margin:0 0 16px;letter-spacing:-0.5px;">Analytics Dashboard</h2>
|
||||
<p style="font-size:16px;color:#64748b;line-height:1.8;margin:0 0 24px;">Visualize your most important metrics in real time. Build custom dashboards with drag-and-drop widgets, set alerts, and share insights with your team instantly.</p>
|
||||
<ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;">
|
||||
<li style="font-size:15px;color:#334155;display:flex;align-items:center;gap:8px;"><span style="color:#6366f1;font-weight:700;">✓</span> Real-time data streaming</li>
|
||||
<li style="font-size:15px;color:#334155;display:flex;align-items:center;gap:8px;"><span style="color:#6366f1;font-weight:700;">✓</span> 50+ chart types</li>
|
||||
<li style="font-size:15px;color:#334155;display:flex;align-items:center;gap:8px;"><span style="color:#6366f1;font-weight:700;">✓</span> Custom KPI tracking</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="flex:1;min-width:320px;">
|
||||
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=400&fit=crop" alt="Analytics Dashboard" style="width:100%;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.1);" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Feature 2: Workflow Automation -->
|
||||
<section style="background-color:#f8fafc;padding:96px 48px;font-family:'Inter',sans-serif;">
|
||||
<div style="max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:64px;flex-wrap:wrap;flex-direction:row-reverse;">
|
||||
<div style="flex:1;min-width:320px;">
|
||||
<p style="font-size:13px;font-weight:600;color:#6366f1;text-transform:uppercase;letter-spacing:2px;margin:0 0 12px;">Automation</p>
|
||||
<h2 style="font-size:34px;font-weight:800;color:#0f172a;margin:0 0 16px;letter-spacing:-0.5px;">Workflow Automation</h2>
|
||||
<p style="font-size:16px;color:#64748b;line-height:1.8;margin:0 0 24px;">Eliminate manual tasks with intelligent automation. Build workflows visually, set conditions and triggers, and let NovaTech run your processes around the clock.</p>
|
||||
<ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;">
|
||||
<li style="font-size:15px;color:#334155;display:flex;align-items:center;gap:8px;"><span style="color:#6366f1;font-weight:700;">✓</span> Visual workflow builder</li>
|
||||
<li style="font-size:15px;color:#334155;display:flex;align-items:center;gap:8px;"><span style="color:#6366f1;font-weight:700;">✓</span> Conditional logic & branching</li>
|
||||
<li style="font-size:15px;color:#334155;display:flex;align-items:center;gap:8px;"><span style="color:#6366f1;font-weight:700;">✓</span> Scheduled & event-based triggers</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="flex:1;min-width:320px;">
|
||||
<img src="https://images.unsplash.com/photo-1518186285589-2f7649de83e0?w=600&h=400&fit=crop" alt="Workflow Automation" style="width:100%;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.1);" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Feature 3: Integrations -->
|
||||
<section style="background-color:#ffffff;padding:96px 48px;font-family:'Inter',sans-serif;">
|
||||
<div style="max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:64px;flex-wrap:wrap;">
|
||||
<div style="flex:1;min-width:320px;">
|
||||
<p style="font-size:13px;font-weight:600;color:#6366f1;text-transform:uppercase;letter-spacing:2px;margin:0 0 12px;">Connect</p>
|
||||
<h2 style="font-size:34px;font-weight:800;color:#0f172a;margin:0 0 16px;letter-spacing:-0.5px;">200+ Integrations</h2>
|
||||
<p style="font-size:16px;color:#64748b;line-height:1.8;margin:0 0 24px;">Connect NovaTech to the tools you already use. From Salesforce to Slack, Google Sheets to PostgreSQL, your data flows seamlessly into one unified platform.</p>
|
||||
<ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;">
|
||||
<li style="font-size:15px;color:#334155;display:flex;align-items:center;gap:8px;"><span style="color:#6366f1;font-weight:700;">✓</span> One-click setup</li>
|
||||
<li style="font-size:15px;color:#334155;display:flex;align-items:center;gap:8px;"><span style="color:#6366f1;font-weight:700;">✓</span> REST API & webhooks</li>
|
||||
<li style="font-size:15px;color:#334155;display:flex;align-items:center;gap:8px;"><span style="color:#6366f1;font-weight:700;">✓</span> Custom data connectors</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="flex:1;min-width:320px;">
|
||||
<img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=600&h=400&fit=crop" alt="Integrations" style="width:100%;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.1);" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pricing -->
|
||||
<section style="background-color:#f8fafc;padding:96px 48px;font-family:'Inter',sans-serif;">
|
||||
<div style="max-width:1100px;margin:0 auto;text-align:center;">
|
||||
<h2 style="font-size:38px;font-weight:800;color:#0f172a;margin:0 0 16px;letter-spacing:-1px;">Simple, transparent pricing</h2>
|
||||
<p style="font-size:17px;color:#64748b;margin:0 0 56px;">Start free and scale as you grow. No hidden fees.</p>
|
||||
<div style="display:flex;gap:24px;flex-wrap:wrap;justify-content:center;align-items:stretch;">
|
||||
<!-- Starter -->
|
||||
<div style="flex:1;min-width:280px;max-width:340px;background-color:#ffffff;border:1px solid #e2e8f0;border-radius:16px;padding:40px 32px;text-align:left;display:flex;flex-direction:column;">
|
||||
<h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 8px;">Starter</h3>
|
||||
<div style="margin-bottom:24px;"><span style="font-size:40px;font-weight:800;color:#0f172a;">Free</span></div>
|
||||
<ul style="list-style:none;padding:0;margin:0 0 32px;display:flex;flex-direction:column;gap:12px;flex-grow:1;">
|
||||
<li style="font-size:14px;color:#64748b;">Up to 3 dashboards</li>
|
||||
<li style="font-size:14px;color:#64748b;">1,000 data points/day</li>
|
||||
<li style="font-size:14px;color:#64748b;">5 integrations</li>
|
||||
<li style="font-size:14px;color:#64748b;">Community support</li>
|
||||
</ul>
|
||||
<a href="#" style="display:block;text-align:center;border:2px solid #6366f1;color:#6366f1;padding:12px 24px;border-radius:8px;text-decoration:none;font-size:15px;font-weight:600;">Get Started</a>
|
||||
</div>
|
||||
<!-- Pro -->
|
||||
<div style="flex:1;min-width:280px;max-width:340px;background-color:#6366f1;border-radius:16px;padding:40px 32px;text-align:left;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(99,102,241,0.3);">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;">
|
||||
<h3 style="font-size:20px;font-weight:700;color:#ffffff;margin:0;">Pro</h3>
|
||||
<span style="background-color:#e0e7ff;color:#4338ca;font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px;">Popular</span>
|
||||
</div>
|
||||
<div style="margin-bottom:24px;"><span style="font-size:40px;font-weight:800;color:#ffffff;">$49</span><span style="font-size:16px;color:#c7d2fe;">/mo</span></div>
|
||||
<ul style="list-style:none;padding:0;margin:0 0 32px;display:flex;flex-direction:column;gap:12px;flex-grow:1;">
|
||||
<li style="font-size:14px;color:#e0e7ff;">Unlimited dashboards</li>
|
||||
<li style="font-size:14px;color:#e0e7ff;">100,000 data points/day</li>
|
||||
<li style="font-size:14px;color:#e0e7ff;">50 integrations</li>
|
||||
<li style="font-size:14px;color:#e0e7ff;">Workflow automation</li>
|
||||
<li style="font-size:14px;color:#e0e7ff;">Priority support</li>
|
||||
</ul>
|
||||
<a href="#" style="display:block;text-align:center;background-color:#ffffff;color:#4338ca;padding:12px 24px;border-radius:8px;text-decoration:none;font-size:15px;font-weight:700;">Start Free Trial</a>
|
||||
</div>
|
||||
<!-- Enterprise -->
|
||||
<div style="flex:1;min-width:280px;max-width:340px;background-color:#ffffff;border:1px solid #e2e8f0;border-radius:16px;padding:40px 32px;text-align:left;display:flex;flex-direction:column;">
|
||||
<h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 8px;">Enterprise</h3>
|
||||
<div style="margin-bottom:24px;"><span style="font-size:40px;font-weight:800;color:#0f172a;">Custom</span></div>
|
||||
<ul style="list-style:none;padding:0;margin:0 0 32px;display:flex;flex-direction:column;gap:12px;flex-grow:1;">
|
||||
<li style="font-size:14px;color:#64748b;">Everything in Pro</li>
|
||||
<li style="font-size:14px;color:#64748b;">Unlimited data points</li>
|
||||
<li style="font-size:14px;color:#64748b;">SSO & SAML</li>
|
||||
<li style="font-size:14px;color:#64748b;">Dedicated account manager</li>
|
||||
<li style="font-size:14px;color:#64748b;">Custom SLA</li>
|
||||
</ul>
|
||||
<a href="#" style="display:block;text-align:center;border:2px solid #6366f1;color:#6366f1;padding:12px 24px;border-radius:8px;text-decoration:none;font-size:15px;font-weight:600;">Contact Sales</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer style="background-color:#0f172a;padding:48px;font-family:'Inter',sans-serif;">
|
||||
<div style="max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;">
|
||||
<a href="home.html" style="font-size:18px;font-weight:700;color:#ffffff;letter-spacing:-0.5px;text-decoration:none;">NovaTech</a>
|
||||
<div style="display:flex;gap:28px;">
|
||||
<a href="product.html" style="color:#94a3b8;text-decoration:none;font-size:14px;">Product</a>
|
||||
<a href="team.html" style="color:#94a3b8;text-decoration:none;font-size:14px;">Team</a>
|
||||
<a href="contact.html" style="color:#94a3b8;text-decoration:none;font-size:14px;">Contact</a>
|
||||
<a href="#" style="color:#94a3b8;text-decoration:none;font-size:14px;">Privacy</a>
|
||||
</div>
|
||||
<p style="color:#475569;font-size:13px;margin:0;">© 2026 NovaTech. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
115
templates/startup-company/team.html
Normal file
115
templates/startup-company/team.html
Normal file
@@ -0,0 +1,115 @@
|
||||
<!-- Navigation -->
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background-color:#0f172a;font-family:'Inter',sans-serif;">
|
||||
<a href="home.html" style="font-size:22px;font-weight:700;color:#ffffff;text-decoration:none;letter-spacing:-0.5px;">NovaTech</a>
|
||||
<div style="display:flex;align-items:center;gap:32px;">
|
||||
<a href="product.html" style="color:#cbd5e1;text-decoration:none;font-size:15px;font-weight:500;">Product</a>
|
||||
<a href="team.html" style="color:#ffffff;text-decoration:none;font-size:15px;font-weight:600;">Team</a>
|
||||
<a href="contact.html" style="color:#cbd5e1;text-decoration:none;font-size:15px;font-weight:500;">Contact</a>
|
||||
<a href="#" style="background-color:#6366f1;color:#ffffff;padding:10px 24px;border-radius:8px;text-decoration:none;font-size:14px;font-weight:600;">Get Started</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Page Header -->
|
||||
<section style="background-color:#0f172a;padding:96px 48px;text-align:center;font-family:'Inter',sans-serif;">
|
||||
<div style="max-width:640px;margin:0 auto;">
|
||||
<p style="font-size:14px;font-weight:600;color:#6366f1;text-transform:uppercase;letter-spacing:2px;margin:0 0 16px;">Our Team</p>
|
||||
<h1 style="font-size:48px;font-weight:800;color:#ffffff;line-height:1.15;margin:0 0 20px;letter-spacing:-1.5px;">Meet Our Team</h1>
|
||||
<p style="font-size:18px;color:#94a3b8;line-height:1.7;margin:0;">The people behind NovaTech who are passionate about building tools that help teams thrive.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Team Grid -->
|
||||
<section style="background-color:#ffffff;padding:96px 48px;font-family:'Inter',sans-serif;">
|
||||
<div style="max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:32px;justify-content:center;">
|
||||
<!-- Member 1 -->
|
||||
<div style="flex:1;min-width:300px;max-width:340px;text-align:center;">
|
||||
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=400&h=400&fit=crop&crop=face" alt="Alex Chen" style="width:160px;height:160px;border-radius:50%;object-fit:cover;margin-bottom:20px;" />
|
||||
<h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 4px;">Alex Chen</h3>
|
||||
<p style="font-size:14px;font-weight:600;color:#6366f1;margin:0 0 12px;">CEO & Co-Founder</p>
|
||||
<p style="font-size:14px;color:#64748b;line-height:1.7;margin:0;">Former VP of Engineering at DataCo. 15 years building analytics platforms at scale.</p>
|
||||
</div>
|
||||
<!-- Member 2 -->
|
||||
<div style="flex:1;min-width:300px;max-width:340px;text-align:center;">
|
||||
<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=400&h=400&fit=crop&crop=face" alt="Sarah Mitchell" style="width:160px;height:160px;border-radius:50%;object-fit:cover;margin-bottom:20px;" />
|
||||
<h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 4px;">Sarah Mitchell</h3>
|
||||
<p style="font-size:14px;font-weight:600;color:#6366f1;margin:0 0 12px;">CTO & Co-Founder</p>
|
||||
<p style="font-size:14px;color:#64748b;line-height:1.7;margin:0;">PhD in Machine Learning from Stanford. Led AI research at two Fortune 500 companies.</p>
|
||||
</div>
|
||||
<!-- Member 3 -->
|
||||
<div style="flex:1;min-width:300px;max-width:340px;text-align:center;">
|
||||
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=face" alt="James Park" style="width:160px;height:160px;border-radius:50%;object-fit:cover;margin-bottom:20px;" />
|
||||
<h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 4px;">James Park</h3>
|
||||
<p style="font-size:14px;font-weight:600;color:#6366f1;margin:0 0 12px;">Head of Design</p>
|
||||
<p style="font-size:14px;color:#64748b;line-height:1.7;margin:0;">Design lead with 10 years of experience crafting intuitive B2B products users love.</p>
|
||||
</div>
|
||||
<!-- Member 4 -->
|
||||
<div style="flex:1;min-width:300px;max-width:340px;text-align:center;">
|
||||
<img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&h=400&fit=crop&crop=face" alt="Maria Rodriguez" style="width:160px;height:160px;border-radius:50%;object-fit:cover;margin-bottom:20px;" />
|
||||
<h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 4px;">Maria Rodriguez</h3>
|
||||
<p style="font-size:14px;font-weight:600;color:#6366f1;margin:0 0 12px;">VP of Engineering</p>
|
||||
<p style="font-size:14px;color:#64748b;line-height:1.7;margin:0;">Full-stack engineer turned leader. Scaled infrastructure at three hypergrowth startups.</p>
|
||||
</div>
|
||||
<!-- Member 5 -->
|
||||
<div style="flex:1;min-width:300px;max-width:340px;text-align:center;">
|
||||
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=face" alt="David Kim" style="width:160px;height:160px;border-radius:50%;object-fit:cover;margin-bottom:20px;" />
|
||||
<h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 4px;">David Kim</h3>
|
||||
<p style="font-size:14px;font-weight:600;color:#6366f1;margin:0 0 12px;">Head of Sales</p>
|
||||
<p style="font-size:14px;color:#64748b;line-height:1.7;margin:0;">Built sales teams from zero to $20M ARR. Passionate about helping customers succeed.</p>
|
||||
</div>
|
||||
<!-- Member 6 -->
|
||||
<div style="flex:1;min-width:300px;max-width:340px;text-align:center;">
|
||||
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=face" alt="Emily Watson" style="width:160px;height:160px;border-radius:50%;object-fit:cover;margin-bottom:20px;" />
|
||||
<h3 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 4px;">Emily Watson</h3>
|
||||
<p style="font-size:14px;font-weight:600;color:#6366f1;margin:0 0 12px;">Head of Customer Success</p>
|
||||
<p style="font-size:14px;color:#64748b;line-height:1.7;margin:0;">Customer advocate with a track record of 98% retention rates and NPS scores above 70.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Culture Section -->
|
||||
<section style="background-color:#f8fafc;padding:96px 48px;font-family:'Inter',sans-serif;">
|
||||
<div style="max-width:800px;margin:0 auto;text-align:center;">
|
||||
<h2 style="font-size:34px;font-weight:800;color:#0f172a;margin:0 0 20px;letter-spacing:-0.5px;">Our Culture & Values</h2>
|
||||
<p style="font-size:17px;color:#64748b;line-height:1.8;margin:0 0 40px;">We believe great products come from great teams. At NovaTech, we foster an environment of transparency, continuous learning, and bold experimentation. Every voice matters, and we celebrate both wins and thoughtful failures.</p>
|
||||
<div style="display:flex;gap:32px;flex-wrap:wrap;justify-content:center;">
|
||||
<div style="flex:1;min-width:200px;max-width:220px;text-align:center;">
|
||||
<div style="width:48px;height:48px;background-color:#e0e7ff;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:20px;color:#6366f1;font-weight:700;">♡</div>
|
||||
<h4 style="font-size:16px;font-weight:700;color:#0f172a;margin:0 0 4px;">Transparency</h4>
|
||||
<p style="font-size:13px;color:#64748b;margin:0;">Open books, open doors, open minds.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:200px;max-width:220px;text-align:center;">
|
||||
<div style="width:48px;height:48px;background-color:#e0e7ff;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:20px;color:#6366f1;font-weight:700;">⚛</div>
|
||||
<h4 style="font-size:16px;font-weight:700;color:#0f172a;margin:0 0 4px;">Innovation</h4>
|
||||
<p style="font-size:13px;color:#64748b;margin:0;">Ship fast, learn faster.</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:200px;max-width:220px;text-align:center;">
|
||||
<div style="width:48px;height:48px;background-color:#e0e7ff;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:20px;color:#6366f1;font-weight:700;">☆</div>
|
||||
<h4 style="font-size:16px;font-weight:700;color:#0f172a;margin:0 0 4px;">Excellence</h4>
|
||||
<p style="font-size:13px;color:#64748b;margin:0;">Raise the bar, every day.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Careers CTA -->
|
||||
<section style="padding:96px 48px;font-family:'Inter',sans-serif;background:linear-gradient(135deg,#6366f1,#4338ca);text-align:center;">
|
||||
<div style="max-width:600px;margin:0 auto;">
|
||||
<h2 style="font-size:38px;font-weight:800;color:#ffffff;margin:0 0 16px;letter-spacing:-1px;">Join Our Team</h2>
|
||||
<p style="font-size:17px;color:#c7d2fe;line-height:1.7;margin:0 0 36px;">We're always looking for talented people who share our passion for great products. Check out our open roles or drop us a line.</p>
|
||||
<a href="mailto:careers@novatech.io" style="display:inline-block;background-color:#ffffff;color:#4338ca;padding:14px 36px;border-radius:8px;text-decoration:none;font-size:16px;font-weight:700;">View Open Positions</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer style="background-color:#0f172a;padding:48px;font-family:'Inter',sans-serif;">
|
||||
<div style="max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;">
|
||||
<a href="home.html" style="font-size:18px;font-weight:700;color:#ffffff;letter-spacing:-0.5px;text-decoration:none;">NovaTech</a>
|
||||
<div style="display:flex;gap:28px;">
|
||||
<a href="product.html" style="color:#94a3b8;text-decoration:none;font-size:14px;">Product</a>
|
||||
<a href="team.html" style="color:#94a3b8;text-decoration:none;font-size:14px;">Team</a>
|
||||
<a href="contact.html" style="color:#94a3b8;text-decoration:none;font-size:14px;">Contact</a>
|
||||
<a href="#" style="color:#94a3b8;text-decoration:none;font-size:14px;">Privacy</a>
|
||||
</div>
|
||||
<p style="color:#475569;font-size:13px;margin:0;">© 2026 NovaTech. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
27
templates/thumbnails/fitness-gym.svg
Normal file
27
templates/thumbnails/fitness-gym.svg
Normal file
@@ -0,0 +1,27 @@
|
||||
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="bg-fitness" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#18181b"/>
|
||||
<stop offset="100%" style="stop-color:#2d1010"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="400" height="260" rx="12" fill="url(#bg-fitness)"/>
|
||||
<!-- Nav bar -->
|
||||
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.4)"/>
|
||||
<rect x="12" y="10" width="70" height="12" rx="3" fill="#ef4444" opacity="0.9"/>
|
||||
<rect x="310" y="8" width="70" height="16" rx="4" fill="#ef4444"/>
|
||||
<!-- Hero text -->
|
||||
<rect x="40" y="58" width="240" height="20" rx="4" fill="rgba(255,255,255,0.95)"/>
|
||||
<rect x="40" y="86" width="180" height="8" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<!-- CTA -->
|
||||
<rect x="40" y="108" width="110" height="26" rx="5" fill="#ef4444"/>
|
||||
<!-- Class cards -->
|
||||
<rect x="30" y="150" width="80" height="50" rx="6" fill="rgba(239,68,68,0.1)" stroke="#ef4444" stroke-width="0.5" opacity="0.6"/>
|
||||
<rect x="120" y="150" width="80" height="50" rx="6" fill="rgba(239,68,68,0.1)" stroke="#ef4444" stroke-width="0.5" opacity="0.6"/>
|
||||
<rect x="210" y="150" width="80" height="50" rx="6" fill="rgba(239,68,68,0.1)" stroke="#ef4444" stroke-width="0.5" opacity="0.6"/>
|
||||
<rect x="300" y="150" width="80" height="50" rx="6" fill="rgba(239,68,68,0.1)" stroke="#ef4444" stroke-width="0.5" opacity="0.6"/>
|
||||
<!-- Pricing -->
|
||||
<rect x="60" y="215" width="80" height="30" rx="4" fill="rgba(255,255,255,0.05)"/>
|
||||
<rect x="160" y="210" width="80" height="35" rx="4" fill="rgba(239,68,68,0.2)" stroke="#ef4444" stroke-width="0.5"/>
|
||||
<rect x="260" y="215" width="80" height="30" rx="4" fill="rgba(255,255,255,0.05)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
28
templates/thumbnails/nonprofit-charity.svg
Normal file
28
templates/thumbnails/nonprofit-charity.svg
Normal file
@@ -0,0 +1,28 @@
|
||||
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="bg-nonprofit" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1e293b"/>
|
||||
<stop offset="100%" style="stop-color:#14532d"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="400" height="260" rx="12" fill="url(#bg-nonprofit)"/>
|
||||
<!-- Nav bar -->
|
||||
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.3)"/>
|
||||
<rect x="12" y="10" width="80" height="12" rx="3" fill="#16a34a" opacity="0.8"/>
|
||||
<rect x="310" y="8" width="70" height="16" rx="4" fill="#16a34a"/>
|
||||
<!-- Hero text -->
|
||||
<rect x="60" y="60" width="280" height="18" rx="4" fill="rgba(255,255,255,0.9)"/>
|
||||
<rect x="90" y="86" width="220" height="8" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<!-- CTA buttons -->
|
||||
<rect x="120" y="108" width="80" height="22" rx="5" fill="#16a34a"/>
|
||||
<rect x="210" y="108" width="70" height="22" rx="5" fill="rgba(255,255,255,0.1)"/>
|
||||
<!-- Impact stats -->
|
||||
<rect x="30" y="148" width="75" height="40" rx="4" fill="rgba(22,163,74,0.15)"/>
|
||||
<rect x="115" y="148" width="75" height="40" rx="4" fill="rgba(22,163,74,0.15)"/>
|
||||
<rect x="200" y="148" width="75" height="40" rx="4" fill="rgba(22,163,74,0.15)"/>
|
||||
<rect x="285" y="148" width="75" height="40" rx="4" fill="rgba(22,163,74,0.15)"/>
|
||||
<!-- Help cards -->
|
||||
<rect x="40" y="205" width="100" height="35" rx="6" fill="rgba(255,255,255,0.06)"/>
|
||||
<rect x="150" y="205" width="100" height="35" rx="6" fill="rgba(255,255,255,0.06)"/>
|
||||
<rect x="260" y="205" width="100" height="35" rx="6" fill="rgba(255,255,255,0.06)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
30
templates/thumbnails/online-course.svg
Normal file
30
templates/thumbnails/online-course.svg
Normal file
@@ -0,0 +1,30 @@
|
||||
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="bg-course" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0f172a"/>
|
||||
<stop offset="100%" style="stop-color:#3b1f7e"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="400" height="260" rx="12" fill="url(#bg-course)"/>
|
||||
<!-- Nav bar -->
|
||||
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.3)"/>
|
||||
<rect x="12" y="10" width="60" height="12" rx="3" fill="#8b5cf6" opacity="0.8"/>
|
||||
<rect x="310" y="8" width="70" height="16" rx="4" fill="#8b5cf6"/>
|
||||
<!-- Hero text -->
|
||||
<rect x="50" y="58" width="220" height="18" rx="4" fill="rgba(255,255,255,0.9)"/>
|
||||
<rect x="50" y="84" width="180" height="8" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<!-- Stats -->
|
||||
<rect x="50" y="104" width="60" height="10" rx="3" fill="rgba(139,92,246,0.4)"/>
|
||||
<rect x="120" y="104" width="60" height="10" rx="3" fill="rgba(139,92,246,0.4)"/>
|
||||
<rect x="190" y="104" width="60" height="10" rx="3" fill="rgba(139,92,246,0.4)"/>
|
||||
<!-- Curriculum items -->
|
||||
<rect x="30" y="130" width="160" height="20" rx="4" fill="rgba(255,255,255,0.06)"/>
|
||||
<rect x="30" y="155" width="160" height="20" rx="4" fill="rgba(255,255,255,0.06)"/>
|
||||
<rect x="30" y="180" width="160" height="20" rx="4" fill="rgba(255,255,255,0.06)"/>
|
||||
<!-- Pricing card -->
|
||||
<rect x="220" y="130" width="150" height="100" rx="8" fill="rgba(139,92,246,0.15)" stroke="#8b5cf6" stroke-width="0.5"/>
|
||||
<rect x="250" y="150" width="90" height="14" rx="3" fill="#8b5cf6" opacity="0.6"/>
|
||||
<rect x="255" y="200" width="80" height="20" rx="4" fill="#8b5cf6"/>
|
||||
<!-- Accent circle -->
|
||||
<circle cx="360" cy="60" r="30" fill="#8b5cf6" opacity="0.1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
27
templates/thumbnails/photography-studio.svg
Normal file
27
templates/thumbnails/photography-studio.svg
Normal file
@@ -0,0 +1,27 @@
|
||||
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="bg-photo" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1c1917"/>
|
||||
<stop offset="100%" style="stop-color:#2d2520"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="400" height="260" rx="12" fill="url(#bg-photo)"/>
|
||||
<!-- Nav bar -->
|
||||
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.3)"/>
|
||||
<rect x="12" y="10" width="80" height="12" rx="3" fill="#d4a574" opacity="0.8"/>
|
||||
<rect x="280" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<rect x="330" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<!-- Hero text -->
|
||||
<rect x="80" y="60" width="240" height="16" rx="4" fill="rgba(255,255,255,0.85)"/>
|
||||
<rect x="110" y="84" width="180" height="8" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<!-- CTA -->
|
||||
<rect x="150" y="104" width="100" height="24" rx="5" fill="#d4a574"/>
|
||||
<!-- Gallery grid -->
|
||||
<rect x="30" y="145" width="108" height="80" rx="4" fill="rgba(212,165,116,0.15)"/>
|
||||
<rect x="146" y="145" width="108" height="80" rx="4" fill="rgba(212,165,116,0.1)"/>
|
||||
<rect x="262" y="145" width="108" height="80" rx="4" fill="rgba(212,165,116,0.15)"/>
|
||||
<!-- Image placeholders inside gallery -->
|
||||
<rect x="38" y="153" width="92" height="52" rx="3" fill="rgba(212,165,116,0.2)"/>
|
||||
<rect x="154" y="153" width="92" height="52" rx="3" fill="rgba(212,165,116,0.25)"/>
|
||||
<rect x="270" y="153" width="92" height="52" rx="3" fill="rgba(212,165,116,0.2)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
31
templates/thumbnails/real-estate.svg
Normal file
31
templates/thumbnails/real-estate.svg
Normal file
@@ -0,0 +1,31 @@
|
||||
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="bg-realestate" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0f172a"/>
|
||||
<stop offset="100%" style="stop-color:#0c3547"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="400" height="260" rx="12" fill="url(#bg-realestate)"/>
|
||||
<!-- Nav bar -->
|
||||
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.3)"/>
|
||||
<rect x="12" y="10" width="80" height="12" rx="3" fill="#0ea5e9" opacity="0.8"/>
|
||||
<rect x="280" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<rect x="330" y="10" width="50" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<!-- Hero text -->
|
||||
<rect x="60" y="55" width="200" height="18" rx="4" fill="rgba(255,255,255,0.9)"/>
|
||||
<rect x="80" y="80" width="160" height="8" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<!-- Search bar -->
|
||||
<rect x="80" y="100" width="240" height="28" rx="6" fill="rgba(255,255,255,0.1)" stroke="rgba(14,165,233,0.3)" stroke-width="1"/>
|
||||
<rect x="260" y="104" width="54" height="20" rx="4" fill="#0ea5e9"/>
|
||||
<!-- Property cards -->
|
||||
<rect x="30" y="148" width="108" height="90" rx="6" fill="rgba(255,255,255,0.06)"/>
|
||||
<rect x="30" y="148" width="108" height="50" rx="6" fill="rgba(14,165,233,0.12)"/>
|
||||
<rect x="146" y="148" width="108" height="90" rx="6" fill="rgba(255,255,255,0.06)"/>
|
||||
<rect x="146" y="148" width="108" height="50" rx="6" fill="rgba(14,165,233,0.1)"/>
|
||||
<rect x="262" y="148" width="108" height="90" rx="6" fill="rgba(255,255,255,0.06)"/>
|
||||
<rect x="262" y="148" width="108" height="50" rx="6" fill="rgba(14,165,233,0.12)"/>
|
||||
<!-- Price tags -->
|
||||
<rect x="38" y="208" width="50" height="10" rx="3" fill="#0ea5e9" opacity="0.7"/>
|
||||
<rect x="154" y="208" width="50" height="10" rx="3" fill="#0ea5e9" opacity="0.7"/>
|
||||
<rect x="270" y="208" width="50" height="10" rx="3" fill="#0ea5e9" opacity="0.7"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
31
templates/thumbnails/startup-company.svg
Normal file
31
templates/thumbnails/startup-company.svg
Normal file
@@ -0,0 +1,31 @@
|
||||
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="bg-startup" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0f172a"/>
|
||||
<stop offset="100%" style="stop-color:#312e81"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="400" height="260" rx="12" fill="url(#bg-startup)"/>
|
||||
<!-- Nav bar -->
|
||||
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.3)"/>
|
||||
<rect x="12" y="10" width="65" height="12" rx="3" fill="#6366f1" opacity="0.8"/>
|
||||
<rect x="310" y="8" width="70" height="16" rx="4" fill="#6366f1"/>
|
||||
<!-- Hero text -->
|
||||
<rect x="40" y="58" width="240" height="18" rx="4" fill="rgba(255,255,255,0.9)"/>
|
||||
<rect x="40" y="84" width="200" height="8" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<rect x="40" y="98" width="160" height="8" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<!-- CTA buttons -->
|
||||
<rect x="40" y="120" width="90" height="24" rx="5" fill="#6366f1"/>
|
||||
<rect x="140" y="120" width="80" height="24" rx="5" fill="rgba(255,255,255,0.1)"/>
|
||||
<!-- Decorative circle -->
|
||||
<circle cx="340" cy="85" r="45" fill="#6366f1" opacity="0.1"/>
|
||||
<circle cx="350" cy="75" r="25" fill="#818cf8" opacity="0.08"/>
|
||||
<!-- Feature cards -->
|
||||
<rect x="40" y="165" width="100" height="70" rx="6" fill="rgba(99,102,241,0.1)"/>
|
||||
<rect x="150" y="165" width="100" height="70" rx="6" fill="rgba(99,102,241,0.1)"/>
|
||||
<rect x="260" y="165" width="100" height="70" rx="6" fill="rgba(99,102,241,0.1)"/>
|
||||
<!-- Feature icons -->
|
||||
<circle cx="90" cy="185" r="8" fill="#6366f1" opacity="0.4"/>
|
||||
<circle cx="200" cy="185" r="8" fill="#6366f1" opacity="0.4"/>
|
||||
<circle cx="310" cy="185" r="8" fill="#6366f1" opacity="0.4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
31
templates/thumbnails/travel-blog.svg
Normal file
31
templates/thumbnails/travel-blog.svg
Normal file
@@ -0,0 +1,31 @@
|
||||
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="bg-travel" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1e293b"/>
|
||||
<stop offset="100%" style="stop-color:#422006"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="400" height="260" rx="12" fill="url(#bg-travel)"/>
|
||||
<!-- Nav bar -->
|
||||
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.3)"/>
|
||||
<rect x="12" y="10" width="90" height="12" rx="3" fill="#f59e0b" opacity="0.8"/>
|
||||
<rect x="280" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<rect x="330" y="10" width="40" height="12" rx="3" fill="rgba(255,255,255,0.2)"/>
|
||||
<!-- Hero with image overlay feel -->
|
||||
<rect x="0" y="32" width="400" height="100" fill="rgba(245,158,11,0.05)"/>
|
||||
<rect x="80" y="55" width="240" height="18" rx="4" fill="rgba(255,255,255,0.9)"/>
|
||||
<rect x="100" y="80" width="200" height="8" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<!-- CTA -->
|
||||
<rect x="150" y="100" width="100" height="22" rx="5" fill="#f59e0b"/>
|
||||
<!-- Blog post cards -->
|
||||
<rect x="25" y="148" width="110" height="90" rx="6" fill="rgba(255,255,255,0.06)"/>
|
||||
<rect x="25" y="148" width="110" height="55" rx="6" fill="rgba(245,158,11,0.12)"/>
|
||||
<rect x="145" y="148" width="110" height="90" rx="6" fill="rgba(255,255,255,0.06)"/>
|
||||
<rect x="145" y="148" width="110" height="55" rx="6" fill="rgba(245,158,11,0.1)"/>
|
||||
<rect x="265" y="148" width="110" height="90" rx="6" fill="rgba(255,255,255,0.06)"/>
|
||||
<rect x="265" y="148" width="110" height="55" rx="6" fill="rgba(245,158,11,0.12)"/>
|
||||
<!-- Post titles -->
|
||||
<rect x="33" y="212" width="70" height="8" rx="2" fill="rgba(255,255,255,0.5)"/>
|
||||
<rect x="153" y="212" width="70" height="8" rx="2" fill="rgba(255,255,255,0.5)"/>
|
||||
<rect x="273" y="212" width="70" height="8" rx="2" fill="rgba(255,255,255,0.5)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
28
templates/thumbnails/wedding-invitation.svg
Normal file
28
templates/thumbnails/wedding-invitation.svg
Normal file
@@ -0,0 +1,28 @@
|
||||
<svg width="400" height="260" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="bg-wedding" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1a1a2e"/>
|
||||
<stop offset="100%" style="stop-color:#2d2348"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="400" height="260" rx="12" fill="url(#bg-wedding)"/>
|
||||
<!-- Nav bar -->
|
||||
<rect x="0" y="0" width="400" height="32" rx="12" fill="rgba(0,0,0,0.3)"/>
|
||||
<rect x="160" y="10" width="80" height="12" rx="3" fill="#d4a574" opacity="0.8"/>
|
||||
<!-- Decorative border -->
|
||||
<rect x="60" y="50" width="280" height="170" rx="8" fill="none" stroke="#d4a574" stroke-width="1" opacity="0.3"/>
|
||||
<!-- Couple names -->
|
||||
<rect x="120" y="75" width="160" height="16" rx="4" fill="#d4a574" opacity="0.9"/>
|
||||
<!-- Ampersand -->
|
||||
<rect x="185" y="98" width="30" height="10" rx="3" fill="rgba(255,255,255,0.3)"/>
|
||||
<!-- Date -->
|
||||
<rect x="140" y="118" width="120" height="8" rx="3" fill="rgba(255,255,255,0.4)"/>
|
||||
<!-- Divider -->
|
||||
<rect x="170" y="135" width="60" height="1" fill="#d4a574" opacity="0.5"/>
|
||||
<!-- Details cards -->
|
||||
<rect x="80" y="148" width="70" height="40" rx="4" fill="rgba(212,165,116,0.1)" stroke="#d4a574" stroke-width="0.5" opacity="0.5"/>
|
||||
<rect x="165" y="148" width="70" height="40" rx="4" fill="rgba(212,165,116,0.1)" stroke="#d4a574" stroke-width="0.5" opacity="0.5"/>
|
||||
<rect x="250" y="148" width="70" height="40" rx="4" fill="rgba(212,165,116,0.1)" stroke="#d4a574" stroke-width="0.5" opacity="0.5"/>
|
||||
<!-- RSVP button -->
|
||||
<rect x="155" y="200" width="90" height="24" rx="5" fill="#d4a574"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
76
templates/travel-blog/about.html
Normal file
76
templates/travel-blog/about.html
Normal file
@@ -0,0 +1,76 @@
|
||||
<!-- Navigation -->
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:18px 48px;background-color:#1e293b;position:sticky;top:0;z-index:100;">
|
||||
<a href="#" style="font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:#f59e0b;text-decoration:none;">Wanderlust Diaries</a>
|
||||
<div style="display:flex;gap:32px;align-items:center;">
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:15px;color:#fffbeb;text-decoration:none;">Destinations</a>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:15px;color:#fffbeb;text-decoration:none;">About</a>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:15px;color:#fffbeb;text-decoration:none;">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- About Hero -->
|
||||
<section style="padding:80px 48px;background-color:#1e293b;">
|
||||
<div style="max-width:900px;margin:0 auto;display:flex;gap:48px;align-items:center;flex-wrap:wrap;">
|
||||
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=500" alt="Maya - Travel Blogger" style="width:300px;height:360px;object-fit:cover;border-radius:12px;flex-shrink:0;" />
|
||||
<div style="flex:1;min-width:280px;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#f59e0b;margin-bottom:12px;">The Blogger</p>
|
||||
<h1 style="font-family:'Playfair Display',serif;font-size:44px;font-weight:700;color:#ffffff;margin-bottom:16px;">About Maya</h1>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#94a3b8;line-height:1.8;">Writer, photographer, and incurable wanderer. I left a desk job in 2021 to see the world and never looked back. This blog is where I share the stories, lessons, and moments that make travel the greatest education.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Story Section -->
|
||||
<section style="padding:80px 48px;background-color:#fffbeb;">
|
||||
<div style="max-width:900px;margin:0 auto;display:flex;gap:56px;align-items:flex-start;flex-wrap:wrap;">
|
||||
<div style="flex:1;min-width:280px;">
|
||||
<h2 style="font-family:'Playfair Display',serif;font-size:36px;font-weight:700;color:#1e293b;margin-bottom:20px;">Hi, I'm Maya!</h2>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#475569;line-height:1.8;margin-bottom:16px;">Five years ago, I was sitting in a corporate office in San Francisco, staring at a spreadsheet and dreaming about the Amalfi Coast. One day I bought a one-way ticket to Rome and the rest became this blog.</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#475569;line-height:1.8;margin-bottom:16px;">I travel slowly, stay with locals when I can, and believe the best meals are always found down side streets. My writing focuses on the human connections that make travel meaningful -- not just the pretty backdrops.</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#475569;line-height:1.8;">Whether it's hitchhiking through Patagonia or learning to cook pad thai in Bangkok, every trip teaches me something new. And I share it all here, honestly and without filters.</p>
|
||||
</div>
|
||||
<div style="flex:0 0 280px;min-width:260px;">
|
||||
<div style="padding:32px;background-color:#ffffff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.08);text-align:center;">
|
||||
<div style="margin-bottom:28px;">
|
||||
<p style="font-family:'Playfair Display',serif;font-size:40px;font-weight:700;color:#f59e0b;margin-bottom:4px;">40+</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#64748b;text-transform:uppercase;letter-spacing:1px;">Countries Visited</p>
|
||||
</div>
|
||||
<div style="margin-bottom:28px;padding-top:28px;border-top:1px solid #f1f5f9;">
|
||||
<p style="font-family:'Playfair Display',serif;font-size:40px;font-weight:700;color:#f59e0b;margin-bottom:4px;">6</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#64748b;text-transform:uppercase;letter-spacing:1px;">Continents</p>
|
||||
</div>
|
||||
<div style="padding-top:28px;border-top:1px solid #f1f5f9;">
|
||||
<p style="font-family:'Playfair Display',serif;font-size:40px;font-weight:700;color:#f59e0b;margin-bottom:4px;">5</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#64748b;text-transform:uppercase;letter-spacing:1px;">Years Blogging</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Travel Philosophy -->
|
||||
<section style="padding:80px 48px;background-color:#ffffff;">
|
||||
<div style="max-width:720px;margin:0 auto;text-align:center;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#f59e0b;margin-bottom:12px;">My Approach</p>
|
||||
<h2 style="font-family:'Playfair Display',serif;font-size:36px;font-weight:700;color:#1e293b;margin-bottom:24px;">Travel Philosophy</h2>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#475569;line-height:1.8;margin-bottom:16px;">I believe travel should be slow, intentional, and respectful. I choose buses over planes when I can, local guesthouses over chains, and street food over tourist menus. The point is not to check boxes -- it's to truly feel a place.</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#475569;line-height:1.8;">I also believe in honest storytelling. Not every trip is perfect, and the mishaps often make the best stories. You'll find bug bites and missed trains alongside the sunsets on this blog.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Work With Me CTA -->
|
||||
<section style="padding:80px 48px;background-color:#1e293b;">
|
||||
<div style="max-width:720px;margin:0 auto;text-align:center;">
|
||||
<h2 style="font-family:'Playfair Display',serif;font-size:36px;font-weight:700;color:#ffffff;margin-bottom:16px;">Work With Me</h2>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#94a3b8;line-height:1.8;margin-bottom:12px;">I collaborate with tourism boards, hotels, outdoor brands, and travel companies whose values align with authentic, responsible travel. My audience is 80% women aged 25-40 who are active, curious travelers.</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#94a3b8;line-height:1.8;margin-bottom:36px;">Services include sponsored content, destination features, social media campaigns, and photography partnerships.</p>
|
||||
<a href="#" style="display:inline-block;padding:16px 40px;background-color:#f59e0b;color:#1e293b;font-family:'Inter',sans-serif;font-size:16px;font-weight:600;text-decoration:none;border-radius:6px;">Get in Touch</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer style="padding:48px;background-color:#1e293b;text-align:center;border-top:1px solid #334155;">
|
||||
<p style="font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:#f59e0b;margin-bottom:8px;">Wanderlust Diaries</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#94a3b8;margin-bottom:24px;">Follow the journey. Fuel the wanderlust.</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#64748b;">© 2026 Wanderlust Diaries. All rights reserved.</p>
|
||||
</footer>
|
||||
104
templates/travel-blog/contact.html
Normal file
104
templates/travel-blog/contact.html
Normal file
@@ -0,0 +1,104 @@
|
||||
<!-- Navigation -->
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:18px 48px;background-color:#1e293b;position:sticky;top:0;z-index:100;">
|
||||
<a href="#" style="font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:#f59e0b;text-decoration:none;">Wanderlust Diaries</a>
|
||||
<div style="display:flex;gap:32px;align-items:center;">
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:15px;color:#fffbeb;text-decoration:none;">Destinations</a>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:15px;color:#fffbeb;text-decoration:none;">About</a>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:15px;color:#fffbeb;text-decoration:none;">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Contact Header -->
|
||||
<section style="padding:64px 48px;background-color:#1e293b;text-align:center;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#f59e0b;margin-bottom:12px;">Say Hello</p>
|
||||
<h1 style="font-family:'Playfair Display',serif;font-size:48px;font-weight:700;color:#ffffff;margin-bottom:16px;">Get in Touch</h1>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:17px;color:#94a3b8;max-width:540px;margin:0 auto;">Have a question, collaboration idea, or just want to share your own travel story? I'd love to hear from you.</p>
|
||||
</section>
|
||||
|
||||
<!-- Contact Two-Column -->
|
||||
<section style="padding:80px 48px;background-color:#fffbeb;">
|
||||
<div style="max-width:1000px;margin:0 auto;display:flex;gap:56px;flex-wrap:wrap;">
|
||||
<!-- Left: Contact Info -->
|
||||
<div style="flex:1;min-width:280px;">
|
||||
<h2 style="font-family:'Playfair Display',serif;font-size:28px;font-weight:700;color:#1e293b;margin-bottom:24px;">Contact Info</h2>
|
||||
<div style="margin-bottom:28px;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:6px;">Email</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#1e293b;">maya@wanderlustdiaries.com</p>
|
||||
</div>
|
||||
<div style="margin-bottom:28px;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:6px;">Instagram</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#1e293b;">@wanderlustdiaries</p>
|
||||
</div>
|
||||
<div style="margin-bottom:28px;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:6px;">Twitter / X</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#1e293b;">@mayatravels</p>
|
||||
</div>
|
||||
<div style="margin-bottom:28px;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:6px;">YouTube</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#1e293b;">Wanderlust Diaries</p>
|
||||
</div>
|
||||
<div style="padding:24px;background-color:#ffffff;border-radius:10px;border-left:4px solid #f59e0b;margin-top:32px;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#475569;line-height:1.7;"><strong style="color:#1e293b;">Collaborations:</strong> I'm open to working with travel brands, tourism boards, and outdoor companies. Please include your budget range and timeline in your message.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right: Contact Form -->
|
||||
<div style="flex:1;min-width:320px;">
|
||||
<form style="padding:36px;background-color:#ffffff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.08);">
|
||||
<h3 style="font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:#1e293b;margin-bottom:24px;">Send a Message</h3>
|
||||
<div style="margin-bottom:20px;">
|
||||
<label style="display:block;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:#475569;margin-bottom:6px;">Your Name</label>
|
||||
<input type="text" placeholder="Full name" style="width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:6px;font-family:'Inter',sans-serif;font-size:14px;color:#1e293b;box-sizing:border-box;" />
|
||||
</div>
|
||||
<div style="margin-bottom:20px;">
|
||||
<label style="display:block;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:#475569;margin-bottom:6px;">Email Address</label>
|
||||
<input type="email" placeholder="you@example.com" style="width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:6px;font-family:'Inter',sans-serif;font-size:14px;color:#1e293b;box-sizing:border-box;" />
|
||||
</div>
|
||||
<div style="margin-bottom:20px;">
|
||||
<label style="display:block;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:#475569;margin-bottom:6px;">Subject</label>
|
||||
<select style="width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:6px;font-family:'Inter',sans-serif;font-size:14px;color:#1e293b;background-color:#ffffff;box-sizing:border-box;">
|
||||
<option value="">Select a topic</option>
|
||||
<option value="collaboration">Collaboration</option>
|
||||
<option value="question">Question</option>
|
||||
<option value="feedback">Feedback</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="margin-bottom:24px;">
|
||||
<label style="display:block;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:#475569;margin-bottom:6px;">Message</label>
|
||||
<textarea rows="5" placeholder="Tell me what's on your mind..." style="width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:6px;font-family:'Inter',sans-serif;font-size:14px;color:#1e293b;resize:vertical;box-sizing:border-box;"></textarea>
|
||||
</div>
|
||||
<button type="submit" style="width:100%;padding:14px;background-color:#f59e0b;color:#1e293b;font-family:'Inter',sans-serif;font-size:15px;font-weight:600;border:none;border-radius:6px;cursor:pointer;">Send Message</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section style="padding:80px 48px;background-color:#ffffff;">
|
||||
<div style="max-width:760px;margin:0 auto;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#f59e0b;text-align:center;margin-bottom:8px;">Common Questions</p>
|
||||
<h2 style="font-family:'Playfair Display',serif;font-size:36px;font-weight:700;color:#1e293b;text-align:center;margin-bottom:48px;">FAQ</h2>
|
||||
<!-- Question 1 -->
|
||||
<div style="padding:28px 0;border-bottom:1px solid #e2e8f0;">
|
||||
<h3 style="font-family:'Inter',sans-serif;font-size:17px;font-weight:600;color:#1e293b;margin-bottom:12px;">How do you fund your travels?</h3>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#475569;line-height:1.7;">I earn through a mix of brand partnerships, affiliate links, freelance writing, and photography licensing. I started while still working part-time and transitioned to full-time blogging after two years.</p>
|
||||
</div>
|
||||
<!-- Question 2 -->
|
||||
<div style="padding:28px 0;border-bottom:1px solid #e2e8f0;">
|
||||
<h3 style="font-family:'Inter',sans-serif;font-size:17px;font-weight:600;color:#1e293b;margin-bottom:12px;">Can I use your photos?</h3>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#475569;line-height:1.7;">All photos on this blog are my own work and are copyrighted. If you'd like to license a photo for commercial or editorial use, please reach out with details about your project and intended usage.</p>
|
||||
</div>
|
||||
<!-- Question 3 -->
|
||||
<div style="padding:28px 0;">
|
||||
<h3 style="font-family:'Inter',sans-serif;font-size:17px;font-weight:600;color:#1e293b;margin-bottom:12px;">How far in advance should I reach out for collaborations?</h3>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:15px;color:#475569;line-height:1.7;">Ideally 4-6 weeks before your campaign start date. For destination trips, 2-3 months is best to coordinate schedules and plan content. Reach out early and we can find the right fit together.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer style="padding:48px;background-color:#1e293b;text-align:center;">
|
||||
<p style="font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:#f59e0b;margin-bottom:8px;">Wanderlust Diaries</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#94a3b8;margin-bottom:24px;">Follow the journey. Fuel the wanderlust.</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#64748b;">© 2026 Wanderlust Diaries. All rights reserved.</p>
|
||||
</footer>
|
||||
117
templates/travel-blog/destinations.html
Normal file
117
templates/travel-blog/destinations.html
Normal file
@@ -0,0 +1,117 @@
|
||||
<!-- Navigation -->
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:18px 48px;background-color:#1e293b;position:sticky;top:0;z-index:100;">
|
||||
<a href="#" style="font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:#f59e0b;text-decoration:none;">Wanderlust Diaries</a>
|
||||
<div style="display:flex;gap:32px;align-items:center;">
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:15px;color:#fffbeb;text-decoration:none;">Destinations</a>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:15px;color:#fffbeb;text-decoration:none;">About</a>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:15px;color:#fffbeb;text-decoration:none;">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Page Header -->
|
||||
<section style="padding:80px 48px;background-color:#1e293b;text-align:center;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#f59e0b;margin-bottom:12px;">Explore</p>
|
||||
<h1 style="font-family:'Playfair Display',serif;font-size:52px;font-weight:700;color:#ffffff;margin-bottom:16px;">Destinations</h1>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:18px;color:#94a3b8;max-width:520px;margin:0 auto;">Places that stole our hearts and stories worth telling from every corner of the world.</p>
|
||||
</section>
|
||||
|
||||
<!-- Destination Cards Grid -->
|
||||
<section style="padding:80px 48px;background-color:#fffbeb;">
|
||||
<div style="max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:36px;">
|
||||
<!-- Bali -->
|
||||
<div style="background-color:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08);">
|
||||
<img src="https://images.unsplash.com/photo-1537996194471-e657df975ab4?w=700" alt="Bali" style="width:100%;height:280px;object-fit:cover;display:block;" />
|
||||
<div style="padding:28px;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:6px;">Indonesia</p>
|
||||
<h3 style="font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:#1e293b;margin-bottom:10px;">Bali</h3>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#475569;line-height:1.7;margin-bottom:20px;">Terraced rice paddies, sacred temples, and sunsets that paint the sky in shades of amber. Bali is where the soul comes to breathe.</p>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#f59e0b;text-decoration:none;">Explore →</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Iceland -->
|
||||
<div style="background-color:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08);">
|
||||
<img src="https://images.unsplash.com/photo-1504829857797-ddff29c27927?w=700" alt="Iceland" style="width:100%;height:280px;object-fit:cover;display:block;" />
|
||||
<div style="padding:28px;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:6px;">Nordic</p>
|
||||
<h3 style="font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:#1e293b;margin-bottom:10px;">Iceland</h3>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#475569;line-height:1.7;margin-bottom:20px;">Waterfalls, glaciers, and the northern lights. Iceland is raw, untamed nature at its most dramatic and unforgettable.</p>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#f59e0b;text-decoration:none;">Explore →</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Morocco -->
|
||||
<div style="background-color:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08);">
|
||||
<img src="https://images.unsplash.com/photo-1489749798305-4fea3ae63d43?w=700" alt="Morocco" style="width:100%;height:280px;object-fit:cover;display:block;" />
|
||||
<div style="padding:28px;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:6px;">North Africa</p>
|
||||
<h3 style="font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:#1e293b;margin-bottom:10px;">Morocco</h3>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#475569;line-height:1.7;margin-bottom:20px;">Spice-scented souks, mosaic-tiled riads, and the endless Sahara. Morocco is a feast for every sense you have.</p>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#f59e0b;text-decoration:none;">Explore →</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Japan -->
|
||||
<div style="background-color:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08);">
|
||||
<img src="https://images.unsplash.com/photo-1528360983277-13d401cdc186?w=700" alt="Japan" style="width:100%;height:280px;object-fit:cover;display:block;" />
|
||||
<div style="padding:28px;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:6px;">East Asia</p>
|
||||
<h3 style="font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:#1e293b;margin-bottom:10px;">Japan</h3>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#475569;line-height:1.7;margin-bottom:20px;">Ancient tradition meets neon-lit modernity. From zen gardens to bustling Tokyo streets, Japan never stops surprising.</p>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#f59e0b;text-decoration:none;">Explore →</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Peru -->
|
||||
<div style="background-color:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08);">
|
||||
<img src="https://images.unsplash.com/photo-1526392060635-9d6019884377?w=700" alt="Peru" style="width:100%;height:280px;object-fit:cover;display:block;" />
|
||||
<div style="padding:28px;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:6px;">South America</p>
|
||||
<h3 style="font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:#1e293b;margin-bottom:10px;">Peru</h3>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#475569;line-height:1.7;margin-bottom:20px;">Machu Picchu is only the beginning. Explore the Sacred Valley, rainbow mountains, and one of the world's greatest food scenes.</p>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#f59e0b;text-decoration:none;">Explore →</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Greece -->
|
||||
<div style="background-color:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08);">
|
||||
<img src="https://images.unsplash.com/photo-1533105079780-92b9be482077?w=700" alt="Greece" style="width:100%;height:280px;object-fit:cover;display:block;" />
|
||||
<div style="padding:28px;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:6px;">Europe</p>
|
||||
<h3 style="font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:#1e293b;margin-bottom:10px;">Greece</h3>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#475569;line-height:1.7;margin-bottom:20px;">Crystal-clear Aegean waters, whitewashed villages, and the birthplace of civilization. Greece is timeless beauty personified.</p>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#f59e0b;text-decoration:none;">Explore →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Travel Tips -->
|
||||
<section style="padding:80px 48px;background-color:#1e293b;">
|
||||
<div style="max-width:1100px;margin:0 auto;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#f59e0b;text-align:center;margin-bottom:8px;">Helpful Advice</p>
|
||||
<h2 style="font-family:'Playfair Display',serif;font-size:36px;font-weight:700;color:#ffffff;text-align:center;margin-bottom:48px;">Travel Tips</h2>
|
||||
<div style="display:flex;gap:32px;flex-wrap:wrap;">
|
||||
<!-- Packing -->
|
||||
<div style="flex:1;min-width:260px;padding:36px;background-color:rgba(255,251,235,0.05);border:1px solid #334155;border-radius:12px;text-align:center;">
|
||||
<div style="font-size:36px;margin-bottom:16px;">🎒</div>
|
||||
<h3 style="font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:#fffbeb;margin-bottom:12px;">Packing Smart</h3>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#94a3b8;line-height:1.7;">Roll your clothes, pack versatile layers, and always leave room for souvenirs. One carry-on can take you around the world.</p>
|
||||
</div>
|
||||
<!-- Budget -->
|
||||
<div style="flex:1;min-width:260px;padding:36px;background-color:rgba(255,251,235,0.05);border:1px solid #334155;border-radius:12px;text-align:center;">
|
||||
<div style="font-size:36px;margin-bottom:16px;">💰</div>
|
||||
<h3 style="font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:#fffbeb;margin-bottom:12px;">Budget Travel</h3>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#94a3b8;line-height:1.7;">Eat where the locals eat, travel in shoulder season, and use points wisely. Luxury experiences don't always need a luxury budget.</p>
|
||||
</div>
|
||||
<!-- Safety -->
|
||||
<div style="flex:1;min-width:260px;padding:36px;background-color:rgba(255,251,235,0.05);border:1px solid #334155;border-radius:12px;text-align:center;">
|
||||
<div style="font-size:36px;margin-bottom:16px;">🛡</div>
|
||||
<h3 style="font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:#fffbeb;margin-bottom:12px;">Staying Safe</h3>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#94a3b8;line-height:1.7;">Keep digital copies of documents, share your itinerary with someone at home, and trust your instincts. Preparation is empowerment.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer style="padding:48px;background-color:#1e293b;text-align:center;border-top:1px solid #334155;">
|
||||
<p style="font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:#f59e0b;margin-bottom:8px;">Wanderlust Diaries</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#94a3b8;margin-bottom:24px;">Follow the journey. Fuel the wanderlust.</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#64748b;">© 2026 Wanderlust Diaries. All rights reserved.</p>
|
||||
</footer>
|
||||
93
templates/travel-blog/home.html
Normal file
93
templates/travel-blog/home.html
Normal file
@@ -0,0 +1,93 @@
|
||||
<!-- Navigation -->
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:18px 48px;background-color:#1e293b;position:sticky;top:0;z-index:100;">
|
||||
<a href="#" style="font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:#f59e0b;text-decoration:none;">Wanderlust Diaries</a>
|
||||
<div style="display:flex;gap:32px;align-items:center;">
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:15px;color:#fffbeb;text-decoration:none;">Destinations</a>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:15px;color:#fffbeb;text-decoration:none;">About</a>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:15px;color:#fffbeb;text-decoration:none;">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section style="position:relative;min-height:90vh;display:flex;align-items:center;justify-content:center;background-image:url('https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=1600');background-size:cover;background-position:center;">
|
||||
<div class="bg-overlay" style="position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(30,41,59,0.6);"></div>
|
||||
<div style="position:relative;z-index:1;text-align:center;max-width:800px;padding:40px 24px;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;letter-spacing:3px;text-transform:uppercase;color:#f59e0b;margin-bottom:16px;">Travel Blog & Stories</p>
|
||||
<h1 style="font-family:'Playfair Display',serif;font-size:56px;font-weight:700;color:#ffffff;line-height:1.15;margin-bottom:24px;">Explore the World, One Story at a Time</h1>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:18px;color:#fffbeb;line-height:1.7;margin-bottom:40px;">Personal tales from far-flung corners of the globe, travel tips you can actually use, and photos that will fuel your wanderlust.</p>
|
||||
<a href="#" style="display:inline-block;padding:16px 40px;background-color:#f59e0b;color:#1e293b;font-family:'Inter',sans-serif;font-size:16px;font-weight:600;text-decoration:none;border-radius:6px;">Start Reading</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Posts -->
|
||||
<section style="padding:96px 48px;background-color:#fffbeb;">
|
||||
<div style="max-width:1100px;margin:0 auto;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#f59e0b;text-align:center;margin-bottom:8px;">Latest Stories</p>
|
||||
<h2 style="font-family:'Playfair Display',serif;font-size:40px;font-weight:700;color:#1e293b;text-align:center;margin-bottom:56px;">Featured Posts</h2>
|
||||
<div style="display:flex;gap:32px;flex-wrap:wrap;">
|
||||
<!-- Card 1: Santorini -->
|
||||
<div style="flex:1;min-width:280px;background-color:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08);">
|
||||
<img src="https://images.unsplash.com/photo-1570077188670-e3a8d69ac5ff?w=600" alt="Santorini" style="width:100%;height:240px;object-fit:cover;display:block;" />
|
||||
<div style="padding:28px;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:8px;">Greece</p>
|
||||
<h3 style="font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:#1e293b;margin-bottom:12px;">Santorini Sunsets & Hidden Gems</h3>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#475569;line-height:1.7;margin-bottom:20px;">Beyond the iconic blue domes lies a quieter island waiting to be explored. My week wandering through villages untouched by crowds.</p>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#f59e0b;text-decoration:none;">Read More →</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 2: Kyoto -->
|
||||
<div style="flex:1;min-width:280px;background-color:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08);">
|
||||
<img src="https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?w=600" alt="Kyoto" style="width:100%;height:240px;object-fit:cover;display:block;" />
|
||||
<div style="padding:28px;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:8px;">Japan</p>
|
||||
<h3 style="font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:#1e293b;margin-bottom:12px;">Kyoto in Cherry Blossom Season</h3>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#475569;line-height:1.7;margin-bottom:20px;">Temples draped in pink, quiet tea ceremonies, and the art of slowing down in Japan's ancient capital during its most magical season.</p>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#f59e0b;text-decoration:none;">Read More →</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 3: Patagonia -->
|
||||
<div style="flex:1;min-width:280px;background-color:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08);">
|
||||
<img src="https://images.unsplash.com/photo-1531761535209-180857e963b9?w=600" alt="Patagonia" style="width:100%;height:240px;object-fit:cover;display:block;" />
|
||||
<div style="padding:28px;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#f59e0b;margin-bottom:8px;">Argentina</p>
|
||||
<h3 style="font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:#1e293b;margin-bottom:12px;">Trekking Through Patagonia</h3>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#475569;line-height:1.7;margin-bottom:20px;">Glaciers, granite towers, and endless windswept plains. A 10-day trek through one of the last true wildernesses on Earth.</p>
|
||||
<a href="#" style="font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#f59e0b;text-decoration:none;">Read More →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Newsletter -->
|
||||
<section style="padding:80px 48px;background-color:#1e293b;">
|
||||
<div style="max-width:640px;margin:0 auto;text-align:center;">
|
||||
<h2 style="font-family:'Playfair Display',serif;font-size:36px;font-weight:700;color:#ffffff;margin-bottom:12px;">Join 10,000+ Travelers</h2>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:16px;color:#94a3b8;line-height:1.7;margin-bottom:32px;">Get destination guides, travel tips, and story updates delivered to your inbox every week. No spam, just wanderlust.</p>
|
||||
<div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;">
|
||||
<input type="email" placeholder="Your email address" style="flex:1;min-width:240px;padding:14px 20px;border:2px solid #334155;background-color:#0f172a;color:#fffbeb;font-family:'Inter',sans-serif;font-size:15px;border-radius:6px;outline:none;" />
|
||||
<button style="padding:14px 32px;background-color:#f59e0b;color:#1e293b;font-family:'Inter',sans-serif;font-size:15px;font-weight:600;border:none;border-radius:6px;cursor:pointer;">Subscribe</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Instagram-Style Grid -->
|
||||
<section style="padding:64px 48px;background-color:#fffbeb;">
|
||||
<div style="max-width:1100px;margin:0 auto;">
|
||||
<p style="font-family:'Inter',sans-serif;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#f59e0b;text-align:center;margin-bottom:8px;">@wanderlustdiaries</p>
|
||||
<h2 style="font-family:'Playfair Display',serif;font-size:32px;font-weight:700;color:#1e293b;text-align:center;margin-bottom:40px;">Follow the Journey</h2>
|
||||
<div style="display:flex;gap:16px;flex-wrap:wrap;justify-content:center;">
|
||||
<img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400" alt="Beach" style="width:calc(25% - 12px);min-width:160px;aspect-ratio:1/1;object-fit:cover;border-radius:8px;display:block;" />
|
||||
<img src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?w=400" alt="Mountains" style="width:calc(25% - 12px);min-width:160px;aspect-ratio:1/1;object-fit:cover;border-radius:8px;display:block;" />
|
||||
<img src="https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=400" alt="Market" style="width:calc(25% - 12px);min-width:160px;aspect-ratio:1/1;object-fit:cover;border-radius:8px;display:block;" />
|
||||
<img src="https://images.unsplash.com/photo-1528127269322-539801943592?w=400" alt="Temple" style="width:calc(25% - 12px);min-width:160px;aspect-ratio:1/1;object-fit:cover;border-radius:8px;display:block;" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer style="padding:48px;background-color:#1e293b;text-align:center;">
|
||||
<p style="font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:#f59e0b;margin-bottom:8px;">Wanderlust Diaries</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:14px;color:#94a3b8;margin-bottom:24px;">Follow the journey. Fuel the wanderlust.</p>
|
||||
<p style="font-family:'Inter',sans-serif;font-size:13px;color:#64748b;">© 2026 Wanderlust Diaries. All rights reserved.</p>
|
||||
</footer>
|
||||
161
templates/wedding-invitation.html
Normal file
161
templates/wedding-invitation.html
Normal file
@@ -0,0 +1,161 @@
|
||||
<!-- Navigation -->
|
||||
<nav style="display:flex;align-items:center;justify-content:space-between;padding:20px 60px;background:#1a1a2e;">
|
||||
<div style="font-size:22px;font-weight:700;color:#d4a574;font-family:'Playfair Display',serif;letter-spacing:2px;">S <span style="font-size:16px;color:#d4a574;">&</span> J</div>
|
||||
<div style="display:flex;gap:32px;align-items:center;">
|
||||
<a href="#story" style="color:#e8d5c4;text-decoration:none;font-size:13px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Our Story</a>
|
||||
<a href="#details" style="color:#e8d5c4;text-decoration:none;font-size:13px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">Details</a>
|
||||
<a href="#rsvp" style="display:inline-block;padding:10px 24px;background:#d4a574;color:#1a1a2e;font-size:13px;font-weight:600;text-decoration:none;border-radius:4px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">RSVP</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section style="min-height:100vh;display:flex;align-items:center;justify-content:center;background-image:url('https://images.unsplash.com/photo-1519741497674-611481863552?w=1920');background-size:cover;background-position:center;position:relative;text-align:center;">
|
||||
<div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(26,26,46,0.82);"></div>
|
||||
<div style="position:relative;z-index:1;max-width:700px;padding:40px 20px;">
|
||||
<p style="color:#d4a574;font-size:14px;font-weight:500;margin-bottom:20px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:6px;">Together with their families</p>
|
||||
<h1 style="color:#fef3e2;font-size:72px;font-weight:700;margin-bottom:8px;font-family:'Playfair Display',serif;line-height:1.1;">Sarah <span style="font-size:48px;color:#d4a574;font-style:italic;">&</span> James</h1>
|
||||
<div style="width:80px;height:1px;background:#d4a574;margin:28px auto;"></div>
|
||||
<p style="color:#d4a574;font-size:20px;font-weight:600;margin-bottom:12px;font-family:'Playfair Display',serif;letter-spacing:3px;">June 15, 2026</p>
|
||||
<p style="color:#e8d5c4;font-size:16px;font-family:Inter,sans-serif;letter-spacing:2px;">Rosewood Estate · Napa Valley, California</p>
|
||||
<a href="#rsvp" style="display:inline-block;margin-top:48px;padding:16px 48px;background:#d4a574;color:#1a1a2e;font-size:14px;font-weight:600;text-decoration:none;border-radius:4px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">RSVP Now</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Our Story -->
|
||||
<section id="story" style="padding:100px 20px;background:#fef3e2;">
|
||||
<div style="max-width:1000px;margin:0 auto;">
|
||||
<div style="text-align:center;margin-bottom:60px;">
|
||||
<p style="color:#d4a574;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:4px;">How It All Began</p>
|
||||
<h2 style="font-size:42px;font-weight:700;color:#1a1a2e;font-family:'Playfair Display',serif;">Our Story</h2>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:60px;align-items:flex-start;">
|
||||
<div style="flex:1;min-width:280px;">
|
||||
<img src="https://images.unsplash.com/photo-1522673607200-164d1b6ce486?w=500&h=600&fit=crop" style="width:100%;border-radius:12px;display:block;" alt="Couple together">
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px;padding-top:20px;">
|
||||
<div style="position:relative;padding-left:28px;margin-bottom:36px;border-left:2px solid #d4a574;">
|
||||
<p style="color:#d4a574;font-size:13px;font-weight:700;margin-bottom:6px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">September 2021</p>
|
||||
<h3 style="font-size:20px;font-weight:700;color:#1a1a2e;margin-bottom:8px;font-family:'Playfair Display',serif;">We Met</h3>
|
||||
<p style="color:#5c5470;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">A chance encounter at a friend's dinner party turned into a conversation that lasted until sunrise. We knew something special had begun.</p>
|
||||
</div>
|
||||
<div style="position:relative;padding-left:28px;margin-bottom:36px;border-left:2px solid #d4a574;">
|
||||
<p style="color:#d4a574;font-size:13px;font-weight:700;margin-bottom:6px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">December 2021</p>
|
||||
<h3 style="font-size:20px;font-weight:700;color:#1a1a2e;margin-bottom:8px;font-family:'Playfair Display',serif;">First Date</h3>
|
||||
<p style="color:#5c5470;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">Coffee turned into lunch, lunch turned into dinner. Three restaurants and eight hours later, we were already planning date number two.</p>
|
||||
</div>
|
||||
<div style="position:relative;padding-left:28px;border-left:2px solid #d4a574;">
|
||||
<p style="color:#d4a574;font-size:13px;font-weight:700;margin-bottom:6px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;">March 2025</p>
|
||||
<h3 style="font-size:20px;font-weight:700;color:#1a1a2e;margin-bottom:8px;font-family:'Playfair Display',serif;">The Proposal</h3>
|
||||
<p style="color:#5c5470;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">Under the cherry blossoms in Kyoto, James got down on one knee. Through happy tears, Sarah said yes before he even finished asking.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Venue & Details -->
|
||||
<section id="details" style="padding:100px 20px;background:#1a1a2e;">
|
||||
<div style="max-width:1100px;margin:0 auto;">
|
||||
<div style="text-align:center;margin-bottom:60px;">
|
||||
<p style="color:#d4a574;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:4px;">Join Us On Our Special Day</p>
|
||||
<h2 style="font-size:42px;font-weight:700;color:#fef3e2;font-family:'Playfair Display',serif;">Wedding Details</h2>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:28px;justify-content:center;">
|
||||
<div style="flex:1;min-width:260px;max-width:340px;text-align:center;padding:44px 32px;background:rgba(254,243,226,0.06);border:1px solid rgba(212,165,116,0.2);border-radius:12px;">
|
||||
<div style="font-size:36px;margin-bottom:16px;">♥</div>
|
||||
<h3 style="font-size:22px;font-weight:700;color:#d4a574;margin-bottom:16px;font-family:'Playfair Display',serif;">Ceremony</h3>
|
||||
<p style="color:#fef3e2;font-size:16px;font-weight:600;margin-bottom:8px;font-family:Inter,sans-serif;">3:00 PM</p>
|
||||
<p style="color:#b8b0c8;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">Rosewood Estate Gardens</p>
|
||||
<p style="color:#b8b0c8;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">1240 Vineyard Road</p>
|
||||
<p style="color:#b8b0c8;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">Napa Valley, CA 94558</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:260px;max-width:340px;text-align:center;padding:44px 32px;background:rgba(254,243,226,0.06);border:1px solid rgba(212,165,116,0.2);border-radius:12px;">
|
||||
<div style="font-size:36px;margin-bottom:16px;">★</div>
|
||||
<h3 style="font-size:22px;font-weight:700;color:#d4a574;margin-bottom:16px;font-family:'Playfair Display',serif;">Reception</h3>
|
||||
<p style="color:#fef3e2;font-size:16px;font-weight:600;margin-bottom:8px;font-family:Inter,sans-serif;">5:30 PM</p>
|
||||
<p style="color:#b8b0c8;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">Rosewood Estate Grand Hall</p>
|
||||
<p style="color:#b8b0c8;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">Cocktails, Dinner & Dancing</p>
|
||||
<p style="color:#b8b0c8;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">Open Bar Until Midnight</p>
|
||||
</div>
|
||||
<div style="flex:1;min-width:260px;max-width:340px;text-align:center;padding:44px 32px;background:rgba(254,243,226,0.06);border:1px solid rgba(212,165,116,0.2);border-radius:12px;">
|
||||
<div style="font-size:36px;margin-bottom:16px;">☎</div>
|
||||
<h3 style="font-size:22px;font-weight:700;color:#d4a574;margin-bottom:16px;font-family:'Playfair Display',serif;">Dress Code</h3>
|
||||
<p style="color:#fef3e2;font-size:16px;font-weight:600;margin-bottom:8px;font-family:Inter,sans-serif;">Black Tie Optional</p>
|
||||
<p style="color:#b8b0c8;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">Formal evening attire</p>
|
||||
<p style="color:#b8b0c8;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">The ceremony is outdoors,</p>
|
||||
<p style="color:#b8b0c8;font-size:15px;line-height:1.7;font-family:Inter,sans-serif;">please plan accordingly</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Gallery -->
|
||||
<section style="padding:80px 20px;background:#fef3e2;">
|
||||
<div style="max-width:1100px;margin:0 auto;">
|
||||
<div style="text-align:center;margin-bottom:48px;">
|
||||
<p style="color:#d4a574;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:4px;">Moments We Cherish</p>
|
||||
<h2 style="font-size:42px;font-weight:700;color:#1a1a2e;font-family:'Playfair Display',serif;">Our Gallery</h2>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:16px;justify-content:center;">
|
||||
<img src="https://images.unsplash.com/photo-1529636798458-92182e662485?w=350&h=350&fit=crop" style="width:260px;height:260px;object-fit:cover;border-radius:10px;display:block;" alt="Couple photo">
|
||||
<img src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=350&h=350&fit=crop" style="width:260px;height:260px;object-fit:cover;border-radius:10px;display:block;" alt="Engagement photo">
|
||||
<img src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?w=350&h=350&fit=crop" style="width:260px;height:260px;object-fit:cover;border-radius:10px;display:block;" alt="Together">
|
||||
<img src="https://images.unsplash.com/photo-1465495976277-4387d4b0b4c6?w=350&h=350&fit=crop" style="width:260px;height:260px;object-fit:cover;border-radius:10px;display:block;" alt="Romance">
|
||||
</div>
|
||||
<div style="text-align:center;margin-top:48px;padding:0 20px;">
|
||||
<p style="color:#5c5470;font-size:20px;font-style:italic;line-height:1.8;font-family:'Playfair Display',serif;max-width:600px;margin:0 auto;">"Whatever our souls are made of, his and mine are the same."</p>
|
||||
<p style="color:#d4a574;font-size:14px;margin-top:12px;font-family:Inter,sans-serif;">— Emily Brontë</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- RSVP -->
|
||||
<section id="rsvp" style="padding:100px 20px;background-image:url('https://images.unsplash.com/photo-1478146059778-26028b07395a?w=1920');background-size:cover;background-position:center;position:relative;">
|
||||
<div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(254,243,226,0.94);"></div>
|
||||
<div style="max-width:600px;margin:0 auto;position:relative;z-index:1;">
|
||||
<div style="text-align:center;margin-bottom:48px;">
|
||||
<p style="color:#d4a574;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:4px;">Please Respond By May 1, 2026</p>
|
||||
<h2 style="font-size:42px;font-weight:700;color:#1a1a2e;font-family:'Playfair Display',serif;">RSVP</h2>
|
||||
</div>
|
||||
<form style="display:flex;flex-direction:column;gap:20px;">
|
||||
<div>
|
||||
<label style="display:block;color:#1a1a2e;font-size:13px;font-weight:600;margin-bottom:8px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Full Name</label>
|
||||
<input type="text" placeholder="Your full name" style="width:100%;padding:14px 18px;border:1px solid #d4a574;border-radius:6px;font-size:15px;font-family:Inter,sans-serif;background:#fff;color:#1a1a2e;box-sizing:border-box;">
|
||||
</div>
|
||||
<div>
|
||||
<label style="display:block;color:#1a1a2e;font-size:13px;font-weight:600;margin-bottom:8px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Number of Guests</label>
|
||||
<select style="width:100%;padding:14px 18px;border:1px solid #d4a574;border-radius:6px;font-size:15px;font-family:Inter,sans-serif;background:#fff;color:#1a1a2e;box-sizing:border-box;">
|
||||
<option value="1">1 Guest</option>
|
||||
<option value="2">2 Guests</option>
|
||||
<option value="3">3 Guests</option>
|
||||
<option value="4">4 Guests</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label style="display:block;color:#1a1a2e;font-size:13px;font-weight:600;margin-bottom:12px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Will You Attend?</label>
|
||||
<div style="display:flex;gap:24px;">
|
||||
<label style="display:flex;align-items:center;gap:8px;color:#1a1a2e;font-size:15px;font-family:Inter,sans-serif;cursor:pointer;">
|
||||
<input type="radio" name="attendance" value="yes" style="accent-color:#d4a574;width:18px;height:18px;"> Joyfully Accept
|
||||
</label>
|
||||
<label style="display:flex;align-items:center;gap:8px;color:#1a1a2e;font-size:15px;font-family:Inter,sans-serif;cursor:pointer;">
|
||||
<input type="radio" name="attendance" value="no" style="accent-color:#d4a574;width:18px;height:18px;"> Regretfully Decline
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label style="display:block;color:#1a1a2e;font-size:13px;font-weight:600;margin-bottom:8px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:1px;">Dietary Restrictions</label>
|
||||
<textarea placeholder="Please list any allergies or dietary needs" rows="3" style="width:100%;padding:14px 18px;border:1px solid #d4a574;border-radius:6px;font-size:15px;font-family:Inter,sans-serif;background:#fff;color:#1a1a2e;box-sizing:border-box;resize:vertical;"></textarea>
|
||||
</div>
|
||||
<button type="submit" style="padding:16px 40px;background:#d4a574;color:#1a1a2e;font-size:15px;font-weight:700;border:none;border-radius:6px;font-family:Inter,sans-serif;text-transform:uppercase;letter-spacing:2px;cursor:pointer;margin-top:8px;">Send RSVP</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer style="padding:60px 20px;background:#1a1a2e;text-align:center;">
|
||||
<h3 style="font-size:36px;font-weight:700;color:#fef3e2;margin-bottom:12px;font-family:'Playfair Display',serif;">Sarah <span style="color:#d4a574;font-style:italic;">&</span> James</h3>
|
||||
<p style="color:#d4a574;font-size:16px;font-weight:500;margin-bottom:8px;font-family:'Playfair Display',serif;letter-spacing:2px;">June 15, 2026</p>
|
||||
<div style="width:60px;height:1px;background:#d4a574;margin:20px auto;"></div>
|
||||
<p style="color:#b8b0c8;font-size:15px;margin-bottom:8px;font-family:Inter,sans-serif;">#SarahAndJamesForever</p>
|
||||
<p style="color:#e8d5c4;font-size:16px;font-family:'Playfair Display',serif;font-style:italic;">We can't wait to celebrate with you</p>
|
||||
</footer>
|
||||
Reference in New Issue
Block a user