Vorher / Nachher
Automobile Vitale U.G. (haftungsbeschränkt)
⇆
⇆
⇆
Ziehen Sie den Regler, um beide Seiten zu vergleichen.
Was wir verbessert haben
- ✓ kein moderner Web-Stack erkennbar (Bootstrap/Tailwind/Bulma/...)
- ✓ keine keine viewport-Meta: Seite ist nicht mobiltauglich
- ✓ kein HTTPS verfügbar
- ✓ kein
</li></ul> <p class="mt-3 text-sm text-[#8b93a5]">Gleiche Seite, gleiche Marke – nur modern, mobiltauglich und aufgeräumt.</p> </div> <p class="mt-8 text-center text-sm"><a href="/" class="hover:underline" style="color:#fbff10">Weitere Website-Entwürfe ansehen</a></p> </div> <script> (function(){ function sceneFor(s){ return s.replace('vertical','hero'); } const scenes=Array.from(document.querySelectorAll('.scene')); const tabs=Array.from(document.querySelectorAll('.scene-tab')); function show(name){ scenes.forEach(s=>s.classList.toggle('active', s.dataset.scene===name)); tabs.forEach(t=>{ const on=t.dataset.target===name; t.classList.toggle('bg-white/10',on); t.classList.toggle('text-white',on); t.classList.toggle('bg-white/5',!on); t.classList.toggle('text-white/60',!on); }); } tabs.forEach(t=>t.addEventListener('click',()=>show(t.dataset.target))); // default: erste Szene aktiv if(scenes.length) show(scenes[0].dataset.scene); // Drag auf Diagonal-/Vertikal-Reveal document.querySelectorAll('.cmp-wrap').forEach(wrap=>{ const handle=wrap.querySelector('.cmp-handle'); let dragging=false; function set(e){ const r=wrap.getBoundingClientRect(); let p=((e.clientX??e.touches[0].clientX)-r.left)/r.width*100; p=Math.max(4,Math.min(96,p)); wrap.style.setProperty('--cut', p+'%'); } handle.addEventListener('mousedown',(e)=>{e.preventDefault();dragging=true;set(e);}); window.addEventListener('mouseup',()=>dragging=false); window.addEventListener('mousemove',e=>{if(dragging)set(e);}); handle.addEventListener('touchstart',(e)=>{dragging=true;set(e);},{passive:true}); window.addEventListener('touchend',()=>dragging=false); window.addEventListener('touchmove',e=>{if(dragging)set(e);},{passive:true}); wrap.style.setProperty('--cut','50%'); }); })(); </script> </body> </html>