Skip to content

Commit 74563d9

Browse files
Rajput-xvRajput-xv
committed
Update alignment to horizontal.
1 parent e7d7313 commit 74563d9

File tree

3 files changed

+152
-158
lines changed

3 files changed

+152
-158
lines changed

‎explore.css

+111-113
Original file line numberDiff line numberDiff line change
@@ -1,125 +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-
}
17-
18-
.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;
37-
display: flex;
38-
flex-direction: column;
39-
}
40-
41-
/* .card:hover {
42-
flex: 3;
43-
}
2+
box-sizing: border-box;
3+
/* ADDED BORDER RADIUS IN IMAGE SECTION */
4+
border-radius: 20px;
5+
}
446

45-
.card:hover h3, .card:hover p {
46-
opacity: 1;
47-
transition: opacity 0.5s ease-in 0.8s;
48-
}
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+
}
4916

50-
.card:hover .info {
51-
visibility: visible;
52-
} */
53-
54-
.info {
55-
position: absolute;
56-
bottom: 20px;
57-
left: 25%;
58-
visibility: hidden;
59-
background: rgba(221, 206, 216, 0.462);
60-
backdrop-filter:blur(0px);
61-
width: 500px;
62-
border-radius: 15px 15px;
63-
}
64-
65-
.card h3 {
66-
font-size: 24px;
67-
opacity: 0;
68-
color: black !important;
69-
font-family:Georgia, 'Times New Roman', Times, serif ;
70-
font-weight: bolder;
71-
-webkit-text-stroke:1px navy;
72-
}
73-
74-
.card p {
75-
font-size: 16px;
76-
opacity: 0;
77-
color:black !important;
78-
margin-top: 10px;
79-
font-weight: 500;
80-
/* -webkit-text-stroke:0.5px beige; */
81-
}
17+
.containers {
18+
display: flex;
19+
width: 90vw;
8220

83-
.card.active {
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 {
8441
flex: 3;
85-
}
86-
87-
.card.active h3, .card.active p {
42+
}
43+
44+
.card:hover h3, .card:hover p {
8845
opacity: 1;
8946
transition: opacity 0.5s ease-in 0.8s;
90-
}
91-
92-
.card.active .info {
47+
}
48+
49+
.card:hover .info {
9350
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) {
96+
.containers {
97+
display: flex;
98+
flex-direction: column;
99+
height: 100vh;
94100
}
95-
96-
@media (max-width: 1300px) {
97-
.containers {
98-
display: flex;
99-
flex-direction: column;
100-
height: 100vh;
101-
}
102-
.info{
103-
left: 10%;
104-
}
105-
.card h3 {
106-
font-size: 16px;
107-
}
108-
109-
.card p {
110-
font-size: 12px;
111-
}
101+
.info{
102+
left: 10%;
103+
}
104+
.card h3 {
105+
font-size: 16px;
106+
}
107+
108+
.card p {
109+
font-size: 12px;
112110
}
113-
@media (max-width: 620px){
114-
.info{
115-
width: 200px;
116-
left: 20px;
117-
}
111+
}
112+
@media (max-width: 620px){
113+
.info{
114+
width: 200px;
115+
left: 20px;
118116
}
119-
@media (max-width: 280px){
120-
.info{
121-
width: 100px;
122-
left: 0px;
123-
}
117+
}
118+
@media (max-width: 280px){
119+
.info{
120+
width: 100px;
121+
left: 0px;
124122
}
125-
123+
}

‎index.html

+41-44
Original file line numberDiff line numberDiff line change
@@ -658,61 +658,58 @@ <h2 class="section__title" data-aos="fade-in"><span style="margin-left: 300px;">
658658
</div>
659659
</div> -->
660660

661-
<div class="outer-box">
662-
<div class="containers">
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')
667-
">
668-
<div class="info">
669-
670-
<p>
671-
||Eiffel Tower||
672-
</p>
673-
<h3>PARIS</h3>
674-
675-
676-
</div>
677-
678-
<div class="card" style="
679-
background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
680-
url('./img/london.jpg')
681-
">
682-
661+
<div class="outer-box">
662+
<div class="containers">
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')
667+
">
683668
<div class="info">
684-
685-
<p>||Giant Wheel||</p>
686-
<h3>LONDON</h3>
669+
670+
<p>
671+
||Eiffel Tower||
672+
</p>
673+
<h3>PARIS</h3>
687674
</div>
688675
</div>
689-
690-
691-
<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="
692689
background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
693690
url('./img/goa.jpg')
694691
">
695-
<div class="info">
696-
697-
<p>||Goa Beach||</p>
698-
<h3>GOA</h3>
699-
</div>
700-
</div>
701-
702-
<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="
703700
background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
704701
url('./img/maldives.jpg')
705702
">
706-
<div class="info">
707-
<p>||Male Beach||</p>
708-
<h3>MALDIVES</h3>
709-
</div>
710-
</div>
711-
703+
<div class="info">
704+
705+
<p>||Male Beach||</p>
706+
<h3>MALDIVES</h3>
712707
</div>
713708
</div>
714-
715-
709+
710+
</div>
711+
</div>
712+
716713
<script src="explore.js"></script>
717714
</section>
718715

‎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)