Skip to content

Commit f7944d4

Browse files
apu52apu52
authored
Merge pull request #1017 from Rajput-xv/main
feat: add effect on mentioned section
2 parents 5416fb8 + 74563d9 commit f7944d4

File tree

4 files changed

+169
-154
lines changed

4 files changed

+169
-154
lines changed

‎explore.css

+110-106
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,123 @@
11
* {
2-
box-sizing: border-box;
3-
/* ADDED BORDER RADIUS IN IMAGE SECTION */
4-
border-radius: 20px;
5-
}
6-
7-
.outer-box {
8-
font-family: Verdana, Geneva, Tahoma, sans-serif;
9-
display: flex;
10-
align-items: center;
11-
justify-content: center;
12-
height: 100vh;
13-
overflow: hidden;
14-
margin: 0;
15-
16-
}
2+
box-sizing: border-box;
3+
/* ADDED BORDER RADIUS IN IMAGE SECTION */
4+
border-radius: 20px;
5+
}
6+
7+
.outer-box {
8+
font-family: Verdana, Geneva, Tahoma, sans-serif;
9+
display: flex;
10+
align-items: center;
11+
justify-content: center;
12+
height: 100vh;
13+
overflow: hidden;
14+
margin: 0;
15+
}
16+
17+
.containers {
18+
display: flex;
19+
width: 90vw;
1720

21+
}
22+
23+
.card {
24+
background-size: cover;
25+
background-position: center;
26+
background-repeat: no-repeat;
27+
height: 70vh;
28+
border-radius: 35px 35px;
29+
/* border-radius: 20px; */
30+
color: #fff;
31+
cursor: pointer;
32+
flex: 0.5;
33+
margin: 10px;
34+
position: relative;
35+
transition: flex 0.7s ease-in;
36+
display: flex;
37+
flex-direction: column;
38+
}
39+
40+
/* .card:hover {
41+
flex: 3;
42+
}
43+
44+
.card:hover h3, .card:hover p {
45+
opacity: 1;
46+
transition: opacity 0.5s ease-in 0.8s;
47+
}
48+
49+
.card:hover .info {
50+
visibility: visible;
51+
} */
52+
53+
.info {
54+
position: absolute;
55+
bottom: 20px;
56+
left: 25%;
57+
visibility: hidden;
58+
background: rgba(221, 206, 216, 0.462);
59+
backdrop-filter:blur(0px);
60+
width: 500px;
61+
border-radius: 15px 15px;
62+
}
63+
64+
.card h3 {
65+
font-size: 24px;
66+
opacity: 0;
67+
color: black !important;
68+
font-family:Georgia, 'Times New Roman', Times, serif ;
69+
font-weight: bolder;
70+
-webkit-text-stroke:1px navy;
71+
}
72+
73+
.card p {
74+
font-size: 16px;
75+
opacity: 0;
76+
color:black !important;
77+
margin-top: 10px;
78+
font-weight: 500;
79+
/* -webkit-text-stroke:0.5px beige; */
80+
}
81+
82+
.card.active {
83+
flex: 3;
84+
}
85+
86+
.card.active h3, .card.active p {
87+
opacity: 1;
88+
transition: opacity 0.5s ease-in 0.8s;
89+
}
90+
91+
.card.active .info {
92+
visibility: visible;
93+
}
94+
95+
@media (max-width: 1300px) {
1896
.containers {
19-
display: flex;
20-
width: 90vw;
21-
22-
}
23-
24-
.card {
25-
background-size: cover;
26-
background-position: center;
27-
background-repeat: no-repeat;
28-
height: 70vh;
29-
border-radius: 35px 35px;
30-
/* border-radius: 20px; */
31-
color: #fff;
32-
cursor: pointer;
33-
flex: 0.5;
34-
margin: 10px;
35-
position: relative;
36-
transition: flex 0.7s ease-in;
3797
display: flex;
3898
flex-direction: column;
99+
height: 100vh;
39100
}
40-
41-
.info {
42-
position: absolute;
43-
bottom: 20px;
44-
left: 25%;
45-
visibility: hidden;
46-
background: rgba(221, 206, 216, 0.462);
47-
backdrop-filter:blur(0px);
48-
width: 500px;
49-
border-radius: 15px 15px;
101+
.info{
102+
left: 10%;
50103
}
51-
52104
.card h3 {
53-
font-size: 24px;
54-
opacity: 0;
55-
color: black !important;
56-
font-family:Georgia, 'Times New Roman', Times, serif ;
57-
font-weight: bolder;
58-
-webkit-text-stroke:1px navy;
59-
}
60-
61-
.card p {
62105
font-size: 16px;
63-
opacity: 0;
64-
color:black !important;
65-
margin-top: 10px;
66-
font-weight: 500;
67-
/* -webkit-text-stroke:0.5px beige; */
68106
}
69-
70-
.card.active {
71-
flex: 3;
72-
}
73-
74-
.card.active h3 {
75-
opacity: 1;
76-
transition: opacity 0.5s ease-in 0.8s;
77-
}
78-
79-
.card.active p {
80-
opacity: 1;
81-
transition: opacity 0.5s ease-in 0.8s;
82-
}
83-
84-
.card.active .info {
85-
visibility: visible;
86-
}
87-
.hedd{
88-
font-size: 25px;
89-
}
90-
@media (max-width: 1300px) {
91-
.containers {
92-
display: flex;
93-
flex-direction: column;
94-
height: 100vh;
95-
}
96-
.info{
97-
left: 10%;
98-
}
99-
.card h3 {
100-
font-size: 16px;
101-
}
102-
103-
.card p {
104-
font-size: 12px;
105-
}
107+
108+
.card p {
109+
font-size: 12px;
106110
}
107-
@media (max-width: 620px){
108-
.info{
109-
width: 200px;
110-
left: 20px;
111-
}
111+
}
112+
@media (max-width: 620px){
113+
.info{
114+
width: 200px;
115+
left: 20px;
112116
}
113-
@media (max-width: 280px){
114-
.info{
115-
width: 100px;
116-
left: 0px;
117-
}
117+
}
118+
@media (max-width: 280px){
119+
.info{
120+
width: 100px;
121+
left: 0px;
118122
}
119-
123+
}

‎explore.js

+24-10
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,28 @@
1+
let lastClickedCard = document.querySelector(".active");
2+
3+
// Function to handle click events
4+
function handleClick(card) {
5+
// Remove active classes from all cards
6+
const panels = document.querySelectorAll(".card");
7+
panels.forEach(panel => panel.classList.remove("active"));
8+
9+
// Add active class to the clicked card
10+
card.classList.add("active");
11+
lastClickedCard = card; // Update the reference to the last clicked card
12+
}
13+
14+
// Attach click event listener to all cards
115
const panels = document.querySelectorAll(".card");
16+
panels.forEach(panel => panel.addEventListener("click", () => handleClick(panel)));
217

3-
panels.forEach((card) => {
4-
card.addEventListener("click", () => {
5-
removeActiveClasses(); // Add fuctions to remove active class first
6-
card.classList.add("active");
18+
// Adjust the mouseover event listener
19+
panels.forEach(panel => {
20+
panel.addEventListener('mouseover', () => {
21+
lastClickedCard.classList.remove("active");
22+
panel.classList.add('active');
723
});
24+
panel.addEventListener('mouseout', () => {
25+
panel.classList.remove('active');
26+
lastClickedCard.classList.add("active");
27+
});
828
});
9-
10-
function removeActiveClasses() {
11-
panels.forEach((card) => {
12-
card.classList.remove("active");
13-
});
14-
}

‎index.html

+35-37
Original file line numberDiff line numberDiff line change
@@ -657,61 +657,59 @@ <h2 class="section__title" data-aos="fade-in"><span style="margin-left: 300px;">
657657
<span></span>
658658
</div>
659659
</div> -->
660+
660661
<div class="outer-box">
661662
<div class="containers">
662-
663-
664-
<div class="card" style="
665-
background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
666-
url('./img/paris.jpg')
663+
664+
<div class="card active" style="
665+
background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
666+
url('./img/paris.jpg')
667667
">
668668
<div class="info">
669-
669+
670670
<p>
671671
||Eiffel Tower||
672672
</p>
673673
<h3>PARIS</h3>
674674
</div>
675675
</div>
676-
677-
<div class="card" style="
678-
background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
679-
url('./img/london.jpg')
680-
">
681-
682-
<div class="info">
683-
684-
<p>||Giant Wheel||</p>
685-
<h3>LONDON</h3>
686-
</div>
687-
</div>
688-
689-
690-
<div class="card" style="
676+
677+
<div class="card" style="
678+
background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
679+
url('./img/london.jpg')
680+
">
681+
<div class="info">
682+
683+
<p>||Giant Wheel||</p>
684+
<h3>LONDON</h3>
685+
</div>
686+
</div>
687+
688+
<div class="card" style="
691689
background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
692690
url('./img/goa.jpg')
693691
">
694-
<div class="info">
695-
696-
<p>||Goa Beach||</p>
697-
<h3>GOA</h3>
698-
</div>
699-
</div>
700-
701-
<div class="card" style="
692+
<div class="info">
693+
694+
<p>||Goa Beach||</p>
695+
<h3>GOA</h3>
696+
</div>
697+
</div>
698+
699+
<div class="card" style="
702700
background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
703701
url('./img/maldives.jpg')
704702
">
705-
<div class="info">
706-
<p>||Male Beach||</p>
707-
<h3>MALDIVES</h3>
708-
</div>
709-
</div>
710-
703+
<div class="info">
704+
705+
<p>||Male Beach||</p>
706+
<h3>MALDIVES</h3>
711707
</div>
712708
</div>
713-
714-
709+
710+
</div>
711+
</div>
712+
715713
<script src="explore.js"></script>
716714
</section>
717715

‎styles.css

-1
Original file line numberDiff line numberDiff line change
@@ -357,7 +357,6 @@ body {
357357
justify-content: space-between;
358358
gap: 2rem;
359359
flex-wrap: wrap;
360-
margin-bottom: 4rem;
361360
}
362361

363362
.section__title {

0 commit comments

Comments
 (0)