<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Wanderly — Travel & Tourism</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header class="site-header" role="banner">
<div class="header-inner container">
<div class="logo">
<a href="index.html" aria-label="Wanderly home">Wanderly</a>
</div>
<div class="spacer" aria-hidden="true"></div>
<div class="profile" id="profile">
<button id="profileBtn" class="profile-btn" aria-haspopup="true" aria-expanded="false" aria-controls="profileMenu" title="Profile">
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" aria-hidden="true">
<path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 3-9 6v1h18v-1c0-3-4-6-9-6z"/>
</svg>
</button>
<div id="profileMenu" class="profile-menu" role="menu" aria-hidden="true">
<button class="menu-item" role="menuitem">My Trips</button>
<button class="menu-item" role="menuitem">Saved Places</button>
<button class="menu-item" role="menuitem">Sign Out</button>
</div>
</div>
</div>
</header>
<main>
<section class="hero" aria-label="Banner">
<div class="hero-overlay"></div>
<div class="hero-content container">
<h1>Discover the world's most beautiful places</h1>
<p>Curated trips, destination guides, and local insights to inspire your next adventure.</p>
<div class="hero-cta">
<a class="btn" href="trip/index.html">Plan a Trip</a>
<a class="btn btn-outline" href="explore/index.html">Explore Destinations</a>
</div>
</div>
</section>
<section class="slider-section" aria-label="Recommended places">
<div class="container">
<h2>Featured Places</h2>
<div class="marquee" id="marquee" aria-hidden="false">
<div class="marquee-track" id="marqueeTrack" tabindex="0" aria-label="Scrolling list of recommended places">
</div>
</div>
</div>
</section>
<section class="about" id="about" aria-label="About">
<div class="container">
<h2>About This Page</h2>
<p>Wanderly is a modern travel guide focused on handpicked experiences, practical planning tools and honest recommendations. Built and maintained by an avid traveler and developer.</p>
<div class="owner">
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=800&q=60&auto=format&fit=crop" alt="Owner portrait" />
<div>
<h3>Alex Rivera</h3>
<p>Founder & Curator — Alex crafts custom itineraries and writes in-depth travel guides based on real-world exploration.</p>
</div>
</div>
</div>
</section>
<section class="contact" id="contact" aria-label="Contact">
<div class="container">
<h2>Contact</h2>
<p>Have a question or want help planning your journey? Reach out.</p>
<div class="contact-grid">
<div class="contact-card">
<h4>Email</h4>
<p><a href="mailto:hello@wanderly.example">hello@wanderly.example</a></p>
</div>
<div class="contact-card">
<h4>Phone</h4>
<p>+1 (555) 123-4567</p>
</div>
<div class="contact-card">
<h4>Follow</h4>
<p>
<a href="#" aria-label="Instagram">Instagram</a> ·
<a href="#" aria-label="Twitter">Twitter</a> ·
<a href="#" aria-label="Facebook">Facebook</a>
</p>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<p>© <span id="year"></span> Wanderly. All rights reserved.</p>
</div>
</footer>
<script type="module" src="js/main.js"></script>
</body>
</html> add a feedback dynamic option ,in which after clicking it ,it will display text area and can submit the feedback