<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="#">HOME</a></li>
        <li class="breadcrumb-item active" aria-current="page">SIGN-UP</li>
      </ol>
    </nav>
    <div class="row">
      <div class="col-md-6 col-12">
        <h1>Sign-up</h1>
        <p class="text-muted">
          Already a member? <a href="#" style="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 btn btn-outline-dark cgds">Cancel</a>
        <button type="button" class="btn btn-secondary cgds">
          Save as draft
        </button>
      </div>
    </div>
  </section>
  <!-- Content section -->
  <section class="shadow rounded p-5 my-8 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.com</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 class="mb-3" id="formSinglePageRadio1">
          <label class="form-label" for="formSinglePageRadio1">Label</label>
          <div class="form-check">
            <input
              name="radioGroup1"
              type="radio"
              class="form-check-input">
            <label title="" for="formSinglePageRadio1" class="form-check-label">Input 1</label>
          </div>
          <div class="form-check">
            <input
              name="radioGroup1"
              type="radio"
              class="form-check-input">
            <label title=""​ for="formSinglePageRadio1" class="form-check-label">Input 2</label>
          </div>
        </div>
        <div class="mb-3">
          <label class="form-label" for="formSinglePageInput5">Label</label>
          <textarea
            rows="5"
            placeholder="This is the text that has been filled in"
            type="text"
            id="formSinglePageInput5"
            class="form-control">
                    </textarea>
        </div>
        <div class="mb-3">
          <div class="form-check">
            <input
              type="checkbox"
              id="formBasicCheckbox1"
              class="form-check-input"
            >
            <label title="" for="formBasicCheckbox1" class="form-check-label">
              I agree to the terms of the Subscriber Agreement and the Privacy
              Policy
            </label>
          </div>
        </div>
      </div>
    </form>
  </section>
  <div class="d-flex justify-content-end my-8 mx-md-8">
    <button type="submit" class="btn btn-primary cgds">Submit</button>
  </div>

  <!-- Footer section -->
  <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">
            <div 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>
            </div>
          </div>
        </div>
      </div>
    </section>
  </footer>