Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add effect on mentioned section #1017

Merged
merged 6 commits into from
Jul 14, 2024
Merged

feat: add effect on mentioned section #1017

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
540dfbc
Added hover effect on images, explore css & js file updated
Rajput-xv Jul 7, 2024
4437d48
Merge branch 'main' into main
Rajput-xv Jul 14, 2024
46c5d98
Merge branch 'main' into main
Rajput-xv Jul 14, 2024
cc10338
Revert "Merge branch 'main' into main"
Rajput-xv Jul 14, 2024
e7d7313
Reapply "Merge branch 'main' into main"
Rajput-xv Jul 14, 2024
74563d9
Update alignment to horizontal.
Rajput-xv Jul 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
216 changes: 110 additions & 106 deletions explore.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,119 +1,123 @@
* {
box-sizing: border-box;
/* ADDED BORDER RADIUS IN IMAGE SECTION */
border-radius: 20px;
}

.outer-box {
font-family: Verdana, Geneva, Tahoma, sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;

}
box-sizing: border-box;
/* ADDED BORDER RADIUS IN IMAGE SECTION */
border-radius: 20px;
}

.outer-box {
font-family: Verdana, Geneva, Tahoma, sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}

.containers {
display: flex;
width: 90vw;

}

.card {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 70vh;
border-radius: 35px 35px;
/* border-radius: 20px; */
color: #fff;
cursor: pointer;
flex: 0.5;
margin: 10px;
position: relative;
transition: flex 0.7s ease-in;
display: flex;
flex-direction: column;
}

/* .card:hover {
flex: 3;
}

.card:hover h3, .card:hover p {
opacity: 1;
transition: opacity 0.5s ease-in 0.8s;
}

.card:hover .info {
visibility: visible;
} */

.info {
position: absolute;
bottom: 20px;
left: 25%;
visibility: hidden;
background: rgba(221, 206, 216, 0.462);
backdrop-filter:blur(0px);
width: 500px;
border-radius: 15px 15px;
}

.card h3 {
font-size: 24px;
opacity: 0;
color: black !important;
font-family:Georgia, 'Times New Roman', Times, serif ;
font-weight: bolder;
-webkit-text-stroke:1px navy;
}

.card p {
font-size: 16px;
opacity: 0;
color:black !important;
margin-top: 10px;
font-weight: 500;
/* -webkit-text-stroke:0.5px beige; */
}

.card.active {
flex: 3;
}

.card.active h3, .card.active p {
opacity: 1;
transition: opacity 0.5s ease-in 0.8s;
}

.card.active .info {
visibility: visible;
}

@media (max-width: 1300px) {
.containers {
display: flex;
width: 90vw;

}

.card {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 70vh;
border-radius: 35px 35px;
/* border-radius: 20px; */
color: #fff;
cursor: pointer;
flex: 0.5;
margin: 10px;
position: relative;
transition: flex 0.7s ease-in;
display: flex;
flex-direction: column;
height: 100vh;
}

.info {
position: absolute;
bottom: 20px;
left: 25%;
visibility: hidden;
background: rgba(221, 206, 216, 0.462);
backdrop-filter:blur(0px);
width: 500px;
border-radius: 15px 15px;
.info{
left: 10%;
}

.card h3 {
font-size: 24px;
opacity: 0;
color: black !important;
font-family:Georgia, 'Times New Roman', Times, serif ;
font-weight: bolder;
-webkit-text-stroke:1px navy;
}

.card p {
font-size: 16px;
opacity: 0;
color:black !important;
margin-top: 10px;
font-weight: 500;
/* -webkit-text-stroke:0.5px beige; */
}

.card.active {
flex: 3;
}

.card.active h3 {
opacity: 1;
transition: opacity 0.5s ease-in 0.8s;
}

.card.active p {
opacity: 1;
transition: opacity 0.5s ease-in 0.8s;
}

.card.active .info {
visibility: visible;
}
.hedd{
font-size: 25px;
}
@media (max-width: 1300px) {
.containers {
display: flex;
flex-direction: column;
height: 100vh;
}
.info{
left: 10%;
}
.card h3 {
font-size: 16px;
}

.card p {
font-size: 12px;
}

.card p {
font-size: 12px;
}
@media (max-width: 620px){
.info{
width: 200px;
left: 20px;
}
}
@media (max-width: 620px){
.info{
width: 200px;
left: 20px;
}
@media (max-width: 280px){
.info{
width: 100px;
left: 0px;
}
}
@media (max-width: 280px){
.info{
width: 100px;
left: 0px;
}
}
34 changes: 24 additions & 10 deletions explore.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,28 @@
let lastClickedCard = document.querySelector(".active");

// Function to handle click events
function handleClick(card) {
// Remove active classes from all cards
const panels = document.querySelectorAll(".card");
panels.forEach(panel => panel.classList.remove("active"));

// Add active class to the clicked card
card.classList.add("active");
lastClickedCard = card; // Update the reference to the last clicked card
}

// Attach click event listener to all cards
const panels = document.querySelectorAll(".card");
panels.forEach(panel => panel.addEventListener("click", () => handleClick(panel)));

panels.forEach((card) => {
card.addEventListener("click", () => {
removeActiveClasses(); // Add fuctions to remove active class first
card.classList.add("active");
// Adjust the mouseover event listener
panels.forEach(panel => {
panel.addEventListener('mouseover', () => {
lastClickedCard.classList.remove("active");
panel.classList.add('active');
});
panel.addEventListener('mouseout', () => {
panel.classList.remove('active');
lastClickedCard.classList.add("active");
});
});

function removeActiveClasses() {
panels.forEach((card) => {
card.classList.remove("active");
});
}
72 changes: 35 additions & 37 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -657,61 +657,59 @@ <h2 class="section__title" data-aos="fade-in"><span style="margin-left: 300px;">
<span></span>
</div>
</div> -->

<div class="outer-box">
<div class="containers">


<div class="card" style="
background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
url('./img/paris.jpg')

<div class="card active" style="
background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
url('./img/paris.jpg')
">
<div class="info">

<p>
||Eiffel Tower||
</p>
<h3>PARIS</h3>
</div>
</div>

<div class="card" style="
background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
url('./img/london.jpg')
">

<div class="info">

<p>||Giant Wheel||</p>
<h3>LONDON</h3>
</div>
</div>


<div class="card" style="

<div class="card" style="
background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
url('./img/london.jpg')
">
<div class="info">

<p>||Giant Wheel||</p>
<h3>LONDON</h3>
</div>
</div>

<div class="card" style="
background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
url('./img/goa.jpg')
">
<div class="info">

<p>||Goa Beach||</p>
<h3>GOA</h3>
</div>
</div>

<div class="card" style="
<div class="info">
<p>||Goa Beach||</p>
<h3>GOA</h3>
</div>
</div>
<div class="card" style="
background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
url('./img/maldives.jpg')
">
<div class="info">
<p>||Male Beach||</p>
<h3>MALDIVES</h3>
</div>
</div>

<div class="info">

<p>||Male Beach||</p>
<h3>MALDIVES</h3>
</div>
</div>



</div>
</div>

<script src="explore.js"></script>
</section>

Expand Down
1 change: 0 additions & 1 deletion styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -357,7 +357,6 @@ body {
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
margin-bottom: 4rem;
}

.section__title {
Expand Down
Loading