Merge pull request #1045 from Sch476/newb

Added Reveal scroll to Meet Pets section

index.html

@@ -79,7 +79,7 @@ <h1 class="text-4xl text_2  text-center md:text-left md:ml-12 uppercase font-ser
 				  <ul class="w-[100vw] h-1/2 top-0 right-0 p-8 lg:p-4 mt-12 lg:mt-0 text-center text-base lg:text-lg space-y-4 lg:space-y-0 lg:space-x-5 lg:static lg:w-auto flex flex-col rounded-lg items-start lg:items-center lg:bg-transparent lg:border-0 lg:flex-row justify-between">
 
 					<li>
-					  <a href="#meet" class="p-3 text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Meet Pets</a>
+					  <a href="#meet" class="p-3 text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item" style="">Meet Pets</a>
 					</li>
 					<li>
 					  <a href="#About" class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">About Us</a>
@@ -955,6 +955,37 @@ <h3 class="text-2xl text-center">Subscribe to our newsletter</h3>
 				<p>Copyright &copy; 2022 [PetMe] All Right Reserved.</p>
 			</div>
 		</footer>
+		<script>
+			// Add this JavaScript code to trigger the animation when meet cards come into view
+			window.addEventListener("scroll", function () {
+			const meetCards = document.querySelectorAll(".main-card");
+			const scrollPosition = window.scrollY + window.innerHeight;
+
+			meetCards.forEach((card) => {
+				const cardOffset = card.offsetTop;
+				if (scrollPosition > cardOffset) {
+				card.style.opacity = "1";
+				card.style.transform = "translateY(0)";
+				}
+			});
+			});
+
+		</script>
+		<script>
+			// Add this JavaScript code to trigger the animation when About content comes into view
+window.addEventListener("scroll", function () {
+  const aboutSection = document.querySelector("#about");
+  const aboutContent = aboutSection.querySelector(".fade-in");
+  const scrollPosition = window.scrollY + window.innerHeight;
+  const contentOffset = aboutContent.offsetTop;
+
+  if (scrollPosition > contentOffset) {
+    aboutContent.style.opacity = "1";
+    aboutContent.style.transform = "translateY(0)";
+  }
+});
+
+		</script>
 		<script src="index.js"></script>
 		<script src="navbar.js"></script>
 		<script src="light-dark-theme.js"></script>

style.css

@@ -74,6 +74,13 @@
   transition: all 0.5s ease;
 }
 
+/* Add this CSS code to hide the meet cards initially */
+.main-card {
+  opacity: 0;
+  transform: translateY(50px);
+  transition: opacity 1s ease, transform 1s ease;
+}
+
 .hover-effect img {
   transition: opacity 0.3s ease;
 }
@@ -126,6 +133,13 @@
   }
 }
 
+/* Add this CSS code to hide the About content initially */
+#about .fade-in {
+  opacity: 0;
+  transform: translateY(50px);
+  transition: opacity 1s ease, transform 1s ease;
+}
+
 .contributors {
   margin-top: 20px;
   margin-bottom: 20px;