From 44356fd3bf3d9377bdf2bd58843829a5cff07f38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C2=96AbheetHacker4278?= <114290748+AbheetHacker4278@users.noreply.github.com> Date: Sat, 29 Jun 2024 17:55:23 +0530 Subject: [PATCH 01/52] Trip Gallery Page is Been Updated --- index.html | 302 +++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 237 insertions(+), 65 deletions(-) diff --git a/index.html b/index.html index c071d5a9..87842976 100644 --- a/index.html +++ b/index.html @@ -107,10 +107,10 @@ display: inline-block; } -.trip-gallery-container { +/* .trip-gallery-container { display: flex; flex-wrap: wrap; - gap: 16px; /* Adjust the gap between images */ + gap: 16px; } .trip-gallery-container .image-container { @@ -122,8 +122,115 @@ .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: 20px; + padding: 20px; + box-sizing: border-box; + gap: 16px; + } + + .card { + background-size: cover; + background-position: center; + background-repeat: no-repeat; + height: 20vh; + border-radius: 35px 35px; + 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; + } + + .card img { + width: 100%; + height: 20vh; + transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); + } + + .card:hover { + transform: scale(1.05); + box-shadow: 0 8px 16px rgba(5px, 0, 0, 0.2); + border: 1px solid transparent; + background-clip: padding-box; + } + + .card:hover img { + filter: blur(4px); + } + + .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); + } + + .card: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: #555; + 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; @@ -669,68 +776,133 @@