<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zoom UI Zigzag Fix</title>
</head>
<body>
<section class="ui-section">
<div class="ui-wrapper">
<div class="ui-card ui-card1">
<div class="ui-scale">
<div class="ui-inner">
<span class="ui-badge">FEATURE</span>
<i class="fa-solid fa-chart-simple ui-icon"></i>
<h2>Analytics</h2>
<p>Measure key performance indicators with powerful analytics features.</p>
</div>
</div>
</div>
<div class="ui-card ui-card2">
<div class="ui-scale">
<div class="ui-inner">
<i class="fa-solid fa-circle-nodes ui-icon"></i>
<h2>Data integration</h2>
<p>Connect and unify data from multiple sources with ease.</p>
</div>
</div>
</div>
<div class="ui-card ui-card3">
<div class="ui-scale">
<div class="ui-inner">
<i class="fa-solid fa-lock ui-icon"></i>
<h2>Secure storage</h2>
<p>Keep your data safe with enterprise-grade security and encryption.</p>
</div>
</div>
</div>
</div>
</section>
<script>
const cards = document.querySelectorAll(".ui-card");
cards.forEach(card => {
card.addEventListener("click", () => {
cards.forEach(c => c.classList.remove("active"));
card.classList.add("active");
});
});
</script>
</body>
</html>]]>
