Skip to content

Commit

Permalink
Merge pull request #1170 from thilakjo/main
Browse files Browse the repository at this point in the history 
insta posts section needs to be corrected
  • Loading branch information
@PriyaGhosal
PriyaGhosal authored Oct 16, 2024
2 parents f27aaa8 + 3105902 commit f5e6d2b
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 96 deletions.
7 changes: 4 additions & 3 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1579,7 +1579,7 @@ data{
#marquee {
display: flex;
width: 100%;
height: 50vh;
height: 266;
background-color: var(--light-gray);
white-space: nowrap;
overflow-x: hidden;
Expand All @@ -1588,7 +1588,7 @@ data{

.insta-post-item img {
width: 100%;
height: 100%;
height: 266;
object-fit: cover;
object-position: center;
}
Expand Down Expand Up @@ -1655,10 +1655,11 @@ data{

.insta-post-item {
width: 50vh;
height: 50vh;
height: 266;
scroll-snap-align: center;
}


/*-----------------------------------*\
#FOOTER
\*-----------------------------------*/
Expand Down
145 changes: 52 additions & 93 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,7 @@ <h1>
<i class="fa-solid fa-leaf"></i>
</button> -->

<a href="#"><img src="./assets/images/upward-arrow.png" alt="" style="right: 0; top: 80%; width: 70px;"
<a href="#"><img src="./assets/images/upward-arrow.png" alt="" style="right: 1.33%; top: 88.88%; width: 70px;"
class="scroll-to-top"></a>

<main>
Expand Down Expand Up @@ -1441,112 +1441,67 @@ <h2>Impact of Your Donations</h2>
- #INSTA POST
-->


<section class="insta-post">

<ul class="insta-post-list">

<li class="insta-post-item">
<a href="javascript:void(0);" class="insta-post-link">
<img src="./assets/images/insta-1.jpg" width="320" height="300" loading="lazy" alt="Lion"
onclick="playSound('lion-roar-6011.mp3')" class="img-cover">

<ion-icon name="logo-instagram"></ion-icon>
<audio id="lionRoar" src="lion-roar-6011.mp3"></audio>
</a>

</li>

<li class="insta-post-item">
<a href="javascript:void(0);" class="insta-post-link">
<img src="./assets/images/insta-2.jpg" width="320" height="300" loading="lazy" alt="Deer"
onclick="playSound('impala.wav')" class="img-cover">

<ion-icon name="logo-instagram"></ion-icon>
</a>
<audio id="impala" src="WildGuard/impala.wav"></audio>
</li>

<li class="insta-post-item">
<a href="javascript:void(0);" class="insta-post-link">
<img src="./assets/images/insta-3.jpg" width="320" height="300" loading="lazy" alt="Wild Bear"
onclick="playSound('bear.wav')" class="img-cover">

<ion-icon name="logo-instagram"></ion-icon>
</a>
<audio id="bear" src="WildGuard/bear.wav"></audio>
</li>

<li class="insta-post-item">
<a href="javascript:void(0);" class="insta-post-link">
<img src="./assets/images/insta-4.jpg" width="320" height="300" loading="lazy" alt="Deer"
onclick="playSound('dear.wav')" class="img-cover">

<ion-icon name="logo-instagram"></ion-icon>
</a>
<audio src="WildGuard/dear.wav"></audio>
</li>

<li class="insta-post-item">
<a href="javascript:void(0);" class="insta-post-link">
<img src="./assets/images/insta-5.jpg" width="320" height="300" loading="lazy" alt="Horses"
onclick="playSound('horse.wav')" class="img-cover">

<ion-icon name="logo-instagram"></ion-icon>
</a>
<audio src="WildGuard/horse.wav"></audio>
</li>
</ul>
</section>

<div id="marquee">
<div id="marquee">
<section class="insta-post">

<ul class="insta-post-list">

<li class="insta-post-item">
<a href="#" class="insta-post-link">
<img src="./assets/images/insta-1.jpg" width="320" height="300" loading="lazy" alt="Lion"
class="img-cover">
<a href="javascript:void(0);" class="insta-post-link">
<img
src="./assets/images/insta-1.jpg"
width="320"
height="300"
loading="lazy"
alt="Lion"
onclick="playSound('lion-roar-6011.mp3')"
class="img-cover"
/>

<ion-icon name="logo-instagram"></ion-icon>
<audio id="lionRoar" src="lion-roar-6011.mp3"></audio>
</a>
</li>

<ion-icon name="logo-instagram"></ion-icon>
</a>
</li>

<li class="insta-post-item">
<a href="#" class="insta-post-link">
<a href="javascript:void(0);" class="insta-post-link">
<img src="./assets/images/insta-2.jpg" width="320" height="300" loading="lazy" alt="Deer"
class="img-cover">
onclick="playSound('impala.wav')" class="img-cover">

<ion-icon name="logo-instagram"></ion-icon>
</a>
<audio id="impala" src="WildGuard/impala.wav"></audio>
</a>
</li>

<li class="insta-post-item">
<a href="#" class="insta-post-link">
<a href="javascript:void(0);" class="insta-post-link">
<img src="./assets/images/insta-3.jpg" width="320" height="300" loading="lazy" alt="Wild Bear"
class="img-cover">
onclick="playSound('bear.wav')" class="img-cover">

<ion-icon name="logo-instagram"></ion-icon>
</a>
<audio id="bear" src="WildGuard/bear.wav"></audio>
</a>
</li>

<li class="insta-post-item">
<a href="#" class="insta-post-link">
<a href="javascript:void(0);" class="insta-post-link">
<img src="./assets/images/insta-4.jpg" width="320" height="300" loading="lazy" alt="Deer"
class="img-cover">
onclick="playSound('dear.wav')" class="img-cover">

<ion-icon name="logo-instagram"></ion-icon>
</a>
<audio src="WildGuard/dear.wav"></audio>
</a>
</li>

<li class="insta-post-item">
<a href="#" class="insta-post-link">
<a href="javascript:void(0);" class="insta-post-link">
<img src="./assets/images/insta-5.jpg" width="320" height="300" loading="lazy" alt="Horses"
class="img-cover">
onclick="playSound('horse.wav')" class="img-cover">

<ion-icon name="logo-instagram"></ion-icon>
</a>
<audio src="WildGuard/horse.wav"></audio>
</a>
</li>
</ul>
</section>
Expand All @@ -1555,48 +1510,52 @@ <h2>Impact of Your Donations</h2>
<ul class="insta-post-list">

<li class="insta-post-item">
<a href="#" class="insta-post-link">
<a href="javascript:void(0);" class="insta-post-link">
<img src="./assets/images/insta-1.jpg" width="320" height="300" loading="lazy" alt="Lion"
class="img-cover">
onclick="playSound('lion-roar-6011.mp3')" class="img-cover">

<ion-icon name="logo-instagram"></ion-icon>
</a>
<audio id="lionRoar" src="lion-roar-6011.mp3"></audio></a>
</li>

<li class="insta-post-item">
<a href="#" class="insta-post-link">
<a href="javascript:void(0);" class="insta-post-link">
<img src="./assets/images/insta-2.jpg" width="320" height="300" loading="lazy" alt="Deer"
class="img-cover">
onclick="playSound('impala.wav')"class="img-cover">

<ion-icon name="logo-instagram"></ion-icon>
</a>
<audio id="impala" src="WildGuard/impala.wav"></audio>
</a>
</li>

<li class="insta-post-item">
<a href="#" class="insta-post-link">
<a href="javascript:void(0);" class="insta-post-link">
<img src="./assets/images/insta-3.jpg" width="320" height="300" loading="lazy" alt="Wild Bear"
class="img-cover">
onclick="playSound('bear.wav')" class="img-cover">

<ion-icon name="logo-instagram"></ion-icon>
</a>
<audio id="bear" src="WildGuard/bear.wav"></audio>
</a>
</li>

<li class="insta-post-item">
<a href="#" class="insta-post-link">
<a href="javascript:void(0);" class="insta-post-link">
<img src="./assets/images/insta-4.jpg" width="320" height="300" loading="lazy" alt="Deer"
class="img-cover">
onclick="playSound('dear.wav')" class="img-cover">

<ion-icon name="logo-instagram"></ion-icon>
</a>
<audio src="WildGuard/dear.wav"></audio>
</a>
</li>

<li class="insta-post-item">
<a href="#" class="insta-post-link">
<a href="javascript:void(0);" class="insta-post-link">
<img src="./assets/images/insta-5.jpg" width="320" height="300" loading="lazy" alt="Horses"
class="img-cover">
onclick="playSound('horse.wav')" class="img-cover">

<ion-icon name="logo-instagram"></ion-icon>
</a>
<audio src="WildGuard/horse.wav"></audio>
</a>
</li>
</ul>
</section>
Expand Down

0 comments on commit f5e6d2b

Please sign in to comment.