Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Added the about us page #1372

Merged
merged 2 commits into from
Aug 10, 2024
Merged

feat: Added the about us page #1372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f7427b8
Added the about us page
ayush-848 Aug 9, 2024
5563131
Merge branch 'main' into main
ayush-848 Aug 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
185 changes: 185 additions & 0 deletions about.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,185 @@
body, html {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
width: 100vw;
min-height: 100vh;
color: #fff;
overflow-x: hidden;
}

.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-image: url('path_to_fallback_image.jpg');
background-size: cover;
background-position: center;
}

.background video {
width: 100%;
height: 100%;
object-fit: cover;
}


.content-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 40px;
text-align: center;
background-color: rgba(0, 0, 0, 0.6);
}

header {
margin-bottom: 30px;
}

.heading {
font-size: 4rem;
color: #fff;
margin-bottom: 10px;
font-weight: 700;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
letter-spacing: 2px;
}

.subheading {
font-size: 1.5rem;
color: #f0f0f0;
margin-top: 0;
font-weight: 300;
letter-spacing: 1px;
}

.content-block {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
max-width: 800px;
}
.video-container {
width: 100%;
max-width: 800px;
position: relative;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
margin-bottom: 4rem;
}

.video-container::before {
content: '';
display: block;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}


.summary {
font-size: 1.1rem;
color: #f0f0f0;
line-height: 1.6;
text-align: center;
margin: 0;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.features {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 3rem !important;
margin: 0 auto;
margin-left: 2.2rem;
}

.feature {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}

.feature i {
font-size: 2.5rem;
color: #ff6b6b;
}

.feature h3 {
font-size: 1.1rem;
font-weight: 600;
margin: 0;
}

.cta-button {
display: inline-block;
padding: 15px 30px;
background-color: #ff6b6b;
color: #fff;
text-decoration: none;
font-size: 1.2rem;
font-weight: 600;
border-radius: 50px;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
margin-top: 1.5rem;
}

.cta-button:hover {
background-color: #ff8787;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(255, 107, 107, 0.6);
}

@media (max-width: 768px) {
.content-wrapper {
padding: 20px;
}

.heading {
font-size: 3rem;
}

.subheading {
font-size: 1.2rem;
}

.summary {
font-size: 1rem;
}

.features {
flex-direction: column;
gap: 20px;
}

.feature i {
font-size: 2rem;
}

.feature h3 {
font-size: 1rem;
}

.cta-button {
font-size: 1rem;
padding: 12px 25px;
}
}
56 changes: 56 additions & 0 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - TourGuide</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="about.css">
</head>
<body>
<div class="background">
<video autoplay muted loop playsinline>
<source src="./about.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>

<div class="content-wrapper">
<header>
<h1 class="heading">About Us</h1>
<p class="subheading">Discover Your Purpose Through Travel</p>
</header>

<div class="content-block">
<div class="video-container">
<iframe src="https://www.youtube.com/embed/veULUjsSrPg?si=eq3sDAt3-yZnZUme" allowfullscreen></iframe>
</div>
<p class="summary">
Welcome to TourGuide, where life's purpose unfolds through exploration and the pursuit of the extraordinary. We empower you to navigate the world with unparalleled assistance, forging unforgettable memories.
</p>
<p class="summary">
Our local guides help you effortlessly navigate languages, customs, and traditions. We offer curated itineraries, once-in-a-lifetime experiences, and valuable travel advice, all customizable to your wishes.
</p>
<p class="summary">
Since 2024, TourGuide has grown to 30,000+ guides across 200+ countries. Join our family, where every journey becomes a story worth sharing!
</p>
<div class="features">
<div class="feature">
<i class="fas fa-map-marked-alt"></i>
<h3>Curated Itineraries</h3>
</div>
<div class="feature">
<i class="fas fa-users"></i>
<h3>Local Guides</h3>
</div>
<div class="feature">
<i class="fas fa-star"></i>
<h3>Unforgettable Experiences</h3>
</div>
</div>
<a href="/" class="cta-button">Start Your Journey</a>
</div>
</div>
</body>
</html>
Binary file added about.mp4
View file
Open in desktop
Binary file not shown.
53 changes: 14 additions & 39 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -552,7 +552,7 @@ <h1>TourGuide . . .</h1>
<li class="link" id="View-link" data-aos=""><a href="mapa.html">View</a></li>
<li class="link" id="LogIn-link" data-aos=""><a href="newLogin.html">Log In</a></li>
<li class="link" data-aos=""><a href="#Home">Home</a></li>
<li class="link" data-aos=""><a href="#AboutUs">About</a></li>
<li class="link" data-aos=""><a href="./about.html">About</a></li>
<li class="link dropdown" data-aos="">
<a href="#Services" class="dropdown">Services</a>
<ul class="dropdown-menu">
Expand Down Expand Up @@ -667,66 +667,40 @@ <h1 data-aos="fade-in">Find Your Perfect Getaway<br />Discover the World's Best
<!-- Left background color column -->
<div class="col-8 bg primary"></div>
<!-- Right content container -->
<div
class="section__container gallary__container relative z-10 max-w-screen-xl px-4 mx-auto text-center pb-14">
<div class="section__container gallary__container relative z-10 max-w-screen-xl px-4 mx-auto text-center pb-14">
<div class="aboutcon">
<div class="col-span-2 mx-auto lg:mx-0 lg:text-left">
<h1 class="headingofAbout section__title " data-aos=" fade-in"><b>About Us</b></h1>
<h1 class="headingofAbout section__title" data-aos="fade-in"><b>About Us</b></h1>
<!-- Article with about us content -->
<article class="w-full text-left format sm:format-base lg:format-lg format-blue dark:format-invert">
<!-- Adding the content -->
<style>
/* CSS for hover effect */
.aboutcontent:hover {
transform: scale(1.8);
transition: transform 0.8s ease;
transform: scale(1.05);
transition: transform 0.5s ease;
}
.video-container {
display: flex;
align-items: center;
justify-content: center;
height: 30vh;
}
.iframe {
width: 760px;
height: 515px;
border: none;

iframe {
width: 100%;
height: 100%;
max-width: 700px;
max-height: 400px;
border: none;
border-radius: 10px;
}
</style>
<br>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/veULUjsSrPg?si=eq3sDAt3-yZnZUme" allowfullscreen></iframe>
</div>
<p class="aboutcontent" data-aos="fade-in" style="text-align: justify;">
<span style="margin-left: 80px;"></span>Welcome to TourGuide, where we firmly believe that life's
true purpose unfolds amidst the thrill of exploration, the embrace of the unfamiliar, and the
pursuit of the extraordinary! Our mission is to embolden you, the intrepid traveler, to unveil this
purpose and elevate your journey by providing unparalleled assistance and guidance. Let us be your
compass as you navigate through the wonders of the world, forging unforgettable memories and
discovering the essence of travel!
</p>

<p class="aboutcontent" data-aos="fade-in" style="text-align: justify;">
<span style="margin-left: 80px;"></span> At TourGuide, our local guides serve as your passport to
effortlessly navigate through local
languages, customs, and traditions that often make traveling to a foreign place overwhelming. We
provide curated travel itineraries, once-in-a-lifetime experiences, valuable travel advice, and the
freedom to customize itineraries to ensure everything aligns with your wishlist.
</p>

<p class="aboutcontent" data-aos="fade-in" style="text-align: justify;">
<span style="margin-left: 80px;"></span>Since our inception in 2024, TourGuide has cultivated a
dynamic travel community, with 30,000+
guides hailing from over 200+ countries globally. We continue to grow each day, expanding the
horizons of possibilities for discovering the world. With TourGuide by your side, there's no limit
to the different ways you can embark on an unforgettable journey!
</p>

<p class="aboutcontent" data-aos="fade-in" style="text-align: justify;">
<strong><span style="margin-left: 50px;"></span> We welcome you to the TourGuide family - where
every journey becomes a story worth
sharing!</strong>
Welcome to TourGuide, your trusted companion in discovering the wonders of the world. We provide unparalleled assistance, offering curated itineraries, local guides, and unforgettable experiences tailored just for you. Join our growing community and let your journey become a story worth sharing!
</p>
</article>
</div>
Expand All @@ -735,6 +709,7 @@ <h1 class="headingofAbout section__title " data-aos=" fade-in"><b>About Us</b></
</div>
</div>
</section>



</div>
Expand Down
Loading
Loading