<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="C:/Users/Admin/Desktop/PM-Travels-master/img/your-favicon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" href="./img/WOW.png">
<link rel="stylesheet" href="./css/style.css">
<title>Travel Web - Explore Your Dreams</title>
<style>
:root {
--font-primary: 'Poppins', sans-serif;
--font-heading: 'Playfair Display', serif;
--font-body: 'Roboto', sans-serif;
--font-accent: 'Montserrat', sans-serif;
--primary-color: #007bff;
--secondary-color: #6c757d;
--hover-color: #0056b3;
--text-dark: #333;
--text-light: #666;
--white: #ffffff;
--shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-body);
line-height: 1.6;
color: var(--text-dark);
}
h1, h2, h3 {
font-family: var(--font-heading);
font-weight: 600;
line-height: 1.2;
}
.logo {
font-family: var(--font-accent);
font-weight: 700;
font-size: 2rem;
letter-spacing: 2px;
}
.navbar {
font-family: var(--font-primary);
font-weight: 500;
position: relative;
z-index: 1000;
}
/* ONLY CENTER THE HEADER CONTENT, NOT THE ENTIRE HEADER */
.header {
position: relative;
/* Don't change the header layout - let external CSS handle it */
}
.header-content {
/* Perfect center alignment for content only */
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
text-align: center;
z-index: 10;
width: 90%;
max-width: 800px;
/* Animation override */
animation: fadeInCenter 1s ease-out !important;
animation-delay: 0.3s;
animation-fill-mode: both;
}
.header-content h1 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.header-content p {
font-family: var(--font-primary);
font-size: 1.2rem;
font-weight: 300;
font-style: italic;
margin-bottom: 1rem;
}
.header-content h3 {
font-size: 1.5rem;
font-weight: 500;
margin-bottom: 2rem;
}
.textbox h2 {
font-family: var(--font-accent);
font-size: 2rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 1rem;
letter-spacing: 1px;
}
.textbox p {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.7;
color: var(--text-light);
margin-bottom: 1.5rem;
}
/* Enhanced Button Animations */
.btn {
font-family: var(--font-primary);
font-weight: 500;
padding: 12px 30px;
border: none;
border-radius: 50px;
text-decoration: none;
display: inline-block;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--transition);
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: var(--shadow);
}
.btn-primary {
background: linear-gradient(45deg, var(--primary-color), #0099ff);
color: var(--white);
}
.btn-secondary {
background: linear-gradient(45deg, var(--secondary-color), #8a9ba8);
color: var(--white);
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: var(--transition);
}
.btn:hover::before {
left: 100%;
}
.btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.btn-primary:hover {
background: linear-gradient(45deg, var(--hover-color), #0077cc);
}
.btn-secondary:hover {
background: linear-gradient(45deg, #5a6268, #6c7b7d);
}
/* Enhanced Image Animation */
.imgbox {
overflow: hidden;
border-radius: 15px;
box-shadow: var(--shadow);
position: relative;
}
.imgbox img {
width: 100%;
height: auto;
transition: var(--transition);
display: block;
}
.imgbox::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(0, 123, 255, 0.1), rgba(0, 153, 255, 0.1));
opacity: 0;
transition: var(--transition);
}
.imgbox:hover img {
transform: scale(1.1);
}
.imgbox:hover::after {
opacity: 1;
}
/* Enhanced Feature Box Animation */
.box {
transition: var(--transition);
padding: 2rem;
border-radius: 15px;
background: var(--white);
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
}
.box::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), #0099ff);
transform: scaleX(0);
transition: var(--transition);
}
.box:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
.box:hover::before {
transform: scaleX(1);
}
/* Row Styling */
.row {
display: flex;
align-items: center;
margin-bottom: 4rem;
gap: 3rem;
}
.row1 .imgbox,
.row1 .textbox {
flex: 1;
}
.row2 {
flex-direction: row-reverse;
}
.row2 .imgbox,
.row2 .textbox {
flex: 1;
}
/* Container */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.showcase {
padding: 5rem 0;
background: #f8f9fa;
}
/* ANIMATIONS */
@keyframes fadeInCenter {
0% {
opacity: 0;
transform: translate(-50%, -50%) translateY(20px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.textbox,
.imgbox {
animation: fadeInUp 0.8s ease-out;
}
@media (max-width: 768px) {
.header-content {
width: 95%;
padding: 0 1rem;
}
.header-content h1 {
font-size: 2.5rem;
}
.header-content p {
font-size: 1rem;
}
.header-content h3 {
font-size: 1.2rem;
}
.row {
flex-direction: column;
gap: 2rem;
}
.row2 {
flex-direction: column;
}
.textbox h2 {
font-size: 1.5rem;
}
}
.navbar,
.navbar *,
.navitems,
.navitem,
.navitem a {
position: relative;
z-index: 1001 !important;
pointer-events: auto !important;
}
/* Make sure logo is also clickable */
.logo {
position: relative;
z-index: 1001 !important;
pointer-events: auto !important;
}
</style>
</head>
<body>
<header class="header">
<nav class="navbar bgdark">
<div class="container">
<h1 class="logo" image-url="travel-image2 (1)"></h1>
<ul class="navitems">
<li class="navitem"><a href="./index.html">Home</a></li>
<li class="navitem"><a href="./about.html">About</a></li>
<li class="navitem"><a href="./contact.html">Contact</a></li>
</ul>
</div>
</nav>
<div class="header-content">
<h1 class="textwhite">Plan Your Dream Trip</h1>
<p class="textwhite">Happiness is not a station you arrive at, but a manner of travelling.</p>
<h3 class="textwhite">Don't dream your life. Live your dreams.</h3>
<a href="#exloreplaces" class="btn btn-primary">
<i class="fas fa-compass"></i> Explore Places
</a>
</div>
</header>
<section class="showcase" id="exloreplaces">
<div class="container">
<div class="row row1">
<div class="imgbox">
<img src="./img/showcase-photo1 (1).jpg" alt="Khadkwasla Dam - Beautiful scenic view" loading="lazy">
</div>
<div class="textbox">
<h2>KHADKWASLA</h2>
<p>Khadakwasla Dam is a dam on the Mutha River 21 km (13 mi) from the centre of the city of Pune. Given the nature of the dam, an outlet to the downstream Khadakwasla reservoir was created at its base, offering breathtaking views and serene waters perfect for a peaceful getaway.</p>
<a href="./about.html" class="btn btn-secondary">
<i class="fas fa-arrow-right"></i> Learn More
</a>
</div>
</div>
<div class="row row2">
<div class="imgbox">
<img src="./img/showcase-photo3 (1).jpg" alt="Matheran Hill Station - Pollution-free destination" loading="lazy">
</div>
<div class="textbox">
<h2>MATHERAN</h2>
<p>Matheran is a pollution-free ecosystem and one of the most popular hill stations near Mumbai and Pune. It is easily accessible by road & rail, offering pristine nature, fresh air, and stunning valley views that make it a perfect weekend retreat for nature lovers.</p>
<a href="./about.html" class="btn btn-secondary">
<i class="fas fa-arrow-right"></i> Learn More
</a>
</div>
</div>
</div>
</section>
<script>
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth'
});
}
});
});
</script>
</body>
</html>
Comments
Post a Comment