Pyramid Chart

Ask for Help
6

I gave it a go

Screenshot 2023-12-19 at 3.28.16 PM

Summary 
<!DOCTYPE html>
<html>
<head>
  <title>Inverted Pyramid</title>
</head>
<body>
  <div style="width: 100%; text-align: center;">
    <div style="display: inline-block; background-color: #ccccff; width: 90%; height: 20px; margin: 0;">
      <span style="font-weight: bold; color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">987</span>
    </div><br>
    <div style="display: inline-block; background-color: #6495ed; width: 80%; height: 20px; margin: 0;">
      <span style="font-weight: bold; color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">834</span>
    </div><br>
    <div style="display: inline-block; background-color: #9fe2bf; width: 70%; height: 20px; margin: 0;">
      <span style="font-weight: bold; color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">789</span>
    </div><br>
    <div style="display: inline-block; background-color: #40e0d0; width: 60%; height: 20px; margin: 0;">
      <span style="font-weight: bold; color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">456</span>
    </div><br>
    <div style="display: inline-block; background-color: #D85722; width: 50%; height: 20px; margin: 0;">
      <span style="font-weight: bold; color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">390</span>
    </div><br>
    <div style="display: inline-block; background-color: #ffcc00; width: 40%; height: 20px; margin: 0;">
      <span style="font-weight: bold; color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">267</span>
    </div><br>
    <div style="display: inline-block; background-color: #ff6700; width: 30%; height: 20px; margin: 0;">
      <span style="font-weight: bold; color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">123</span>
    </div><br>
    <div style="display: inline-block; background-color: #b5651d; width: 20%; height: 20px; margin: 0;">
      <span style="font-weight: bold; color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">96</span>
    </div><br>
    <div style="display: inline-block; background-color: #4cbb17; width: 10%; height: 20px; margin: 0;">
      <span style="font-weight: bold; color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">69</span>
    </div><br>
    <div style="display: inline-block; background-color: #40e0d0; width: 5%; height: 20px; margin: 0;">
      <span style="font-weight: bold; color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">21</span>
    </div><br>
  </div>
</body>
</html>