<!--Main Navigation-->

  <header>

    <style>

      #intro {

        background-image: url(https://pbs.twimg.com/media/FSzqqNEXwAUlUK5.jpg);

        height: 100vh;

      }

​

      /* Height for devices larger than 576px */

      @media (min-width: 992px) {

        #intro {

          margin-top: -58.59px;

        }

      }

​

      .navbar .nav-link {

        color: #fff !important;

      }

    </style>

​

    <!-- Navbar -->

    <nav class="navbar navbar-expand-lg navbar-dark d-none d-lg-block" style="z-index: 2000;">

      <div class="container-fluid">

        <!-- Navbar brand -->

        <a class="navbar-brand nav-link" target="_blank" href="http://www.umhlathuze.gov.za/">

          <strong>COU</strong>

        </a>

        <button class="navbar-toggler" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarExample01"

          aria-controls="navbarExample01" aria-expanded="false" aria-label="Toggle navigation">

          <i class="fas fa-bars"></i>

        </button>

        <div class="collapse navbar-collapse" id="navbarExample01">

          <ul class="navbar-nav me-auto mb-2 mb-lg-0">

            <li class="nav-item active">

              <a class="nav-link" aria-current="page" href="#intro">Home</a>

            </li>

            <li class="nav-item">

              <a class="nav-link" href="https://www.umhlathuze.gov.za/index.php/tourism" rel="nofollow"

                target="_blank">Tourism</a>

            </li>

            <li class="nav-item">

              <a class="nav-link" href="https://www.umhlathuze.gov.za/index.php/about-us/overview" target="_blank">Municipality Overview</a>

            </li>

          </ul>

​

          <ul class="navbar-nav d-flex flex-row">

            <!-- Icons -->

            <li class="nav-item me-3 me-lg-0">

              <a class="nav-link" href="https://www.youtube.com/channel/UCX45Sjp3zIvIeubt6dL3k5g" rel="nofollow"

                target="_blank">

                <i class="fab fa-youtube"></i>

              </a>

            </li>

            <li class="nav-item me-3 me-lg-0">

              <a class="nav-link" href="https://www.facebook.com/officialCityofumhlathuze01/" rel="nofollow" target="_blank">

                <i class="fab fa-facebook-f"></i>

              </a>

            </li>

          </ul>

        </div>

      </div>

    </nav>

    <!-- Navbar -->

​

    <!-- Background image -->

    <div id="intro" class="bg-image shadow-2-strong">

      <div class="mask d-flex align-items-center h-100" style="background-color: rgba(0, 0, 0, 0.8);">

        <div class="container">

          <div class="row justify-content-center">

            <div class="col-xl-5 col-md-8">

              <form class="bg-white  rounded-5 shadow-5-strong p-5">

                <!-- Email input -->

                <div class="form-outline mb-4">

                  <input type="email" id="form1Example1" class="form-control" />

                  <label class="form-label" for="form1Example1">Email address</label>

                </div>

​

                <!-- Password input -->

                <div class="form-outline mb-4">

                  <input type="password" id="form1Example2" class="form-control" />

                  <label class="form-label" for="form1Example2">Password</label>

                </div>

​

                <!-- 2 column grid layout for inline styling -->

                <div class="row mb-4">

                  <div class="col d-flex justify-content-center">

                    <!-- Checkbox -->

                    <div class="form-check">

                      <input class="form-check-input" type="checkbox" value="" id="form1Example3" checked />

                      <label class="form-check-label" for="form1Example3">

                        Remember me

                      </label>

                    </div>

                  </div>

​

                  <div class="col text-center">

                    <!-- Simple link -->

                    <a href="#!">Forgot password?</a>

                  </div>

                </div>

​

                <!-- Submit button -->

                <a href="Form.html">Sign in</a></a> 

              </form>

            </div>

          </div>

        </div>

      </div>

    </div>

    <!-- Background image -->

  </header>

  <!--Main Navigation-->

​

  <!--Footer-->

  <footer class="bg-light text-lg-start">

    <div class="py-4 text-center">

      <a role="button" class="btn btn-primary btn-lg m-2"

        href="http://www.umhlathuze.gov.za" rel="nofollow" target="_blank">

        Back to Home Page

      </a>

      <a role="button" class="btn btn-primary btn-lg m-2" href="https://www.umhlathuze.gov.za/index.php/load-shedding" target="_blank">

        Loadshedding Daily Schedule

      </a>

    </div>

​

    <hr class="m-0" />

​

    <div class="text-center py-4 align-items-center">

      <p>Follow COU on social media</p>

      <a href="https://www.youtube.com/channel/UCX45Sjp3zIvIeubt6dL3k5g" class="btn btn-primary m-1" role="button"

        rel="nofollow" target="_blank">

        <i class="fab fa-youtube"></i>

      </a>

      <a href="https://www.facebook.com/officialCityofumhlathuze01/" class="btn btn-primary m-1" role="button" rel="nofollow"

        target="_blank">

        <i class="fab fa-facebook-f"></i>

      </a>

      <a href="https://twitter.com/umhlathuzem?lang=en" class="btn btn-primary m-1" role="button" rel="nofollow"

        target="_blank">

        <i class="fab fa-twitter"></i>

      </a>

    </div>

​

    <!-- Copyright -->

    <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">

      © 2022 Copyright:

      <a class="text-dark" href="https://mdbootstrap.com/">umhlathuze.gov.za</a>

    </div>

    <!-- Copyright -->

  </footer>

  <!--Footer-->

​

​