Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

I applied the Typed.js library to create a typing animation effect for various slogans on the main page, resulting in a dynamic and engaging visual experience. This implementation enhances the page's interactivity and draws attention to our message effectively. #1941

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+10 −2
Open

I applied the Typed.js library to create a typing animation effect for various slogans on the main page, resulting in a dynamic and engaging visual experience. This implementation enhances the page's interactivity and draws attention to our message effectively. #1941

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions index light.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,16 @@
<header class=" text-gray-400 bg-blue-300 body-font flex flex-row items-center justify-center lg:justify-around">
<div class="flex flex-row items-center md:flex-row md:items-center p-5">
<span class="mission-L1"> Saving Lives </span>
<a class="w-32" href="#">
<a class="w-32" href="#">
<img class="rounded-full" src="./Assets/Images/logo.jpg" alt="logo" />
</a>
<span class="mission-L2"> Saving Animals </span>

<div class="w-full mt-8 md:mt-0">
<h1 class="text-4xl text-blue-600 text-center md:text-left md:ml-12 uppercase font-serif font-bold ">Adopt
today!</h1>
<p class="text-lg text-gray-800 text-center md:text-left md:ml-12 mt-2">Give life to a needed animal</p>
<!-- <p class="text-lg text-gray-800 text-center md:text-left md:ml-12 mt-2">Give life to a needed animal</p> -->
<span id="element"class="text-lg text-gray-800 text-center md:text-left md:ml-12 mt-2"></span>
</div>
</div>
<button data-collapse-toggle="navbar-default" type="button"
Expand Down Expand Up @@ -403,6 +404,13 @@ <h5 class="text-gray-800 md:text-[40px] font-bold mb-2 text-center">CONTACT US</
</div>
</footer>
<script src="index.js" ></script>
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
<script>
var typed = new Typed('#element', {
strings: ['Give life to a needed animal!', 'Be a Hero and rescue a Pet in Need!', 'Adopt Happiness!'],
typeSpeed: 50,
});
</script>
</body>

</html>