Scribd
Upload
2 views

index.html

The document outlines a website for 'Wild Wanderlust', focusing on outdoor adventures and camping experiences. It features a navigation bar, sections for various destinations, and tips for travelers, along with a contact form and reviews section. The design includes responsive styling for different devices and a visually appealing layout with images and descriptions of adventure activities.

Uploaded by

Abinaya Kesavan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

index.html

The document outlines a website for 'Wild Wanderlust', focusing on outdoor adventures and camping experiences. It features a navigation bar, sections for various destinations, and tips for travelers, along with a contact form and reviews section. The design includes responsive styling for different devices and a visually appealing layout with images and descriptions of adventure activities.

Uploaded by

Abinaya Kesavan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Outdoor Adventure and Camping</title>
<link rel="stylesheet" href="style.css">

<style>
/* General reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Poppins', sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
color: #333;
}

/* Header Styling */
header {
background-color: #2C3E50;
color: #fff;
padding: 3rem 0;
text-align: center;
}
.circular-logo {
width: 150px; /* Set the size of the circle */
height: 150px; /* Ensure it is a perfect circle */
border-radius: 50%; /* Makes the div circular */
overflow: hidden; /* Ensures the image fits within the circle */
display: block; /* Makes the div block-level */
border: 4px solid #34495e; /* Optional: Adds a border around the circle */
margin: 0 auto; /* Centers the logo */
}

.circular-logo img {
width: 100%; /* Ensures the image fills the container */
height: 100%; /* Keeps the height equal to the width of the div */
object-fit: cover; /* Scales the image to cover the entire area without distortion */
}

header h1 {
font-family: 'Montserrat', sans-serif;
font-size: 3.5rem;
margin-bottom: 0.5rem;
}

header p {
font-size: 1.5rem;
margin-top: 0.5rem;
font-weight: 400;
}

/* Navigation Bar */
.navbar {
background-color: #34495e;
display: flex;
justify-content: center;
padding: 1rem;
position: sticky;
top: 0;
z-index: 100;
}

.navbar .tab {
padding: 1.5rem 2.5rem;
cursor: pointer;
background-color: transparent;
color: #fff;
border: none;
border-radius: 8px;
margin: 0 1rem;
font-size: 1.2rem;
font-weight: bold;
text-transform: uppercase;
transition: all 0.3s ease;
}

.navbar .tab:hover {
background-color: #8e44ad;
transform: scale(1.1);
}

.navbar .tab.active {
background-color: #f39c12;
border: 2px solid #f39c12;
}

/* Section Styling */
section {
max-width: 1200px;
margin: 3rem auto;
padding: 0 1.5rem;
display: none;
}

section.active {
display: block;
}

.destination {
background-color: #fff;
margin: 1.5rem 0;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.destination:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.destination img {
width: 100%;
max-height: 300px;
object-fit: cover;
border-radius: 12px;
margin-bottom: 1rem;
}

.destination h2 {
font-family: 'Montserrat', sans-serif;
font-size: 2.2rem;
color: #2C3E50;
margin-bottom: 1rem;
}

.destination p {
font-size: 1.1rem;
color: #555;
margin-bottom: 1.5rem;
line-height: 1.7;
}

.destination .tip {
font-weight: 600;
color: #e67e22;
font-size: 1.1rem;
}

/* Contact Form Styles */


form {
background-color: #fff;
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

label {
display: block;
margin-bottom: 0.5rem;
}

input,
textarea {
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
border: 1px solid #ccc;
border-radius: 8px;
}

button {
padding: 0.75rem 1.5rem;
background-color: #e67e22;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}

button:hover {
background-color: #d35400;
}

/* Footer Section */
footer {
background-color: #2C3E50;
color: #fff;
text-align: center;
padding: 1.5rem 0;
position: relative;
}

footer p {
font-size: 1rem;
}

footer a {
color: #e67e22;
text-decoration: none;
}

footer a:hover {
text-decoration: underline;
}

/* Media Queries for responsiveness */


@media (max-width: 768px) {
header h1 {
font-size: 2.5rem;
}

section {
padding: 0 1rem;
}

.destination,
.about-us,
.contact-us,
.home {
padding: 1.5rem;
}

.destination h2,
.about-us h2,
.contact-us h2,
.home h2 {
font-size: 1.8rem;
}

footer {
font-size: 0.9rem;
}
#reviews {
font-family: Arial, sans-serif;
color: #333;
}

#reviews h2 {
font-size: 2em;
margin-bottom: 10px;
}

#reviews p {
font-size: 1.1em;
color: #666;
margin-bottom: 20px;
}

.review {
display: flex;
align-items: center;
margin-bottom: 30px;
padding: 20px;
border-bottom: 1px solid #ddd;
}

.profile {
flex-shrink: 0;
margin-right: 20px;
}
.profile-pic {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
}

.review-content {
flex-grow: 1;
}

.comment {
font-size: 1.1em;
color: #555;
margin-bottom: 10px;
}

.rating {
margin-bottom: 10px;
}

.star {
font-size: 20px;
color: #ccc;
}

.star.filled {
color: #ff9800;
}

.reviewer-info {
font-size: 1em;
color: #333;
}

.profession {
font-size: 0.9em;
color: #777#reviews {
font-family: Arial, sans-serif;
color: #333;
max-width: 900px;
margin: 0 auto;
padding: 20px;
}
#reviews h2 {
font-size: 2em;
margin-bottom: 10px;
text-align: center;
}

#reviews p {
font-size: 1.1em;
color: #666;
margin-bottom: 20px;
text-align: center;
}

.review {
display: flex;
align-items: center;
margin-bottom: 30px;
padding: 20px;
border-bottom: 1px solid #ddd;
}

.profile {
flex-shrink: 0;
margin-right: 20px;
}

.profile-pic {
width: 80px;
height: 80px;
border-radius: 50%; /* Circular logo effect */
object-fit: cover; /* Ensures the image fits within the circular container */
border: 3px solid #ddd; /* Adds a subtle border around the profile picture */
}

.review-content {
flex-grow: 1;
}

.comment {
font-size: 1.1em;
color: #555;
margin-bottom: 10px;
}
.rating {
margin-bottom: 10px;
}

.star {
font-size: 20px;
color: #ccc;
}

.star.filled {
color: #ff9800;
}

.reviewer-info {
font-size: 1em;
color: #333;
}

.profession {
font-size: 0.9em;
color: #777;
margin-left: 10px;
}
;
margin-left: 10px;
}

}
</style>
</head>

<body>
<!-- Header Section -->
<header>
<div class="circular-logo">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQOfN5okU8dmH5185AyP-8ygA
GDELfvmtNvkA&s.png" alt="Logo">
</div>

<h1>Wild Wanderlust</h1>
<p>Explore breathtaking destinations and unforgettable experiences around the world.</p>
</header>
<!-- Navigation Bar -->
<div class="navbar">
<button class="tab active" onclick="showSection('home')">Home</button>
<button class="tab" onclick="showSection('about-us')">About Us</button>
<button class="tab" onclick="showSection('contact-us')">Contact Us</button>
<button class="tab" onclick="showSection('reviews')">Reviews</button>
</div>

<!-- Home Section -->


<section id="home" class="active">
<h2>Home</h2>
<p>Welcome to Wild Wanderlust! We are dedicated to bringing you the best outdoor
adventures and camping experiences. Whether you're an avid traveler or a casual explorer, we
have something for everyone.</p>

<!-- Adventure List -->


<div class="destination">
<h2><a href="grand-canyon.html">1. Raft the Grand Canyon, Arizona, USA</a></h2>
<img
src="https://raftarizona.com/wp-content/uploads/2020/01/ARR-Homepage-Motor-Boat-In-Grand-
Canyon-Rapid-1024x518.jpg" alt="Raft the Grand Canyon">
<p>Experience the Grand Canyon from the Colorado River. Starting at Lees Ferry, you'll
encounter side canyons, historic sites, and exciting rapids. Best time to raft: May to
October.</p>
<p class="tip">Tip: Consider commercial tours if securing a private permit is
challenging.</p>
</div>

<div class="destination">
<h2><a href="new-zealand-hike.html">2. Hike One of the Great Walks, New
Zealand</a></h2>
<img
src="https://www.nomadasaurus.com/wp-content/uploads/2019/04/Hiking-in-New-Zealand-Guid
e.jpg" alt="Hike in New Zealand">
<p>New Zealand's Great Walks, like the Milford Track, offer stunning landscapes. The
four-day trek features breathtaking lakes and waterfalls.</p>
<p class="tip">Tip: Opt for guided hikes during peak months for added comfort.</p>
</div>

<div class="destination">
<h2><a href="namibrand-stargazing.html">3. Stargaze in the Namib Desert,
Namibia</a></h2>
<img
src="https://www.namibiaexperience.com/wp-content/uploads/2023/02/night-sky-namibia-starga
zing-tours.jpg" alt="Stargazing in Namibia">
<p>The Namib Desert offers the best conditions for stargazing with minimal light
pollution. Stay in desert lodges for guided stargazing experiences.</p>
<p class="tip">Tip: Book early to secure a spot at a top desert lodge.</p>
</div>

<div class="destination">
<h2><a href="destination4.html">4. Explore Iceland's Golden Circle</a></h2>
<img src="https://ustoa.com/blog/wp-content/uploads/2021/07/Picture1.jpg" alt="Iceland
Golden Circle">
<p>The Golden Circle route covers stunning natural wonders like Þingvellir National Park,
the Geysir geothermal area, and Gullfoss waterfall. Ideal for a day trip from Reykjavik.</p>
<p class="tip">Tip: Rent a car for flexibility to stop at scenic viewpoints along the way.</p>
</div>

<div class="destination">
<h2><a href="destination5.html" >5. Trek to Machu Picchu, Peru</a></h2>
<img src="https://machupicchu.org/wp-content/uploads/machu-picchu-trekking-routes.jpg"
alt="Machu Picchu Peru">
<p>Hike the Inca Trail or take the alternative routes like Salkantay or Lares to reach the
ancient ruins of Machu Picchu. A must-see in South America!</p>
<p class="tip">Tip: Book tickets and permits months in advance, especially for the Inca
Trail.</p>
</div>

<div class="destination">
<h2><a href="destination6.html">6. Kayak in the Norwegian Fjords</a></h2>
<img src="https://cdn.shopify.com/s/files/1/2236/1557/files/AB_Norway_4.jpg"
alt="Norwegian Fjords">
<p>Explore Norway's iconic fjords by kayak for a peaceful adventure. Popular locations
include the Hardangerfjord and Geirangerfjord, where the mountains meet the sea.</p>
<p class="tip">Tip: Go in summer for mild temperatures and extended daylight hours.</p>
</div>

<div class="destination">
<h2><a href="destination7.html">7. Climb Mount Kilimanjaro, Tanzania</a></h2>
<img
src="https://b1088268.smushcdn.com/1088268/wp-content/uploads/2021/07/climbing-kilimanjar
o-scaled-1.jpg?lossy=2&strip=1&webp=1.jpg" alt="Mount Kilimanjaro">
<p>Conquer Africa's tallest peak, Mount Kilimanjaro, with multiple trekking routes. A
non-technical climb that rewards you with panoramic views of the surrounding landscapes.</p>
<p class="tip">Tip: Prepare for altitude sickness by acclimatizing on longer routes.</p>
</div>

<div class="destination">
<h2><a href="destination8.html">8. Camp in Banff National Park, Canada</a></h2>
<img
src="https://www.hachettebookgroup.com/wp-content/uploads/2019/01/BanffNP_Camping_rabbi
t75_ist_iStock-674468360.jpg" alt="Banff National Park">
<p>Located in the Canadian Rockies, Banff offers pristine lakes, snow-capped peaks, and
endless trails. Ideal for campers and adventurers seeking a wilderness retreat.</p>
<p class="tip">Tip: Book campsites early, especially in the summer months, as they fill up
quickly.</p>
</div>

<div class="destination">
<h2><a href="destination9.html">9. Witness the Northern Lights in Lapland,
Finland</a></h2>
<img
src="https://www.agoda.com/wp-content/uploads/2024/02/Featured-image-Aurora-borealis-in-La
pland-Finland.jpg" alt="Northern Lights in Finland">
<p>Catch a glimpse of the mesmerizing Northern Lights in Lapland. The best time is during
winter months (October to March), with the highest chances in February and March.</p>
<p class="tip">Tip: Consider staying in glass igloos or heated cabins for a cozy experience
under the lights.</p>
</div>

<div class="destination">
<h2><a href="destination10.html">10. Go on a Safari in Serengeti National Park,
Tanzania</a></h2>
<img
src="https://cdn.adventure-life.com/14/80/52/kenya-zebras_serengeti/1300x820.webp"
alt="Serengeti National Park">
<p>The Serengeti is famous for its annual migration of wildebeest, along with the "Big
Five" wildlife. A safari here is a once-in-a-lifetime experience.</p>
<p class="tip">Tip: Plan your trip around the Great Migration (June to October) for the best
wildlife sightings.</p>
</div>

<div class="destination">
<h2><a href="destination11.html">11. Visit Antarctica's Glaciers and Wildlife</a></h2>
<img
src="https://www.antarcticglaciers.org/wp-content/uploads/2012/12/IMG_1319-1024x683.jpg"
alt="Antarctica Glaciers">
<p>Explore the frozen beauty of Antarctica on an expedition cruise. Visit penguin colonies,
spot seals, and marvel at towering glaciers.</p>
<p class="tip">Tip: Visit during the Antarctic summer (November to March) when
conditions are milder.</p>
</div>

<div class="destination">
<h2><a href="destination12.html">12. Hike the Dolomites, Italy</a></h2>
<img
src="https://d3hne3c382ip58.cloudfront.net/files/uploads/bookmundi/resized/cmsfeatured/dolomi
tes-hiking-1555672255-785X440.jpg" alt="Dolomites Italy">
<p>With jagged peaks and alpine meadows, the Dolomites offer some of Europe's most
scenic hikes. Great for both beginners and experienced mountaineers.</p>
<p class="tip">Tip: Visit in the summer for hiking or winter for skiing in the breathtaking
mountain range.</p>
</div>

<div class="destination">
<h2><a href="destination13.html">13. Explore Patagonia's Glaciers, Argentina</a></h2>
<img
src="https://b1088268.smushcdn.com/1088268/wp-content/uploads/2023/02/Perito-Moreno-Gla
cier-Argentina-scaled-e1684951073521.jpg?lossy=2&strip=1&webp=1.jpg" alt="Patagonia
Glaciers">
<p>Patagonia's rugged terrain offers stunning landscapes, including the famous Perito
Moreno Glacier. Ideal for hiking, trekking, and glacier exploration.</p>
<p class="tip">Tip: Take a boat tour to get up close to the glaciers and observe calving
icebergs.</p>
</div>
</section>

<!-- About Us Section -->


<section id="about-us">
<h2>About Us</h2>
<p>At Wild Wanderlust, we are more than just a travel company—we are passionate
explorers and nature lovers. Our team consists of seasoned adventurers who have roamed the
most stunning landscapes across the globe, from the rugged trails of New Zealand to the
serene deserts of Namibia. Every journey we offer is a carefully crafted experience that allows
you to connect with nature, challenge yourself, and create lifelong memories.</p>
<p>Our mission is to inspire you to step outside your comfort zone and experience the beauty
of the world like never before. Whether you're an adrenaline junkie seeking the next thrilling
challenge or someone looking for peaceful solitude in nature's embrace, we have the perfect
adventure waiting for you.</p>
<p>We believe that the outdoors is for everyone. With each adventure, we strive to provide
expert guidance, sustainable travel options, and personalized itineraries that cater to all levels of
experience. From hiking and rafting to stargazing and cultural exploration, our diverse range of
activities ensures that your next adventure will be unforgettable.</p>
<p>Join us at Wild Wanderlust, and let’s create stories that will last a lifetime. Adventure is
calling, and we can’t wait for you to answer.</p>
</section>

<!-- Contact Us Section -->

📞
<section id="contact-us">
<h2> Get in Touch</h2>
<p>We'd love to hear from you! Fill out the form below and we’ll respond as soon as
possible.</p>
<form action="#" method="POST">
<div class="form-group">
<label for="name">Your Name</label>
<input type="text" id="name" name="name" placeholder="Enter your full name"
required>
</div>
<div class="form-group">
<label for="email">Your Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email address"
required>
</div>
<div class="form-group">
<label for="message">Your Message</label>
<textarea id="message" name="message" placeholder="Write your message here..."
required></textarea>
</div>
<button type="submit">Send Message</button>
</form>
</section>

<style>
/* Section Styling */
#contact-us {
font-family: 'Arial', sans-serif;
padding: 40px;
background: #f9f9f9;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
max-width: 700px;
margin: 50px auto;
text-align: center;
}
#contact-us h2 {
font-size: 2rem;
color: #333;
margin-bottom: 10px;
}

#contact-us p {
font-size: 1rem;
color: #666;
margin-bottom: 20px;
}

form {
display: grid;
grid-gap: 20px;
}

.form-group {
text-align: left;
}

form label {
font-size: 1rem;
color: #555;
margin-bottom: 5px;
display: block;
}

form input, form textarea {


width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 1rem;
font-family: 'Arial', sans-serif;
}

form textarea {
resize: vertical;
height: 120px;
}

form button {
padding: 10px 20px;
border: none;
background: #007BFF;
color: white;
font-size: 1rem;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease;
}

form button:hover {
background: #0056b3;
}
</style>
<section id="reviews">
<h2>What Our Clients Are Saying</h2>
<p>We’re honored to have been a part of your journey. Here’s what our clients have
shared:</p>

<div class="review">
<div class="profile">
<img class="circular logo" src="https://randomuser.me/api/portraits/men/4.jpg"
alt="Reviewer 1">
</div>
<div class="review-content">
<p class="comment">&#8220;I had the most amazing camping experience with Wild
Wanderlust! Everything was well-organized, and I truly enjoyed every moment.&#8221;</p>
<div class="rating">
<span class="star filled">&#9733;</span>
<span class="star filled">&#9733;</span>
<span class="star filled">&#9733;</span>
<span class="star filled">&#9733;</span>
<span class="star filled">&#9733;</span>
</div>
<div class="reviewer-info">

📸
<strong>John Doe</strong>
<span class="profession"> Professional Photographer</span>
</div>
</div>
</div>
<hr>

<div class="review">
<div class="profile">
<img class="circular logo" src="https://randomuser.me/api/portraits/women/2.jpg"
alt="Reviewer 2">
</div>
<div class="review-content">
<p class="comment">&#8220;Wild Wanderlust made my camping trip unforgettable. The
guides were friendly, and the destination was stunning!&#8221;</p>
<div class="rating">
<span class="star filled">&#9733;</span>
<span class="star filled">&#9733;</span>
<span class="star filled">&#9733;</span>
<span class="star filled">&#9733;</span>
<span class="star filled">&#9733;</span>
</div>
<div class="reviewer-info">

🌍
<strong>Jane Smith</strong>
<span class="profession"> Adventure Blogger</span>
</div>
</div>
</div>
<hr>

<!-- Add Review Form -->

✨
<div class="feedback-section">
<h3> Share Your Experience</h3>
<p>We value your stories! Submit your feedback and inspire others.</p>
<form action="#" method="POST">
<label for="reviewer-name">Name:</label>
<input type="text" id="reviewer-name" name="reviewer-name" placeholder="Enter your
name" required>

<label for="reviewer-email">Email:</label>
<input type="email" id="reviewer-email" name="reviewer-email" placeholder="Enter your
email" required>

<label for="reviewer-rating">Rating:</label>
<select id="reviewer-rating" name="reviewer-rating" required>
<option value="" disabled selected>Choose a rating</option>
<option value="5">5 - Excellent</option>
<option value="4">4 - Very Good</option>
<option value="3">3 - Good</option>
<option value="2">2 - Fair</option>
<option value="1">1 - Poor</option>
</select>
<label for="reviewer-comment">Comment:</label>
<textarea id="reviewer-comment" name="reviewer-comment" placeholder="Write your
feedback here..." required></textarea>

<button type="submit">Submit Review</button>


</form>
</div>
</section>

<style>
/* Section Styling */
#reviews {
font-family: 'Lato', sans-serif;
text-align: center;
padding: 40px;
background: linear-gradient(to bottom, #ffffff, #f1f1f1);
border-radius: 10px;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
max-width: 900px;
margin: auto;
}

#reviews h2 {
font-size: 2.5rem;
margin-bottom: 15px;
color: #333;
text-transform: uppercase;
letter-spacing: 1px;
}

#reviews p {
font-size: 1.2rem;
color: #555;
margin-bottom: 40px;
}

.review {
display: flex;
align-items: flex-start;
margin: 30px auto;
}

.profile {
flex-shrink: 0;
margin-right: 20px;
}

.circular.logo {
width: 90px;
height: 90px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #ddd;
}

.review-content {
text-align: left;
flex: 1;
}

.comment {
font-size: 1.1rem;
font-style: italic;
color: #444;
margin-bottom: 10px;
}

.rating {
margin-bottom: 10px;
}

.star {
font-size: 1.8rem;
color: #ddd;
}

.star.filled {
color: #ffcc00;
}

.reviewer-info {
font-size: 0.9rem;
color: #555;
}

.reviewer-info strong {
display: block;
font-size: 1rem;
color: #222;
}

hr {
border: none;
border-top: 1px solid #e0e0e0;
margin: 40px 0;
}

/* Feedback Section */
.feedback-section {
margin-top: 40px;
text-align: center;
}

.feedback-section h3 {
font-size: 1.8rem;
color: #333;
margin-bottom: 10px;
}

.feedback-section p {
font-size: 1rem;
color: #666;
margin-bottom: 20px;
}

form {
display: grid;
grid-gap: 15px;
text-align: left;
max-width: 600px;
margin: auto;
}

form label {
font-size: 1rem;
color: #555;
}

form input, form textarea, form select, form button {


width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 1rem;
}

form textarea {
resize: vertical;
height: 100px;
}

form button {
background: #007BFF;
color: #fff;
font-size: 1.1rem;
font-weight: bold;
border: none;
cursor: pointer;
transition: background 0.3s ease;
}

form button:hover {
background: #0056b3;
}
</style>

<!-- Footer Section -->


<footer>
<p>© 2024 Wild Wanderlust. All Rights Reserved. | <a href="#">Privacy Policy</a></p>
</footer>

<script>
// JavaScript for toggling sections
function showSection(sectionId) {
const sections = document.querySelectorAll('section');
const tabs = document.querySelectorAll('.tab');

sections.forEach((section) => {
section.classList.remove('active');
});

tabs.forEach((tab) => {
tab.classList.remove('active');
});

document.getElementById(sectionId).classList.add('active');
const activeTab =
document.querySelector(`button[onclick="showSection('${sectionId}')"]`);
activeTab.classList.add('active');
}

</script>

</body>

</html>

You might also like