Skip to content

Commit

Permalink
Update alignment to horizontal.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rajput-xv
Rajput-xv committed Jul 14, 2024
1 parent e7d7313 commit 74563d9
Show file tree
Hide file tree
Showing 3 changed files with 152 additions and 158 deletions.
224 changes: 111 additions & 113 deletions explore.css
View file
Original file line number Diff line number Diff line change
@@ -1,125 +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;

}

.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;
}
box-sizing: border-box;
/* ADDED BORDER RADIUS IN IMAGE SECTION */
border-radius: 20px;
}

.card:hover h3, .card:hover p {
opacity: 1;
transition: opacity 0.5s ease-in 0.8s;
}
.outer-box {
font-family: Verdana, Geneva, Tahoma, sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}

.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; */
}
.containers {
display: flex;
width: 90vw;

.card.active {
}

.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.active h3, .card.active p {
}
.card:hover h3, .card:hover p {
opacity: 1;
transition: opacity 0.5s ease-in 0.8s;
}
.card.active .info {
}
.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;
flex-direction: column;
height: 100vh;
}

@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;
}
.info{
left: 10%;
}
.card h3 {
font-size: 16px;
}

.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;
}
}
85 changes: 41 additions & 44 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -658,61 +658,58 @@ <h2 class="section__title" data-aos="fade-in"><span style="margin-left: 300px;">
</div>
</div> -->

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

<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 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="outer-box">
<div class="containers">

<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>||Giant Wheel||</p>
<h3>LONDON</h3>

<p>
||Eiffel Tower||
</p>
<h3>PARIS</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
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

0 comments on commit 74563d9

Please sign in to comment.