hey this my web page code <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CapTravel</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-primary: linear-gradient(135deg, rgba(236, 254, 255, 0.9), rgba(240, 253, 255, 0.9));
--bg-secondary: rgba(255,255,255,0.8);
--text-primary: #1e293b;
--text-secondary: #475569;
--accent: #0ea5e9;
--accent-hover: #3b82f6;
--border: #e2e8f0;
--shadow-light: rgba(0,0,0,0.1);
--overlay: linear-gradient(135deg, rgba(236, 254, 255, 0.8), rgba(240, 253, 255, 0.8));
--bg-image: url('https://source.unsplash.com/random/1920x1080/?beautiful,nature');
--hero-image: url('https://source.unsplash.com/random/1920x800/?travel,journey');
}
[data-theme="dark"] {
--bg-primary: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98));
--bg-secondary: rgba(30, 41, 59, 0.95);
--text-primary: #f8fafc;
--text-secondary: #e2e8f0;
--accent: #0ea5e9;
--accent-hover: #3b82f6;
--border: #475569;
--shadow-light: rgba(0,0,0,0.4);
--overlay: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95));
--bg-image: url('https://source.unsplash.com/random/1920x1080/?night,nature');
--hero-image: url('https://source.unsplash.com/random/1920x800/?night,travel');
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background-image: var(--bg-image);
background-size: cover;
background-position: center;
background-attachment: fixed;
color: var(--text-primary);
overflow-x: hidden;
line-height: 1.6;
transition: all 0.3s ease;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 5%;
background: var(--bg-primary);
backdrop-filter: blur(15px);
box-shadow: 0 4px 20px var(--shadow-light);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
transition: all 0.3s ease;
}
.logo {
font-size: 2em;
font-weight: 700;
color: var(--accent);
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
transition: color 0.3s ease;
}
.header-actions {
display: flex;
align-items: center;
gap: 15px;
}
.theme-toggle {
background: none;
border: none;
font-size: 1.5em;
cursor: pointer;
color: var(--accent);
transition: color 0.3s ease;
}
.profile-container {
position: relative;
}
.profile {
width: 45px;
height: 45px;
border-radius: 50%;
background: linear-gradient(45deg, var(--accent), var(--accent-hover));
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4em;
color: #fff;
box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
transition: all 0.3s ease;
}
.profile:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(14, 165, 233, 0.5);
}
.profile-dropdown {
display: none;
position: absolute;
top: 55px;
right: 0;
background: var(--bg-secondary);
border-radius: 8px;
box-shadow: 0 8px 25px var(--shadow-light);
min-width: 100px;
z-index: 1002;
backdrop-filter: blur(10px);
border: 1px solid var(--border);
transition: all 0.3s ease;
}
.profile-dropdown.show {
display: block;
}
.profile-dropdown ul {
list-style: none;
padding: 5px 0;
}
.profile-dropdown li {
padding: 6px 12px;
cursor: pointer;
transition: background 0.3s;
color: var(--text-primary);
border-bottom: 1px solid var(--border);
font-size: 0.85em;
}
.profile-dropdown li:hover {
background: var(--border);
}
.profile-dropdown li:last-child {
border-bottom: none;
}
.hero-section {
background-image: var(--hero-image);
background-size: cover;
background-position: center;
background-attachment: fixed;
padding: 150px 5% 100px;
position: relative;
transition: background-image 0.3s ease;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--overlay);
transition: background 0.3s ease;
}
.hero-content {
position: relative;
z-index: 1;
text-align: center;
}
.quote {
font-size: 3.5em;
font-weight: 700;
margin-bottom: 50px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
letter-spacing: 1px;
color: var(--text-primary);
transition: color 0.3s ease;
opacity: 0;
transform: translateY(50px);
}
.quote.animate {
opacity: 1;
transform: translateY(0);
transition: all 0.8s ease-out;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.hero {
animation: fadeIn 1.5s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.btn {
display: inline-block;
padding: 18px 40px;
margin: 15px;
background: linear-gradient(45deg, var(--accent), var(--accent-hover));
color: #fff;
text-decoration: none;
border-radius: 50px;
font-size: 1.3em;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(30px);
}
.btn.animate {
opacity: 1;
transform: translateY(0);
transition: all 0.6s ease-out;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s;
}
.btn:hover::before {
left: 100%;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(14, 165, 233, 0.5);
}
.places {
padding: 80px 5%;
background: var(--bg-primary);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 40px;
max-width: 1400px;
margin: 0 auto;
transition: all 0.3s ease;
}
.places h2 {
text-align: center;
grid-column: 1/-1;
margin-bottom: 50px;
font-size: 2.5em;
color: var(--text-primary);
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
transition: color 0.3s ease;
opacity: 0;
transform: translateY(50px);
}
.places h2.animate {
opacity: 1;
transform: translateY(0);
transition: all 0.8s ease-out;
}
.place-card {
background: var(--bg-secondary);
border-radius: 20px;
overflow: hidden;
transition: all 0.4s ease;
cursor: pointer;
backdrop-filter: blur(10px);
border: 1px solid var(--border);
opacity: 0;
transform: translateY(50px);
}
.place-card.animate {
opacity: 1;
transform: translateY(0);
transition: all 0.6s ease-out;
}
.place-card:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 20px 40px var(--shadow-light);
}
.place-card img {
width: 100%;
height: 250px;
object-fit: cover;
transition: transform 0.4s ease;
}
.place-card:hover img {
transform: scale(1.1);
}
.place-card h3 {
padding: 20px;
text-align: center;
font-size: 1.5em;
color: var(--accent);
transition: color 0.3s ease;
}
.place-card p {
padding: 0 20px 20px;
text-align: center;
color: var(--text-secondary);
transition: color 0.3s ease;
}
.dynamic-places {
grid-column: 1/-1;
position: relative;
height: 300px;
overflow: hidden;
margin: 40px 0;
border-radius: 20px;
box-shadow: 0 10px 30px var(--shadow-light);
transition: box-shadow 0.3s ease;
opacity: 0;
transform: translateY(50px);
}
.dynamic-places.animate {
opacity: 1;
transform: translateY(0);
transition: all 0.8s ease-out;
}
.dynamic-places img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1.5s ease;
}
.dynamic-places img.active {
opacity: 1;
}
.features-section {
padding: 80px 5%;
background: var(--bg-primary);
text-align: center;
max-width: 1200px;
margin: 0 auto;
transition: all 0.3s ease;
}
.features-section h2 {
font-size: 2.5em;
color: var(--text-primary);
margin-bottom: 50px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
transition: color 0.3s ease;
opacity: 0;
transform: translateY(50px);
}
.features-section h2.animate {
opacity: 1;
transform: translateY(0);
transition: all 0.8s ease-out;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
}
.feature-card {
background: var(--bg-secondary);
padding: 30px;
border-radius: 15px;
box-shadow: 0 4px 15px var(--shadow-light);
transition: all 0.3s ease;
opacity: 0;
transform: translateY(50px);
}
.feature-card.animate {
opacity: 1;
transform: translateY(0);
transition: all 0.6s ease-out;
}
.feature-card:hover {
transform: translateY(-5px);
}
.feature-card h3 {
font-size: 1.5em;
color: var(--accent);
margin-bottom: 15px;
transition: color 0.3s ease;
}
.feature-card p {
color: var(--text-secondary);
transition: color 0.3s ease;
}
footer {
text-align: center;
padding: 80px 5% 40px;
background: var(--bg-primary);
color: var(--text-primary);
transition: all 0.3s ease;
}
footer h3 {
font-size: 2em;
margin-bottom: 20px;
color: var(--accent);
transition: color 0.3s ease;
opacity: 0;
transform: translateY(50px);
}
footer h3.animate {
opacity: 1;
transform: translateY(0);
transition: all 0.8s ease-out;
}
.contact-details {
max-width: 800px;
margin: 0 auto;
text-align: left;
}
.contact-item {
margin-bottom: 20px;
padding: 15px;
background: var(--bg-secondary);
border-radius: 10px;
box-shadow: 0 2px 10px var(--shadow-light);
transition: all 0.3s ease;
opacity: 0;
transform: translateY(30px);
}
.contact-item.animate {
opacity: 1;
transform: translateY(0);
transition: all 0.5s ease-out;
}
.contact-item h4 {
color: var(--accent);
margin-bottom: 5px;
transition: color 0.3s ease;
}
.contact-item p {
color: var(--text-secondary);
transition: color 0.3s ease;
}
.footer-text {
margin-top: 40px;
color: var(--text-secondary);
font-size: 0.9em;
opacity: 0;
transform: translateY(30px);
}
.footer-text.animate {
opacity: 1;
transform: translateY(0);
transition: all 0.5s ease-out;
}
.feedback-btn {
position: fixed;
bottom: 30px;
right: 30px;
background: linear-gradient(45deg, var(--accent), var(--accent-hover));
color: #fff;
border: none;
padding: 20px;
border-radius: 50%;
cursor: pointer;
font-size: 1.8em;
z-index: 1000;
box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
transition: all 0.3s ease;
}
.feedback-btn:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(14, 165, 233, 0.5);
}
.feedback-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
z-index: 1001;
justify-content: center;
align-items: center;
animation: fadeIn 0.3s ease;
transition: background 0.3s ease;
}
.feedback-content {
background: var(--bg-secondary);
padding: 40px;
border-radius: 20px;
width: 90%;
max-width: 600px;
box-shadow: 0 20px 40px var(--shadow-light);
backdrop-filter: blur(15px);
border: 1px solid var(--border);
transition: all 0.3s ease;
}
.feedback-content h3 {
text-align: center;
color: var(--accent);
margin-bottom: 20px;
font-size: 1.8em;
transition: color 0.3s ease;
}
.feedback-content textarea {
width: 100%;
height: 200px;
padding: 15px;
border-radius: 15px;
border: 1px solid var(--border);
background: var(--bg-secondary);
color: var(--text-primary);
font-family: 'Poppins', sans-serif;
resize: vertical;
margin-bottom: 20px;
transition: all 0.3s ease;
}
.feedback-content textarea::placeholder {
color: var(--text-secondary);
transition: color 0.3s ease;
}
.feedback-content button {
background: linear-gradient(45deg, var(--accent), var(--accent-hover));
color: #fff;
border: none;
padding: 12px 30px;
border-radius: 15px;
cursor: pointer;
font-weight: 600;
margin: 5px;
transition: all 0.3s ease;
}
.feedback-content button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}
.auth-modal {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
z-index: 1001;
justify-content: center;
align-items: center;
animation: fadeIn 0.3s ease;
transition: background 0.3s ease;
}
.auth-content {
background: var(--bg-secondary);
padding: 40px;
border-radius: 20px;
width: 90%;
max-width: 400px;
box-shadow: 0 20px 40px var(--shadow-light);
backdrop-filter: blur(15px);
text-align: center;
border: 1px solid var(--border);
transition: all 0.3s ease;
}
.auth-content h3 {
color: var(--accent);
margin-bottom: 20px;
font-size: 1.8em;
transition: color 0.3s ease;
}
.auth-content input {
width: 100%;
padding: 12px;
margin: 10px 0;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--bg-secondary);
color: var(--text-primary);
font-family: 'Poppins', sans-serif;
transition: all 0.3s ease;
}
.auth-content input::placeholder {
color: var(--text-secondary);
transition: color 0.3s ease;
}
.auth-content .btn-auth {
width: 100%;
margin: 10px 0;
padding: 12px;
background: linear-gradient(45deg, var(--accent), var(--accent-hover));
color: #fff;
border: none;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
}
.auth-content .btn-auth:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}
.google-btn {
background: var(--bg-secondary);
color: #4285f4;
border: 1px solid #4285f4;
margin: 10px 0;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: background 0.3s ease;
}
.close-auth {
background: var(--bg-secondary);
color: var(--text-secondary);
border: none;
padding: 10px;
border-radius: 50%;
cursor: pointer;
margin-top: 20px;
transition: all 0.3s ease;
}
@media (max-width: 768px) {
.quote { font-size: 2.5em; }
.btn { padding: 15px 30px; font-size: 1.1em; }
.places { padding: 50px 5%; gap: 30px; }
.places h2 { font-size: 2em; }
.dynamic-places { height: 200px; }
.hero-section { padding: 100px 5% 50px; }
}
</style>
</head>
<body data-theme="light">
<header>
<div class="logo">CapTravel āļø</div>
<div class="header-actions">
<button class="theme-toggle" onclick="toggleTheme()">š</button>
<div class="profile-container" onmouseover="showDropdown()" onmouseout="hideDropdown()">
<div class="profile">š¤</div>
<div class="profile-dropdown" id="profileDropdown">
<ul>
<li onclick="alert('Profile clicked'); hideDropdown();">š¤ Profile</li>
<li onclick="alert('Settings clicked'); hideDropdown();">āļø Settings</li>
<li onclick="alert('Logout clicked'); hideDropdown();">šŖ Logout</li>
</ul>
</div>
</div>
</div>
</header>
<section class="hero-section">
<div class="hero-content">
<div class="quote animate-on-scroll">āØ Make Your Trip Effortless</div>
<div class="hero">
<a href="trip/index.html" class="btn animate-on-scroll">āļø Plan a Trip</a>
<a href="#" class="btn animate-on-scroll">š Explore Destinations</a>
</div>
</div>
</section>
<section class="places">
<h2 class="animate-on-scroll">š Beautiful Places in India</h2>
<div class="place-card animate-on-scroll">
<img src="https://source.unsplash.com/400x250/?tajmahal" alt="Taj Mahal">
<h3>š Taj Mahal</h3>
<p>A UNESCO World Heritage Site and symbol of eternal love in Agra.</p>
</div>
<div class="place-card animate-on-scroll">
<img src="https://source.unsplash.com/400x250/?kerala" alt="Kerala Backwaters">
<h3>š¤ Kerala Backwaters</h3>
<p>Serene waterways offering houseboat cruises and tranquil escapes.</p>
</div>
<div class="place-card animate-on-scroll">
<img src="https://source.unsplash.com/400x250/?goa" alt="Goa Beaches">
<h3>šļø Goa Beaches</h3>
<p>Vibrant coastal paradise with sun-kissed sands and nightlife.</p>
</div>
<div class="place-card animate-on-scroll">
<img src="https://source.unsplash.com/400x250/?rajasthan" alt="Rajasthan">
<h3>š° Rajasthan Forts</h3>
<p>Discover the majestic forts and palaces of the royal state, rich in history and culture.</p>
</div>
<div class="place-card animate-on-scroll">
<img src="https://source.unsplash.com/400x250/?himalayas" alt="Himalayas">
<h3>ā°ļø Himalayas Trek</h3>
<p>Embark on breathtaking treks through the world's highest mountain range for adventure seekers.</p>
</div>
<div class="place-card animate-on-scroll">
<img src="https://source.unsplash.com/400x250/?varanasi" alt="Varanasi">
<h3>šļø Varanasi Ghats</h3>
<p>Experience the spiritual heart of India along the sacred Ganges River with ancient rituals.</p>
</div>
<div class="dynamic-places animate-on-scroll" id="dynamicCarousel">
<img src="https://source.unsplash.com/1400x300/?rajasthan,desert" alt="Rajasthan" class="active">
<img src="https://source.unsplash.com/1400x300/?himalayas,mountains" alt="Himalayas">
<img src="https://source.unsplash.com/1400x300/?varanasi,ghats" alt="Varanasi">
</div>
</section>
<section class="features-section">
<h2 class="animate-on-scroll">Why Choose CapTravel?</h2>
<div class="features-grid">
<div class="feature-card animate-on-scroll">
<h3>Personalized Itineraries</h3>
<p>Tailor-made travel plans based on your preferences, budget, and interests to ensure a unique experience.</p>
</div>
<div class="feature-card animate-on-scroll">
<h3>Travel Memories</h3>
<p>Capture and share your favorite moments from trips, creating a personal journal of adventures and discoveries.</p>
</div>
<div class="feature-card animate-on-scroll">
<h3>Hidden Gems</h3>
<p>Explore off-the-beaten-path locations and lesser-known spots that offer authentic and memorable experiences.</p>
</div>
<div class="feature-card animate-on-scroll">
<h3>Community Stories</h3>
<p>Read and contribute real traveler tales, tips, and photos to inspire and connect with fellow explorers.</p>
</div>
</div>
</section>
<footer>
<h3 class="animate-on-scroll">Contact Us</h3>
<div class="contact-details">
<div class="contact-item animate-on-scroll">
<h4>š§ Email</h4>
<p>info@captravel.com<br>support@captravel.com</p>
</div>
<div class="contact-item animate-on-scroll">
<h4>š Phone</h4>
<p>+1-234-567-890 (US)<br>+91-987-654-3210 (India)</p>
</div>
<div class="contact-item animate-on-scroll">
<h4>š Address</h4>
<p>CapTravel Headquarters<br>123 Travel Street, Mumbai, Maharashtra 400001, India</p>
</div>
<div class="contact-item animate-on-scroll">
<h4>š Business Hours</h4>
<p>Monday - Friday: 9:00 AM - 6:00 PM IST<br>Saturday: 10:00 AM - 4:00 PM IST<br>Closed on Sundays</p>
</div>
<div class="contact-item animate-on-scroll">
<h4>š Follow Us</h4>
<p>Connect with us on social media for travel tips, updates, and exclusive offers.</p>
</div>
</div>
<p class="footer-text animate-on-scroll" style="margin-top: 40px; color: var(--text-secondary); font-size: 0.9em;">© 2024 CapTravel. All rights reserved.</p>
</footer>
<button class="feedback-btn" onclick="toggleFeedback()">š¬</button>
<div class="feedback-modal" id="feedbackModal">
<div class="feedback-content">
<h3>š Send Feedback</h3>
<textarea placeholder="Write your feedback here..."></textarea>
<button onclick="sendFeedback()">Send</button>
<button onclick="toggleFeedback()">Close</button>
</div>
</div>
<!-- Auth Modal -->
<div class="auth-modal" id="authModal">
<div class="auth-content">
<h3>š Welcome to CapTravel</h3>
<p style="margin-bottom: 20px; color: var(--text-secondary);">Please sign up or log in to continue.</p>
<button class="btn-auth" onclick="showLogin()">š Log In</button>
<button class="btn-auth" onclick="showSignup()">š Sign Up</button>
<button class="google-btn btn-auth" onclick="alert('Google login simulated')">G Google </button>
<button class="close-auth" onclick="closeAuth()">Ć</button>
</div>
</div>
<script>
// Dark mode toggle
function toggleTheme() {
const body = document.body;
const currentTheme = body.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
body.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
// Update toggle button emoji
const toggleBtn = document.querySelector('.theme-toggle');
toggleBtn.textContent = newTheme === 'dark' ? 'āļø' : 'š';
}
// Load saved theme
document.addEventListener('DOMContentLoaded', function() {
const savedTheme = localStorage.getItem('theme') || 'light';
document.body.setAttribute('data-theme', savedTheme);
const toggleBtn = document.querySelector('.theme-toggle');
toggleBtn.textContent = savedTheme === 'dark' ? 'āļø' : 'š';
});
// Scroll animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate');
}
});
}, observerOptions);
document.addEventListener('DOMContentLoaded', function() {
const animateElements = document.querySelectorAll('.animate-on-scroll');
animateElements.forEach(el => observer.observe(el));
});
// Auth Modal on load
window.onload = function() {
document.getElementById('authModal').style.display = 'flex';
};
function closeAuth() {
document.getElementById('authModal').style.display = 'none';
}
function showLogin() {
alert('Login functionality - redirect to login form');
closeAuth();
}
function showSignup() {
alert('Signup functionality - redirect to signup form');
closeAuth();
}
function toggleFeedback() {
const modal = document.getElementById('feedbackModal');
modal.style.display = modal.style.display === 'flex' ? 'none' : 'flex';
}
function sendFeedback() {
const textarea = document.querySelector('.feedback-content textarea');
if (textarea.value.trim()) {
alert('Thank you for your feedback! It has been sent.');
textarea.value = '';
toggleFeedback();
} else {
alert('Please enter some feedback.');
}
}
// Profile dropdown
function showDropdown() {
document.getElementById('profileDropdown').classList.add('show');
}
function hideDropdown() {
document.getElementById('profileDropdown').classList.remove('show');
}
// Enhanced dynamic carousel
const images = document.querySelectorAll('#dynamicCarousel img');
let current = 0;
function nextImage() {
images[current].classList.remove('active');
current = (current + 1) % images.length;
images[current].classList.add('active');
}
setInterval(nextImage, 4000);
</script>
</body>
</html>remove all the colors and add colors for buttons ,text, change the background image with a beautiful nature image