Scribd
Upload
7 views

HTML File for Tourism Website

The document is an HTML file for a tourism website named 'Voygr', which offers group tours and travel services. It includes sections for navigation, about the company, services offered, trending tours, recommended destinations, and a call to action for users to prepare for their tours. The website emphasizes sustainable tourism and aims to provide enriching travel experiences.

Uploaded by

subtlybeige
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views

HTML File for Tourism Website

The document is an HTML file for a tourism website named 'Voygr', which offers group tours and travel services. It includes sections for navigation, about the company, services offered, trending tours, recommended destinations, and a call to action for users to prepare for their tours. The website emphasizes sustainable tourism and aims to provide enriching travel experiences.

Uploaded by

subtlybeige
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 20

HTML File for Tourism Website

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/
all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/
E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous"
referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css"
/>
<link rel="stylesheet" href="styles.css">
<title>Website</title>
</head>
<body>
<!-- home page starts -->
<header id="home">
<nav class="navbar">
<a href="#" class="nav-branding">Voy<span>gr</span></a>

<ul class="nav-menu">
<li class="nav-item">
<a href="login.html" target="_blank" class="nav-
link">Login</a>
</li>
<li class="nav-item">
<a href="#home" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#services" class="nav-link">Services</a>
</li>
<li class="nav-item">
<a href="#section3" class="nav-link">Destinations</a>
</li>
<li class="nav-item">
<a href="#ready" class="nav-link">Bookings</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">Contact</a>
</li>

</ul>
<div class="hamburger">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</nav>
<div class="wrapper">
<h1 class="bigtitle translate" data-speed="0.1"> Organize Group
Tours and Trips </h1>
<div class="content">
<h1 class="bigtitle2 translate" data-speed="0.1">Around the
World</h1>
</div>
</div>

<img src="images parralax/whitemount.png" class="whitemount


translate" data-speed="0.05" alt="">
<img src="images parralax/greenmount.png" class="greenmount
translate"data-speed="-0.15" alt="">
<img src="images parralax/skytrans.png" class="sky
translate"data-speed="0.5" alt="">
</header>
<!-- home page ends -->

<!-- about us starts -->


<section class="section" id="about">
<div class="shadow"></div>
<br><br>
<div class="container2">
<div class="content2" >
<h3 class="title">ABOUT
<div class="border"></div>
</h3>
<P class="para1">Welcome to Voygr - Your Gateway to
Extraordinary Adventures!
<br> <br>

At Voygr, we believe that travel is not just about


visiting new places; it's about embarking transformative journeys that
leave an indelible mark on your soul. As passionate travelers ourselves,
we understand the allure of exploration and the thrill of discovering the
world's hidden gems.

At Voygr, we pride ourselves on crafting unparalleled


itineraries that cater to the adventurous spirit in you. Whether you seek
heart-pounding escapades in the wilderness, cultural immersions in
vibrant communities, or serene retreats in untouched landscapes, we have
the perfect journey for you.

Our carefully curated tours are designed to strike the


perfect balance between exhilarating experiences and responsible travel.
We are committed to promoting sustainable tourism, respecting local
cultures, and preserving the pristine environments we visit. With us, you
can travel with a purpose, leaving a positive impact on the destinations
you explore.

<br><br>
Our Mission: Our mission at Voygr is to redefine travel
by providing you with enriching experiences that go beyond the surface.
We aim to unlock the true essence of each destination, unveiling its
secrets, stories, and wonders. Through our meticulously planned journeys,
we endeavor to spark your curiosity, ignite your passion for exploration,
and create memories that will last a lifetime.</P>
</div>

</div>
</div>
</section>
<!-- about us ends -->

<!-- services starts -->


<section class="services" id="services" >
<h1>Our Services</h1>

<div class="box_container">
<div class="boxy">

<div class="group">
<i class="fas fa-utensils"></i>
<h3>food and drinks</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Provident, quas. Temporibus dicta officiis nobis deleniti nam assumenda
cum id cumque sed fugit. Aut sunt, vel nam voluptates debitis laudantium
labore?</p>
</div>

<div class="group">
<i class="fas fa-hotel"></i>
<h3>hotels</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Provident, quas. Temporibus dicta officiis nobis deleniti nam assumenda
cum id cumque sed fugit. Aut sunt, vel nam voluptates debitis laudantium
labore?</p>
</div>

<div class="group">
<i class="fas fa-map"></i>
<h3>planning</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Provident, quas. Temporibus dicta officiis nobis deleniti nam assumenda
cum id cumque sed fugit. Aut sunt, vel nam voluptates debitis laudantium
labore?</p>
</div>

<div class="group2">
<i class="fas fa-bullhorn"></i>
<h3>ensuring safety</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Provident, quas. Temporibus dicta officiis nobis deleniti nam assumenda
cum id cumque sed fugit. Aut sunt, vel nam voluptates debitis laudantium
labore?</p>
</div>

<div class="group2">
<i class="fas fa-message"></i>
<h3>confirmation</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Provident, quas. Temporibus dicta officiis nobis deleniti nam assumenda
cum id cumque sed fugit. Aut sunt, vel nam voluptates debitis laudantium
labore?</p>
</div>

<div class="group2">
<i class="fas fa-plane"></i>
<h3>travelling</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Provident, quas. Temporibus dicta officiis nobis deleniti nam assumenda
cum id cumque sed fugit. Aut sunt, vel nam voluptates debitis laudantium
labore?</p>
</div>
</div>
</div>
</section>

<!-- Trending tours -->


<section class="container4">
<h1 class="trend">Trending Tours</h1>
<div class="row">
<div class="image">
<img src="Trending/park.jpeg" alt="">
<div class="details">
<h2>Yosemite Park <br> <BR>
<span>California, USA</span></h2>
<p class="description">Trip to Yosemite National Park
</p>
<div class="more">
<a href="#" class="read-more">Read
<span>More</span></a>
<div class="icon-links">
<a href="#"><i class="fa fa-heart"></i></a>
<a href="#"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-
paperclip"></i></a>
</div>
</div>
</div>
</div>
<!-- end card -->

<div class="image">
<img src="Trending/pinkcity.jpeg" alt="">
<div class="details">
<h2>Pink City <br> <br> <span>Jaipur,
India</span></h2>
<p class="description">Organize a trip to Pink
city</p>
<div class="more">
<a href="#" class="read-more">Read
<span>More</span></a>
<div class="icon-links">
<a href="#"><i class="fa fa-heart"></i></a>
<a href="#"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-
paperclip"></i></a>
</div>
</div>
</div>
</div>
<!-- card end -->

<div class="image">
<img src="Trending/finland.jpeg" alt="">
<div class="details">
<h2>Southern Finland <br> <br> <span>Asikkala,
Finland</span></h2>
<p class="description">Explore the luxurious Southern
Finland forests</p>
<div class="more">
<a href="#" class="read-more">Read
<span>More</span></a>
<div class="icon-links">
<a href="#"><i class="fa fa-heart"></i></a>
<a href="#"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-
paperclip"></i></a>
</div>
</div>
</div>
</div>
<!-- card end -->

<div class="image">
<img src="Trending/hongkong.jpeg" alt="">
<div class="details">
<h2>Tian Tan Buddha <br> <br><span>HongKong,
China</span></h2>
<p class="description">A trip to a religious monumnet
in China</p>
<div class="more">
<a href="#" class="read-more">Read
<span>More</span></a>
<div class="icon-links">
<a href="#"><i class="fa fa-heart"></i></a>
<a href="#"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-
paperclip"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- trending tours ends -->

<!-- Recommended destinations -->


<section class="section3" id="section3">
<h1 class="title2">Recommended Destinations</h1>

<div class="container3">
<figure >
<img src="Destinations/indonesia.jpg" alt="Mountains">
<h3 class="dep">Indonesia <br>
<span class="dep2">143 departures</span></h3>

</figure>
<figure>
<img src="Destinations/thailand.jpg" alt="Mountains">
<h3 class="dep">Thailand
<span class="dep2">100 departures</span></h3>

</figure>
<figure style="--c:#fff5">
<img src="Destinations/jordan.jpg" alt="Mountains">
<h3 class="dep">Jordan<br>
<span class="dep2">93 departures</span></h3>
</figure>
<figure style="--c:#fff5">
<img src="Destinations/japan.jpeg" alt="Mountains">
<h3 class="dep">Japan
<span class="dep2">155 departures</span></h3>

</figure>
<figure >
<img src="Destinations/greece.jpeg" alt="Mountains">
<h3 class="dep">Greece <br>
<span class="dep2">150 departures</span></h3>

</figure>
</div>
</div>
</div>
</section>
<!-- recommended section ends -->

<!-- video text -->


<section class="banner">
<video autoplay muted loop>
<source src="newyork.mp4" type="video/mp4">
</video>
<h2 class="texting">find the best trips within your budget</h2>
<h3 class="info">
Up to 60% off Adventure Travel. <br> <br>
Join over 10,000 members by signing up.
<br> <br> Get exclusive access to members only deals on amazing
adventure holidays by email <br> <br>
Get the offers by signing in --> <a href="login.html"
target="_blank">Login</a>
</h3>

</section>
<!-- video text ends -->
<!-- sliders -->
<div class="wrapper3">
<div class="topic">
<h1 class="topic1">Tours by Interests </h1>
</div>
<i id="left" class="fa-solid fa-angle-left"></i>
<ul class="carousel">
<li class="card">
<div class="img"><img src="sliders/adventure.jpeg" alt="img"
draggable="false"></div>
<h2>Adventure</h2>
<span>Sales Manager</span>
</li>
<li class="card">
<div class="img"><img src="sliders/cultural.jpeg" alt="img"
draggable="false"></div>
<h2>Cultural</h2>
<span>Web Developer</span>
</li>
<li class="card">
<div class="img"><img src="sliders/eco.jpeg" alt="img"
draggable="false"></div>
<h2>Ecosystem</h2>
<span>Online Teacher</span>
</li>
<li class="card">
<div class="img"><img src="sliders/hiking.jpeg" alt="img"
draggable="false"></div>
<h2>Hiking</h2>
<span>Freelancer</span>
</li>
<li class="card">
<div class="img"><img src="sliders/marine.jpeg" alt="img"
draggable="false"></div>
<h2>Marine</h2>
<span>Bank Manager</span>
</li>
<li class="card">
<div class="img"><img src="sliders/pilgrim.jpeg" alt="img"
draggable="false"></div>
<h2>Pilgrim</h2>
<span>App Designer</span>
</li>
<li class="card">
<div class="img"><img src="sliders/wildlife.jpeg" alt="img"
draggable="false"></div>
<h2>Wildlife</h2>
<span>App Designer</span>
</li>
</ul>
<i id="right" class="fa-solid fa-angle-right"></i>
</div>
<!-- sliders -->

<!-- ready -->


<section class="ready" id="ready">
<h1 class="question">Are you ready for a Tour?</h1>
<h3>BEST Local Experiences based on your interests and passion!</h3>
<div class="buttons">
<div class="first">

<div class="i">
<i class="fa fa-globe" ></i>
</div>

<div class="place">
<p>Where do you want to explore? <br>
<input class="country" type="text" placeholder="enter place">
<!-- <span>for example,Toronto</span> -->
</p>
</div>
<!-- <button><a href="login.html" target="_blank">see
destinations</a></button> -->
</div>

<div class="vl"></div>

<div class="second">
<i class="fa fa-calendar"></i>

<div class="place">
Tour start date <br>
<input type="date">
<!-- <span> 2023-07-10</span> -->
</div>
</div>
<div class="vl"></div>

<div class="third">
<i class="fa fa-calendar"></i>
<div class="place">
Tour end date <br>
<input type="date">
<!-- <span> 2023-07-31</span> -->
</div>
</div>
</div>

<div class="click">
<button id="clicking">Find your Adventure-></button>
</div>
</section>
<!-- ready ends -->

<!-- why us -->


<section class="why">
<div class="reason">
<h1 class="reason1">Why Us?</h1>
<p class="line1">We believe in providing high quality experience
to our travelers.</p>

<div class="lines">
<div class="box">
<img src="icons/cash.png" alt="">
<h1 class="numbers">Secure Payments</h1>
<p class="line2">We confirm you that your payments will be
safe and can be withdrawn anytime.</p>
</div>

<div class="box">
<img src="icons/support.png" alt="">

<h1 class="numbers">24/7 Support</h1>


<p class="line2">We're available to answer any questions
or concerns via online,phone or email as per your requirement.</p>
</div>

<div class="box">
<img src="icons/select.png" alt="">

<h1 class="numbers">Best Selection</h1>


<p class="line2">Our strict screening process enables
you to only see best quality tours</p>
</div>

<div class="box">
<img src="icons/best .png" alt="">

<h1 class="numbers">Best Price Guarantee</h1>


<p class="line2">Found a lower price elsewhere, we'll
match you.</p>
</div>
</div>
</div>
<div class="pic">
<img src="travel.png" alt="">
</div>
</section>
<!-- why us ends -->

<!-- reviews -->


<section class="review" id="Review">
<h1>Popular Local <span> Guides</span></h1>
<h3>Our most popular local guides based on reviews and feedback</h3>

<div class="review_box">
<div class="review_card">
<div class="review_profile">
<img src="people/person1.jpeg" alt="">
</div>

<div class="review_text">
<h2 class="name">Kovalchuk</h2>
<div class="review_icons">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
</div>
</div>
</div>

<div class="review_card">
<div class="review_profile">
<img src="people/review_2.png" alt="">
</div>

<div class="review_text">
<h2 class="name">Matt</h2>

<div class="review_icons">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
</div>
</div>
</div>

<div class="review_card">
<div class="review_profile">
<img src="people/review_1.png" alt="">
</div>

<div class="review_text">
<h2 class="name">Boom Patty</h2>

<div class="review_icons">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
</div>
</div>
</div>

<div class="review_card">
<div class="review_profile">
<img src="people/review_3.png" alt="">
</div>

<div class="review_text">
<h2 class="name">Marianna</h2>

<div class="review_icons">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
</div>
</div>
</div>

<div class="review_card">
<div class="review_profile">
<img src="people/review_4.png" alt="">
</div>

<div class="review_text">
<h2 class="name">Jon Deo</h2>

<div class="review_icons">
<i class="fa-solid fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
</div>
</div>
</div>

</section>
<!-- review ends -->
<!-- frequently asked questions -->
<section class="asked">
<h1>Frequently Asked Questions</h1>
<div class="questions">
<div class="questions-item">
<button id="questions-button-1" aria-expanded="false">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<span class="questions-title">How much money should I budget
for my trip?</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="questions-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Elementum
sagittis vitae et leo duis ut.
Ut tortor pretium viverra suspendisse potenti.
</p>
</div>
</div>
<div class="questions-item">
<button id="questions-button-2" aria-expanded="false">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<span class="questions-title">How do I get around in the city
or country I'm visiting?</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="questions-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Elementum
sagittis vitae et leo duis ut.
Ut tortor pretium viverra suspendisse potenti.
</p>
</div>
</div>
<div class="questions-item">
<button id="questions-button-3" aria-expanded="false">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<span class="questions-title">How can I avoid common travel
scams and stay safe during my trip?</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="questions-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Elementum
sagittis vitae et leo duis ut.
Ut tortor pretium viverra suspendisse potenti.
</p>
</div>
</div>
<div class="questions-item">
<button id="questions-button-4" aria-expanded="false">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<span class="questions-title">Are there any entry or exit fees
I should be aware of at the airport?</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="questions-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Elementum
sagittis vitae et leo duis ut.
Ut tortor pretium viverra suspendisse potenti.
</p>
</div>
</div>
<div class="questions-item">
<button id="questions-button-5" aria-expanded="false">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<span class="questions-title">What are the emergency contact
numbers for the destination country?</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="questions-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Elementum
sagittis vitae et leo duis ut.
Ut tortor pretium viverra suspendisse potenti.
</p>
</div>
</div>
</div>
</section>
<!-- ends -->

<!-- email -->


<section class="contact" id="contact">
<h1>Contact Us</h1>
<div class="row1">
<div class="im">
<img src="contact.jpg" alt="">
</div>

<form action="">
<div class="input input1">
<input type="text" placeholder="name">
<input type="email" placeholder="email">
</div>

<div class="input input2 ">


<input type="text" placeholder="subject">
</div>

<button class="click1" >Send Message</button>

</form>

</div>
<form class="form2">

<input type="email" class="email" placeholder="your email">

<button class="click2">Submit</button>
</form>
</section>

<!-- email ends -->


<!-- footer -->
<section class="footer" id="footer">
<div class="social">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="mailto:[email protected]"><i class="fa fa-
envelope"></i></a>
</div>

<ul class="list">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Privacy Policy</a>
</li>
</ul>
<p class="copyright">
Voygr @ 2023
<br>
Created by <span class="span">Ayesha Siddiqua</span>. All Rights
Reserved
</p>
</section>
<!-- footer ends -->
<script src="index.js"></script>

</body>
</html>

You might also like