پیشنمایش زنده
کد HTML
<div class="twitter-card">
<div class="card-header">
<div class="header-top">
<svg class="twitter-icon" viewBox="0 0 24 24">
<path
d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
></path>
</svg>
<div class="status">Connected</div>
</div>
<div class="brand-name">Uiverse.io</div>
<div class="handle">@uiverse_io</div>
</div>
<div class="card-stats">
<div class="stat">
<div class="stat-number">755</div>
<div class="stat-label">Followers</div>
</div>
<div class="stat">
<div class="stat-number">56</div>
<div class="stat-label">Posts</div>
</div>
<div class="stat">
<div class="stat-number">7.8%</div>
<div class="stat-label">Engagement</div>
</div>
</div>
</div>
کد CSS
.twitter-card {
width: 320px;
background: black;
border-radius: 16px;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Thick black border effect */
border: 4px solid #000;
/* Additional shadow for depth */
box-shadow: 8px 8px 0px #000;
position: relative;
margin: 20px;
}
.card-header {
background: linear-gradient(90deg, #5f72ff, #9a4eff);
color: white;
padding: 24px 20px;
position: relative;
}
.header-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.twitter-icon {
width: 28px;
height: 28px;
fill: white;
}
.status {
background: rgba(255, 255, 255, 0.25);
padding: 6px 14px;
border-radius: 16px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
}
.brand-name {
font-size: 28px;
font-weight: bold;
margin-bottom: 6px;
letter-spacing: -0.5px;
}
.handle {
font-size: 16px;
opacity: 0.9;
font-weight: 400;
}
.card-stats {
padding: 24px 20px;
display: flex;
justify-content: space-between;
background: white;
}
.stat {
text-align: center;
flex: 1;
padding: 0 8px;
}
.stat-number {
font-size: 20px;
font-weight: bold;
color: #14171a;
margin-bottom: 6px;
line-height: 1;
}
.stat-label {
font-size: 13px;
color: #657786;
font-weight: 500;
text-transform: capitalize;
}
.stat:not(:last-child) {
border-right: 1px solid #e1e8ed;
}
/* Hover effect for the entire card */
.twitter-card:hover {
transform: translate(-2px, -2px);
box-shadow: 10px 10px 0px #000;
transition: all 0.2s ease;
}
@media (max-width: 480px) {
.twitter-card {
width: 300px;
border: 3px solid #000;
box-shadow: 6px 6px 0px #000;
}
.twitter-card:hover {
box-shadow: 8px 8px 0px #000;
}
.brand-name {
font-size: 24px;
}
.stat-number {
font-size: 18px;
}
.stat-label {
font-size: 12px;
}
}