Skip to content

Commit

Permalink
Merge branch 'anuragverma108:main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
@pratibha131
pratibha131 authored Oct 16, 2024
2 parents 9fd49c8 + f5e6d2b commit c74a710
Show file tree
Hide file tree
Showing 5 changed files with 266 additions and 99 deletions.
8 changes: 4 additions & 4 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -504,7 +504,6 @@ html {
padding: 10px;
/*reducing height of the navbar */
}

/* .input-group{
display: flex;
flex-direction: row;
Expand Down Expand Up @@ -1580,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 @@ -1589,7 +1588,7 @@ data{

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

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


/*-----------------------------------*\
#FOOTER
\*-----------------------------------*/
Expand Down
153 changes: 58 additions & 95 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,11 @@ <h1>
</button>
<!-- Login -->
<div id="openPopup" class="user-icon">
<a href="user.html"><i class="fas fa-user"></i></a>
<a href="user.html"><i class="fas fa-user"></i></a>
<div class="dropdown-content" id="profileDropdown">
<a href="user.html">Profile</a>
<a href="/">Logout</a>
</div>
</div>

<!-- Popup -->
Expand Down Expand Up @@ -269,7 +273,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 @@ -1130,7 +1134,7 @@ <h3 class="testi-name">David S. Neuman</h3>


<!-- Trigger Button for Modal -->
<button id="openModalBtn" class="btn" style="display: block; margin: 0 auto;">Learn More</button>
<button id="openModalBtn" class="btn" onclick="location.href='learnmore.html';" style="display: block; margin: 0 auto;">Learn More</button>

<!-- Modal Structure -->
<div id="myModal" class="modal">
Expand Down Expand Up @@ -1440,112 +1444,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 @@ -1554,48 +1513,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
54 changes: 54 additions & 0 deletions learnmore.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learn More - WildGuard</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="navbar">
<div class="logo">
<h1>WILDGUARD</h1>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#">Event</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>

<section class="learn-more-section">
<h2>Learn More About Our Conservation Efforts</h2>
<p>At WildGuard, we are dedicated to protecting endangered species and preserving natural habitats. Your donation helps fund essential projects, such as anti-poaching efforts, wildlife rehabilitation, and reforestation.</p>

<div class="content-grid">
<div class="card">
<h3>Our Mission</h3>
<p>We work to ensure the survival of wildlife by protecting their natural habitats and eliminating threats like poaching.</p>
</div>
<div class="card">
<h3>How Donations Help</h3>
<p>Donations directly support rescue operations, habitat restoration, and research for species preservation.</p>
</div>
<div class="card">
<h3>Success Stories</h3>
<p>Read about how your contributions have made a difference in real-world conservation efforts, saving countless animals.</p>
</div>
</div>

<a href="#" class="donate-btn">Donate Now</a>
</section>

<footer>
<p>&copy; 2024 WildGuard. All Rights Reserved.</p>
</footer>
</body>
</html>
29 changes: 29 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,3 +100,32 @@



.user-icon {
position: relative;
display: inline-block;
cursor: pointer;
}

.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 10px;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {
background-color: #f1f1f1;

}

.user-icon:hover .dropdown-content {
display: block;
}
Loading

0 comments on commit c74a710

Please sign in to comment.