<h1 class="text-danger">Offcanvas 
  <button class="btn btn-sm btn-outline-secondary" type="button"
      data-bs-toggle="offcanvas" data-bs-target="#robotIndex"
      aria-controls="robotIndex">Robot Index</button>
</h1>

<div class="offcanvas offcanvas-start" tabindex="-1" id="robotIndex" aria-labelledby="offcanvasHeading">
  <div class="offcanvas-header">
    <h5 id="offcanvasHeading">Robot Index</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <ul class="list-group list-group-flush"> 
      <a class="list-group-item list-group-item-action" href="#robot-rex">Rex</a>
      <a class="list-group-item list-group-item-action" href="#robot-dolores">Dolores</a>
      <a class="list-group-item list-group-item-action" href="#robot-bubbles">Bubbles</a>
      <a class="list-group-item list-group-item-action" href="#robot-fred">Fred</a>
      <a class="list-group-item list-group-item-action" href="#robot-rivet">Rivet</a>
      <a class="list-group-item list-group-item-action" href="#robot-eileen">Eileen</a>
      <a class="list-group-item list-group-item-action" href="#robot-belle">Belle</a>
      <a class="list-group-item list-group-item-action" href="#robot-cosmo">Cosmo</a>
      <a class="list-group-item list-group-item-action" href="#robot-dolly">Dolly</a>
      <a class="list-group-item list-group-item-action" href="#robot-sergeant">Sergeant</a>
      <a class="list-group-item list-group-item-action" href="#robot-oscar">Oscar</a>
      <a class="list-group-item list-group-item-action" href="#robot-levi">Levi</a>
      <a class="list-group-item list-group-item-action" href="#robot-elton">Elton</a>
      <a class="list-group-item list-group-item-action" href="#robot-Spring">Spring</a>
    </ul>
  </div>
</div>

<main>
  <div id="robot-rex">
    <h2>Rex</h2>
    <img src="https://pixelprowess.com/i/robot-rex_tn.png" width="300" height="300" alt="Rex Robot">
    <p>Rex is the Mayor of Binaryville and a well-loved personality in town. He rose to robotdom from a microprocessor plant on the south side of town, where many famous and influential robots before him were conceive.</p>
  </div>
  <div id="robot-dolores">
    <h2>Dolores</h2>
    <img src="https://pixelprowess.com/i/robot-dolores_tn.png" width="300" height="300" alt="Dolores Robot">
    <p>Dolores robot is a computational genius who performs calculations for various Binaryville businesses and organizations. In her spare time, Dolores has been noodling on the creation of the perfect web browser that will make all other browsers obsolete. We're rooting for you, Dolore!</p>
  </div>
  <div id="robot-bubbles">
    <h2>Bubbles</h2>
    <img src="https://pixelprowess.com/i/robot-bubbles_tn.png" width="300" height="300" alt="Bubbles Robot">
    <p>Bubble Gum robot, or “Bubbles” for short, is from a family of track-footed robots that ¬originated from an experiment melding candy vending machines with robotics in the early 1980s. Bubbles is a favorite of Binaryville, not just because she generously dispenses candy, but also because she has one of the more "bubbly" personalities of the villager.</p>
  </div>
  <div id="robot-fred">
    <h2>Fred</h2>
    <img src="https://pixelprowess.com/i/robot-fred_tn.png" width="300" height="300" alt="Fred Robot">
    <p>Fred is inquisitive and creative, and always conjuring up ways to improve Binaryville and the lives of its inhabitants. He's been at the forefront of many inventions, but has a special affinity for improving the world through alternative energy and green-living. Fred's engineering collaborations with the City of Binaryville have helped the city reduce its energy consumption year over year, and he's twice been awarded the highly coveted Binaryville Medallion of Hono.</p>
  </div>
  <div id="robot-rivet">
    <h2>Rivet</h2>
    <img src="https://pixelprowess.com/i/robot-rivet_tn.png" width="300" height="300" alt="Rivet Robot">
    <p>Rivet descended from an assembly line of amphibious robots, but never quite took to deep water - though he does love rolling around in mucky marshes and soaking up the mud on vacation. With his advanced temperature sensors and all-weather construction, he's often dispatched to remote regions all around the world to help with disaster relief wor.</p>
  </div>
  <div id="robot-eileen">
    <h2>Eileen</h2>
    <img src="https://pixelprowess.com/i/robot-eileen_tn.png" width="300" height="300" alt="Eileen Robot">
    <p>Binaryville's Advanced Robotics Assembly Division has become a highly profitable manufacturer of automation technology under Eileen's watchful managerial eye. While Eileen has high standards and leaves nothing to chance when overseeing the factory floor, she's also known for being exceptionally fair, supportive, and communicative with her team members. In her off hours, she enjoys stargazing and astronomy. ¬¬¬¬ </p>
  </div>
  <div id="robot-belle">
    <h2>Belle</h2>
    <img src="https://pixelprowess.com/i/robot-belle_tn.png" width="300" height="300" alt="Belle Robot">
    <p>¬Belle is a safety inspector at Binaryville's Advanced Robotics Assembly Division, and while she doesn't particularly like to toot her own horn, her job does require blaring her siren and flashing her warning light whenever a safety concern is discovered. Belle is proud that she helps keep residents of Binaryville safe and sound. Belle's extracurricular activities include gardening, knitting, and volunteering with the local Robot Scouts chapter, where she teaches outdoor safet.</p>
  </div>
  <div id="robot-cosmo">
    <h2>Cosmo</h2>
    <img src="https://pixelprowess.com/i/robot-cosmo_tn.png" width="300" height="300" alt="Cosmo Robot">
    <p>For an esteemed aeronautical engineer who manned the first ever flight to Mars from Binaryville (or anywhere), Cosmo is one of the most down-to-earth folks you'll ever meet. His favorite pastimes are playing bingo, soaking up the sun at Binaryville Beach, and reading spy novel.</p>
  </div>
  <div id="robot-dolly">
    <h2>Dolly</h2>
    <img src="https://pixelprowess.com/i/robot-dolly_tn.png" width="300" height="300" alt="Dolly Robot">
    <p>Dolly is Binaryville's local fitness guru with the huge "can-do" attitude. Her aerobics and spinning classes at the local gym are booked weeks in advance, and she's a popular personal trainer who's inspired many folks to improve their lives through exercise and healthful eating. In her off-hours, Dolly can be found at the hottest karaoke spots in Binaryville. (Yes, there's more than on!)</p>
  </div>
  <div id="robot-sergeant">
    <h2>Sergeant</h2>
    <img src="https://pixelprowess.com/i/robot-sergeant_tn.png" width="300" height="300" alt="Sergeant Robot">
    <p>Sergeant is always nearby to lend a helping claw to his fellow factory automation friends. Being able to pull 2000 pounds has its distinct advantages, and Sergeant is never bored. He also serves the City of Binaryville as an emergency services volunteer. His strength, determination, and kindness have saved the day on many occasions.</p>
  </div>
  <div id="robot-oscar">
    <h2>Oscar</h2>
    <img src="https://pixelprowess.com/i/robot-oscar_tn.png" width="300" height="300" alt="Oscar Robot">
    <p>When not assembling tiny computer parts, with pinpoint accuracy and commendable speed, Oscar, ¬a diehard De¬¬nver Bronco’s fan, lives for watching Bronco’s games and managing their fan club. He also dabbles in art, and especially enjoys painting on grains of rice, where he can relax into a trance-like state and focus for hours.</p>
  </div>
  <div id="robot-levi">
    <h2>Levi</h2>
    <img src="https://pixelprowess.com/i/robot-levi_tn.png" width="300" height="300" alt="Levi Robot">
    <p>Levi is a fixture in the Advanced Robotics Assembly Division where he’s skilled in picking out defective parts and sorting them for recycle. He’s known as an expert in quality control and has written several successful books on the subject. While his job requires absolute concentration and meticulous attention to details, he enjoys a more disorganized home life and takes on new hobbies as curiosity strikes.</p>
  </div>
  <div id="robot-elton">
    <h2>Elton</h2>
    <img src="https://pixelprowess.com/i/robot-elton_tn.png" width="300" height="300" alt="Elton Robot">
    <p>Elton’s a key grip in the Binaryville movie industry, where he’s known for his expert lighting and camera operation. He’s also experienced in front of the camera and enjoys taking acting l. If you look closely, you’ll see him as an extra, or in cameo roles, in several movies including Automation Man and Factory Blues.</p>
  </div>
  <div id="robot-spring">
    <h2>Spring</h2>
    <img src="https://pixelprowess.com/i/robot-spring_tn.png" width="300" height="300" alt="Spring Robot">
    <p>Some of the most beautiful buildings and bridges in Binaryville and beyond were built under Spring’s trusty care. Her steady reach, precision, and attention-to-detail are behind many architectural masterpieces. When not serving as the go-to bot for raising pillars, sculptures, and other priceless adornments, Spring is a dedicated member of the Binaryville Volunteer Firefighter.</p>
  </div>    
</main>