go-site-topic-viewer

Topic viewer for GO site

<div class="topic-viewer-container">
  <div class="topics">
    <h4>Progress in your community</h4>
    <ol class="topic-list">
      <li>
        <a href="#section1"
          ><span>01</span>The most ambitious climate action plan in the world</a
        >
      </li>
      <hr />
      <li>
        <a href="#section2"><span>02</span>Investing in workers and families</a>
      </li>
      <hr />
      <li>
        <a href="#section3"> <span>03</span>Keeping Californians Safe</a>
      </li>
      <hr />
      <li>
        <a href="#section4"><span>04</span>Combating gun violence</a>
      </li>
      <hr />
      <li>
        <a href="#section5"
          ><span>05</span>Fighting the fentanyl and opioid crisis</a
        >
      </li>
      <hr />
      <li>
        <a href="#section6"
          ><span>06</span>Protecting abortion access and rights</a
        >
      </li>
      <hr />
      <li>
        <a href="#section7"
          ><span>07</span>Making health care more affordable for California
          families</a
        >
      </li>
      <hr />
      <li>
        <a href="#section8"
          ><span>08</span>Better mental health care for all Californians</a
        >
      </li>
      <hr />
      <li>
        <a href="#section9"><span>09</span>Pushing treatment, not tents</a>
      </li>
      <hr />
      <li>
        <a href="#section10"
          ><span>10</span>Making college more affordable and accessible</a
        >
      </li>
      <hr />
      <li>
        <a href="#section11"
          ><span>11</span>Tackling California's homelessness crisis head-on</a
        >
      </li>
      <hr />
      <li>
        <a href="#section12"
          ><span>12</span>Transforming K-12 education with a parents agenda</a
        >
      </li>
      <!-- Add more list items as needed -->
    </ol>
    <button>View full list</button>
  </div>

  <div class="content">
    <section id="section1">
      <figure>
        <img src="" alt="Image goes here" />
      </figure>
      <p class="topic-category">Topic Category</p>
      <span>Large Headline</span>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, corporis
        earum! Veritatis vitae natus accusamus. Ut necessitatibus esse
        laboriosam doloremque tempore cupiditate itaque at rerum excepturi
        expedita culpa, saepe voluptate.
      </p>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ul>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat,
        tenetur sed. Qui illum alias, ad a aut voluptatem rem. Laudantium,
        deleniti in! Saepe, pariatur praesentium. Blanditiis illo vero labore
        adipisci.
      </p>
    </section>

    <section id="section2">
      <figure>
        <img src="" alt="Image goes here" />
      </figure>
      <p class="topic-category">Topic Category</p>
      <span>Large Headline</span>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, corporis
        earum! Veritatis vitae natus accusamus. Ut necessitatibus esse
        laboriosam doloremque tempore cupiditate itaque at rerum excepturi
        expedita culpa, saepe voluptate.
      </p>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ul>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat,
        tenetur sed. Qui illum alias, ad a aut voluptatem rem. Laudantium,
        deleniti in! Saepe, pariatur praesentium. Blanditiis illo vero labore
        adipisci.
      </p>
    </section>

    <section id="section3">
      <figure>
        <img src="../images/c12.png" alt="Governor Newsom picking up trash" />
      </figure>
      <p class="topic-category">Public safety</p>
      <span>Keeping Californians Safe</span>
      <p>
        Under Governor Newsom, California has made major investments in local
        law enforcement and prosecutors to combat violent crime. The Governor is
        deploying a Public Safety Plan backed by a record investment to:
      </p>
      <ul>
        <li>combat organized retail theft</li>
        <li>increase opioid enforcement</li>
        <li>address gun violence</li>
      </ul>
      <p>
        Part of the Public Safety Plan includes a multi-year recruitment
        campaign to fill 1,000 CHP vacancies.
      </p>
    </section>

    <section id="section4">
      <figure>
        <img src="" alt="Image goes here" />
      </figure>
      <p class="topic-category">Topic Category</p>
      <span>Large Headline</span>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, corporis
        earum! Veritatis vitae natus accusamus. Ut necessitatibus esse
        laboriosam doloremque tempore cupiditate itaque at rerum excepturi
        expedita culpa, saepe voluptate.
      </p>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ul>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat,
        tenetur sed. Qui illum alias, ad a aut voluptatem rem. Laudantium,
        deleniti in! Saepe, pariatur praesentium. Blanditiis illo vero labore
        adipisci.
      </p>
    </section>

    <section id="section5">
      <figure>
        <img src="" alt="Image goes here" />
      </figure>
      <p class="topic-category">Topic Category</p>
      <span>Large Headline</span>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, corporis
        earum! Veritatis vitae natus accusamus. Ut necessitatibus esse
        laboriosam doloremque tempore cupiditate itaque at rerum excepturi
        expedita culpa, saepe voluptate.
      </p>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ul>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat,
        tenetur sed. Qui illum alias, ad a aut voluptatem rem. Laudantium,
        deleniti in! Saepe, pariatur praesentium. Blanditiis illo vero labore
        adipisci.
      </p>
    </section>

    <section id="section6">
      <figure>
        <img src="" alt="Image goes here" />
      </figure>
      <p class="topic-category">Topic Category</p>
      <span>Large Headline</span>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, corporis
        earum! Veritatis vitae natus accusamus. Ut necessitatibus esse
        laboriosam doloremque tempore cupiditate itaque at rerum excepturi
        expedita culpa, saepe voluptate.
      </p>
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
      </ul>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat,
        tenetur sed. Qui illum alias, ad a aut voluptatem rem. Laudantium,
        deleniti in! Saepe, pariatur praesentium. Blanditiis illo vero labore
        adipisci.
      </p>
    </section>
    <!-- Add more content sections as needed -->
  </div>
</div>