Skip to content

Commit

Permalink
Merge pull request #946 from AbheetHacker4278/bnch
Browse files Browse the repository at this point in the history 
feat: Trip Gallery Page is Been Updated
  • Loading branch information
@apu52
apu52 authored Jul 21, 2024
2 parents 9cf953b + a395ae3 commit aee06d1
Showing 1 changed file with 295 additions and 62 deletions.
357 changes: 295 additions & 62 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,98 @@
}

.gallery-rotate-image .image-container {

display: flex;
flex-wrap: wrap;
gap: 16px; /* Adjust the gap between images */
}

.gallery-rotate-image .image-container span {
display: inline-block;
}

/* .trip-gallery-container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}

.trip-gallery-container .image-container {
display: flex;
flex-direction: column;
align-items: center;
}

.trip-gallery-container .image-container img {
max-width: 100%;
height: auto;
} */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
padding: 20px;
box-sizing: border-box;
}

.cardi {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 20vh;
border-radius: 20px;
color: #fff;
cursor: pointer;
flex: 0.5;
margin: 4px;
margin-right: 29px;
position: relative;
transition: flex 0.7s ease-in;
display: flex;
flex-direction: column;
overflow: hidden;
}

.cardi img {
width: 100%;
height: 100%;
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cardi:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
border: 1px solid transparent;
background-clip: padding-box;
}

.cardi:hover img {
filter: blur(4px);
backdrop-filter:box-shadow(0 8px 16px rgba);
}

.card__content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
transform: rotateX(-90deg);
transform-origin: bottom;
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 1;
}

.card__overlay {
position: absolute;
display: flex;
flex-wrap: wrap;
gap: 16px;
Expand Down Expand Up @@ -186,6 +278,68 @@
left: 0;
width: 100%;
height: 100%;
background-color: rgba(1, 0, 0, 0.7); /* Darker semi-transparent background */
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 0;
}

.cardi:hover .card__overlay {
opacity: 1;
}

.cardi:hover .card__content {
transform: rotateX(0deg);
}

.card__title {
margin: 0;
font-size: 24px;
color: #ffdf60;
font-weight: 700;
}

.card__description {
margin: 10px 0 0;
font-size: 14px;
color: #fff;
line-height: 1.4;
}

.card__description:hover {
cursor: pointer;
color: #fff;
}

@media (max-width: 1200px) {
.grid-container {
grid-template-columns: repeat(4, 1fr);
}
}

@media (max-width: 992px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
}
}

@media (max-width: 768px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 480px) {
.grid-container {
grid-template-columns: repeat(1, 1fr);
}
}
.btn-container {
display: flex;
justify-content: center;
gap: 8px; /* Adjust the gap between buttons */
}

pointer-events: none;
z-index: 9999;
}
Expand Down Expand Up @@ -878,68 +1032,147 @@ <h2 class="section__title" data-aos="zoom-in" style="text-align: center;">
<button class="btn btn-style" id="next">Next</button>
</div>
<!-- Trip Photo Gallery -->
<div class="trip-gallery-container">

<figure class="image-container">
<img src="./img/Trip_Photos/photo1.png" height="250" width="200">
<p><a href="https://maps.app.goo.gl/4ULWYJxSVD8AcUin6" target="_blank">LADAKH</a></p>
</figure>
<figure class="image-container">
<img src="./img/Trip_Photos/photo2.png" height="250" width="200">
<p><a href="https://maps.app.goo.gl/zrA5UgDQoeUtRhhn7" target="_blank">RANNERDALE KNOTTS</a></p>
</figure>
<figure class="image-container">
<img src="./img/Trip_Photos/photo3.jpg" height="250" width="200">
<p><a href="https://maps.app.goo.gl/eTfvw4peKN3AcMUy8" target="_blank">AMALPHI COAST</a></p>
</figure>
<figure class="image-container">
<img src="./img/Trip_Photos/photo4.png" height="220" width="230">
<p><a href="https://maps.app.goo.gl/tBZLQcZbCHRWsgGX7" target="_blank">THE GOLDEN TEMPLE,PERIYAPATTNA</a>
</p>
</figure>
<figure class="image-container">
<img src="./img/Trip_Photos/photo5.jpg" height="220" width="230">
<p><a href="https://maps.app.goo.gl/8Y3rnjtxU563KVvE9" target="_blank">MALSHEJ GHAT</a></p>
</figure>
<figure class="image-container">
<img src="./img/Trip_Photos/photo6.png" height="220" width="230">
<p><a href="https://maps.app.goo.gl/cj2UZZoyCTzeoQjEA" target="_blank">SAHARA DESERT</a></p>
</figure>
<figure class="image-container">
<img src="./img/Trip_Photos/photo7.png" height="220" width="230">
<p><a href="https://maps.app.goo.gl/Gk1fQts4zeVRdAWu6" target="_blank">MALDIVES</a></p>
</figure>
<figure class="image-container">
<img src="./img/Trip_Photos/photo8.jpg" height="220" width="230">
<p><a href="https://maps.app.goo.gl/DbWvrFgfwwwTWuBT8" target="_blank">PUNAKHA SUSPENSION BRIDGE</a></p>
</figure>
<figure class="image-container">
<img src="./img/Trip_Photos/photo9.jpg" height="220" width="230">
<p><a href="https://maps.app.goo.gl/gBGuxUNXXemiZ2Td8" target="_blank">ARU VALLEY</a></p>
</figure>
<figure class="image-container">
<img src="./img/Trip_Photos/photo10.jpg" height="220" width="230">
<p><a href="https://maps.app.goo.gl/tQ4BT4gDoFtauReM9" target="_blank">THE GOLDEN BRIDGE</a></p>
</figure>
<figure class="image-container">
<img src="./img/Trip_Photos/photo11.jpg" height="220" width="230">
<p><a href="https://maps.app.goo.gl/oqDnmF2pCqRxV5Cp6" target="_blank">LAKE DISTRICT</a></p>
</figure>
<figure class="image-container">
<img src="./img/Trip_Photos/photo13.jpg" height="220" width="230">
<p><a href="https://maps.app.goo.gl/pHjaA4aqP41JxdAh9" target="_blank">MUNNAR</a></p>
</figure>
<figure class="image-container">
<img src="./img/Trip_Photos/photo19.jpg" height="220" width="230">
<p><a href="https://maps.app.goo.gl/84rV6GhhginGXgbc8" target="_blank">STATUE OF LIBERTY</a></p>
</figure>
<figure class="image-container">
<img src="./img/Trip_Photos/photo20.png" height="220" width="230">
<p><a href="https://maps.app.goo.gl/GzVALHoLp4MgFmgw5" target="_blank">NAKKI LAKE</a></p>
</figure>

<!-- <img src="./img/Trip_Photos/photo3.jpg" height="240" width="200"> -->

<div class="grid-container">
<div class="cardi">
<img src="./img/Trip_Photos/photo1.png" alt="Card image">
<div class="card__overlay"></div>
<center>
<div class="card__content">
<h4 class="card__title" style="color:#ffce52; font-size:18px">LADAKH</h4>
<a class="card__description" href="https://maps.app.goo.gl/4ULWYJxSVD8AcUin6" target="_blank">Read More</a>
</div>
</center>
</div>
<div class="cardi">
<img src="./img/Trip_Photos/photo2.png" alt="Card image">
<div class="card__overlay"></div>
<center>
<div class="card__content">
<h4 class="card__title" style="color:#ffce52; font-size:18px">RANNERDALE KNOTTS</h4>
<a class="card__description" href="https://maps.app.goo.gl/zrA5UgDQoeUtRhhn7" target="_blank">Read More</a>
</div>
</center>
</div>
<div class="cardi">
<img src="./img/Trip_Photos/photo3.jpg" alt="Card image">
<div class="card__overlay"></div>
<center>
<div class="card__content">
<h4 class="card__title" style="color:#ffce52; font-size:18px">AMALPHI COAST</h4>
<a class="card__description" href="https://maps.app.goo.gl/eTfvw4peKN3AcMUy8" target="_blank">Read More</a>
</div>
</center>
</div>
<div class="cardi">
<img src="./img/Trip_Photos/photo4.png" alt="Card image">
<div class="card__overlay"></div>
<center>
<div class="card__content">
<h4 class="card__title" style="color:#ffce52; font-size:18px">THE GOLDEN TEMPLE,PERIYAPATTNA</h4>
<a class="card__description" href="https://maps.app.goo.gl/tBZLQcZbCHRWsgGX7" target="_blank">Read More</a>
</div>
</center>
</div>
<div class="cardi">
<img src="./img/Trip_Photos/photo5.jpg" alt="Card image">
<div class="card__overlay"></div>
<center>
<div class="card__content">
<h4 class="card__title" style="color:#ffce52; font-size:18px">MALSHEJ GHAT</h4>
<a class="card__description" href="https://maps.app.goo.gl/8Y3rnjtxU563KVvE9" target="_blank">Read More</a>
</div>
</center>
</div>
<div class="cardi">
<img src="./img/Trip_Photos/photo6.png" alt="Card image">
<div class="card__overlay"></div>
<center>
<div class="card__content">
<h4 class="card__title" style="color:#ffce52; font-size:18px">SAHARA DESERT</h4>
<a class="card__description" href="https://maps.app.goo.gl/cj2UZZoyCTzeoQjEA" target="_blank">Read More</a>
</div>
</center>
</div>
<div class="cardi">
<img src="./img/Trip_Photos/photo7.png" alt="Card image">
<div class="card__overlay"></div>
<center>
<div class="card__content">
<h4 class="card__title" style="color:#ffce52; font-size:18px">MALDIVES</h4>
<a class="card__description" href="https://maps.app.goo.gl/Gk1fQts4zeVRdAWu6" target="_blank">Read More</a>
</div>
</center>
</div>
<div class="cardi">
<img src="./img/Trip_Photos/photo8.jpg" alt="Card image">
<div class="card__overlay"></div>
<center>
<div class="card__content">
<h4 class="card__title" style="color:#ffce52; font-size:18px">PUNAKHA SUSPENSION BRIDGE</h4>
<a class="card__description" href="https://maps.app.goo.gl/DbWvrFgfwwwTWuBT8" target="_blank">Read More</a>
</div>
</center>
</div>
<div class="cardi">
<img src="./img/Trip_Photos/photo9.jpg" alt="Card image">
<div class="card__overlay"></div>
<center>
<div class="card__content">
<h4 class="card__title" style="color:#ffce52; font-size:18px">ARU VALLEY</h4>
<a class="card__description" href="https://maps.app.goo.gl/gBGuxUNXXemiZ2Td8" target="_blank">Read More</a>
</div>
</center>
</div>
<div class="cardi">
<img src="./img/Trip_Photos/photo10.jpg" alt="Card image">
<div class="card__overlay"></div>
<center>
<div class="card__content">
<h4 class="card__title" style="color:#ffce52; font-size:18px">THE GOLDEN BRIDGE</h4>
<a class="card__description" href="https://maps.app.goo.gl/tQ4BT4gDoFtauReM9" target="_blank">Read More</a>
</div>
</center>
</div>
<div class="cardi">
<img src="./img/Trip_Photos/photo11.jpg" alt="Card image">
<div class="card__overlay"></div>
<center>
<div class="card__content">
<h4 class="card__title" style="color:#ffce52; font-size:18px">LAKE DISTRICT</h4>
<a class="card__description" href="https://maps.app.goo.gl/oqDnmF2pCqRxV5Cp6" target="_blank">Read More</a>
</div>
</center>
</div>
<div class="cardi">
<img src="./img/Trip_Photos/photo13.jpg" alt="Card image">
<div class="card__overlay"></div>
<center>
<div class="card__content">
<h4 class="card__title" style="color:#ffce52; font-size:18px">MUNNAR</h4>
<a class="card__description" href="https://maps.app.goo.gl/pHjaA4aqP41JxdAh9" target="_blank">Read More</a>
</div>
</center>
</div>
<div class="cardi">
<img src="./img/Trip_Photos/photo19.jpg" alt="Card image">
<div class="card__overlay"></div>
<center>
<div class="card__content">
<h4 class="card__title" style="color:#ffce52; font-size:18px">STATUE OF LIBERTY</h4>
<a class="card__description" href="https://maps.app.goo.gl/84rV6GhhginGXgbc8" target="_blank">Read More</a>
</div>
</center>
</div>
<div class="cardi">
<img src="./img/Trip_Photos/photo20.png" alt="Card image">
<div class="card__overlay"></div>
<center>
<div class="card__content">
<h4 class="card__title" style="color:#ffce52; font-size:18px">NAKKI LAKE</h4>
<a class="card__description" href="https://maps.app.goo.gl/GzVALHoLp4MgFmgw5" target="_blank">Read More</a>
</div>
</center>
</div>
</div>
</div>
</section>
Expand Down

0 comments on commit aee06d1

Please sign in to comment.