پیشنمایش زنده
کد HTML
<div class="card">
<div class="card__wrapper">
<div class="card___wrapper-acounts">
<div class="card__score">+3</div>
<div class="card__acounts"><svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><circle cx="64" cy="64" fill="#ffd8c9" r="60"></circle><circle cx="64" cy="64" fill="#fff" opacity=".3" r="48"></circle><path d="m64 14a31 31 0 0 1 31 31v41.07a9.93 9.93 0 0 1 -9.93 9.93h-42.14a9.93 9.93 0 0 1 -9.93-9.93v-41.07a31 31 0 0 1 31-31z" fill="#393c54"></path><circle cx="89" cy="60" fill="#fbc0aa" r="7"></circle><path d="m64 124a59.7 59.7 0 0 0 34.7-11.07l-3.33-10.29a10 10 0 0 0 -9.37-6.64h-43.95a10 10 0 0 0 -9.42 6.64l-3.33 10.29a59.7 59.7 0 0 0 34.7 11.07z" fill="#00adfe"></path><path d="m46.54 121.45a59.93 59.93 0 0 0 34.92 0l-2.46-25.45h-30z" fill="#ff8475"></path><path d="m48.13 105h31.74l-.39-4h-30.96z" fill="#f85565"></path><path d="m76 96a12 12 0 0 1 -24 0z" fill="#ffd8c9"></path><path d="m64 83v12" fill="none" stroke="#fbc0aa" stroke-linecap="round" stroke-linejoin="round" stroke-width="14"></path><circle cx="39" cy="60" fill="#fbc0aa" r="7"></circle><path d="m64 90a25 25 0 0 1 -25-25v-16.48a25 25 0 1 1 50 0v16.48a25 25 0 0 1 -25 25z" fill="#ffd8c9"></path><path d="m64 64.75v6.5" fill="none" stroke="#fbc0aa" stroke-linecap="round" stroke-linejoin="round" stroke-width="5"></path><path d="m64.83 18.35a27.51 27.51 0 0 0 -28.32 27.47v4.76a2 2 0 0 0 2 2h.58a1 1 0 0 0 .86-.49l4.05-7.09 2.48 4.13a1 1 0 0 0 1.71 0l2.48-4.13 2.47 4.13a1 1 0 0 0 1.72 0l2.47-4.13 2.48 4.13a1 1 0 0 0 1.71 0l2.48-4.13 2.48 4.13a1 1 0 0 0 1.71 0l2.48-4.13 2.47 4.13a1 1 0 0 0 1.72 0l2.47-4.13 2.48 4.13a1 1 0 0 0 1.71 0l2.48-4.13 4 7.09a1 1 0 0 0 .86.49h.58a2 2 0 0 0 2-2v-4.18c.05-14.95-11.66-27.61-26.61-28.05z" fill="#515570"></path><path d="m47.35 113h33.29l-.38-4h-32.52z" fill="#f85565"></path><path d="m46.58 121h34.84l-.39-4h-34.06z" fill="#f85565"></path><path d="m58.52 79.39c0-.84 11-.84 11 0 0 1.79-2.45 3.25-5.48 3.25s-5.52-1.46-5.52-3.25z" fill="#ff8475" opacity=".7"></path><path d="m69.48 79.29c0 .78-11 .78-11 0 .04-1.79 2.52-3.29 5.52-3.29s5.48 1.5 5.48 3.29z" fill="#f85565" opacity=".7"></path><circle cx="76.25" cy="58.75" fill="#515570" r="3"></circle><path d="m70.75 59.84a6.61 6.61 0 0 1 11.5-1.31" fill="none" stroke="#515570" stroke-linecap="round" stroke-linejoin="round"></path><path d="m72.11 51.46 5.68-.4a4.62 4.62 0 0 1 4.21 2.1l.77 1.21" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke:#515570;stroke-width:2;opacity:.2"></path><circle cx="51.75" cy="58.75" fill="#515570" r="3"></circle><g fill="none" stroke-linecap="round"><path d="m57.25 59.84a6.61 6.61 0 0 0 -11.5-1.31" stroke="#515570" stroke-linejoin="round"></path><path d="m55.89 51.45-5.68-.39a4.59 4.59 0 0 0 -4.21 2.11l-.77 1.21" opacity=".2" stroke="#515570" stroke-linejoin="round" stroke-width="2"></path><path d="m57.25 78.76a17.4 17.4 0 0 0 6.75 1.12 17.4 17.4 0 0 0 6.75-1.12" stroke="#f85565" stroke-miterlimit="10"></path></g></svg></div>
<div class="card__acounts"><svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><circle cx="64" cy="64" fill="#ff8475" r="60"></circle><circle cx="64" cy="64" fill="#f85565" opacity=".4" r="48"></circle><path d="m64 14a32 32 0 0 1 32 32v41a6 6 0 0 1 -6 6h-52a6 6 0 0 1 -6-6v-41a32 32 0 0 1 32-32z" fill="#7f3838"></path><path d="m62.73 22h2.54a23.73 23.73 0 0 1 23.73 23.73v42.82a4.45 4.45 0 0 1 -4.45 4.45h-41.1a4.45 4.45 0 0 1 -4.45-4.45v-42.82a23.73 23.73 0 0 1 23.73-23.73z" fill="#393c54" opacity=".4"></path><circle cx="89" cy="65" fill="#fbc0aa" r="7"></circle><path d="m64 124a59.67 59.67 0 0 0 34.69-11.06l-3.32-9.3a10 10 0 0 0 -9.37-6.64h-43.95a10 10 0 0 0 -9.42 6.64l-3.32 9.3a59.67 59.67 0 0 0 34.69 11.06z" fill="#4bc190"></path><path d="m45 110 5.55 2.92-2.55 8.92a60.14 60.14 0 0 0 9 1.74v-27.08l-12.38 10.25a2 2 0 0 0 .38 3.25z" fill="#356cb6" opacity=".3"></path><path d="m71 96.5v27.09a60.14 60.14 0 0 0 9-1.74l-2.54-8.93 5.54-2.92a2 2 0 0 0 .41-3.25z" fill="#356cb6" opacity=".3"></path><path d="m57 123.68a58.54 58.54 0 0 0 14 0v-25.68h-14z" fill="#fff"></path><path d="m64 88.75v9.75" fill="none" stroke="#fbc0aa" stroke-linecap="round" stroke-linejoin="round" stroke-width="14"></path><circle cx="39" cy="65" fill="#fbc0aa" r="7"></circle><path d="m64 91a25 25 0 0 1 -25-25v-16.48a25 25 0 1 1 50 0v16.48a25 25 0 0 1 -25 25z" fill="#ffd8c9"></path><path d="m91.49 51.12v-4.72c0-14.95-11.71-27.61-26.66-28a27.51 27.51 0 0 0 -28.32 27.42v5.33a2 2 0 0 0 2 2h6.81a8 8 0 0 0 6.5-3.33l4.94-6.88a18.45 18.45 0 0 1 1.37 1.63 22.84 22.84 0 0 0 17.87 8.58h13.45a2 2 0 0 0 2.04-2.03z" fill="#bc5b57"></path><path d="m62.76 36.94c4.24 8.74 10.71 10.21 16.09 10.21h5" style="fill:none;stroke-linecap:round;stroke:#fff;stroke-miterlimit:10;stroke-width:2;opacity:.1"></path><path d="m71 35c2.52 5.22 6.39 6.09 9.6 6.09h3" style="fill:none;stroke-linecap:round;stroke:#fff;stroke-miterlimit:10;stroke-width:2;opacity:.1"></path><circle cx="76" cy="62.28" fill="#515570" r="3"></circle><circle cx="52" cy="62.28" fill="#515570" r="3"></circle><ellipse cx="50.42" cy="69.67" fill="#f85565" opacity=".1" rx="4.58" ry="2.98"></ellipse><ellipse cx="77.58" cy="69.67" fill="#f85565" opacity=".1" rx="4.58" ry="2.98"></ellipse><g fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="m64 67v4" stroke="#fbc0aa" stroke-width="4"></path><path d="m55 56h-9.25" opacity=".2" stroke="#515570" stroke-width="2"></path><path d="m82 56h-9.25" opacity=".2" stroke="#515570" stroke-width="2"></path></g><path d="m64 84c5 0 7-3 7-3h-14s2 3 7 3z" fill="#f85565" opacity=".4"></path><path d="m65.07 78.93-.55.55a.73.73 0 0 1 -1 0l-.55-.55c-1.14-1.14-2.93-.93-4.27.47l-1.7 1.6h14l-1.66-1.6c-1.34-1.4-3.13-1.61-4.27-.47z" fill="#f85565"></path></svg></div>
</div>
<div class="card__menu"><svg fill="none" height="20" viewBox="0 0 4 20" width="4" xmlns="http://www.w3.org/2000/svg"><g fill="#000"><path d="m2 4c1.10457 0 2-.89543 2-2s-.89543-2-2-2-2 .89543-2 2 .89543 2 2 2z"></path><path d="m2 12c1.10457 0 2-.8954 2-2 0-1.10457-.89543-2-2-2s-2 .89543-2 2c0 1.1046.89543 2 2 2z"></path><path d="m2 20c1.10457 0 2-.8954 2-2s-.89543-2-2-2-2 .8954-2 2 .89543 2 2 2z"></path></g></svg></div>
</div>
<div class="card__title">Web Design templates
Selection</div>
<div class="card__subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elitsed do eiusmod.</div>
<div class="card__indicator"><span class="card__indicator-amount">135</span> Projects / <span class="card__indicator-percentage">75%</span></div>
<div class="card__progress"><progress value="75" max="100"></progress></div>
</div>
کد CSS
.card {
--main-color: #000;
--bg-color: #8DD4EB;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
width: 300px;
padding: 25px;
background: var(--bg-color);
border-radius: 20px;
}
.card__wrapper {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.card___wrapper-acounts {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
z-index: 1;
cursor: pointer;
}
.card___wrapper-acounts > div:nth-child(2) {
position: absolute;
left: 25px;
z-index: -1;
}
.card___wrapper-acounts > div:nth-child(3) {
position: absolute;
left: 50px;
z-index: -2;
}
.card__score {
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
font-size: 16px;
color: #fff;
width: 40px;
height: 40px;
border-radius: 100%;
background: var(--main-color);
}
.card__acounts {
width: 42px;
height: 42px;
}
.card__acounts svg {
width: 100%;
height: 100%;
}
.card__menu {
width: 40px;
height: 40px;
background: var(--bg-color);
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.card__title {
margin-top: 50px;
font-weight: 900;
font-size: 25px;
color: var(--main-color);
}
.card__subtitle {
margin-top: 15px;
font-weight: 400;
font-size: 15px;
color: var(--main-color);
}
.card__indicator {
margin-top: 50px;
font-weight: 500;
font-size: 14px;
color: var(--main-color);
}
.card__progress progress {
width: 100%;
height: 4px;
border-radius: 100px;
}
.card__progress progress::-webkit-progress-bar {
background-color: #00000030;
border-radius: 100px;
}
.card__progress progress::-webkit-progress-value {
background-color: var(--main-color);
border-radius: 100px;
}