WordPress Template Generate Code & AI Prompt

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');

?>

Leave a Comment

Prove your humanity: 1   +   6   =