Prompt
hello chatgpt you are a wordpress website developer i need to create a template for the home page of a wordpress travel website could you provide a prompt that i can use to generate the code for a professional travel website home page desing
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Discover amazing destinations, exciting adventures and unforgettable travel experiences.">
<title>TravelGo - Explore The World</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="tg-header">
<div class="tg-container tg-nav">
<a href="#" class="tg-logo">Travel<span>Go.</span></a>
<button class="tg-menu-toggle" aria-label="Toggle navigation" aria-expanded="false">
<span></span><span></span><span></span>
</button>
<nav class="tg-navigation">
<a href="#home">Home</a>
<a href="#destinations">Destinations</a>
<a href="#packages">Tour Packages</a>
<a href="#categories">Travel Styles</a>
<a href="#blog">Travel Blog</a>
<a href="#about">About Us</a>
<a href="#contact">Contact</a>
</nav>
<div class="tg-nav-actions">
<a href="#contact" class="tg-login">Sign In</a>
<a href="#packages" class="tg-btn tg-btn-primary">Book Now <span>↗</span></a>
</div>
</div>
</header>
<main>
<section class="tg-hero" id="home">
<div class="tg-hero-overlay"></div>
<div class="tg-container tg-hero-content">
<span class="tg-eyebrow">YOUR JOURNEY BEGINS HERE</span>
<h1>Explore The World,<br><em>Create Unforgettable</em><br>Memories</h1>
<p>Discover amazing destinations, exciting adventures, and unforgettable travel experiences.</p>
<a href="#destinations" class="tg-btn tg-btn-white">Explore Destinations <span>→</span></a>
</div>
<div class="tg-container tg-search-wrap">
<form class="tg-search-form" id="travelSearch">
<div class="tg-search-field">
<label for="tg-destination">Destination</label>
<input id="tg-destination" name="destination" type="text" placeholder="Where do you want to go?" required>
</div>
<div class="tg-search-field">
<label for="tg-checkin">Check In</label>
<input id="tg-checkin" name="checkin" type="date" required>
</div>
<div class="tg-search-field">
<label for="tg-checkout">Check Out</label>
<input id="tg-checkout" name="checkout" type="date" required>
</div>
<div class="tg-search-field">
<label for="tg-travelers">Travelers</label>
<select id="tg-travelers" name="travelers">
<option value="1">1 Traveler</option>
<option value="2" selected>2 Travelers</option>
<option value="3">3 Travelers</option>
<option value="4">4 Travelers</option>
<option value="5">5+ Travelers</option>
</select>
</div>
<div class="tg-search-field">
<label for="tg-category">Travel Type</label>
<select id="tg-category" name="category">
<option value="all">All Categories</option>
<option value="adventure">Adventure</option>
<option value="beach">Beach Holiday</option>
<option value="family">Family Trip</option>
<option value="honeymoon">Honeymoon</option>
</select>
</div>
<button type="submit" class="tg-search-button">Search Trips <span>→</span></button>
</form>
</div>
</section>
<section class="tg-section tg-destinations" id="destinations">
<div class="tg-container">
<div class="tg-section-heading">
<div>
<span class="tg-eyebrow tg-dark-eyebrow">EXPLORE THE WORLD</span>
<h2>Popular <em>Destinations</em></h2>
<p>Discover the most beautiful places around the world.</p>
</div>
<a href="#packages" class="tg-text-link">View All Destinations →</a>
</div>
<div class="tg-destination-grid">
<article class="tg-destination-card tg-destination-large">
<img src="https://images.unsplash.com/photo-1537996194471-e657df975ab4?w=1000" alt="Bali tropical destination" loading="lazy">
<div class="tg-destination-info">
<span>Indonesia</span>
<h3>Bali</h3>
<p>Starting from $499</p>
<a href="#packages">Explore Destination →</a>
</div>
</article>
<article class="tg-destination-card">
<img src="https://images.unsplash.com/photo-1511739001486-6bfe10ce785f?w=800" alt="Paris Eiffel Tower" loading="lazy">
<div class="tg-destination-info">
<span>France</span>
<h3>Paris</h3>
<p>Starting from $699</p>
<a href="#packages">Explore Destination →</a>
</div>
</article>
<article class="tg-destination-card">
<img src="https://images.unsplash.com/photo-1512453979798-5ea266f8880c?w=800" alt="Dubai city" loading="lazy">
<div class="tg-destination-info">
<span>United Arab Emirates</span>
<h3>Dubai</h3>
<p>Starting from $399</p>
<a href="#packages">Explore Destination →</a>
</div>
</article>
<article class="tg-destination-card">
<img src="https://images.unsplash.com/photo-1531366936337-7c912a4589a7?w=800" alt="Switzerland mountains" loading="lazy">
<div class="tg-destination-info">
<span>Switzerland</span>
<h3>Swiss Alps</h3>
<p>Starting from $899</p>
<a href="#packages">Explore Destination →</a>
</div>
</article>
<article class="tg-destination-card">
<img src="https://images.unsplash.com/photo-1514282401047-d79a71a590e8?w=800" alt="Maldives beach" loading="lazy">
<div class="tg-destination-info">
<span>Maldives</span>
<h3>Maldives</h3>
<p>Starting from $799</p>
<a href="#packages">Explore Destination →</a>
</div>
</article>
<article class="tg-destination-card">
<img src="https://images.unsplash.com/photo-1598275277521-1885384176e9?w=800" alt="New York city" loading="lazy">
<div class="tg-destination-info">
<span>United States</span>
<h3>New York</h3>
<p>Starting from $999</p>
<a href="#packages">Explore Destination →</a>
</div>
</article>
<article class="tg-destination-card">
<img src="https://images.unsplash.com/photo-1512343879784-a960bf40e7f2?w=800" alt="Goa beach India" loading="lazy">
<div class="tg-destination-info">
<span>India</span>
<h3>Goa</h3>
<p>Starting from $199</p>
<a href="#packages">Explore Destination →</a>
</div>
</article>
</div>
</div>
</section>
<section class="tg-section tg-packages" id="packages">
<div class="tg-container">
<div class="tg-section-heading">
<div>
<span class="tg-eyebrow tg-dark-eyebrow">HANDPICKED FOR YOU</span>
<h2>Featured Tour <em>Packages</em></h2>
<p>Find your perfect getaway with our exclusive travel packages.</p>
</div>
<a href="#contact" class="tg-text-link">View All Packages →</a>
</div>
<div class="tg-package-grid">
<article class="tg-package-card">
<div class="tg-package-image">
<img src="https://images.unsplash.com/photo-1537996194471-e657df975ab4?w=800" alt="Bali tour" loading="lazy">
<span class="tg-tag">BEST SELLER</span>
</div>
<div class="tg-package-content">
<div class="tg-rating">★ 4.9 <span>(128 Reviews)</span></div>
<h3>Magical Bali Escape</h3>
<p>Experience tropical beaches, temples and beautiful sunsets.</p>
<div class="tg-package-meta"><span>◷ 5 Days / 4 Nights</span><span>✈ Bali</span></div>
<div class="tg-package-bottom"><div>From <strong>$499</strong></div><a href="#contact">Book Now →</a></div>
</div>
</article>
<article class="tg-package-card">
<div class="tg-package-image">
<img src="https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=800" alt="Paris tour" loading="lazy">
<span class="tg-tag tg-tag-orange">POPULAR</span>
</div>
<div class="tg-package-content">
<div class="tg-rating">★ 4.8 <span>(96 Reviews)</span></div>
<h3>Romantic Paris Getaway</h3>
<p>Explore romantic streets, iconic landmarks and French culture.</p>
<div class="tg-package-meta"><span>◷ 6 Days / 5 Nights</span><span>✈ Paris</span></div>
<div class="tg-package-bottom"><div>From <strong>$799</strong></div><a href="#contact">Book Now →</a></div>
</div>
</article>
<article class="tg-package-card">
<div class="tg-package-image">
<img src="https://images.unsplash.com/photo-1514282401047-d79a71a590e8?w=800" alt="Maldives tour" loading="lazy">
<span class="tg-tag">SPECIAL OFFER</span>
</div>
<div class="tg-package-content">
<div class="tg-rating">★ 5.0 <span>(84 Reviews)</span></div>
<h3>Luxury Maldives Retreat</h3>
<p>Relax in luxury resorts surrounded by turquoise waters.</p>
<div class="tg-package-meta"><span>◷ 4 Days / 3 Nights</span><span>✈ Maldives</span></div>
<div class="tg-package-bottom"><div>From <strong>$899</strong></div><a href="#contact">Book Now →</a></div>
</div>
</article>
</div>
</div>
</section>
<section class="tg-section tg-why" id="about">
<div class="tg-container tg-why-layout">
<div class="tg-why-image">
<img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=1000" alt="Beautiful mountain landscape" loading="lazy">
<div class="tg-experience-box"><strong>10+</strong><span>Years of Travel<br>Experience</span></div>
</div>
<div class="tg-why-content">
<span class="tg-eyebrow tg-dark-eyebrow">WHY TRAVEL WITH US</span>
<h2>Making Every Journey <em>Special</em></h2>
<p>We believe every journey should be memorable. Our travel experts help you discover amazing destinations with personalized experiences.</p>
<div class="tg-feature-list">
<div class="tg-feature">
<div class="tg-feature-icon">✧</div>
<div><h3>Best Price Guarantee</h3><p>Enjoy competitive prices and exceptional travel experiences.</p></div>
</div>
<div class="tg-feature">
<div class="tg-feature-icon">◎</div>
<div><h3>Expert Travel Guides</h3><p>Explore destinations with experienced local travel experts.</p></div>
</div>
<div class="tg-feature">
<div class="tg-feature-icon">✈</div>
<div><h3>Customized Packages</h3><p>Travel plans designed around your preferences and budget.</p></div>
</div>
<div class="tg-feature">
<div class="tg-feature-icon">♡</div>
<div><h3>24/7 Customer Support</h3><p>We're here to help you throughout your journey.</p></div>
</div>
</div>
</div>
</div>
</section>
<section class="tg-section tg-categories" id="categories">
<div class="tg-container">
<div class="tg-section-heading tg-heading-center">
<div>
<span class="tg-eyebrow tg-dark-eyebrow">TRAVEL YOUR WAY</span>
<h2>Explore Travel <em>Categories</em></h2>
<p>Choose the experience that matches your travel dreams.</p>
</div>
</div>
<div class="tg-category-grid">
<a href="#packages" class="tg-category-card"><span>🏔</span><h3>Adventure Travel</h3><p>Explore the extraordinary</p></a>
<a href="#packages" class="tg-category-card"><span>🏝</span><h3>Beach Holidays</h3><p>Relax by the ocean</p></a>
<a href="#packages" class="tg-category-card"><span>👨👩👧</span><h3>Family Trips</h3><p>Memories together</p></a>
<a href="#packages" class="tg-category-card"><span>💑</span><h3>Honeymoon</h3><p>Romantic escapes</p></a>
<a href="#packages" class="tg-category-card"><span>⛰</span><h3>Mountain Tours</h3><p>Discover natural beauty</p></a>
<a href="#packages" class="tg-category-card"><span>🏛</span><h3>Cultural Tours</h3><p>Discover local traditions</p></a>
</div>
</div>
</section>
<section class="tg-promo">
<div class="tg-container">
<div class="tg-promo-content">
<span class="tg-eyebrow">LIMITED TIME OFFER</span>
<h2>Discover Your Next <em>Adventure</em></h2>
<p>Get up to 30% OFF on selected travel packages. Your next unforgettable journey starts here.</p>
<a href="#packages" class="tg-btn tg-btn-white">Explore Deals →</a>
</div>
</div>
</section>
<section class="tg-section tg-testimonials">
<div class="tg-container">
<div class="tg-section-heading tg-heading-center">
<div>
<span class="tg-eyebrow tg-dark-eyebrow">HAPPY TRAVELERS</span>
<h2>What Our Travelers <em>Say</em></h2>
<p>Real experiences from people who explored the world with us.</p>
</div>
</div>
<div class="tg-testimonial-grid">
<article class="tg-review-card">
<div class="tg-rating">★★★★★</div>
<p>"Our Bali vacation was absolutely incredible. Everything was perfectly organized, from hotels to sightseeing."</p>
<div class="tg-review-user"><img src="https://i.pravatar.cc/100?img=47" alt="Sarah Johnson" loading="lazy"><div><h4>Sarah Johnson</h4><span>United States</span></div></div>
</article>
<article class="tg-review-card">
<div class="tg-rating">★★★★★</div>
<p>"Excellent service and amazing destinations. The team made our honeymoon trip truly unforgettable."</p>
<div class="tg-review-user"><img src="https://i.pravatar.cc/100?img=12" alt="Michael Smith" loading="lazy"><div><h4>Michael Smith</h4><span>United Kingdom</span></div></div>
</article>
<article class="tg-review-card">
<div class="tg-rating">★★★★★</div>
<p>"Great value for money and wonderful travel support. I would definitely recommend TravelGo."</p>
<div class="tg-review-user"><img src="https://i.pravatar.cc/100?img=44" alt="Priya Sharma" loading="lazy"><div><h4>Priya Sharma</h4><span>India</span></div></div>
</article>
</div>
</div>
</section>
<section class="tg-section tg-blog" id="blog">
<div class="tg-container">
<div class="tg-section-heading">
<div>
<span class="tg-eyebrow tg-dark-eyebrow">TRAVEL STORIES</span>
<h2>Latest Travel <em>Insights</em></h2>
<p>Get inspired with our travel guides, tips and stories.</p>
</div>
<a href="#blog" class="tg-text-link">View All Articles →</a>
</div>
<div class="tg-blog-grid">
<article class="tg-blog-card">
<img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=800" alt="Travel adventure" loading="lazy">
<div class="tg-blog-content"><span>TRAVEL GUIDE · 5 MIN READ</span><h3>10 Beautiful Places You Must Visit in 2026</h3><p>Discover breathtaking destinations for your next unforgettable vacation.</p><a href="#contact">Read Article →</a></div>
</article>
<article class="tg-blog-card">
<img src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?w=800" alt="Lake travel destination" loading="lazy">
<div class="tg-blog-content"><span>TRAVEL TIPS · 4 MIN READ</span><h3>Essential Travel Tips for First-Time Travelers</h3><p>Everything you need to know before planning your first international trip.</p><a href="#contact">Read Article →</a></div>
</article>
<article class="tg-blog-card">
<img src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=800" alt="Road trip" loading="lazy">
<div class="tg-blog-content"><span>ADVENTURE · 6 MIN READ</span><h3>How to Plan the Perfect Road Trip</h3><p>Plan your dream road trip with these useful travel recommendations.</p><a href="#contact">Read Article →</a></div>
</article>
</div>
</div>
</section>
<section class="tg-newsletter">
<div class="tg-container tg-newsletter-inner">
<div><span class="tg-eyebrow">STAY INSPIRED</span><h2>Get Travel Inspiration<br>in Your <em>Inbox</em></h2><p>Subscribe to receive exclusive travel deals, destination guides and inspiration.</p></div>
<form class="tg-newsletter-form" id="tgNewsletter">
<label class="tg-visually-hidden" for="tg-email">Your email address</label>
<input id="tg-email" type="email" placeholder="Enter your email address" required>
<button type="submit">Subscribe →</button>
<small id="tg-newsletter-message">We respect your privacy. Unsubscribe anytime.</small>
</form>
</div>
</section>
</main>
<footer class="tg-footer" id="contact">
<div class="tg-container">
<div class="tg-footer-grid">
<div class="tg-footer-brand">
<a href="#home" class="tg-logo">Travel<span>Go.</span></a>
<p>Your trusted travel companion. Discover amazing places, create beautiful memories and explore the world with confidence.</p>
<div class="tg-socials">
<a href="#" aria-label="Facebook">f</a>
<a href="#" aria-label="Instagram">◎</a>
<a href="#" aria-label="X">𝕏</a>
<a href="#" aria-label="YouTube">▶</a>
</div>
</div>
<div><h3>Quick Links</h3><a href="#home">Home</a><a href="#about">About Us</a><a href="#packages">Tour Packages</a><a href="#blog">Travel Blog</a><a href="#contact">Contact</a></div>
<div><h3>Destinations</h3><a href="#destinations">Bali</a><a href="#destinations">Paris</a><a href="#destinations">Dubai</a><a href="#destinations">Switzerland</a><a href="#destinations">Maldives</a></div>
<div><h3>Contact Us</h3><p>✉ hello@travelgo.com</p><p>☎ +1 234 567 890</p><p>⌖ 123 Travel Street, New York</p><a href="#contact">Privacy Policy</a><a href="#contact">Terms & Conditions</a></div>
</div>
<div class="tg-footer-bottom"><p>© 2026 TravelGo. All Rights Reserved.</p><p>Made for Travel Lovers Worldwide.</p></div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
style.css
:root {
--tg-primary: #087e79;
--tg-primary-dark: #075d59;
--tg-accent: #f4a641;
--tg-dark: #152c32;
--tg-text: #637276;
--tg-light: #f5f8f7;
--tg-white: #ffffff;
--tg-font: 'DM Sans', sans-serif;
--tg-heading: 'Playfair Display', serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { scroll-behavior: smooth; }
body {
font-family: var(--tg-font);
color: var(--tg-dark);
background: white;
line-height: 1.65;
}
a { text-decoration: none; color: inherit; }
button, input, select { font: inherit; }
img { display: block; width: 100%; object-fit: cover; }
.tg-container {
width: min(1180px, 90%);
margin: auto;
}
.tg-section { padding: 95px 0; }
.tg-header {
height: 82px;
background: #fff;
position: sticky;
top: 0;
z-index: 999;
box-shadow: 0 2px 18px rgba(0,0,0,.05);
}
.tg-nav {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.tg-logo {
font-size: 29px;
font-weight: 800;
color: var(--tg-dark);
letter-spacing: -1.5px;
}
.tg-logo span { color: var(--tg-primary); }
.tg-navigation {
display: flex;
align-items: center;
gap: 22px;
}
.tg-navigation a, .tg-login {
font-size: 13px;
font-weight: 600;
color: #35494d;
transition: .3s;
}
.tg-navigation a:hover, .tg-login:hover { color: var(--tg-primary); }
.tg-nav-actions {
display: flex;
align-items: center;
gap: 20px;
}
.tg-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 14px 23px;
border-radius: 7px;
font-size: 14px;
font-weight: 700;
transition: .3s;
}
.tg-btn-primary {
background: var(--tg-primary);
color: white;
}
.tg-btn-primary:hover {
background: var(--tg-primary-dark);
transform: translateY(-2px);
}
.tg-btn-white { background: white; color: var(--tg-primary-dark); }
.tg-btn-white:hover { background: var(--tg-accent); color: white; }
.tg-menu-toggle {
display: none;
border: 0;
background: none;
cursor: pointer;
}
.tg-menu-toggle span {
display: block;
width: 25px;
height: 2px;
background: var(--tg-dark);
margin: 6px;
}
.tg-hero {
min-height: 690px;
position: relative;
background: url('https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?w=2000') center 48%/cover no-repeat;
display: flex;
align-items: flex-start;
color: white;
}
.tg-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(5,30,34,.78), rgba(5,30,34,.20));
}
.tg-hero-content {
position: relative;
z-index: 1;
padding-top: 125px;
}
.tg-eyebrow {
font-size: 11px;
font-weight: 800;
letter-spacing: 2.2px;
color: #e9b75c;
display: block;
margin-bottom: 17px;
}
.tg-hero h1 {
font-family: var(--tg-heading);
font-size: clamp(42px, 6vw, 69px);
line-height: 1.12;
max-width: 720px;
margin-bottom: 22px;
}
.tg-hero h1 em, h2 em { color: var(--tg-accent); }
.tg-hero-content p {
max-width: 530px;
color: rgba(255,255,255,.9);
font-size: 16px;
margin-bottom: 30px;
}
.tg-search-wrap {
position: absolute;
bottom: -48px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
}
.tg-search-form {
background: white;
padding: 22px;
border-radius: 12px;
display: grid;
grid-template-columns: 1.35fr 1fr 1fr .9fr 1fr auto;
gap: 12px;
box-shadow: 0 12px 45px rgba(0,0,0,.14);
}
.tg-search-field {
padding: 4px 10px;
border-right: 1px solid #e8eeee;
}
.tg-search-field label {
display: block;
font-size: 11px;
font-weight: 800;
color: var(--tg-dark);
margin-bottom: 5px;
}
.tg-search-field input, .tg-search-field select {
border: 0;
outline: 0;
width: 100%;
color: #718083;
font-size: 12px;
background: transparent;
min-width: 0;
}
.tg-search-button {
background: var(--tg-primary);
color: white;
border: 0;
border-radius: 7px;
padding: 0 18px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.tg-search-button:hover { background: var(--tg-primary-dark); }
.tg-destinations { padding-top: 140px; }
.tg-section-heading {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 38px;
gap: 25px;
}
.tg-dark-eyebrow { color: var(--tg-primary); }
.tg-section-heading h2, .tg-why-content h2 {
font-family: var(--tg-heading);
font-size: clamp(31px, 4vw, 43px);
line-height: 1.2;
margin-bottom: 12px;
}
.tg-section-heading h2 em, .tg-why-content h2 em { color: var(--tg-primary); }
.tg-section-heading p, .tg-why-content > p {
color: var(--tg-text);
font-size: 14px;
}
.tg-text-link {
color: var(--tg-primary);
font-size: 13px;
font-weight: 800;
white-space: nowrap;
}
.tg-destination-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 250px;
gap: 17px;
}
.tg-destination-card {
position: relative;
overflow: hidden;
border-radius: 11px;
color: white;
}
.tg-destination-large {
grid-row: span 2;
grid-column: span 2;
}
.tg-destination-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(0,0,0,.78), transparent 70%);
}
.tg-destination-card img {
height: 100%;
transition: transform .6s;
}
.tg-destination-card:hover img { transform: scale(1.09); }
.tg-destination-info {
position: absolute;
z-index: 1;
bottom: 20px;
left: 22px;
}
.tg-destination-info span { font-size: 11px; }
.tg-destination-info h3 { font-size: 25px; font-family: var(--tg-heading); }
.tg-destination-info p { font-size: 12px; margin: 3px 0; }
.tg-destination-info a { font-size: 12px; font-weight: 700; color: #f4c76e; }
.tg-packages { background: var(--tg-light); }
.tg-package-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.tg-package-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 25px rgba(0,0,0,.04);
transition: .3s;
}
.tg-package-card:hover { transform: translateY(-7px); box-shadow: 0 12px 30px rgba(0,0,0,.1); }
.tg-package-image { height: 225px; position: relative; overflow: hidden; }
.tg-package-image img { height: 100%; transition: .5s; }
.tg-package-card:hover .tg-package-image img { transform: scale(1.06); }
.tg-tag {
position: absolute;
top: 15px;
left: 15px;
background: var(--tg-primary);
color: white;
padding: 6px 11px;
border-radius: 4px;
font-size: 9px;
font-weight: 800;
}
.tg-tag-orange { background: #e79b3d; }
.tg-package-content { padding: 23px; }
.tg-rating { color: #e9a33d; font-size: 13px; font-weight: 800; }
.tg-rating span { color: #8c989a; font-weight: 500; }
.tg-package-content h3 { font-size: 20px; margin: 10px 0; }
.tg-package-content > p { color: var(--tg-text); font-size: 13px; min-height: 43px; }
.tg-package-meta {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #edf0f0;
padding: 17px 0;
font-size: 11px;
color: #6c7a7c;
}
.tg-package-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
font-size: 12px;
}
.tg-package-bottom strong { color: var(--tg-primary); font-size: 23px; }
.tg-package-bottom a { color: var(--tg-primary); font-weight: 800; }
.tg-why-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 75px;
align-items: center;
}
.tg-why-image { position: relative; }
.tg-why-image > img { height: 590px; border-radius: 12px; }
.tg-experience-box {
position: absolute;
right: -25px;
bottom: 35px;
background: white;
padding: 22px 28px;
border-radius: 9px;
box-shadow: 0 5px 25px rgba(0,0,0,.12);
display: flex;
align-items: center;
gap: 15px;
}
.tg-experience-box strong { font-size: 40px; color: var(--tg-primary); }
.tg-experience-box span { font-size: 12px; font-weight: 700; line-height: 1.4; }
.tg-why-content > p { margin-bottom: 30px; }
.tg-feature-list { display: grid; gap: 23px; }
.tg-feature { display: flex; align-items: flex-start; gap: 18px; }
.tg-feature-icon {
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 9px;
background: #eaf5f3;
display: grid;
place-items: center;
color: var(--tg-primary);
font-size: 24px;
}
.tg-feature h3 { font-size: 15px; margin-bottom: 4px; }
.tg-feature p { color: var(--tg-text); font-size: 12px; }
.tg-categories { background: var(--tg-light); }
.tg-heading-center { justify-content: center; text-align: center; }
.tg-category-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.tg-category-card {
background: white;
text-align: center;
border-radius: 10px;
padding: 35px 15px;
border: 1px solid #edf0ee;
transition: .3s;
}
.tg-category-card:hover {
transform: translateY(-6px);
border-color: var(--tg-primary);
box-shadow: 0 10px 30px rgba(0,0,0,.05);
}
.tg-category-card > span { font-size: 37px; }
.tg-category-card h3 { font-size: 16px; margin: 12px 0 4px; }
.tg-category-card p { color: var(--tg-text); font-size: 12px; }
.tg-promo {
padding: 100px 0;
background: linear-gradient(90deg, rgba(4,36,39,.88), rgba(4,36,39,.25)), url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=1800') center/cover;
color: white;
}
.tg-promo-content { max-width: 600px; }
.tg-promo h2 { font-family: var(--tg-heading); font-size: clamp(36px,5vw,53px); line-height: 1.2; margin-bottom: 18px; }
.tg-promo h2 em { color: #f4bb5f; }
.tg-promo p { color: #e1e9e8; font-size: 14px; margin-bottom: 25px; max-width: 500px; }
.tg-testimonials { background: white; }
.tg-testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 23px;
}
.tg-review-card {
padding: 30px;
border: 1px solid #e9eeee;
border-radius: 10px;
transition: .3s;
}
.tg-review-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,.07); }
.tg-review-card > p { font-size: 13px; color: var(--tg-text); margin: 18px 0 25px; }
.tg-review-user { display: flex; align-items: center; gap: 12px; }
.tg-review-user img { width: 47px; height: 47px; border-radius: 50%; }
.tg-review-user h4 { font-size: 13px; }
.tg-review-user span { color: var(--tg-text); font-size: 11px; }
.tg-blog { background: var(--tg-light); }
.tg-blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.tg-blog-card {
background: white;
border-radius: 10px;
overflow: hidden;
transition: .3s;
}
.tg-blog-card:hover { transform: translateY(-5px); }
.tg-blog-card > img { height: 225px; }
.tg-blog-content { padding: 23px; }
.tg-blog-content > span { font-size: 10px; color: var(--tg-primary); font-weight: 800; letter-spacing: 1px; }
.tg-blog-content h3 { font-size: 18px; line-height: 1.4; margin: 12px 0; }
.tg-blog-content p { color: var(--tg-text); font-size: 12px; margin-bottom: 18px; }
.tg-blog-content a { font-size: 12px; color: var(--tg-primary); font-weight: 800; }
.tg-newsletter {
background: var(--tg-primary-dark);
color: white;
padding: 70px 0;
}
.tg-newsletter-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 45px;
}
.tg-newsletter h2 { font-family: var(--tg-heading); font-size: 36px; line-height: 1.25; }
.tg-newsletter h2 em { color: #f4bb5f; }
.tg-newsletter-inner > div > p { font-size: 13px; color: #d4e5e3; margin-top: 12px; }
.tg-newsletter-form {
width: 470px;
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
}
.tg-newsletter-form input {
padding: 16px;
border: 0;
outline: none;
border-radius: 6px;
min-width: 0;
}
.tg-newsletter-form button {
border: 0;
background: var(--tg-accent);
color: white;
font-weight: 800;
border-radius: 6px;
padding: 0 20px;
cursor: pointer;
}
.tg-newsletter-form small { grid-column: 1/-1; color: #d4e5e3; font-size: 10px; }
.tg-footer { background: #12282d; color: white; padding: 75px 0 0; }
.tg-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 45px; padding-bottom: 55px; }
.tg-footer .tg-logo { color: white; display: inline-block; margin-bottom: 17px; }
.tg-footer-grid p { font-size: 12px; color: #b3c0c1; margin-bottom: 13px; }
.tg-footer-grid h3 { font-size: 15px; margin-bottom: 22px; }
.tg-footer-grid > div > a:not(.tg-logo) { display: block; font-size: 12px; color: #b3c0c1; margin-bottom: 13px; transition: .3s; }
.tg-footer-grid > div > a:hover { color: #f4bb5f; }
.tg-socials { display: flex; gap: 10px; margin-top: 20px; }
.tg-socials a {
width: 35px;
height: 35px;
border: 1px solid #526568;
display: grid;
place-items: center;
border-radius: 50%;
color: white;
}
.tg-socials a:hover { background: var(--tg-primary); }
.tg-footer-bottom {
border-top: 1px solid #34494c;
padding: 22px 0;
display: flex;
justify-content: space-between;
color: #b3c0c1;
font-size: 11px;
}
.tg-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
}
@media(max-width:1050px) {
.tg-navigation { gap: 12px; }
.tg-navigation a { font-size: 11px; }
.tg-search-form { grid-template-columns: repeat(3,1fr); }
.tg-search-button { min-height: 48px; }
.tg-search-wrap { bottom: -95px; }
.tg-destinations { padding-top: 185px; }
.tg-why-layout { gap: 40px; }
}
@media(max-width:768px) {
.tg-header { height: 70px; }
.tg-menu-toggle { display: block; order: 3; }
.tg-nav-actions { display: none; }
.tg-navigation {
display: none;
position: absolute;
top: 70px;
left: 0;
right: 0;
background: white;
padding: 20px 5%;
flex-direction: column;
align-items: flex-start;
gap: 18px;
box-shadow: 0 10px 20px rgba(0,0,0,.08);
}
.tg-navigation.tg-active { display: flex; }
.tg-navigation a { font-size: 14px; }
.tg-hero { min-height: 690px; }
.tg-hero-content { padding-top: 90px; }
.tg-hero h1 { font-size: 45px; }
.tg-search-form { grid-template-columns: repeat(2,1fr); padding: 15px; }
.tg-search-field { border-right: 0; border-bottom: 1px solid #eee; padding: 8px; }
.tg-search-wrap { bottom: -135px; }
.tg-destinations { padding-top: 220px; }
.tg-section { padding: 70px 0; }
.tg-section-heading { align-items: flex-start; flex-direction: column; }
.tg-destination-grid { grid-template-columns: repeat(2,1fr); grid-auto-rows: 220px; }
.tg-destination-large { grid-row: span 1; grid-column: span 2; }
.tg-package-grid, .tg-testimonial-grid, .tg-blog-grid { grid-template-columns: repeat(2,1fr); }
.tg-why-layout { grid-template-columns: 1fr; }
.tg-why-image > img { height: 420px; }
.tg-experience-box { right: 10px; }
.tg-category-grid { grid-template-columns: repeat(2,1fr); }
.tg-newsletter-inner { flex-direction: column; align-items: flex-start; }
.tg-newsletter-form { width: 100%; }
.tg-footer-grid { grid-template-columns: repeat(2,1fr); gap: 35px; }
}
@media(max-width:480px) {
.tg-hero { min-height: 750px; }
.tg-hero-content { padding-top: 75px; }
.tg-hero h1 { font-size: 39px; }
.tg-hero-content p { font-size: 13px; }
.tg-search-form { grid-template-columns: 1fr 1fr; gap: 5px; }
.tg-search-button { grid-column: 1/-1; min-height: 48px; }
.tg-search-wrap { bottom: -160px; }
.tg-destinations { padding-top: 230px; }
.tg-destination-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; gap: 10px; }
.tg-destination-large { grid-column: span 2; }
.tg-destination-info { left: 12px; bottom: 12px; }
.tg-destination-info h3 { font-size: 20px; }
.tg-destination-info p, .tg-destination-info a { font-size: 10px; }
.tg-package-grid, .tg-testimonial-grid, .tg-blog-grid { grid-template-columns: 1fr; }
.tg-category-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.tg-category-card { padding: 24px 8px; }
.tg-category-card h3 { font-size: 13px; }
.tg-category-card p { font-size: 10px; }
.tg-newsletter h2 { font-size: 30px; }
.tg-newsletter-form { grid-template-columns: 1fr; }
.tg-newsletter-form button { padding: 14px; }
.tg-footer-grid { grid-template-columns: 1fr 1fr; gap: 25px 15px; }
.tg-footer-bottom { flex-direction: column; gap: 8px; }
}
@media(prefers-reduced-motion:reduce) {
*, *::before, *::after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
animation-duration: .01ms !important;
}
}
script.js
document.addEventListener("DOMContentLoaded", function () {
// Mobile Navigation
const menuToggle = document.querySelector(".tg-menu-toggle");
const navigation = document.querySelector(".tg-navigation");
if (menuToggle && navigation) {
menuToggle.addEventListener("click", function () {
const isOpen = navigation.classList.toggle("tg-active");
menuToggle.setAttribute("aria-expanded", String(isOpen));
});
navigation.querySelectorAll("a").forEach(function (link) {
link.addEventListener("click", function () {
navigation.classList.remove("tg-active");
menuToggle.setAttribute("aria-expanded", "false");
});
});
}
// Travel Search Form
const searchForm = document.getElementById("travelSearch");
if (searchForm) {
const checkin = document.getElementById("tg-checkin");
const checkout = document.getElementById("tg-checkout");
const today = new Date();
const localToday = new Date(today.getTime() - today.getTimezoneOffset() * 60000)
.toISOString().split("T")[0];
checkin.min = localToday;
checkout.min = localToday;
checkin.addEventListener("change", function () {
checkout.min = checkin.value || localToday;
if (checkout.value && checkout.value <= checkin.value) {
checkout.value = "";
}
});
searchForm.addEventListener("submit", function (event) {
event.preventDefault();
if (!searchForm.reportValidity()) return;
if (checkout.value <= checkin.value) {
alert("Check-out date must be after check-in date.");
return;
}
const formData = new FormData(searchForm);
const params = new URLSearchParams(formData);
// Redirect to a search results page when one is configured.
// Change this URL to your actual WordPress search page.
window.location.href = "search-results.html?" + params.toString();
});
}
// Newsletter Form
const newsletter = document.getElementById("tgNewsletter");
const newsletterMessage = document.getElementById("tg-newsletter-message");
if (newsletter) {
newsletter.addEventListener("submit", function (event) {
event.preventDefault();
const email = document.getElementById("tg-email");
if (!email.checkValidity()) {
email.reportValidity();
return;
}
newsletterMessage.textContent =
"Thank you for subscribing! Connect this form to your email marketing service to receive subscriptions.";
email.value = "";
});
}
// Smooth Scroll for internal links
document.querySelectorAll('a[href^="#"]').forEach(function (link) {
link.addEventListener("click", function (event) {
const targetId = link.getAttribute("href");
if (!targetId || targetId === "#") return;
const target = document.querySelector(targetId);
if (target) {
event.preventDefault();
target.scrollIntoView({
behavior: "smooth",
block: "start"
});
}
});
});
});
WordPress PHP Template – page-travel-home.php
<?php
/**
* Template Name: TravelGo Homepage
* Description: Premium responsive travel website homepage.
*/
get_header();
$tg_destinations = [
[
'name' => 'Bali',
'country' => 'Indonesia',
'price' => '$499',
'image' => 'https://images.unsplash.com/photo-1537996194471-e657df975ab4?w=1000'
],
[
'name' => 'Paris',
'country' => 'France',
'price' => '$699',
'image' => 'https://images.unsplash.com/photo-1511739001486-6bfe10ce785f?w=800'
],
[
'name' => 'Dubai',
'country' => 'UAE',
'price' => '$399',
'image' => 'https://images.unsplash.com/photo-1512453979798-5ea266f8880c?w=800'
],
[
'name' => 'Swiss Alps',
'country' => 'Switzerland',
'price' => '$899',
'image' => 'https://images.unsplash.com/photo-1531366936337-7c912a4589a7?w=800'
],
[
'name' => 'Maldives',
'country' => 'Maldives',
'price' => '$799',
'image' => 'https://images.unsplash.com/photo-1514282401047-d79a71a590e8?w=800'
],
[
'name' => 'New York',
'country' => 'United States',
'price' => '$999',
'image' => 'https://images.unsplash.com/photo-1598275277521-1885384176e9?w=800'
],
[
'name' => 'Goa',
'country' => 'India',
'price' => '$199',
'image' => 'https://images.unsplash.com/photo-1512343879784-a960bf40e7f2?w=800'
]
];
?>
<main class="tg-homepage">
<section class="tg-hero" id="home">
<div class="tg-hero-overlay"></div>
<div class="tg-container tg-hero-content">
<span class="tg-eyebrow">YOUR JOURNEY BEGINS HERE</span>
<h1>
Explore The World,<br>
<em>Create Unforgettable</em><br>
Memories
</h1>
<p>
Discover amazing destinations, exciting adventures,
and unforgettable travel experiences.
</p>
<a href="#destinations" class="tg-btn tg-btn-white">
Explore Destinations →
</a>
</div>
<div class="tg-container tg-search-wrap">
<form class="tg-search-form" id="travelSearch"
action="<?php echo esc_url(home_url('/')); ?>" method="get">
<div class="tg-search-field">
<label for="tg-destination">Destination</label>
<input type="text" id="tg-destination" name="s"
placeholder="Where do you want to go?" required>
</div>
<div class="tg-search-field">
<label for="tg-checkin">Check In</label>
<input type="date" id="tg-checkin" name="checkin" required>
</div>
<div class="tg-search-field">
<label for="tg-checkout">Check Out</label>
<input type="date" id="tg-checkout" name="checkout" required>
</div>
<div class="tg-search-field">
<label for="tg-travelers">Travelers</label>
<select name="travelers" id="tg-travelers">
<option value="1">1 Traveler</option>
<option value="2" selected>2 Travelers</option>
<option value="3">3 Travelers</option>
<option value="4">4 Travelers</option>
<option value="5">5+ Travelers</option>
</select>
</div>
<div class="tg-search-field">
<label for="tg-category">Travel Type</label>
<select name="category" id="tg-category">
<option value="all">All Categories</option>
<option value="adventure">Adventure</option>
<option value="beach">Beach Holiday</option>
<option value="family">Family Trip</option>
<option value="honeymoon">Honeymoon</option>
</select>
</div>
<button type="submit" class="tg-search-button">
Search Trips →
</button>
</form>
</div>
</section>
<section class="tg-section tg-destinations" id="destinations">
<div class="tg-container">
<div class="tg-section-heading">
<div>
<span class="tg-eyebrow tg-dark-eyebrow">EXPLORE THE WORLD</span>
<h2>Popular <em>Destinations</em></h2>
<p>Discover the most beautiful places around the world.</p>
</div>
</div>
<div class="tg-destination-grid">
<?php foreach ($tg_destinations as $index => $destination) : ?>
<article class="tg-destination-card <?php echo $index === 0 ? 'tg-destination-large' : ''; ?>">
<img
src="<?php echo esc_url($destination['image']); ?>"
alt="<?php echo esc_attr($destination['name']); ?>"
loading="lazy"
>
<div class="tg-destination-info">
<span><?php echo esc_html($destination['country']); ?></span>
<h3><?php echo esc_html($destination['name']); ?></h3>
<p>Starting from <?php echo esc_html($destination['price']); ?></p>
<a href="<?php echo esc_url(home_url('/destinations/')); ?>">
Explore Destination →
</a>
</div>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="tg-section tg-packages" id="packages">
<div class="tg-container">
<div class="tg-section-heading">
<div>
<span class="tg-eyebrow tg-dark-eyebrow">HANDPICKED FOR YOU</span>
<h2>Featured Tour <em>Packages</em></h2>
<p>Find your perfect getaway with our exclusive packages.</p>
</div>
</div>
<div class="tg-package-grid">
<?php
$tg_packages = new WP_Query([
'post_type' => 'post',
'posts_per_page' => 3,
'post_status' => 'publish',
'category_name' => 'tour-packages'
]);
if ($tg_packages->have_posts()) :
while ($tg_packages->have_posts()) :
$tg_packages->the_post();
?>
<article class="tg-package-card">
<div class="tg-package-image">
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail('large', [
'loading' => 'lazy',
'alt' => get_the_title()
]); ?>
<?php else : ?>
<img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=800"
alt="Travel destination" loading="lazy">
<?php endif; ?>
<span class="tg-tag">FEATURED TOUR</span>
</div>
<div class="tg-package-content">
<div class="tg-rating">★ 4.9 <span>Traveler Favorite</span></div>
<h3><?php the_title(); ?></h3>
<p><?php echo esc_html(wp_trim_words(get_the_excerpt(), 18)); ?></p>
<div class="tg-package-meta">
<span><?php echo esc_html(get_the_date()); ?></span>
<span>✈ Travel Package</span>
</div>
<div class="tg-package-bottom">
<div>Explore <strong>Tour</strong></div>
<a href="<?php the_permalink(); ?>">View Details →</a>
</div>
</div>
</article>
<?php
endwhile;
wp_reset_postdata();
else :
?>
<p>No tour packages have been published yet.</p>
<?php endif; ?>
</div>
</div>
</section>
<section class="tg-section tg-why" id="about">
<div class="tg-container tg-why-layout">
<div class="tg-why-image">
<img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=1000"
alt="Mountain destination" loading="lazy">
<div class="tg-experience-box">
<strong>10+</strong>
<span>Years of Travel<br>Experience</span>
</div>
</div>
<div class="tg-why-content">
<span class="tg-eyebrow tg-dark-eyebrow">WHY TRAVEL WITH US</span>
<h2>Making Every Journey <em>Special</em></h2>
<p>Discover amazing destinations with our professional travel services.</p>
<div class="tg-feature-list">
<div class="tg-feature">
<div class="tg-feature-icon">✧</div>
<div>
<h3>Best Price Guarantee</h3>
<p>Enjoy competitive prices and exceptional experiences.</p>
</div>
</div>
<div class="tg-feature">
<div class="tg-feature-icon">◎</div>
<div>
<h3>Expert Travel Guides</h3>
<p>Explore destinations with experienced travel experts.</p>
</div>
</div>
<div class="tg-feature">
<div class="tg-feature-icon">✈</div>
<div>
<h3>Customized Packages</h3>
<p>Travel plans designed around your preferences.</p>
</div>
</div>
<div class="tg-feature">
<div class="tg-feature-icon">♡</div>
<div>
<h3>24/7 Customer Support</h3>
<p>We are here to help you throughout your journey.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="tg-section tg-categories" id="categories">
<div class="tg-container">
<div class="tg-section-heading tg-heading-center">
<div>
<span class="tg-eyebrow tg-dark-eyebrow">TRAVEL YOUR WAY</span>
<h2>Explore Travel <em>Categories</em></h2>
<p>Choose the experience that matches your travel dreams.</p>
</div>
</div>
<div class="tg-category-grid">
<a href="#packages" class="tg-category-card"><span>🏔</span><h3>Adventure Travel</h3><p>Explore the extraordinary</p></a>
<a href="#packages" class="tg-category-card"><span>🏝</span><h3>Beach Holidays</h3><p>Relax by the ocean</p></a>
<a href="#packages" class="tg-category-card"><span>👨👩👧</span><h3>Family Trips</h3><p>Memories together</p></a>
<a href="#packages" class="tg-category-card"><span>💑</span><h3>Honeymoon</h3><p>Romantic escapes</p></a>
<a href="#packages" class="tg-category-card"><span>⛰</span><h3>Mountain Tours</h3><p>Discover natural beauty</p></a>
<a href="#packages" class="tg-category-card"><span>🏛</span><h3>Cultural Tours</h3><p>Discover local traditions</p></a>
</div>
</div>
</section>
<section class="tg-promo">
<div class="tg-container">
<div class="tg-promo-content">
<span class="tg-eyebrow">LIMITED TIME OFFER</span>
<h2>Discover Your Next <em>Adventure</em></h2>
<p>Get up to 30% OFF on selected travel packages.</p>
<a href="#packages" class="tg-btn tg-btn-white">Explore Deals →</a>
</div>
</div>
</section>
<section class="tg-section tg-testimonials">
<div class="tg-container">
<div class="tg-section-heading tg-heading-center">
<div>
<span class="tg-eyebrow tg-dark-eyebrow">HAPPY TRAVELERS</span>
<h2>What Our Travelers <em>Say</em></h2>
<p>Discover what our travelers have to say about their experiences.</p>
</div>
</div>
<div class="tg-testimonial-grid">
<article class="tg-review-card">
<div class="tg-rating">★★★★★</div>
<p>"Our vacation was absolutely incredible. Everything was perfectly organized."</p>
<div class="tg-review-user">
<img src="https://i.pravatar.cc/100?img=47" alt="Sarah" loading="lazy">
<div><h4>Sarah Johnson</h4><span>United States</span></div>
</div>
</article>
<article class="tg-review-card">
<div class="tg-rating">★★★★★</div>
<p>"Excellent service and amazing destinations. Highly recommended."</p>
<div class="tg-review-user">
<img src="https://i.pravatar.cc/100?img=12" alt="Michael" loading="lazy">
<div><h4>Michael Smith</h4><span>United Kingdom</span></div>
</div>
</article>
<article class="tg-review-card">
<div class="tg-rating">★★★★★</div>
<p>"Great value for money and wonderful travel support."</p>
<div class="tg-review-user">
<img src="https://i.pravatar.cc/100?img=44" alt="Priya" loading="lazy">
<div><h4>Priya Sharma</h4><span>India</span></div>
</div>
</article>
</div>
</div>
</section>
<section class="tg-section tg-blog" id="blog">
<div class="tg-container">
<div class="tg-section-heading">
<div>
<span class="tg-eyebrow tg-dark-eyebrow">TRAVEL STORIES</span>
<h2>Latest Travel <em>Insights</em></h2>
<p>Get inspired with our travel guides, tips and stories.</p>
</div>
<a href="<?php echo esc_url(get_permalink(get_option('page_for_posts'))); ?>" class="tg-text-link">
View All Articles →
</a>
</div>
<div class="tg-blog-grid">
<?php
$tg_blog = new WP_Query([
'post_type' => 'post',
'posts_per_page' => 3,
'post_status' => 'publish'
]);
if ($tg_blog->have_posts()) :
while ($tg_blog->have_posts()) :
$tg_blog->the_post();
?>
<article class="tg-blog-card">
<a href="<?php the_permalink(); ?>">
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail('large', [
'loading' => 'lazy',
'alt' => get_the_title()
]); ?>
<?php else : ?>
<img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=800"
alt="Travel blog" loading="lazy">
<?php endif; ?>
</a>
<div class="tg-blog-content">
<span><?php echo esc_html(get_the_date()); ?></span>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<p><?php echo esc_html(wp_trim_words(get_the_excerpt(), 18)); ?></p>
<a href="<?php the_permalink(); ?>">Read Article →</a>
</div>
</article>
<?php
endwhile;
wp_reset_postdata();
else :
?>
<p>No blog posts available.</p>
<?php endif; ?>
</div>
</div>
</section>
<section class="tg-newsletter">
<div class="tg-container tg-newsletter-inner">
<div>
<span class="tg-eyebrow">STAY INSPIRED</span>
<h2>Get Travel Inspiration<br>in Your <em>Inbox</em></h2>
<p>Subscribe for travel deals, destination guides and inspiration.</p>
</div>
<form class="tg-newsletter-form" id="tgNewsletter">
<label class="tg-visually-hidden" for="tg-email">Your email address</label>
<input type="email" id="tg-email" placeholder="Enter your email address" required>
<button type="submit">Subscribe →</button>
<small id="tg-newsletter-message">We respect your privacy.</small>
</form>
</div>
</section>
</main>
<?php get_footer(); ?>
WordPress CSS and JavaScript integration – functions.php
<?php
/**
* TravelGo Theme Assets
*/
function travelgo_enqueue_assets() {
$theme_version = wp_get_theme()->get('Version');
wp_enqueue_style(
'travelgo-google-fonts',
'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap',
[],
null
);
wp_enqueue_style(
'travelgo-style',
get_stylesheet_directory_uri() . '/style.css',
['travelgo-google-fonts'],
$theme_version
);
wp_enqueue_script(
'travelgo-script',
get_stylesheet_directory_uri() . '/script.js',
[],
$theme_version,
true
);
}
add_action('wp_enqueue_scripts', 'travelgo_enqueue_assets');
/**
* Register TravelGo Navigation
*/
function travelgo_register_menus() {
register_nav_menus([
'primary' => __('Primary Navigation', 'travelgo'),
'footer' => __('Footer Navigation', 'travelgo')
]);
}
add_action('after_setup_theme', 'travelgo_register_menus');
/**
* Theme Support
*/
function travelgo_theme_support() {
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
add_theme_support('custom-logo');
add_theme_support('html5', [
'search-form',
'comment-form',
'comment-list',
'gallery',
'caption',
'style',
'script'
]);
}
add_action('after_setup_theme', 'travelgo_theme_support');
?>