Skip to content

Commit

Permalink
Merge branch 'apu52:main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
avanimathur authored May 15, 2024
2 parents 92ed928 + 1dfc523 commit bb501f4
Show file tree
Hide file tree
Showing 6 changed files with 251 additions and 21 deletions.
25 changes: 13 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@
</p>
</div>

<h2>Hi there👋, Enjoy with the World of Open source contribution </h2>
<h2>Hi there👋, Enjoy the World of Open source contribution </h2>


<p>Hello Coders👨‍💻 ,I am Arpan Chowdhury, an aspiring Web developer.🤖 Here is the project of the front-end Web Developement.</p>
<p>Hello Coders👨‍💻 ,I am Arpan Chowdhury, an aspiring Web developer.🤖 Here is the project on front-end Web Development.</p>



Expand All @@ -37,6 +37,7 @@
<h2>Table of Contents🧾</h2>

- [Overview📌](#overview)
- [Features](#features)
- [Technology Used🚀](#technology-used)
- [Open-Source-Programmes⭐](#open-source-programmes)
- [Getting Started💥](#getting-started)
Expand All @@ -47,16 +48,16 @@
<br>

<h2>Overview📌</h2>
<p> Here is the project of the front-end Web Developement.This repo contains my project on Travel Website ✈️ using HTML,CSS . It contains the landing page of a travel tour company website👨🏻‍💻.We oftenly search for many travelling places here & there , So Here is it🚤.I welcome you all to contribute in this repository & make this a grand project. So, what are you waiting for??🤔Just jump into it after reading the guidelines📚</p>
<p> Here is a project on front-end Web Development.This repository contains my project on a Travel Website ✈️ using HTML and CSS . It contains the landing page of a travel tour company website👨🏻‍💻.We often search for many travel destinations here and there, so here it is🚤.I welcome you all to contribute to this repository and make it a grand project. So, what are you waiting for??🤔Just jump into it after reading the guidelines📚.</p>

<h2>Live Project -- https://apu52.github.io/Travel_Website/</h2>
<h2>Features</h2>

**Features**
- An Introductory Page
- Top Destination Page
- Best trip Packages
- Our Trip gallery
- Contact us page
- **Introductory Page**: Welcomes visitors with an engaging introductory page that highlights the essence of our travel website and sets the tone for exploration.
- **Top Destination Page**: Showcases top travel destinations with captivating imagery, detailed descriptions, and essential information to inspire and inform visitors.
- **Best Trip Packages**: Presents the best trip packages tailored to different interests and budgets, complete with itinerary details, pricing, and booking options for seamless travel planning.
- **Our Trip Gallery**: Curates a visually stunning gallery showcasing memorable moments and experiences from our trips, enticing visitors to embark on their own adventures. Includes interactive features such as user comments.
- **Contact Us Page**: Provides a user-friendly contact page with essential contact information inquiry forms, amd interactive maps for visitors to reach out and engage with our travel company effortlessly.

<h2>Technology Used🚀</h2>

Expand Down Expand Up @@ -167,15 +168,15 @@ git push origin YourBranchName

<h2>Contributing Guidelines📑</h2>

Read our [Contributing Guidelines](https://github.com/apu52/Travel_Website/blob/main/CONTRIBUTING.md) to learn about our development process, how to propose bugfixes and improvements of our Project
To learn about our development process, how to propose bug fixes and improvements of our project please read our [Contributing Guidelines.](https://github.com/apu52/Travel_Website/blob/main/CONTRIBUTING.md)

<h2>Code Of Conduct📑</h2>

This project and everyone participating in it is governed by the [Code of Conduct](https://github.com/apu52/Travel_Website/blob/main/Code_of_conduct.md). By participating, you are expected to uphold this code.
This project and everyone participating in it are governed by the [Code of Conduct](https://github.com/apu52/Travel_Website/blob/main/Code_of_conduct.md). By participating, you are expected to uphold this code.

</br>
<p align = "center">
Show some ❤️&nbsp; by giving <img src="https://imgur.com/o7ncZFp.jpg" height=25px width=25px> to this repo
Show some ❤️&nbsp; by giving <img src="https://imgur.com/o7ncZFp.jpg" height=25px width=25px> to this repository.
</p>

<div align="center">
Expand Down
Binary file added img/danial.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/quote.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/robin.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
153 changes: 144 additions & 9 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
<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 Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<link rel="stylesheet" href="./loader.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
Expand Down Expand Up @@ -55,6 +58,7 @@
}
</style>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
</head>


Expand Down Expand Up @@ -95,14 +99,14 @@ <h1>TourGuide . . .</h1>
<a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>

<ul class="navLinks">
<li class="link home" data-aos="fade-down"><a href="#Home">Home</a></li>
<li class="link" data-aos="fade-down"><a href="#AboutUs">AboutUs</a></li>
<li class="link" data-aos="fade-down"><a href="#Destinations">Destinations</a></li>
<li class="link" data-aos="fade-down"><a href="#trip">Pricing</a></li>
<li class="link" data-aos="fade-down"><a href="#ReviewGallery">Trip Gallery</a></li>
<li class="link" data-aos="fade-down"><a href="#testimonials">Testimonials</a></li>
<li class="link" data-aos="fade-down"><a href="feedback.html">Rate Us?</a></li>
<li class="link" data-aos="fade-down"><a href="#contact">Contact Us</a></li>
<li class="link home" data-aos="fade-down"><a href="#Home"><i class="ri-home-fill"></i> Home</a></li>
<li class="link" data-aos="fade-down"><a href="#AboutUs"><i class="ri-user-3-fill"></i> AboutUs</a></li>
<li class="link" data-aos="fade-down"><a href="#Destinations"><i class="ri-landscape-fill"></i> Destinations</a></li>
<li class="link" data-aos="fade-down"><a href="#trip"><i class="ri-price-tag-3-fill"></i> Pricing</a></li>
<li class="link" data-aos="fade-down"><a href="#ReviewGallery"><i class="ri-gallery-fill"></i> Gallery</a></li>
<li class="link" data-aos="fade-down"><a href="#testimonials"><i class="ri-layout-2-fill"></i> Testimonials</a></li>
<li class="link" data-aos="fade-down"><a href="feedback.html"><i class="ri-service-fill"></i> RateUs?</a></li>
<li class="link" data-aos="fade-down"><a href="#contact"><i class="ri-customer-service-2-fill"></i> ContactUs</a></li>

</ul>
<a href="newLogin.html" class="contact-btn"><button class="btn" id="btn-style" style="margin: 0;"
Expand Down Expand Up @@ -512,7 +516,7 @@ <h2 class="section__title" data-aos="zoom-in">

<!-- Testimonials Section -->

<section class="testimonials" id="testimonials">
<!-- <section class="testimonials" id="testimonials">
<h2 class="testimonial-heading section__title" align-items="center" data-aos="fade-in">Testimonials</h2>
<div class="testimonial-container">
<div class="testimonial-user" data-aos="fade-up">
Expand Down Expand Up @@ -555,8 +559,139 @@ <h3>Katie</h3>
</div>
</div>
</div>
</section> -->


<h2 class="testimonial-heading section__title" >Testimonials</h2>
<section class="testimonials" id="testimonials">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">


<div class="swiper-slide">
<div class="testimonialBox">
<img src="/img/quote.png" class="quote">
<div class="testimonialContent">
<p>TourGuide made our dream vacation a reality! From the
breathtaking landscapes to the seamless logistics, every moment was a new adventure. The personalized
itinerary and expert guides added a special touch to our journey. We can't wait to book our next trip with
TourGuide!</p>
<div class="details">
<div class="imgBX">
<img src="/img/testimonial1.jpg" alt="">
</div>
<h3>Joseph <br> <span>Certified User </span></h3>
</div>
</div>
</div>
</div>


<div class="swiper-slide">
<div class="testimonialBox">
<img src="/img/quote.png" class="quote">
<div class="testimonialContent">
<p>Our cultural tour with TourGuide exceeded all expectations.
The
immersive experiences, knowledgeable guides, and carefully curated activities allowed us to connect with
the
local culture in a way we never thought possible. Thanks to TourGuide.</p>
<div class="details">
<div class="imgBX">
<img src="/img/testimonial2.jpg" alt="">
</div>
<h3>Katie <br> <span>Certified User </span></h3>
</div>
</div>
</div>
</div>


<div class="swiper-slide">
<div class="testimonialBox">
<img src="/img/quote.png" class="quote">
<div class="testimonialContent">
<p>Tourguide exceeded my expectations! Seamless booking process, knowledgeable guides, and unforgettable experiences.
A must for any traveler seeking authentic adventures. Highly recommend for a memorable journey!</p>
<div class="details">
<div class="imgBX">
<img src="/img/danial.jpg" alt="">
</div>
<h3>Danial<br> <span>Certified User </span></h3>
</div>
</div>
</div>
</div>



<div class="swiper-slide">
<div class="testimonialBox">
<img src="/img/quote.png" class="quote">
<div class="testimonialContent">
<p>An exceptional experience! The tour guides were knowledgeable, friendly, and made our trip unforgettable.
Seamless organization and personalized attention. Highly recommend for any traveler seeking an immersive journey!</p>
<div class="details">
<div class="imgBX">
<img src="/img/robin.jpg" alt="">
</div>
<h3>Robin <br> <span>Certified User </span></h3>
</div>
</div>
</div>
</div>

<div class="swiper-slide">
<div class="testimonialBox">
<img src="/img/quote.png" class="quote">
<div class="testimonialContent">
<p>Traveling with the family has never been easier! TourGuide
took
care of every detail, ensuring a stress-free and enjoyable vacation for all. The kid-friendly activities
and
family-oriented guides made our trip unforgettable.</p>

<div class="details">

<div class="imgBX">
<img src="/img/Abhisek Tamang.jpg" alt="">
</div>

<h3>Charles <br> <span>Certified User </span></h3>
</div>

</div>
</div>
</div>



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

<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".swiper-container", {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 0,
stretch: 0,
depth: 100,
modifier: 2,
slideShadows : true,
},
loop:true,
});
</script>

<!--------------------------------------- Updated Contact Us Section ----------------------------------------------->

<!-- <section class="contact" id="contact">
Expand Down
94 changes: 94 additions & 0 deletions styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -1933,3 +1933,97 @@ body {
#toggle:hover i {
color: #ffffff80; /* 80% opacity white for hovering effect */
}


/* Testimonial Section */

.testimonials{
position: relative;
width: 100%;
border-radius: 2%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #00ffe7;
overflow: hidden;
}

.swiper-slide {
background-position: center;
background-size: cover;
width: 320px;
background-color: #00ffe7;
box-shadow: 0 15px 50px rgba(0,0,0,0.2);
filter: blur(4px);
border-radius: 2%;

}
.swiper-slide-active {
filter: blur(0px);
background-color: white;
border-radius: 2%;

}
.testimonialContent{
border-radius: 2%;
}

.testimonialBox{
border-radius: 100%;
position: relative;
width: 100%;
height: 100%;
padding: 40px;
padding-top: 90px;
color: #999;
}
.testimonialBox .quote{
position: absolute;
height: 80px;
width: 80px;
top: 20px;
right: 30px;
bottom: 20px;
opacity: 0.2;
}

.testimonialBox .details{
display: flex;
align-items: center;
margin-top: 20px;
}
.testimonialBox .details .imgBX{
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
margin-right: 10px;
}
.testimonialBox .details .imgBX img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonialBox .details h3{
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
color: hotpink;
line-height: 1.1em;
}
.testimonialBox .details h3 span{
font-size: 12px;
color: blue;
margin-left: 20px;
}

.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-left
{
background-image: none;
}

0 comments on commit bb501f4

Please sign in to comment.