پیشنمایش زنده
کد HTML
<div class="card">
<div class="card-header">
<div class="icon">
<svg
class="dollar-icon"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
height="24"
width="24"
>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="currentColor"
d="M12 2V22"
></path>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="currentColor"
d="M17 5H9.5C8.57174 5 7.6815 5.36875 7.02513 6.02513C6.36875 6.6815 6 7.57174 6 8.5C6 9.42826 6.36875 10.3185 7.02513 10.9749C7.6815 11.6313 8.57174 12 9.5 12H14.5C15.4283 12 16.3185 12.3687 16.9749 13.0251C17.6313 13.6815 18 14.5717 18 15.5C18 16.4283 17.6313 17.3185 16.9749 17.9749C16.3185 18.6313 15.4283 19 14.5 19H6"
></path>
</svg>
<svg
class="chart-icon"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
height="24"
width="24"
>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="currentColor"
d="M3 3v18h18"
></path>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="currentColor"
d="M7 12l4-4 4 4 4-4"
></path>
</svg>
</div>
<div class="badge">Finance</div>
</div>
<div class="card-info-bar">
<div class="info-item">
<svg
class="info-icon users-icon"
aria-hidden="true"
viewBox="0 0 16 16"
fill="none"
height="16"
width="16"
>
<circle stroke-width="2" stroke="#8be9fd" r="7" cy="8" cx="8"></circle>
<circle fill="#8be9fd" r="3" cy="8" cx="8"></circle>
</svg>
<span>+1200 Active Users</span>
</div>
<div class="info-item">
<svg
class="info-icon uptime-icon"
aria-hidden="true"
viewBox="0 0 16 16"
fill="none"
height="16"
width="16"
>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="#f1fa8c"
d="M8 2v6l4 2"
></path>
<circle stroke-width="2" stroke="#f1fa8c" r="7" cy="8" cx="8"></circle>
</svg>
<span>99.9% Uptime</span>
</div>
<div class="info-item">
<svg
class="info-icon ai-icon"
aria-hidden="true"
viewBox="0 0 16 16"
fill="none"
height="16"
width="16"
>
<rect fill="#bd93f9" rx="2" height="4" width="12" y="6" x="2"></rect>
<rect fill="#bd93f9" rx="2" height="12" width="4" y="2" x="6"></rect>
</svg>
<span>AI Powered</span>
</div>
</div>
<div class="card-content">
<div class="card-title">Smart Investment</div>
<div class="card-desc">
Advanced portfolio management with real-time analytics and automated
trading strategies for optimal returns.
</div>
</div>
<div class="card-footer">
<button class="btn-primary">
<span class="btn-icon">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 18 18"
height="18"
width="18"
>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="currentColor"
d="M4 9L8 13L14 5"
></path>
</svg>
</span>
GET STARTED
</button>
<button class="btn-secondary">
<span class="btn-icon">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 18 18"
height="18"
width="18"
>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="currentColor"
d="M3 9H15M15 9L11 5M15 9L11 13"
></path>
</svg>
</span>
VIEW PLANS
</button>
</div>
</div>
کد CSS
.card {
background: linear-gradient(
145deg,
#0f0f23 0%,
#1a1a2e 25%,
#16213e 75%,
#0f1419 100%
);
border-radius: 20px;
padding: 24px;
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(15px);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.03),
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 -1px 0 rgba(0, 0, 0, 0.2);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
max-width: 500px;
height: 350px;
display: flex;
flex-direction: column;
}
.card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(
90deg,
transparent,
rgba(102, 126, 234, 0.3),
rgba(118, 75, 162, 0.3),
transparent
);
opacity: 0;
transition: opacity 0.4s ease;
}
.card::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(
circle at 50% 0%,
rgba(102, 126, 234, 0.03) 0%,
transparent 70%
);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 -1px 0 rgba(0, 0, 0, 0.3),
0 0 30px rgba(102, 126, 234, 0.15);
border-color: rgba(102, 126, 234, 0.2);
}
.card:hover::before {
opacity: 1;
}
.card:hover::after {
opacity: 1;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%);
background-size: 200% 200%;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
box-shadow:
0 4px 15px rgba(102, 126, 234, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 0 rgba(0, 0, 0, 0.2);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
}
.icon::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: left 0.6s ease;
}
.icon svg {
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.icon svg.dollar-icon {
opacity: 1;
transform: translate(-50%, -50%) scale(1) rotate(0deg);
}
.icon svg.chart-icon {
opacity: 0;
transform: translate(-50%, -50%) scale(0.8) rotate(-10deg);
}
.card:hover .icon {
transform: scale(1.1) rotate(5deg);
box-shadow:
0 8px 25px rgba(102, 126, 234, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(0, 0, 0, 0.3);
background-position: 100% 100%;
}
.card:hover .icon::before {
left: 100%;
}
.card:hover .icon svg.dollar-icon {
opacity: 0;
transform: translate(-50%, -50%) scale(0.8) rotate(10deg);
}
.card:hover .icon svg.chart-icon {
opacity: 1;
transform: translate(-50%, -50%) scale(1) rotate(0deg);
}
.badge {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 50%, #ff6b6b 100%);
background-size: 200% 200%;
color: white;
padding: 8px 16px;
border-radius: 24px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow:
0 2px 8px rgba(255, 107, 107, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card:hover .badge {
box-shadow:
0 4px 12px rgba(255, 107, 107, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
text-shadow:
0 0 8px #fff,
0 0 16px #ff6b6b,
0 0 24px #ee5a24;
}
.card-content {
flex: 1;
margin-bottom: 20px;
padding: 8px 0 0 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.card-content .card-title {
font-size: 22px;
font-weight: 700;
margin-bottom: 14px;
background: linear-gradient(90deg, #fff 0%, #b8b8ff 50%, #fff 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 2px 12px rgba(102, 126, 234, 0.08);
letter-spacing: 0.01em;
line-height: 1.25;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card:hover .card-title {
background-position: 100% 0%;
text-shadow: 0 2px 20px rgba(102, 126, 234, 0.15);
}
.card-content .card-desc {
font-size: 15px;
line-height: 1.7;
color: #c7d0e6;
font-weight: 400;
text-shadow: 0 1px 6px rgba(30, 34, 54, 0.1);
letter-spacing: 0.01em;
margin-bottom: 0;
}
.card-footer {
display: flex;
gap: 12px;
margin-top: auto;
}
.btn-primary,
.btn-secondary {
padding: 10px 16px;
border-radius: 8px;
border: none;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
font-family: "Inter", sans-serif;
flex: 1;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%);
background-size: 200% 200%;
color: white;
box-shadow:
0 4px 15px rgba(102, 126, 234, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 0 rgba(0, 0, 0, 0.2);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
}
.btn-primary::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: left 0.6s ease;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow:
0 8px 25px rgba(102, 126, 234, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(0, 0, 0, 0.3);
background-position: 100% 100%;
}
.btn-primary:hover::before {
left: 100%;
}
.btn-secondary {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.02) 100%
);
color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
}
.btn-secondary::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.1),
transparent
);
transition: left 0.6s ease;
}
.btn-secondary:hover {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.05) 100%
);
border-color: rgba(255, 255, 255, 0.25);
transform: translateY(-3px);
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn-secondary:hover::before {
left: 100%;
}
.btn-icon {
display: inline-flex;
align-items: center;
margin-right: 8px;
vertical-align: middle;
}
.btn-primary .btn-icon svg,
.btn-secondary .btn-icon svg {
display: block;
color: #fff;
width: 18px;
height: 18px;
}
.btn-secondary .btn-icon svg {
color: #bcbcbc;
}
.card-info-bar {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 18px;
margin-bottom: 18px;
margin-top: 0;
flex-wrap: wrap;
padding-left: 2px;
}
.info-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #bfc9e6;
background: linear-gradient(
135deg,
rgba(30, 34, 54, 0.9) 0%,
rgba(30, 34, 54, 0.7) 100%
);
border-radius: 7px;
padding: 2px 10px 2px 6px;
font-weight: 500;
box-shadow:
0 1px 4px 0 rgba(80, 80, 120, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
line-height: 1.2;
min-width: 0;
white-space: nowrap;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
border: 1px solid rgba(255, 255, 255, 0.03);
}
.card:hover .info-item {
background: linear-gradient(
135deg,
rgba(30, 34, 54, 0.95) 0%,
rgba(30, 34, 54, 0.8) 100%
);
box-shadow:
0 2px 8px 0 rgba(80, 80, 120, 0.1),
0 0 8px 2px rgba(102, 126, 234, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
border-color: rgba(102, 126, 234, 0.4);
}
.info-item .info-icon {
display: block;
min-width: 16px;
min-height: 16px;
}
@media (max-width: 768px) {
.card {
max-width: 100%;
height: auto;
min-height: 260px;
}
.card-content .card-title {
font-size: 18px;
}
.card-content .card-desc {
font-size: 13px;
}
}
@media (max-width: 480px) {
.card {
padding: 20px;
}
.card-header {
margin-bottom: 16px;
}
.icon {
width: 40px;
height: 40px;
}
.card-content .card-title {
font-size: 16px;
}
.btn-primary,
.btn-secondary {
padding: 8px 12px;
font-size: 12px;
}
.card-info-bar {
gap: 10px;
margin-bottom: 12px;
padding-left: 0;
}
.info-item {
font-size: 11px;
padding: 2px 7px 2px 5px;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(40px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.card {
animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.card:nth-child(1) {
animation-delay: 0.1s;
}
.card:nth-child(2) {
animation-delay: 0.2s;
}
.card:nth-child(3) {
animation-delay: 0.3s;
}
.card:nth-child(4) {
animation-delay: 0.4s;
}
.card:hover {
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 -1px 0 rgba(0, 0, 0, 0.3),
0 0 30px rgba(102, 126, 234, 0.15);
}