forked from sanchitc05/Trip-Tailor
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
199 lines (185 loc) · 7.43 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Frontend/styles.css">
<link rel="stylesheet" href="./Frontend/footer.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<title>Trip Tailor</title>
</head>
<body>
<!-- Navbar -->
<nav class="navbar">
<div class="navbar-logo"><img src="logo.png" style="height:80px;width:120px;padding-top:2px;"></div>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<ul class="navbar-links">
<li><a href="../index.html" class="navbar-link">Home</a></li>
<li><a href="#features" class="navbar-link">Features</a></li>
<li><a href="#faq" class="navbar-link">FAQs</a></li>
<li><a href="../contributors/contributor.html" class="navbar-link">Contributors</a></li>
<li><a href="../contact_us_page/contactus.html" class="navbar-link">Contact</a></li>
<li><a href="signin/sign-in.html" class="navbar-link">Sign In <i class="fa-solid fa-arrow-right-to-bracket"></i></a></li>
</ul>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="hero-overlay"></div>
<div class="hero-content">
<h1>Your Journey Starts Here</h1>
<p class="hero-subtext"><b>Find the best travel options tailored for you</b></p>
<a href="Trip_Recommendation_Page/Recommendation.html" class="cta-button">Start Planning with AI</a>
</div>
</section>
<section class="features" id="features">
<div class="feature-card">
<div class="feature-icon">🗺️</div>
<div class="feature-title">Route Comparison</div>
<p class="feature-description">Compare travel routes to choose the best path.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<div class="feature-title">Expense Calculator</div>
<p class="feature-description">Estimate and compare travel costs to budget smarter.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🏨</div>
<div class="feature-title">Accommodation Finder</div>
<p class="feature-description">Find stays that fit your preferences and budget.</p>
</div>
<div class="feature-card">
<div class="feature-icon">✈️</div>
<div class="feature-title">Popular destinations</div>
<p class="feature-description">Take a look at the beautiful destinations that are trending.</p>
</div>
</section>
<section class="faq" id="faq">
<h2>Frequently Asked Questions</h2>
<div class="faq-item">
<div class="faq-question">
How does Trip Tailor work?
<span class="faq-icon">+</span>
</div>
<div class="faq-answer">
We provide personalized travel options, comparing routes, expenses, and accommodations tailored to your preferences.
</div>
</div>
<div class="faq-item">
<div class="faq-question">
Is it free to use?
<span class="faq-icon">+</span>
</div>
<div class="faq-answer">
Yes, our basic features are completely free. We also offer premium plans for advanced options.
</div>
</div>
<div class="faq-item">
<div class="faq-question">
Can I customize my travel preferences?
<span class="faq-icon">+</span>
</div>
<div class="faq-answer">
Absolutely! You can customize your travel preferences to receive tailored suggestions that best match your needs.
</div>
</div>
<div class="faq-item">
<div class="faq-question">
What support options are available?
<span class="faq-icon">+</span>
</div>
<div class="faq-answer">
We offer 24/7 customer support through chat, email, and phone for all your travel inquiries.
</div>
</div>
</section>
<script>
document.querySelectorAll('.faq-question').forEach(question => {
question.addEventListener('click', () => {
const faqItem = question.parentElement;
faqItem.classList.toggle('open');
});
});
document.querySelector('.hamburger').addEventListener('click', () => {
const navLinks = document.querySelector('.navbar-links');
navLinks.classList.toggle('show');
});
</script>
<script> window.chtlConfig = { chatbotId: "5766754121" } </script>
<script async data-id="5766754121" id="chatling-embed-script" type="text/javascript" src="https://chatling.ai/js/embed.js"></script>
<!-- footer here -->
<footer>
<div class="footer-content">
<div class="footer-section">
<h3>Trip Tailor</h3>
<p>Personalized travel planning made easy-explore destinations and create memories.</p>
<div class="social-links">
<a href="" target="_blank" aria-label="Facebook"><i
class="fab fa-facebook"></i></a>
<a href="" target="_blank" aria-label="Twitter"><i
class="fab fa-twitter"></i></a>
<a href="" target="_blank" aria-label="Instagram"><i
class="fab fa-instagram"></i></a>
<a href="" target="_blank" aria-label="YouTube"><i
class="fab fa-youtube"></i></a>
<a href="" target="_blank" aria-label="Linkedin"><i
class="fa-brands fa-linkedin-in"></i></a>
</div>
</div>
<div class="footer-section">
<h4>Quick Links</h4>
<ul>
<li><a href="#hero">Home</a></li>
<li><a href="#wisdom">About Us</a></li>
<li><a href="#content">Our Trips</a></li>
<li><a href="#hero">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Travel Planner</h4>
<ul>
<!-- need to add respective page link -->
<li><a href="countingpage.html">Planner</a></li>
<li><a href="#hero">Duration</a></li>
<li><a href="#hero">Experiences</a></li>
</ul>
</div>
<div class="footer-section">
<h4 style="margin-bottom: 40px;">Contact Us</h4>
<ul class="contact-info" style="margin-top: -20px;">
<li><i class="fas fa-envelope"></i><a href="mailto:[email protected]"
style="margin-left: -5px;">[email protected]</a></li>
<li><i class="fas fa-map-marker-alt"></i><span>India</span></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p> © 2024 Trip Tailor</p>
</div>
</footer>
<!-- Scroll to Top Button -->
<button id="scrollToTopBtn" title="Go to top"><b>↑</b></button>
<script>
const scrollToTopButton = document.getElementById('scrollToTopBtn');
const scrollFunc = () => {
let y = window.scrollY;
if (y > 100) {
scrollToTopButton.className = "top-link show";
} else {
scrollToTopButton.className = "top-link hide";
}
};
window.addEventListener("scroll", scrollFunc);
const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
};
scrollToTopButton.onclick = function (e) {
e.preventDefault();
scrollToTop();
};
</script>
</body>
</html>