42 lines
2.2 KiB
HTML
42 lines
2.2 KiB
HTML
<div class="bg-transparent lg:py-24 py-10 overflow-hidden">
|
|
<div class="flex space-x-8 animate-scroll">
|
|
<!-- First set of logos -->
|
|
<img class="max-h-12 w-auto object-contain" src="images/logos/sikana.png" alt="Transistor">
|
|
<img class="max-h-12 w-auto object-contain" src="images/logos/ict.png" alt="Reform">
|
|
<img class="max-h-12 w-auto object-contain" src="images/logos/znz.png" alt="Tuple">
|
|
<img class="max-h-12 w-auto object-contain" src="images/logos/social.png" alt="SavvyCal">
|
|
<img class="max-h-12 w-auto object-contain" src="images/logos/holo.png" alt="Statamic">
|
|
<img class="max-h-12 w-auto object-contain" src="images/logos/freezone.png" alt="Statamic">
|
|
<img class="max-h-12 w-auto object-contain" src="images/logos/vverse.png" alt="Statamic">
|
|
<img class="max-h-12 w-auto object-contain" src="images/logos/veverse.png" alt="Statamic">
|
|
<img class="max-h-12 w-auto object-contain" src="images/logos/zictia.png" alt="Statamic">
|
|
|
|
<!-- Duplicate set of logos to create the endless effect -->
|
|
<img class="max-h-12 w-auto object-contain" src="images/logos/sikana.png" alt="Transistor">
|
|
<img class="max-h-12 w-auto object-contain" src="images/logos/ict.png" alt="Reform">
|
|
<img class="max-h-12 w-auto object-contain" src="images/logos/znz.png" alt="Tuple">
|
|
<img class="max-h-12 w-auto object-contain" src="images/logos/social.png" alt="SavvyCal">
|
|
<img class="max-h-12 w-auto object-contain" src="images/logos/holo.png" alt="Statamic">
|
|
<img class="max-h-12 w-auto object-contain" src="images/logos/freezone.png" alt="Statamic">
|
|
<img class="max-h-12 w-auto object-contain" src="images/logos/vverse.png" alt="Statamic">
|
|
<img class="max-h-12 w-auto object-contain" src="images/logos/veverse.png" alt="Statamic">
|
|
<img class="max-h-12 w-auto object-contain" src="images/logos/zictia.png" alt="Statamic">
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Keyframe animation for slow horizontal scrolling */
|
|
@keyframes scroll {
|
|
0% { transform: translateX(0); }
|
|
100% { transform: translateX(-50%); }
|
|
}
|
|
|
|
/* Apply the animation */
|
|
.animate-scroll {
|
|
display: flex;
|
|
animation: scroll 25s linear infinite;
|
|
gap: 2rem;
|
|
width: max-content;
|
|
}
|
|
</style>
|