custom graph

by shuja uddin

HTML

<section class="panel">
  <div class="text-center wrapper">
   <h4>Fundraising Snapshot</h4>
   <div class="fundraisingSnapshotGraph">
    <div class="center-graph">
      <div class="left-bar"></div>
      <div  class="right-bar">
        <div class="nested-green-bar"></div>
        <div class="nested-orange-bar"></div>
      </div>
    </div>
    <div class="schoolsFundraisingGoal">$<span>10,000</span></div>
    <div class="totalAmountCash">$<span>6,000</span> Cash*</div>
    <div class="totalAmountOnline">$<span>2,000</span> Online</div>      
   </div>
   <p>*Guide Only. All cash is inputted by students and is invalidated. </p>
   <p>Online Fundraising is the quickest way to reach your target… Promote it every chance you get!</p>

  </div>

<div class="panel-body">
  <div class="pull-left">
    <span class="text-muted">Raising Money Online</span>
    <span class="h3 block">$2500.00</span>
  </div>
  <div class="pull-right">
    <span class="fa fa-circle" style="color: #fb6b5b;"></span> <span> Total Students</span>
    <span class="fa fa-circle" style="color: #acdb83;"></span> <span> Raised Money</span>
  </div>
  <div class="clearfix"></div>
</div>  

</section>

CSS

/* custom graph */
.fundraisingSnapshotGraph{
      position: relative;
      height: 160px;
      margin: 0 auto;
      width: 100px;
      background-color: #fff;
}
.fundraisingSnapshotGraph .left-bar {
    width: 50px;
    background-color: #16b7c7;
    height: 100%;
    left: 0;
    position: absolute;
    bottom: 0px;
}
.fundraisingSnapshotGraph .right-bar {
    width: 50px;
    background-color: #fff;
    height: 100%;
    left: 50px;
    position: absolute;
    bottom: 0px;
    transform: rotate(180deg);
}
.fundraisingSnapshotGraph .right-bar .nested-green-bar {
    width: 50px;
    background-color: #f47221;
    height: 30%;
}
.fundraisingSnapshotGraph .right-bar .nested-orange-bar {
    width: 50px;
    background-color: #ccda26;
    height: 36%;
    bottom: 0px;
    position: relative;
}
.schoolsFundraisingGoal{
    position: absolute;
    z-index: 1;
    left: -70px;
    color: #717171;
    bottom: 72px;
}
.totalAmountCash{position: absolute;z-index: 1;right: -84px;color: #717171;bottom: 72px;}
.totalAmountOnline{
  position: absolute;
  z-index: 1;
  right: -96px;
  color: #717171;
  bottom: 18px;
}
/* custom graph */