Burndown diagram

burndown-diagram.markdown

Burndown diagram

A Pen by A. Rizhenkov on CodePen.

License.

index.html

<div class="timeEntries">
        <div class="bar reverse">
            <div class="balance-actual">
                <span>120$</span>
            </div>
            <div class="bar-fill" style="width: 25%;"></div>
        </div>
        <div class="card red">
            <div class="meta-bar">
              <span class="entry-amount">10$</span><span class="minutes">1H</span><span class="date">01/01/2020</span>
            </div>
            <div>
                Some cool description
            </div>
        </div>
  
        <div class="bar reverse">
            <div class="balance-actual">
                <span>100$</span>
            </div>
            <div class="bar-fill" style="width: 15%;"></div>
        </div>
        <div class="card red">
            <div class="meta-bar">
              <span class="entry-amount">10$</span><span class="minutes">1H</span><span class="date">01/01/2020</span>
            </div>
            <div>
                Some cool description
            </div>
        </div>
  
        <div class="bar">
            <div class="balance-actual">
                <span>100$</span>
            </div>
            <div class="bar-fill" style="width: 5%;"></div>
        </div>
        <div class="card">
            <div class="meta-bar">
              <span class="entry-amount">10$</span><span class="minutes">1H</span><span class="date">01/01/2020</span>
            </div>
            <div>
                Some cool description
            </div>
        </div>
</div>

style.css

body {
  background-color: #06154d;
}
.timeEntries {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bar {
  align-self: stretch;
  height: 30px;

  margin-bottom: 10px;
  margin-top: 10px;
  padding-left: 50%;
  display: flex;

  position: relative;
}
.bar-fill {
  background-color: rgba(112, 255, 175, 0.45);
  border-left: 1px solid white;
}
.bar.reverse {
  padding-left: initial;
  padding-right: 50%;
  justify-content: flex-end;
}
.bar.reverse .bar-fill {
  background-color: rgba(255, 98, 97, 0.45);
  border-right: 1px solid white;
  border-left: none;
}
.balance-actual {
  position: absolute;
  height: 100%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  color: white;
}
.balance-actual span {
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  padding-left: 6px;
  padding-right: 6px;
}
.card {
  background-color: white;
  color: black;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 6px;
  font-size: 14px;
}
.card .entry-amount {
  color: #0EA804;
  margin-right: 1rem;
}
.card.red .entry-amount {
  color: #a80007;
}
.meta-bar {
  display: flex;
  justify-content: space-between;
}
.meta-bar .minutes {
  margin-right: 1rem;
}