<div class="c-histogram">
<div class="c-histogram__top">
<div class="c-histogram__orders">
<h4 class="c-histogram__title">Всего заказов</h4>
<span class="c-histogram__orders">50254</span>
</div>
<div class="c-histogram__view">
<button class="c-histogram__all-href">Все</>
</div>
</div>
<div class="c-histogram__bottom">
<div class="c-histogram__chart">
<div class="c-histogram__bar" style="height: 98%;"></div>
<div class="c-histogram__bar" style="height: 78%;"></div>
<div class="c-histogram__bar" style="height: 48%;"></div>
<div class="c-histogram__bar" style="height: 38%;"></div>
<div class="c-histogram__bar" style="height: 78%;"></div>
<div class="c-histogram__bar" style="height: 18%;"></div>
<div class="c-histogram__bar" style="height: 78%;"></div>
<div class="c-histogram__bar" style="height: 38%;"></div>
<div class="c-histogram__bar" style="height: 68%;"></div>
<div class="c-histogram__bar" style="height: 78%;"></div>
<div class="c-histogram__bar" style="height: 33%;"></div>
<div class="c-histogram__bar" style="height: 46%;"></div>
<div class="c-histogram__bar" style="height: 67%;"></div>
<div class="c-histogram__bar" style="height: 46%;"></div>
<div class="c-histogram__bar" style="height: 56%;"></div>
<div class="c-histogram__bar" style="height: 18%;"></div>
<div class="c-histogram__bar" style="height: 28%;"></div>
<div class="c-histogram__bar" style="height: 38%;"></div>
<div class="c-histogram__bar" style="height: 48%;"></div>
<div class="c-histogram__bar" style="height: 44%;"></div>
<div class="c-histogram__bar" style="height: 55%;"></div>
<div class="c-histogram__bar" style="height: 44%;"></div>
<div class="c-histogram__bar" style="height: 33%;"></div>
<div class="c-histogram__bar" style="height: 22%;"></div>
<div class="c-histogram__bar" style="height: 11%;"></div>
<div class="c-histogram__bar" style="height: 14%;"></div>
<div class="c-histogram__bar" style="height: 26%;"></div>
<div class="c-histogram__bar" style="height: 45%;"></div>
<div class="c-histogram__bar" style="height: 67%;"></div>
<div class="c-histogram__bar" style="height: 78%;"></div>
<div class="c-histogram__bar" style="height: 88%;"></div>
<div class="c-histogram__bar" style="height: 98%;"></div>
</div>
</div>
</div>
.c-histogram {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1rem 1.5rem 1.5rem;
min-height: 11.5625rem;
width: 100%;
border: 1px solid var(--clr-gray-3);
border-radius: 8px;
}
.c-histogram__top {
display: flex;
justify-content: space-between;
}
.c-histogram__chart {
display: flex;
gap: 1px;
align-items: flex-end;
height: 3.75rem;
animation: chartGrow 600ms ease-out;
}
.c-histogram__title {
margin: 0;
font-weight: 400;
font-size: 1rem;
line-height: 1.5;
margin-bottom: 0.375rem;
color: var(--clr-font);
}
.c-histogram__orders {
font-weight: 400;
font-size: 1.25rem;
line-height: 1.2;
color: var(--clr-font);
}
.c-histogram__all-href {
all: unset;
font-weight: 400;
font-size: 1rem;
line-height: 1.5;
color: var(--clr-primary-1);
}
.c-histogram__bar {
flex: 1;
background-color: var(--clr-primary-1);
}
@keyframes chartGrow {
from {
transform: scaleY(0);
transform-origin: bottom;
}
to {
transform: scaleY(1);
transform-origin: bottom;
}
}