<nav class="navbar navbar-dark navbar-custom fixed-top"> <div class="container-fluid"> <a class="navbar-brand" href="/"> <img src="/static/sbb.png" alt="SBB" width="30px"> <span class="font-monospace fw-bold">Click & <span class="ml4"> <span class="letters letters-1">Hike</span> <span class="letters letters-2">Bike</span> <span class="letters letters-3">Culture</span> <span class="letters letters-4">Jodel</span> </span> </span> <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script> <script> var ml4 = {}; ml4.opacityIn = [0,1]; ml4.scaleIn = [0.2, 1]; ml4.scaleOut = 2.5; ml4.durationIn = 900; ml4.durationOut = 800; ml4.delay = 600; anime.timeline({loop: true}) .add({ targets: '.ml4 .letters-1', opacity: ml4.opacityIn, scale: ml4.scaleIn, duration: ml4.durationIn }).add({ targets: '.ml4 .letters-1', opacity: 0, scale: ml4.scaleOut, duration: ml4.durationOut, easing: "easeInExpo", delay: ml4.delay }).add({ targets: '.ml4 .letters-2', opacity: ml4.opacityIn, scale: ml4.scaleIn, duration: ml4.durationIn }).add({ targets: '.ml4 .letters-2', opacity: 0, scale: ml4.scaleOut, duration: ml4.durationOut, easing: "easeInExpo", delay: ml4.delay }).add({ targets: '.ml4 .letters-3', opacity: ml4.opacityIn, scale: ml4.scaleIn, duration: ml4.durationIn }).add({ targets: '.ml4 .letters-3', opacity: 0, scale: ml4.scaleOut, duration: ml4.durationOut, easing: "easeInExpo", delay: ml4.delay }).add({ targets: '.ml4 .letters-4', opacity: ml4.opacityIn, scale: ml4.scaleIn, duration: ml4.durationIn }).add({ targets: '.ml4 .letters-4', opacity: 0, scale: ml4.scaleOut, duration: ml4.durationOut, easing: "easeInExpo", delay: ml4.delay }).add({ targets: '.ml4', opacity: 0, duration: 0, delay: 0 }); </script> </a> <form class="d-flex"> <a href="/profile" style="color: inherit; text-decoration: none;"> <i class="fas fa-user"></i> </a> </form> </div> </nav>