Skip to content

Commit

Permalink
Merge pull request #92 from Lavanya-Sathya/gallery-view
Browse files Browse the repository at this point in the history 
gallery-view
  • Loading branch information
@apu52
apu52 authored Jan 19, 2024
2 parents 0307fa1 + 5d60df1 commit b775a01
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 63 deletions.
8 changes: 6 additions & 2 deletions Image-Gallery/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,11 @@ body {
text-align: center;
justify-content: center;
}

.gallery-rotate-image{
display: flex;
align-items: center;
justify-content: center;
}
.image-container {
position: relative;
width: 200px;
Expand Down Expand Up @@ -36,7 +40,7 @@ body {
.btn-container {
margin-top: 300px;
position: relative;
width: 80%;
width: 100%;
justify-content: space-between;
}

Expand Down
125 changes: 64 additions & 61 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,69 @@ <h2 class="section__title">
</div>
</div>
</section><br><br>
<!-- New div components (hidden initially) -->
<div id="newDiv" style="display: none;">
<!-- Sliding Animated Gallery -->
<div class="gallery-rotate-image">
<div class="image-container">
<span style="--i : 1">
<img src="./img/pexels-ajay-donga-2174656.jpg">
</span>
<span style="--i : 2">
<img src="./img/pexels-alex-azabache-3214958.jpg">
</span>
<span style="--i : 3">
<img src="./img/pexels-andrei-tanase-1271619.jpg">
</span>
<span style="--i : 4">
<img src="./img/pexels-josh-hild-2422259.jpg">
</span>
<span style="--i : 5">
<img src="./img/pexels-paulo-marcelo-martins-2412606.jpg">
</span>
<span style="--i : 6">
<img src="./img/pexels-quang-nguyen-vinh-2132126.jpg">
</span>
<span style="--i : 7">
<img src="./img/pexels-sam-kolder-2387871.jpg">
</span>
<span style="--i : 8">
<img src="./img/pexels-spencer-davis-4356144.jpg">
</span>
<span style="--i : 9">
<img src="./img/pexels-stijn-dijkstra-2499699.jpg">
</span>
<span style="--i : 10">
<img src="./img/pexels-zakaria-boumliha-2827374.jpg">
</span>
</div>
</div>
<div class="btn-container">
<button class="btn" id="prev">Prev</button>
<button class="btn" id="next">Next</button>
</div>
<!-- Trip Photo Gallery -->
<div class="trip-gallery-container">
<img src="./img/Trip_Photos/photo1.png" height="250" width="200">
<img src="./img/Trip_Photos/photo2.png" height="250" width="200">
<img src="./img/Trip_Photos/photo3.jpg" height="250" width="200">
<img src="./img/Trip_Photos/photo4.png" height="250" width="200">
<img src="./img/Trip_Photos/photo5.jpg" height="250" width="200">
<img src="./img/Trip_Photos/photo6.png" height="250" width="200">
<img src="./img/Trip_Photos/photo7.png" height="250" width="200">
<img src="./img/Trip_Photos/photo8.jpg" height="250" width="200">
<img src="./img/Trip_Photos/photo9.jpg" height="250" width="200">
<img src="./img/Trip_Photos/photo10.jpg" height="250" width="200">
<img src="./img/Trip_Photos/photo11.jpg" height="250" width="200">
<img src="./img/Trip_Photos/photo12.jpeg" height="250" width="200">
<img src="./img/Trip_Photos/photo13.jpg" height="250" width="200">
<img src="./img/Trip_Photos/photo14.jpg" height="250" width="200">
<img src="./img/Trip_Photos/photo16.png" height="250" width="200">
<img src="./img/Trip_Photos/photo18.jpg" height="250" width="200">
<img src="./img/Trip_Photos/photo19.jpg" height="250" width="200">
<img src="./img/Trip_Photos/photo20.png" height="250" width="200">
</div>
</div>


<section class="Testimonials" id="testimonials">
Expand Down Expand Up @@ -262,67 +325,7 @@ <h2 class="section__title" align-items="center">Contact Us</h2>
</div>


<!-- New div components (hidden initially) -->
<div id="newDiv" style="display: none;">
<!-- Sliding Animated Gallery -->
<div class="image-container">
<span style="--i : 1">
<img src="./img/pexels-ajay-donga-2174656.jpg">
</span>
<span style="--i : 2">
<img src="./img/pexels-alex-azabache-3214958.jpg">
</span>
<span style="--i : 3">
<img src="./img/pexels-andrei-tanase-1271619.jpg">
</span>
<span style="--i : 4">
<img src="./img/pexels-josh-hild-2422259.jpg">
</span>
<span style="--i : 5">
<img src="./img/pexels-paulo-marcelo-martins-2412606.jpg">
</span>
<span style="--i : 6">
<img src="./img/pexels-quang-nguyen-vinh-2132126.jpg">
</span>
<span style="--i : 7">
<img src="./img/pexels-sam-kolder-2387871.jpg">
</span>
<span style="--i : 8">
<img src="./img/pexels-spencer-davis-4356144.jpg">
</span>
<span style="--i : 9">
<img src="./img/pexels-stijn-dijkstra-2499699.jpg">
</span>
<span style="--i : 10">
<img src="./img/pexels-zakaria-boumliha-2827374.jpg">
</span>
</div>
<div class="btn-container">
<button class="btn" id="prev">Prev</button>
<button class="btn" id="next">Next</button>
</div>
<!-- Trip Photo Gallery -->
<div class="trip-gallery-container">
<img src="./img/Trip_Photos/photo1.png" height="250" width="200">
<img src="./img/Trip_Photos/photo2.png" height="250" width="200">
<img src="./img/Trip_Photos/photo3.jpg" height="250" width="200">
<img src="./img/Trip_Photos/photo4.png" height="250" width="200">
<img src="./img/Trip_Photos/photo5.jpg" height="250" width="200">
<img src="./img/Trip_Photos/photo6.png" height="250" width="200">
<img src="./img/Trip_Photos/photo7.png" height="250" width="200">
<img src="./img/Trip_Photos/photo8.jpg" height="250" width="200">
<img src="./img/Trip_Photos/photo9.jpg" height="250" width="200">
<img src="./img/Trip_Photos/photo10.jpg" height="250" width="200">
<img src="./img/Trip_Photos/photo11.jpg" height="250" width="200">
<img src="./img/Trip_Photos/photo12.jpeg" height="250" width="200">
<img src="./img/Trip_Photos/photo13.jpg" height="250" width="200">
<img src="./img/Trip_Photos/photo14.jpg" height="250" width="200">
<img src="./img/Trip_Photos/photo16.png" height="250" width="200">
<img src="./img/Trip_Photos/photo18.jpg" height="250" width="200">
<img src="./img/Trip_Photos/photo19.jpg" height="250" width="200">
<img src="./img/Trip_Photos/photo20.png" height="250" width="200">
</div>
</div>

</section>


Expand Down

0 comments on commit b775a01

Please sign in to comment.