<div style="background-color: white">
  <!-- Header section -->
  <section class="my-8 mx-md-8">
    <nav class="cgds" aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#"><i class="bi bi-house"></i>Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
      </ol>
    </nav>
    <div class="mb-4 row">
      <div class="col-md-6 col-12">
        <h1>Sign-up</h1>
        <p class="text-muted">
          Already a member?
          <a href="" class="text-decoration-none">Log in</a>
        </p>
      </div>
      <div
        class="d-flex justify-content-end align-items-center col-md-6 col-12">
        <a href="" class="me-4">Cancel</a>
        <button type="button" class="me-4 btn btn-outline-dark cgds">
          Save as draft
        </button>
        <button type="button" class="btn btn-secondary cgds">
          Next
        </button>
      </div>
    </div>
  </section>
  <!-- Stepper component -->
  <div class="cgds stepper">
    <div class="stepper-item is-completed">
      <div class="stepper-marker">1</div>
      <div class="stepper-detail">
        <p><b>Marker title</b></p>
      </div>
    </div>
    <div class="stepper-item is-active">
      <div class="stepper-marker">2</div>
      <div class="stepper-detail">
        <p><b>Marker title</b></p>
      </div>
    </div>
    <div class="stepper-item">
      <div class="stepper-marker">3</div>
      <div class="stepper-detail">
        <p><b>Marker title</b></p>
      </div>
    </div>
  </div>
  <!-- Content section -->
  <section class="shadow rounded p-5 mx-md-8">
    <form>
      <div class="col-sm-8">
        <div class="row">
          <div class="mb-3 col-md-6 col-12">
            <label class="form-label" for="formSinglePageInput1">Label</label>
            <input
              placeholder="Text goes here"
              type="text"
              id="formSinglePageInput1"
              class="form-control"
            />
          </div>
          <div class="mb-3 col-md-6 col-12">
            <label class="form-label" for="formSinglePageInput2">Label</label>
            <input
              placeholder="Text goes here"
              type="text"
              id="formSinglePageInput2"
              class="form-control"
            />
          </div>
        </div>
        <div class="mb-3">
          <label class="form-label" for="formSinglePageInput3">Label</label>
          <div class="mb-3 input-group cgds">
            <input
              placeholder="Text goes here"
              aria-label="Dollar amount (with dot and two decimal places)"
              id="formSinglePageInput3"
              class="form-control"
            />
            <span class="input-group-text">@something</span>
          </div>
        </div>
        <div class="mb-3">
          <label class="form-label" for="formSinglePageInput4">Label</label>
          <input
            placeholder="Text goes here"
            type="text"
            id="formSinglePageInput4"
            class="form-control"
          />
        </div>
        <div class="mb-3">
          <label class="form-label" for="formSinglePageSelect1">Label</label>
          <select class="form-select" id="formSinglePageSelect1">
            <option>Text goes here</option>
            <option>Text goes here</option>
            <option>Text goes here</option>
          </select>
        </div>
      </div>
    </form>
  </section>
  <div class="d-flex justify-content-end my-8 mx-md-8">
    <button type="button" class="btn btn-secondary cgds">Next</button>
  </div>
  <!-- Footer component -->
  <footer class="cgds footer">
    <section class="footer-top">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="widget flex-column">
              <div class="logo">
                <img src="/assets/uncompressed_images/rachana.svg" style="width: 200px"
                     alt="dgc logo">
              </div>
              <div class="social-icon">
                <ul>
                  <li>
                    <a href="">
                      <img src="/assets/uncompressed_images/icon/Facebook.svg" alt="facebook-icon">
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <img src="/assets/uncompressed_images/icon/YouTube.svg" alt="youtube-icon">
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <img src="/assets/uncompressed_images/icon/Telegram.svg" alt="telegram-icon">
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <img src="/assets/uncompressed_images/icon/Tiktok.svg" alt="tiktok-icon">
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <img src="/assets/uncompressed_images/icon/Linkin.svg" alt="linkin-icon">
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="title">
              Column 1
            </div>
            <ul class="links">
              <li><a href="">About Us</a></li>
              <li><a href="">This is a super long link</a></li>
              <li><a href="">Test</a></li>
              <li><a href="">Test</a></li>
            </ul>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="title">
              Column 2
            </div>
            <ul class="links">
              <li><a href="">About Us</a></li>
              <li><a href="">This is a super long link</a></li>
              <li><a href="">Test</a></li>
              <li><a href="">Test</a></li>
            </ul>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="title">
              Column 3
            </div>
            <ul class="links">
              <li><a href="">About Us</a></li>
              <li><a href="">This is a super long link</a></li>
              <li><a href="">Test</a></li>
              <li><a href="">Test</a></li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <section class="footer-bottom">
      <div class="container-fluid">
        <div class="row footer-copyrights">
          <div class="col">
            <div class="d-flex justify-content-lg-start text-start">
              DGC © 2023 ~ All rights reserved. Digital Government Committee.<br>
            </div>
          </div>
          <div class="col">
            <dev class="d-flex justify-content-lg-end text-end">
              <ul>
                <li><a href="" target="_blank"
                       rel="noopener noreferrer">Report Vulnerability</a></li>
                <li><a href="">Privacy Statement</a></li>
                <li><a href="">Terms of use</a></li>
              </ul>
            </dev>
          </div>
        </div>
      </div>
    </section>
  </footer>