پیشنمایش زنده
کد HTML
<div class="offer-card">
<div class="offer-card__progress">
<div
class="offer-card__progress-step offer-card__progress-step--active"
></div>
<div class="offer-card__progress-step"></div>
<div class="offer-card__progress-step"></div>
<div class="offer-card__progress-step"></div>
<div class="offer-card__progress-step"></div>
<div class="offer-card__progress-step"></div>
</div>
<div class="offer-card__header">
<div class="offer-card__icon-container">
<svg class="folder-svg" viewBox="0 0 100 100" fill="none">
<path
d="M15 35 C15 30 20 25 25 25 L40 25 C45 25 48 28 50 32 L53 36 C55 39 58 40 62 40 L75 40 C80 40 85 45 85 50 L85 80 C85 88 78 92 75 92 L25 92 C18 92 15 88 15 80 Z"
fill="#303035"
></path>
<g transform="translate(0, -2)">
<path
d="M30 25 L65 25 C68 25 70 27 70 30 L70 50 C70 53 68 55 65 55 L30 55 C27 55 25 53 25 50 L25 30 C25 27 27 25 30 25 Z"
fill="#cccccc"
transform="rotate(-12 50 50)"
></path>
<path
d="M35 30 L70 30 C73 30 75 32 75 35 L75 55 C75 58 73 60 70 60 L35 60 C32 60 30 58 30 55 L30 35 C30 32 32 30 35 30 Z"
fill="#ffffff"
transform="rotate(-4 50 50)"
></path>
<text
x="38"
y="44"
font-family="'Inter', sans-serif"
font-size="6"
fill="#333"
font-weight="600"
transform="rotate(-4 50 50)"
>
Contracts
</text>
</g>
<path
d="M10 48 C10 43 15 40 22 40 L78 40 C85 40 90 43 90 48 L88 80 C87 88 80 94 75 94 L25 94 C20 94 13 88 12 80 Z"
fill="url(#folderFront)"
></path>
<path
d="M10 48 C10 43 15 40 22 40 L78 40 C85 40 90 43 90 48 L89 54 L11 54 Z"
fill="rgba(255,255,255,0.05)"
></path>
<defs>
<linearGradient id="folderFront" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#4e4e56"></stop>
<stop offset="100%" stop-color="#2a2a2f"></stop>
</linearGradient>
</defs>
</svg>
</div>
<div class="offer-card__title">Choose offer type</div>
<div class="offer-card__subtitle">
What type of collaboration do you have in mind?
</div>
</div>
<div class="offer-card__options">
<label class="offer-card__option">
<input
type="radio"
name="offer-type"
value="collaboration"
class="offer-card__option-input"
checked=""
/>
<div class="offer-card__option-content">
<div class="offer-card__option-icon-wrapper">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"
></path>
</svg>
</div>
<div class="offer-card__option-text">
<span class="offer-card__option-title">Collaboration</span>
<span class="offer-card__option-desc">Treated as partnership</span>
</div>
<div class="offer-card__option-arrow">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</div>
</div>
</label>
<label class="offer-card__option">
<input
type="radio"
name="offer-type"
value="paid"
class="offer-card__option-input"
/>
<div class="offer-card__option-content">
<div class="offer-card__option-icon-wrapper">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
</svg>
</div>
<div class="offer-card__option-text">
<span class="offer-card__option-title">Paid Plan</span>
<span class="offer-card__option-desc"
>Budget based, average $600</span
>
</div>
<div class="offer-card__option-arrow">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</div>
</div>
</label>
<label class="offer-card__option">
<input
type="radio"
name="offer-type"
value="unpaid"
class="offer-card__option-input"
/>
<div class="offer-card__option-content">
<div class="offer-card__option-icon-wrapper">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M19 4H5c-1.1 0-2 .9-2 2v4c1.1 0 2 .9 2 2s-.9 2-2 2v4c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-4c-1.1 0-2-.9-2-2s.9-2 2-2V6c0-1.1-.9-2-2-2z"
></path>
</svg>
</div>
<div class="offer-card__option-text">
<span class="offer-card__option-title">Unpaid Plan</span>
<span class="offer-card__option-desc">Based on mutual benefits</span>
</div>
<div class="offer-card__option-arrow">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</div>
</div>
</label>
</div>
<div class="offer-card__footer">
<button class="offer-card__btn offer-card__btn--back">
<span class="offer-card__btn-icon">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M15 18l-6-6 6-6"></path>
</svg>
</span>
Back
</button>
<button class="offer-card__btn offer-card__btn--skip">
Skip
<span class="offer-card__btn-icon">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M9 18l6-6-6-6"></path>
</svg>
</span>
</button>
</div>
</div>
کد CSS
.offer-card {
--bg-color: #0b0c10;
--bg-color-light: #12141a;
--bg-hover: #1a1c23;
--border-color: rgba(255, 255, 255, 0.05);
--border-hover: rgba(255, 255, 255, 0.1);
--text-primary: #ffffff;
--text-secondary: #9496a8;
--accent-primary: #8b5cf6;
--accent-primary-rgb: 139, 92, 246;
--accent-bg: #1f143d;
width: 100%;
max-width: 240px;
background: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: 18px;
padding: 1.25em;
font-size: 10px;
font-family: "Inter", "Segoe UI", Roboto, sans-serif;
color: var(--text-primary);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
box-sizing: border-sizing;
}
.offer-card * {
box-sizing: border-box;
}
/* Left glow effect */
.offer-card::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -40px;
width: 60px;
height: 50%;
background: var(--accent-primary);
filter: blur(60px);
z-index: 0;
opacity: 0.12;
pointer-events: none;
}
.offer-card > * {
position: relative;
z-index: 1;
}
/* Progress Bar */
.offer-card__progress {
display: flex;
justify-content: center;
gap: 0.4em;
margin-bottom: 2em;
}
.offer-card__progress-step {
width: 2.2em;
height: 0.25em;
background: rgba(255, 255, 255, 0.12);
border-radius: 1em;
transition: all 0.3s ease;
}
.offer-card__progress-step--active {
background: var(--accent-primary);
box-shadow: 0 0 10px rgba(var(--accent-primary-rgb), 0.5);
}
/* Header */
.offer-card__header {
text-align: center;
margin-bottom: 2.5em;
}
.offer-card__icon-container {
display: flex;
justify-content: center;
margin-bottom: 1em;
}
.offer-card__title {
margin: 0 0 0.3em 0;
font-size: 1.35em;
font-weight: 600;
}
.offer-card__subtitle {
margin: 0;
font-size: 0.9em;
color: var(--text-secondary);
line-height: 1.4;
padding: 0 0.5em;
}
/* Options */
.offer-card__options {
display: flex;
flex-direction: column;
gap: 0.8em;
margin-bottom: 2.5em;
}
.offer-card__option {
cursor: pointer;
display: block;
user-select: none;
position: relative;
}
.offer-card__option-input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.offer-card__option-content {
display: flex;
align-items: center;
padding: 0.8em 1.2em;
background: var(--bg-color-light);
border: 1px solid var(--border-color);
border-radius: 20px;
transition: all 0.25s ease;
}
.offer-card__option-input:hover + .offer-card__option-content {
background: var(--bg-hover);
border-color: var(--border-hover);
}
.offer-card__option-input:focus-visible + .offer-card__option-content {
box-shadow: 0 0 0 2px var(--accent-primary);
}
.offer-card__option-input:active + .offer-card__option-content {
transform: scale(0.98);
}
.offer-card__option-input:checked + .offer-card__option-content {
border-color: rgba(var(--accent-primary-rgb), 0.4);
background: rgba(var(--accent-primary-rgb), 0.1);
}
/* Icon Wrapper inside option */
.offer-card__option-icon-wrapper {
width: 2.8em;
height: 2.8em;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: var(--accent-bg);
color: var(--accent-primary);
margin-right: 1.2em;
flex-shrink: 0;
transition: all 0.3s ease;
}
.offer-card__option-icon-wrapper svg {
width: 1.3em;
height: 1.3em;
}
.offer-card__option-text {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 0.25em;
}
.offer-card__option-title {
font-weight: 500;
font-size: 1em;
}
.offer-card__option-desc {
font-size: 0.8em;
color: var(--text-secondary);
}
/* Right arrow inside option */
.offer-card__option-arrow {
width: 2.2em;
height: 2.2em;
border-radius: 50%;
background: rgba(255, 255, 255, 0.04);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: all 0.3s ease;
flex-shrink: 0;
}
.offer-card__option-arrow svg {
width: 1em;
height: 1em;
}
.offer-card__option-input:checked
+ .offer-card__option-content
.offer-card__option-arrow {
background: rgba(255, 255, 255, 0.08);
color: var(--text-primary);
}
.offer-card__option-input:hover
+ .offer-card__option-content
.offer-card__option-arrow {
background: rgba(255, 255, 255, 0.08);
color: var(--text-primary);
}
/* Footer */
.offer-card__footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.offer-card__btn {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.05);
color: var(--text-secondary);
padding: 0.5em 1em 0.5em 0.5em;
border-radius: 2em;
font-size: 0.9em;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.6em;
transition: all 0.3s ease;
font-family: inherit;
}
.offer-card__btn--skip {
padding: 0.5em 0.5em 0.5em 1em;
}
.offer-card__btn:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--text-primary);
}
.offer-card__btn:focus-visible {
box-shadow: 0 0 0 2px var(--accent-primary);
outline: none;
}
.offer-card__btn:active {
transform: scale(0.96);
}
.offer-card__btn-icon {
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.08);
width: 2.2em;
height: 2.2em;
border-radius: 10px;
color: inherit;
}
.offer-card__btn-icon svg {
width: 1.1em;
height: 1.1em;
}
/* Folder specific */
.folder-svg {
width: 72px;
height: 72px;
filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.5));
}