<div class="story-container">
<div class="story-header">
<div class="bars">
<div class="bar active"><div class="fill" style="width: 100%"></div></div>
<div class="bar active"><div class="fill" style="width: 60%"></div></div>
<div class="bar"></div>
</div>
<div class="user">
<img src="https://placehold.co/40x40/ffffff/000000?text=U" alt="User">
<span>User Name</span>
<span class="time">2h</span>
</div>
</div>
<div class="story-content">
<h2>Tap to hold</h2>
</div>
</div>
* { box-sizing: border-box; }
body {
font-family: system-ui, "Segoe UI", sans-serif;
background: #111;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.story-container {
width: 320px;
height: 568px; /* Mobile Aspect Ratio */
background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
border-radius: 16px;
position: relative;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.story-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 15px;
background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent);
}
.bars {
display: flex;
gap: 4px;
margin-bottom: 12px;
}
.bar {
flex: 1;
height: 3px;
background: rgba(255,255,255,0.3);
border-radius: 2px;
overflow: hidden;
}
.bar .fill {
height: 100%;
background: white;
border-radius: 2px;
}
.user {
display: flex;
align-items: center;
gap: 10px;
color: white;
font-size: 0.9rem;
font-weight: 600;
}
.user img {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid white;
}
.time {
opacity: 0.7;
font-weight: 400;
}
.story-content {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
font-weight: 700;
}
