<![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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI;
}
body{
background: radial-gradient(circle at 30% 30%, #0a4ea3, #02142d 80%);
}
/* SECTION */
.ui-section{
display:flex;
justify-content:center;
align-items:center;
padding:80px 0;
}
/* WRAPPER */
.ui-wrapper{
position:relative;
width:650px;
height:700px;
}
/* CARD (ONLY POSITION HERE - NEVER TOUCH TRANSFORM) */
.ui-card{
position:absolute;
width:300px;
cursor:pointer;
opacity:0;
animation: fadeIn 0.7s ease forwards;
}
/* ⭐ ZIGZAG SAME AS YOUR CODE */
.ui-card1{ top:0; left:50%; transform:translateX(-180px); animation-delay:0.2s; }
.ui-card2{ top:200px; left:50%; transform:translateX(20px); animation-delay:0.4s; }
.ui-card3{ top:420px; left:50%; transform:translateX(-160px); animation-delay:0.6s; }
/* ⭐ SCALE LAYER (SAFE ZOOM FIX) */
.ui-scale{
transform:scale(1);
transition:transform 0.35s ease;
}
/* INNER */
.ui-inner{
padding:30px 25px 70px;
border-radius:22px;
color:#fff;
background: linear-gradient(180deg,#0d4ea8,#072c63);
box-shadow: 0 20px 50px rgba(0,0,0,0.6);
position:relative;
overflow:hidden;
transition:0.3s ease;
}
/* ACTIVE ZOOM (NO LAYOUT SHIFT) */
.ui-card.active .ui-scale{
transform:scale(1.18);
}
/* STRIP */
.ui-inner::after{
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:60px;
background: repeating-linear-gradient(
45deg,
rgba(255,255,255,0.05),
rgba(255,255,255,0.05) 2px,
transparent 2px,
transparent 6px
);
}
/* HOVER EFFECT */
.ui-card:hover .ui-inner{
transform: translateY(-6px);
}
/* TEXT */
.ui-inner h2{ font-size:30px; margin-bottom:10px; }
.ui-inner p{ font-size:16px; color:rgba(255,255,255,0.85); }
/* ICON */
.ui-icon{
font-size:40px;
margin-bottom:15px;
color:#5fd0ff;
}
/* BADGE */
.ui-badge{
display:inline-block;
padding:6px 14px;
border-radius:20px;
font-size:11px;
letter-spacing:2px;
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.2);
margin-bottom:20px;
}
/* FADE ANIMATION */
@keyframes fadeIn{
from{
opacity:0;
transform: translateY(30px);
}
to{
opacity:1;
transform: translateY(0);
}
}
/* MOBILE */
@media(max-width:768px){
.ui-wrapper{ width:100%; height:auto; }
.ui-card{
position:relative;
transform:none !important;
margin:20px auto;
}
}
</style>
</head>
<body>
<section>
FEATURE
<h2>Analytics</h2>
<p>Measure key performance indicators with powerful analytics features.</p>
<h2>Data integration</h2>
<p>Connect and unify data from multiple sources with ease.</p>
<h2>Secure storage</h2>
<p>Keep your data safe with enterprise-grade security and encryption.</p>
</section>
</body>
</html>]]>
