I have a chart on the site, it displays referral percentages, I need to make it in HTML. After me with the schedule will work another person, please advise how to do it right, perhaps some ready-made solution?
I'll answer that myself. Made on grids, with the ability to control the width of the element and its beginning. Might be helpful to someone
.diagram-referal {
margin-top: 38px;
overflow-y: hidden;
width: 1170px;
}
.diagram-referal__content {
padding: 24px 0 0 0;
display: -ms-grid;
display: grid;
-ms-grid-columns: 85px 1fr;
grid-template-columns: 85px 1fr;
gap: 5px;
}
.diagram-referal__levels {
display: -ms-grid;
display: grid;
-ms-grid-rows: (1fr)[3];
grid-template-rows: repeat(3, 1fr);
padding-bottom: 10px;
}
.diagram-referal__row {
display: -ms-grid;
display: grid;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: url("../img/referals/repeat-line.svg") 0 100% repeat-x;
background-size: 85px;
padding-bottom: 10px;
}
.diagram-referal__element {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[12];
grid-template-columns: repeat(12, 1fr);
}
.diagram-referal__level {
font-family: VisbyCF;
font-weight: 500;
font-size: 13px;
text-align: right;
text-transform: capitalize;
color: #212121;
padding: 21px 0;
margin-right: 10px;
}
.diagram-referal__grid {
padding: 5px 12px;
border-radius: 3px;
background-color: #FDA53C;
}
.diagram-referal__grid_red {
background-color: #F3361A;
}
.diagram-referal__item {
font-family: VisbyCF;
font-weight: 700;
font-size: 15px;
text-align: right;
text-transform: capitalize;
color: #FFFFFF;
}
.diagram-referal__bottom {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[13];
grid-template-columns: repeat(13, 1fr);
padding-top: 10px;
}
.diagram-referal__date {
font-family: VisbyCF;
font-weight: 500;
font-size: 13px;
text-transform: capitalize;
color: rgba(33, 33, 33, 0.5);
}
.diagram-referal__date:first-child {
-ms-grid-column: 2;
grid-column-start: 2;
}
<div class="content-referals__diagram diagram-referal">
<div class="diagram-referal__wrapper">
<div class="diagram-referal__body">
<div class="diagram-referal__content">
<div class="diagram-referal__levels">
<div class="diagram-referal__level">1 Level</div>
<div class="diagram-referal__level">2 Level</div>
<div class="diagram-referal__level">3 Level</div>
</div>
<div class="diagram-referal__row">
<div class="diagram-referal__element">
<div style="grid-column-start: 2; width: 460%" class="diagram-referal__grid">
<div class="diagram-referal__item"><span>$</span>12345</div>
</div>
</div>
<div class="diagram-referal__element">
<div style="grid-column-start: 5; width: 320%" class="diagram-referal__grid diagram-referal__grid_red">
<div class="diagram-referal__item"><span>$</span>12345</div>
</div>
</div>
<div class="diagram-referal__element">
<div style="grid-column-start: 4; width: 300%;" class="diagram-referal__grid">
<div class="diagram-referal__item"><span>$</span>12345</div>
</div>
</div>
</div>
</div>
<div class="diagram-referal__bottom">
<div class="diagram-referal__date">10 Oct</div>
<div class="diagram-referal__date">11 Oct</div>
<div class="diagram-referal__date">12 Oct</div>
<div class="diagram-referal__date">13 Oct</div>
<div class="diagram-referal__date">14 Oct</div>
<div class="diagram-referal__date">15 Oct</div>
<div class="diagram-referal__date">16 Oct</div>
<div class="diagram-referal__date">17 Oct</div>
<div class="diagram-referal__date">18 Oct</div>
<div class="diagram-referal__date">19 Oct</div>
<div class="diagram-referal__date">20 Oct</div>
<div class="diagram-referal__date">21 Oct</div>
</div>
</div>
</div>
</div>