Scribd
Upload
4 views

Css

The document contains CSS styles for a web page, including general styles, hero section, destinations section, tour packages section, and footer. It features responsive design elements and accessibility improvements, such as focus outlines for buttons and input fields. The styles emphasize a clean layout with animations, hover effects, and a modern aesthetic using a grid system for content organization.

Uploaded by

manishsahani.edu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views

Css

The document contains CSS styles for a web page, including general styles, hero section, destinations section, tour packages section, and footer. It features responsive design elements and accessibility improvements, such as focus outlines for buttons and input fields. The styles emphasize a clean layout with animations, hover effects, and a modern aesthetic using a grid system for content organization.

Uploaded by

manishsahani.edu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

/* General Styles */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}

body {
line-height: 1.6;
background-color: #f5f5f5;
}

/* Hero Section */
.hero {
position: relative;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}

.background-video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
z-index: -1;
filter: brightness(0.7);
}

.hero-content {
text-align: center;
color: white;
padding: 2rem;
animation: fadeIn 1.5s ease-in;
}

.hero-content h1 {
font-size: 4rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.search-bar {
padding: 1rem 2rem;
width: 60%;
border: none;
border-radius: 30px;
font-size: 1.1rem;
margin-top: 2rem;
transition: all 0.3s ease;
}

.search-bar:focus {
outline: none;
box-shadow: 0 0 15px rgba(255,255,255,0.5);
}

.search-btn {
padding: 1rem 2.5rem;
margin-left: 1rem;
border: none;
border-radius: 30px;
background: #ff6b6b;
color: white;
cursor: pointer;
transition: all 0.3s ease;
}

.search-btn:hover {
background: #ff5252;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255,107,107,0.4);
}

/* Destinations Section */
.destinations {
padding: 5rem 2rem;
background: white;
}

.destinations h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 3rem;
color: #333;
}

.destinations-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}

/* .destination-card {
position: relative;
border-radius: 15px;
overflow: hidden;
transition: transform 0.3s ease;
cursor: pointer;
} */
.destination-card {
position: relative;
border-radius: 15px;
overflow: hidden;
transition: transform 0.3s ease;
cursor: pointer;
height: 400px; /* Set a consistent height for all destination cards */
}
.package-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
height: 350px; /* Adjust the height to ensure there's enough space for both
image and text */
display: flex;
flex-direction: column;
justify-content: space-between; /* Space out the content */
}

.destination-card:hover {
transform: translateY(-10px);
}

.destination-card img {
width: 100%;
height: 400px;
object-fit: cover;
transition: transform 0.3s ease;
}

.destination-card:hover img {
transform: scale(1.1);
}

/* Updated positioning for destination titles */


.destination-card h3 {
position: absolute;
top: 20px; /* Move the title upwards */
left: 20px;
color: white;
font-size: 2rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
z-index: 2;
}

.destination-card p {
position: absolute;
bottom: 20px;
left: 20px;
color: white;
font-size: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
z-index: 2;
}

.destination-card::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background: linear-gradient(transparent, rgba(0,0,0,0.7));
}

/* Tour Packages Section */


.tour-packages {
padding: 5rem 2rem;
}

.packages-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}

.package-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}

.package-card:hover {
transform: translateY(-5px);
}

.package-card img {
width: 100%;
height: 250px;
object-fit: cover;
}

.package-card h3 {
padding: 1.5rem;
color: #333;
}

.package-card p {
padding: 0 1.5rem;
color: #666;
}

.book-now {
display: block;
width: 100%;
padding: 1rem;
background: #4CAF50;
color: white;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}

.book-now:hover {
background: #45a049;
letter-spacing: 1px;
}

/* Footer */
footer {
background: #333;
color: white;
text-align: center;
padding: 2rem;
margin-top: 5rem;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* Responsive Design */
@media (max-width: 760px) {
.hero-content h1 {
font-size: 2.5rem;
}

.search-bar {
width: 100%;
margin-bottom: 1rem;
}

.search-btn {
width: 100%;
margin-left: 0;
}

.destinations-grid {
grid-template-columns: 1fr;
}

.packages-grid {
grid-template-columns: 1fr;
}

footer {
padding: 1.5rem;
}
}

/* Accessibility Improvements */
button:focus, .search-bar:focus {
outline: 3px solid #ff6b6b;
}

You might also like