savings.html

{% extends "base.html" %}
{% block title %}{% endblock %}
{% block content %}
<div class="accordion" id="accordionPanelsStayOpenExample"style="width: 30%; margin: 50px;">
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
        CURRENT STREAK:
      </button>
    </h2>
    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
      <div class="accordion-body">
        Your current saving streak is <strong>100 days</strong>
      </div>
    </div>
  </div>
</div>
<h2 style="width: 30%; margin: 50px;">SAVINGS GOALS/SAVINGS</h2>

  <div class="progress5" style="width: 30%; margin: 50px;">
    <p>New Car: (£100/100)</p>
    <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
  </div>

  <div class="progress4" style="width: 30%; margin: 50px;">
    <p>Operation: (£6000/8000)</p>
    <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
  </div>

  <div class="progress2" style="width: 30%; margin: 50px;">
    <p>Vacation: (£1250/5000)</p>
    <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">25%</div>
  </div>

{% endblock %}