Currently, I am in the process of developing a website and facing challenges with displaying CSS properties accurately. Despite seeking input from friends and users, my HTML file is not rendering as expected within various browsers such as Chrome, Edge, and Firefox. The ideal display should resemble this: https://i.sstatic.net/mBBsD.png
However, the actual result across different browsers looks like this: https://i.sstatic.net/vZYZH.jpg
If you wish to attempt it yourself, a friend has successfully achieved the desired outcome: video. Here's a snippet of the code:
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray('.segmento').forEach(section => {
ScrollTrigger.create({
trigger: section,
start: 'top top',
pin: true,
pinSpacing: false
});
});
AOS.init({
offset: 400,
delay: 0,
duration: 1000
});html {
scroll-behavior: smooth;
}
.navbar-nav>li {
padding-left: 20px;
padding-right: 20px;
}
...
...
</script>
</body>
</html>